@yqg/easy-ui - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dist/esm/popup/style/var.less

+@import '../../styles/var.less';
+
+@popup-border-radius: 16 * @hd;
+@popup-overlay-background-color: rgba(0, 0, 0, 0.6);
+@popup-wrapper-background-color: @white;
+@popup-title-font-size: 16 * @hd;
+@popup-title-font-weight: 700;
+@popup-title-color: @dark-black;
+@popup-main-color: @dark-black;
+@popup-sub-color: @dark-gray;

dist/esm/popup/index.d.ts

 import React from 'react';
-import { PopupProps } from './PropsType';
+import { PopupInstanceType, PopupProps } from './PropsType';
 import './style/index.less';
-declare const Popup: React.FC<PopupProps>;
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupInstanceType>>;
 export default Popup;

dist/esm/popup/index.js

@@ -0,4 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import Button from "../button";
@@ -18,3 +20,3 @@ import { createNamespace } from "../utils";
   bem = _createNamespace2[0];
-var Popup = function Popup(props) {
+var Popup = /*#__PURE__*/forwardRef(function (props, ref) {
   var visible = props.visible,
@@ -25,8 +27,7 @@ title = props.title,
     className = props.className,
-    _props$heightLevel = props.heightLevel,
-    heightLevel = _props$heightLevel === void 0 ? 'normal' : _props$heightLevel,
+    heightLevel = props.heightLevel,
     _props$showCloseIcon = props.showCloseIcon,
     showCloseIcon = _props$showCloseIcon === void 0 ? true : _props$showCloseIcon,
     buttonText = props.buttonText,
-    onButtonClick = props.onButtonClick,
+    onConfirmClick = props.onConfirmClick,
     buttonClassName = props.buttonClassName,
@@ -36,3 +37,8 @@ mainContent = props.mainContent,
     subContent = props.subContent,
-    subContentClassName = props.subContentClassName;
+    subContentClassName = props.subContentClassName,
+    _props$overlay = props.overlay,
+    overlay = _props$overlay === void 0 ? true : _props$overlay,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'center' : _props$position,
+    style = props.style;
   var _useState = useState(visible),
@@ -42,2 +48,3 @@ _useState2 = _slicedToArray(_useState, 2),
     setActive = _useState2[1];
+  var popupRef = useRef(null);
   useEffect(function () {
@@ -57,5 +64,5 @@ if (visible) {
   }, [visible]);
-  var onClickOverlay = function onClickOverlay() {
+  var onClickOverlay = function onClickOverlay(e) {
     var _props$onClickOverlay;
-    (_props$onClickOverlay = props.onClickOverlay) === null || _props$onClickOverlay === void 0 || _props$onClickOverlay.call(props);
+    (_props$onClickOverlay = props.onClickOverlay) === null || _props$onClickOverlay === void 0 || _props$onClickOverlay.call(props, e);
     if (props.closeOnClickOverlay) {
@@ -65,2 +72,7 @@ onClose();
   };
+  useImperativeHandle(ref, function () {
+    return {
+      popupRef: popupRef
+    };
+  });
   var renderCloseIcon = function renderCloseIcon() {
@@ -70,3 +82,8 @@ if (showCloseIcon) {
         className: clsx(bem('close')),
-        onClick: onClose,
+        onClick: function onClick(e) {
+          var _props$onClickCloseIc;
+          e === null || e === void 0 || e.stopPropagation();
+          props === null || props === void 0 || (_props$onClickCloseIc = props.onClickCloseIcon) === null || _props$onClickCloseIc === void 0 || _props$onClickCloseIc.call(props, e);
+          onClose === null || onClose === void 0 || onClose();
+        },
         src: Close,
@@ -95,3 +112,3 @@ alt: ""
         children: /*#__PURE__*/_jsx(Button, {
-          onClick: onButtonClick,
+          onClick: onConfirmClick,
           className: clsx(bem('footer', ['button']), buttonClassName),
@@ -105,36 +122,54 @@ children: buttonText
   var renderContent = function renderContent() {
-    return /*#__PURE__*/_jsxs("div", {
-      className: clsx(bem('content')),
-      children: [mainContent && /*#__PURE__*/_jsx("div", {
-        className: clsx(bem('main'), mainContentClassName, {
-          'mb-10': subContent
-        }),
-        children: mainContent
-      }), subContent && /*#__PURE__*/_jsx("div", {
-        className: clsx(bem('sub'), subContentClassName),
-        children: subContent
-      })]
-    });
+    if (mainContent || subContent) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: clsx(bem('content')),
+        children: [mainContent && /*#__PURE__*/_jsx("div", {
+          className: clsx(bem('main'), mainContentClassName, {
+            'mb-10': subContent
+          }),
+          children: mainContent
+        }), subContent && /*#__PURE__*/_jsx("div", {
+          className: clsx(bem('sub'), subContentClassName),
+          children: subContent
+        })]
+      });
+    }
+    return null;
   };
+  var renderChildren = function renderChildren() {
+    if (children) {
+      return /*#__PURE__*/_jsx("div", {
+        className: clsx(bem('children')),
+        children: children
+      });
+    }
+    return null;
+  };
+  var getPopupHeight = function getPopupHeight() {
+    if (heightLevel) {
+      return HEIGHT_MAP[heightLevel];
+    }
+    return '';
+  };
   return /*#__PURE__*/_jsxs("div", {
+    ref: popupRef,
     className: clsx(bem('container', {
       hidden: !active
     })),
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [overlay && /*#__PURE__*/_jsx("div", {
       className: clsx(bem('overlay', {
         visible: visible
-      })),
+      }), props.overlayClass),
       onClick: onClickOverlay
     }), /*#__PURE__*/_jsxs("div", {
-      className: clsx(bem('wrapper', {
+      className: clsx(bem('wrapper', _defineProperty({
         visible: visible
-      }), [className]),
-      style: {
-        maxHeight: HEIGHT_MAP[heightLevel],
-        minHeight: HEIGHT_MAP['min']
-      },
-      children: [renderTitle(), renderContent(), children, renderButton(), renderCloseIcon()]
+      }, position, position)), [className]),
+      style: _objectSpread({
+        height: getPopupHeight()
+      }, style),
+      children: [renderTitle(), renderContent(), renderChildren(), renderButton(), renderCloseIcon()]
     })]
   });
-};
+});
 export default Popup;

dist/esm/popup/PropsType.d.ts

@@ -5,3 +5,6 @@ /// <reference types="react" />
     className?: string;
+    overlayClass?: string;
+    style?: React.CSSProperties;
     title?: string;
+    position?: 'bottom' | 'center';
     mainContent?: string;
@@ -17,5 +20,10 @@ mainContentClassName?: string;
     showCloseIcon?: boolean;
+    onClickCloseIcon?: (e: React.MouseEvent) => void;
+    overlay?: boolean;
     onClose: () => void;
-    onButtonClick?: () => void;
-    onClickOverlay?: () => void;
+    onConfirmClick?: () => void;
+    onClickOverlay?: (e: React.MouseEvent) => void;
 }
