@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

package/es/components/popover/popover.js

@@ -0,0 +1,271 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { Arrow } from './arrow';
+import { renderToContainer } from '../../utils/render-to-container';
+import { arrow, computePosition, flip, offset, autoUpdate, hide, shift, limitShift } from '@floating-ui/dom';
+import { Wrapper } from './wrapper';
+import { useShouldRender } from '../../utils/should-render';
+import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
+import { normalizePlacement } from './normalize-placement';
+import { convertPx } from '../../utils/convert-px';
+var classPrefix = "ebscn-popover";
+var defaultProps = {
+  placement: 'top',
+  defaultVisible: false,
+  stopPropagation: ['click'],
+  getContainer: function () {
+    return document.body;
+  },
+  mode: 'light'
+};
+export var Popover = forwardRef(function (p, ref) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var placement = normalizePlacement(props.placement);
+  var _b = usePropsValue({
+      value: props.visible,
+      defaultValue: props.defaultVisible,
+      onChange: props.onVisibleChange
+    }),
+    visible = _b[0],
+    setVisible = _b[1];
+  useImperativeHandle(ref, function () {
+    return {
+      show: function () {
+        return setVisible(true);
+      },
+      hide: function () {
+        return setVisible(false);
+      },
+      visible: visible
+    };
+  }, [visible]);
+  var targetRef = useRef(null);
+  var floatingRef = useRef(null);
+  var arrowRef = useRef(null);
+  var floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(props.mode), (_a = {}, _a["".concat(classPrefix, "-hidden")] = !visible, _a)),
+    ref: floatingRef
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-arrow"),
+    ref: arrowRef
+  }, React.createElement(Arrow, {
+    className: "".concat(classPrefix, "-arrow-icon")
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-inner")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-inner-content")
+  }, props.content)))));
+  var _c = useState(null),
+    targetElement = _c[0],
+    setTargetElement = _c[1];
+  function update() {
+    var _a, _b, _c;
+    return __awaiter(this, void 0, void 0, function () {
+      var target, floating, arrowElement, _d, x, y, realPlacement, middlewareData, side, arrowSide, _e, arrowX, arrowY, arrowRotate;
+      var _f;
+      return __generator(this, function (_g) {
+        switch (_g.label) {
+          case 0:
+            target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
+            floating = floatingRef.current;
+            arrowElement = arrowRef.current;
+            setTargetElement(target);
+            if (!target || !floating || !arrowElement) return [2 /*return*/];
+            return [4 /*yield*/, computePosition(target, floating, {
+              placement: placement,
+              middleware: [offset(convertPx(12)), shift({
+                padding: convertPx(4),
+                crossAxis: false,
+                limiter: limitShift()
+              }), flip(), hide(), arrow({
+                element: arrowElement,
+                padding: convertPx(12)
+              })]
+            })];
+          case 1:
+            _d = _g.sent(), x = _d.x, y = _d.y, realPlacement = _d.placement, middlewareData = _d.middlewareData;
+            Object.assign(floating.style, {
+              left: "".concat(x, "px"),
+              top: "".concat(y, "px")
+            });
+            side = realPlacement.split('-')[0];
+            arrowSide = {
+              top: 'bottom',
+              right: 'left',
+              bottom: 'top',
+              left: 'right'
+            }[side];
+            _e = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {}, arrowX = _e.x, arrowY = _e.y;
+            Object.assign(arrowElement.style, (_f = {
+              left: arrowX != null ? "".concat(arrowX, "px") : '',
+              top: arrowY != null ? "".concat(arrowY, "px") : '',
+              right: '',
+              bottom: ''
+            }, _f[arrowSide] = 'calc(var(--arrow-size) * -1)', _f));
+            arrowRotate = {
+              top: '0deg',
+              bottom: '180deg',
+              left: '270deg',
+              right: '90deg'
+            }[side];
+            arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  useIsomorphicLayoutEffect(function () {
+    update();
+  });
+  useEffect(function () {
+    if (!targetElement) return;
+    if (!props.trigger) return;
+    function handleClick() {
+      setVisible(function (v) {
+        return !v;
+      });
+    }
+    targetElement.addEventListener('click', handleClick);
+    return function () {
+      targetElement.removeEventListener('click', handleClick);
+    };
+  }, [targetElement, props.trigger]);
+  useEffect(function () {
+    var floatingElement = floatingRef.current;
+    if (!targetElement || !floatingElement) return;
+    return autoUpdate(targetElement, floatingElement, update, {
+      elementResize: typeof ResizeObserver !== 'undefined'
+    });
+  }, [targetElement]);
+  useClickAway(function () {
+    if (!props.trigger) return;
+    setVisible(false);
+  }, [function () {
+    var _a;
+    return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
+  }, floatingRef], ['click', 'touchmove']);
+  var shouldRender = useShouldRender(visible, false, props.destroyOnHide);
+  return React.createElement(React.Fragment, null, React.createElement(Wrapper, {
+    ref: targetRef
+  }, props.children), shouldRender && renderToContainer(props.getContainer, floating));
+});

package/es/components/popover/wrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+export declare class Wrapper extends React.Component<{
+    children?: ReactNode;
+}, {}> {
+    element: Element | null;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.ReactNode;
+}

package/es/components/popover/wrapper.js

@@ -0,0 +1,47 @@
+var __extends = this && this.__extends || function () {
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+    };
+    return extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+var Wrapper = /** @class */function (_super) {
+  __extends(Wrapper, _super);
+  function Wrapper() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.element = null;
+    return _this;
+  }
+  Wrapper.prototype.componentDidMount = function () {
+    this.componentDidUpdate();
+  };
+  Wrapper.prototype.componentDidUpdate = function () {
+    // eslint-disable-next-line
+    var node = findDOMNode(this);
+    if (node instanceof Element) {
+      this.element = node;
+    } else {
+      this.element = null;
+    }
+  };
+  Wrapper.prototype.render = function () {
+    return React.Children.only(this.props.children);
+  };
+  return Wrapper;
+}(React.Component);
+export { Wrapper };

package/es/components/popup/popup.css

@@ -12,42 +12,30 @@
   position: absolute;
   z-index: 100;
 }
+.ebscn-popup-body .ebscn-popup-close-icon {
+  left: 16px;
+  top: 22.5px;
+}
 .ebscn-popup-body-position-bottom {
   width: 100%;
   bottom: 0;
   left: 0;
 }
-.ebscn-popup-body-position-bottom .ebscn-popup-close-icon {
-  left: 8px;
-  top: 8px;
-}
 .ebscn-popup-body-position-top {
   width: 100%;
   top: 0;
   left: 0;
 }
-.ebscn-popup-body-position-top .ebscn-popup-close-icon {
-  left: 8px;
-  bottom: 8px;
-}
 .ebscn-popup-body-position-left {
   height: 100%;
   top: 0;
   left: 0;
 }
-.ebscn-popup-body-position-left .ebscn-popup-close-icon {
-  left: 8px;
-  top: 8px;
-}
 .ebscn-popup-body-position-right {
   height: 100%;
   top: 0;
   right: 0;
 }
-.ebscn-popup-body-position-right .ebscn-popup-close-icon {
-  left: 8px;
-  top: 8px;
-}
 .ebscn-popup-close-icon {
   cursor: pointer;
   padding: 4px;

package/es/components/protocol/protocol.js

@@ -1,5 +1,4 @@
-import { Checkbox, Button } from '../..';
-import { Popover } from 'antd-mobile';
+import { Checkbox, Button, Popover } from '../..';
 import React, { useEffect, useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 var defaultProps = {

package/es/components/pull-to-refresh/pull-to-refresh.css

@@ -14,7 +14,7 @@
   align-items: center;
 }
 .ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey {
-  --background-color: #f5f5f5;
+  --background-color: #f5f6fa;
 }
 .ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-complete,
 .ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-canRelease,
@@ -22,6 +22,15 @@
 .ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-refreshing {
   color: #666;
 }
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-dark {
+  --background-color: #111111;
+}
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-dark .ebscn-pull-to-refresh-complete,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-dark .ebscn-pull-to-refresh-canRelease,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-dark .ebscn-pull-to-refresh-pulling,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-dark .ebscn-pull-to-refresh-refreshing {
+  color: white;
+}
 .ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary {
   --background-color: var(--ebscn-color-primary);
 }

package/es/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';
 export type PullToRefreshProps = {
-    color?: 'primary' | 'grey';
+    color?: 'primary' | 'grey' | 'dark';
     onRefresh?: () => Promise<any>;
     pullingText?: ReactNode;
     canReleaseText?: ReactNode;

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -141,28 +141,28 @@ export var PullToRefresh = function (p) {
   var props = mergeProps(defaultProps, {
     refreshingText: React.createElement("div", {
       className: "".concat(classPrefix, "-refreshing")
-    }, React.createElement(Suspense, null, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+    }, React.createElement(Suspense, null, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) !== 'grey' ? React.createElement("img", {
       src: PullLoadingRefreshingWhite
     }) : React.createElement("img", {
       src: PullLoadingRefreshingGrey
     })), React.createElement("p", null, " "))),
     pullingText: React.createElement("div", {
       className: "".concat(classPrefix, "-pulling")
-    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) !== 'grey' ? React.createElement("img", {
       src: PullLoadingWhite
     }) : React.createElement("img", {
       src: PullLoadingGrey
     })), React.createElement("p", null, " ")),
     canReleaseText: React.createElement("div", {
       className: "".concat(classPrefix, "-canRelease")
-    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) !== 'grey' ? React.createElement("img", {
       src: PullLoadingWhite
     }) : React.createElement("img", {
       src: PullLoadingGrey
     })), React.createElement("p", null, "\u677E\u5F00\u5237\u65B0")),
     completeText: React.createElement("div", {
       className: "".concat(classPrefix, "-complete")
-    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) !== 'grey' ? React.createElement("img", {
       src: PullLoadingWhite
     }) : React.createElement("img", {
       src: PullLoadingGrey
@@ -323,7 +323,7 @@ export var PullToRefresh = function (p) {
     className: classPrefix
   }, React.createElement(animated.div, {
     style: springStyles,
-    className: classNames("".concat(classPrefix, "-head"), (_a = {}, _a["".concat(classPrefix, "-head-primary")] = props.color === 'primary', _a["".concat(classPrefix, "-head-grey")] = props.color === 'grey', _a))
+    className: classNames("".concat(classPrefix, "-head"), (_a = {}, _a["".concat(classPrefix, "-head-primary")] = props.color === 'primary', _a["".concat(classPrefix, "-head-grey")] = props.color === 'grey', _a["".concat(classPrefix, "-head-dark")] = props.color === 'dark', _a))
   }, React.createElement("div", {
     className: "".concat(classPrefix, "-head-content"),
     style: {

package/es/components/radio/radio.css

@@ -21,7 +21,9 @@
   border-radius: var(--icon-size);
   border: 1px solid var(--ebscn-color-light);
   box-sizing: border-box;
+  width: 24px;
   width: var(--icon-size);
+  height: 24px;
   height: var(--icon-size);
   color: var(--ebscn-color-text-light-solid);
 }
@@ -37,6 +39,9 @@
 .ebscn-radio.ebscn-radio-block {
   display: flex;
 }
+.ebscn-radio.ebscn-radio-checked.ebscn-radio-icon-right {
+  color: var(--ebscn-color-primary);
+}
 .ebscn-radio.ebscn-radio-checked .ebscn-radio-icon {
   border-color: var(--ebscn-color-primary);
   background-color: var(--ebscn-color-primary);

package/es/components/selector/selector.css

@@ -12,7 +12,7 @@
   ---gap-horizontal: var(--gap-horizontal, var(--gap));
   ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
-  font-size: var(--ebscn-font-size-7);
+  font-size: var(--ebscn-font-size-6);
   line-height: 1.4;
 }
 .ebscn-selector .ebscn-space.ebscn-space {

package/es/components/skeleton/skeleton.css

@@ -2,22 +2,22 @@
   --width: 100%;
   --height: 0;
   --border-radius: 3px;
-  background-color: rgba(190, 190, 190, 0.2);
+  background-color: #f8f9fc;
   border-radius: var(--border-radius);
   width: var(--width);
   height: var(--height);
   display: block;
 }
 .ebscn-skeleton.ebscn-skeleton-animated {
-  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background: linear-gradient(90deg, rgba(248, 249, 245) 25%, rgba(248, 249, 245, 0.3) 37%, rgba(248, 249, 245) 63%);
   background-size: 400% 100%;
   animation: ebscn-skeleton-loading 1.3s ease infinite;
 }
 .ebscn-skeleton.ebscn-skeleton-primary {
-  background-color: rgba(232, 66, 37, 0.2);
+  background-color: rgba(255, 66, 37, 0.2);
 }
 .ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
-  background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
+  background: linear-gradient(90deg, rgba(255, 216, 214) 25%, rgba(255, 216, 214, 0.3) 37%, rgba(255, 216, 214) 63%);
   background-size: 400% 100%;
   animation: ebscn-skeleton-loading 1.3s ease infinite;
 }

package/es/components/squared-grid/squared-grid.css

@@ -12,7 +12,6 @@
 .ebscn-squared-grid-item {
   flex: 0 0 var(--flex-basic);
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: var(--item-flex-direction);
 }
@@ -20,7 +19,7 @@
   width: var(--icon-size);
   height: var(--icon-size);
   font-size: var(--icon-size);
-  margin: 5px;
+  padding: 6px;
 }
 .ebscn-squared-grid-item-label {
   font-size: var(--ebscn-font-size-5);

package/es/components/squared-grid/squared-grid.d.ts

@@ -1,10 +1,11 @@
-import type { FC, ReactNode } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PageIndicatorProps } from '../page-indicator';
 export type SquaredGridProps = {
     maxColumns?: number;
     maxRow?: number;
+    justifyContent?: CSSProperties['justifyContent'];
     children?: ReactNode;
     indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
 } & NativeProps<'--row-gap' | '--icon-size'>;

package/es/components/squared-grid/squared-grid.js

@@ -1,6 +1,6 @@
-import { Swiper } from '../..';
 import classnames from 'classnames';
 import React from 'react';
+import { Swiper } from '../..';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "ebscn-squared-grid";
@@ -31,8 +31,17 @@ export var SquaredGrid = function (p) {
   var children = React.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
   var pageSize = maxColumns * maxRow;
   var overPage = pageSize < children.length;
+  var justifyContent = props.justifyContent;
+  if (!justifyContent) {
+    if (children.length > maxColumns) {
+      justifyContent = 'flex-start';
+    } else {
+      justifyContent = 'space-around';
+    }
+  }
   var style = {
-    '--flex': "".concat(100 / maxColumns, "%")
+    '--flex': "".concat(100 / maxColumns, "%"),
+    justifyContent: justifyContent
   };
   var renderSwiperItems = function () {
     var pages = chunkArray(children, pageSize);