+export type PopupInstanceType = {
+    popupRef: React.RefObject<HTMLDivElement>;
+};

dist/esm/popup/style/index.less

@@ -1,3 +0,14 @@
-@import '../../styles/var.less';
+@import './var.less';
 
+:root {
+  --easy-popup-border-radius: @popup-border-radius;
+  --easy-popup-overlay-background-color: @popup-overlay-background-color;
+  --easy-popup-wrapper-background-color: @popup-wrapper-background-color;
+  --easy-popup-title-font-size: @popup-title-font-size;
+  --easy-popup-title-font-weight: @popup-title-font-weight;
+  --easy-popup-title-color: @popup-title-color;
+  --easy-popup-main-color: @popup-main-color;
+  --easy-popup-sub-color: @popup-sub-color;
+}
+
 @keyframes overlay-fade-in {
@@ -13,2 +24,12 @@ from {
 
+@keyframes overlay-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes slide-down-enter {
@@ -20,2 +41,42 @@ from {
 
+@keyframes slide-up-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes center-fade-in {
+  from {
+    opacity: 0;
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+}
+
+@keyframes center-fade-out {
+  from {
+    opacity: 1;
+    transform: translate3d(-50%, -50%, 0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
+  }
+}
+
+@keyframes rv-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .@{prefix}-popup {
@@ -35,3 +96,3 @@ &__container {
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--easy-popup-overlay-background-color);
     opacity: 0;
@@ -46,21 +107,58 @@ transition: opacity 0.3s ease-in-out;
 
+  // 遮罩层关闭动画
+  &__overlay:not(&__overlay--visible) {
+    animation: overlay-fade-out 0.3s ease-in-out 1 normal;
+  }
+
   &__wrapper {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: #fff;
-    border-top-left-radius: 16 * @hd;
-    border-top-right-radius: 16 * @hd;
-    transform: translateY(100%);
-    transition: transform 0.3s ease-in-out;
-    padding-bottom: 80 * @hd;
+    background: var(--easy-popup-wrapper-background-color);
+    transition:
+      transform 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
     box-sizing: border-box;
+    max-height: 100%;
 
+    &--bottom {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 45vh;
+      padding-bottom: 80 * @hd;
+      transform: translateY(100%);
+      border-top-left-radius: var(--easy-popup-border-radius);
+      border-top-right-radius: var(--easy-popup-border-radius);
+    }
+
+    &--center {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(1);
+      opacity: 0;
+      border-radius: var(--easy-popup-border-radius);
+    }
+
     &--visible {
-      transform: translateY(0);
-      animation: slide-down-enter 0.3s ease-in-out 1 normal;
+      &.@{prefix}-popup__wrapper--bottom {
+        transform: translateY(0);
+        animation: slide-down-enter 0.3s ease-in-out 1 normal;
+      }
+
+      &.@{prefix}-popup__wrapper--center {
+        opacity: 1;
+        transform: translate3d(-50%, -50%, 0) scale(1);
+        animation: center-fade-in 0.3s ease-in-out 1 normal;
+      }
     }
   }
 
+  &__wrapper--bottom:not(&__wrapper--visible) {
+    animation: slide-down-exit 0.3s ease-in-out 1 normal;
+  }
+
+  &__wrapper--center:not(&__wrapper--visible) {
+    animation: center-fade-out 0.3s ease-in-out 1 normal;
+  }
+
   &__header {
@@ -72,5 +170,3 @@ position: relative;
     font-weight: 700;
-    color: @dark-black;
-    border-top-left-radius: 16 * @hd;
-    border-top-right-radius: 16 * @hd;
+    color: var(--easy-popup-title-color);
     background: linear-gradient(
@@ -82,2 +178,13 @@ 180deg,
     .font-title-medium-bold;
+
+    .@{prefix}-popup__wrapper--bottom & {
+      border-top-left-radius: var(--easy-popup-border-radius);
+      border-top-right-radius: var(--easy-popup-border-radius);
+    }
+
+    .@{prefix}-popup__wrapper--center & {
+      border-top-left-radius: var(--easy-popup-border-radius);
+      border-top-right-radius: var(--easy-popup-border-radius);
+      padding-top: 20 * @hd;
+    }
   }
@@ -104,2 +211,8 @@
     height: 12 * @hd;
+    z-index: 1;
+
+    .@{prefix}-popup__wrapper--center & {
+      top: 12 * @hd;
+      right: 12 * @hd;
+    }
   }
@@ -112,2 +225,7 @@
     padding: 0 15 * @hd;
+
+    .@{prefix}-popup__wrapper--center & {
+      max-height: calc(100% - 140px);
+      flex: 1;
+    }
   }
@@ -120,3 +238,3 @@
     margin: 0;
-    color: @dark-black;
+    color: var(--easy-popup-main-color);
     line-height: normal;
@@ -134,3 +252,3 @@
     margin: 0;
-    color: @dark-gray;
+    color: var(--easy-popup-sub-color);
   }
@@ -137,0 +255,0 @@

dist/esm/styles/var.less

@@ -43,7 +43,2 @@ // 基本单位
 
-// font
-@font-family-helvetica-regular: 'Helvetica', sans-serif;
-@font-family-helvetica-bold: 'Helvetica Bold', sans-serif;
-@font-family-helvetica-lt-black: 'Helvetica LT Black', sans-serif;
-
 // Font
@@ -83,3 +78,2 @@ @font-size-xs: 10 * @hd;
   font-size: 40 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -91,3 +85,2 @@ line-height: 46 * @hd;
   font-size: 26 * @hd;
-  font-family: @font-family-helvetica-lt-black;
   font-weight: bold;
@@ -99,3 +92,2 @@ line-height: 32 * @hd;
   font-size: 24 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -107,3 +99,2 @@ line-height: 30 * @hd;
   font-size: 20 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -115,3 +106,2 @@ line-height: 28 * @hd;
   font-size: 18 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -123,3 +113,2 @@ line-height: 24 * @hd;
   font-size: 16 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -131,3 +120,2 @@ line-height: 20 * @hd;
   font-size: 14 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -139,3 +127,2 @@ line-height: 18 * @hd;
   font-size: 12 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -147,3 +134,2 @@ line-height: 16 * @hd;
   font-size: 16 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -155,3 +141,2 @@ line-height: 20 * @hd;
   font-size: 14 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -163,3 +148,2 @@ line-height: 18 * @hd;
   font-size: 12 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -171,3 +155,2 @@ line-height: 16 * @hd;
   font-size: 10 * @hd;
-  font-family: @font-family-helvetica-bold;
   font-weight: bold;
@@ -179,3 +162,2 @@ line-height: 12 * @hd;
   font-size: 10 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -187,3 +169,2 @@ line-height: 12 * @hd;
   font-size: 14 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -195,3 +176,2 @@ line-height: 18 * @hd;
   font-size: 12 * @hd;
-  font-family: @font-family-helvetica-regular;
   font-weight: normal;
@@ -198,0 +178,0 @@ line-height: 16 * @hd;

package.json

 {
   "name": "@yqg/easy-ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "license": "MIT",
@@ -9,2 +9,11 @@ "main": "dist/esm/index.js",
   ],
+  "scripts": {
+    "build": "max build --target=bundle",
+    "dev": "max dev --target=docs",
+    "docs:build": "max build --target=docs",
+    "generate": "node scripts/generate-component.js",
+    "prepare": "max setup",
+    "test": "pnpm jest",
+    "test:report": "pnpm jest; open ./test-report/index.html"
+  },
   "dependencies": {
@@ -38,11 +47,3 @@ "clsx": "1.2.1"
   },
-  "tag": true,
-  "scripts": {
-    "build": "max build --target=bundle",
-    "dev": "max dev --target=docs",
-    "docs:build": "max build --target=docs",
-    "generate": "node scripts/generate-component.js",
-    "test": "pnpm jest",
-    "test:report": "pnpm jest; open ./test-report/index.html"
-  }
-}
+  "tag": true
+}

No alert changes

Improved metrics

Total package byte prevSize

99179

4.09%

Number of package files

100

1.01%

Lines of code

1996

2.2%

No dependency changes