@ebscn/ui 1.0.0 → 1.0.1-beta.0

package/es/components/tabs/tabs.js

@@ -0,0 +1,283 @@
+import React, { isValidElement, useRef } from 'react';
+import classNames from 'classnames';
+import { useSpring, animated } from '@react-spring/web';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { bound } from '../../utils/bound';
+import { useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
+import { useMutationEffect } from '../../utils/use-mutation-effect';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { mergeProps } from '../../utils/with-default-props';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+var classPrefix = "ebscn-tabs";
+export var Tab = function () {
+  return null;
+};
+var defaultProps = {
+  activeMode: 'underline',
+  activeLineMode: 'auto',
+  stretch: true,
+  direction: 'ltr'
+};
+export var Tabs = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var tabListContainerRef = useRef(null);
+  var activeLineRef = useRef(null);
+  var keyToIndexRecord = {};
+  var firstActiveKey = null;
+  var panes = [];
+  var isRTL = props.direction === 'rtl';
+  traverseReactNode(props.children, function (child, index) {
+    if (!isValidElement(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+    var length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
+  });
+  var _b = usePropsValue({
+      value: props.activeKey,
+      defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+      onChange: function (v) {
+        var _a;
+        if (v === null) return;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+      }
+    }),
+    activeKey = _b[0],
+    setActiveKey = _b[1];
+  var _c = useSpring(function () {
+      return {
+        x: 0,
+        width: 0,
+        config: {
+          tension: 300,
+          clamp: true
+        }
+      };
+    }),
+    _d = _c[0],
+    x = _d.x,
+    width = _d.width,
+    inkApi = _c[1];
+  var _e = useSpring(function () {
+      return {
+        scrollLeft: 0,
+        config: {
+          tension: 300,
+          clamp: true
+        }
+      };
+    }),
+    scrollLeft = _e[0].scrollLeft,
+    scrollApi = _e[1];
+  var _f = useSpring(function () {
+      return {
+        leftMaskOpacity: 0,
+        rightMaskOpacity: 0,
+        config: {
+          clamp: true
+        }
+      };
+    }),
+    _g = _f[0],
+    leftMaskOpacity = _g.leftMaskOpacity,
+    rightMaskOpacity = _g.rightMaskOpacity,
+    maskApi = _f[1];
+  function animate(immediate, fromMutation) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    if (fromMutation === void 0) {
+      fromMutation = false;
+    }
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var activeIndex = keyToIndexRecord[activeKey];
+    if (activeIndex === undefined) {
+      inkApi.start({
+        x: 0,
+        width: 0,
+        immediate: true
+      });
+      return;
+    }
+    var activeLine = activeLineRef.current;
+    if (!activeLine) return;
+    var activeTabWrapper = container.children.item(activeIndex + 1);
+    var activeTab = activeTabWrapper.children.item(0);
+    var activeTabLeft = activeTab.offsetLeft;
+    var activeTabWidth = activeTab.offsetWidth;
+    var activeTabWrapperLeft = activeTabWrapper.offsetLeft;
+    var activeTabWrapperWidth = activeTabWrapper.offsetWidth;
+    var containerWidth = container.offsetWidth;
+    var containerScrollWidth = container.scrollWidth;
+    var containerScrollLeft = container.scrollLeft;
+    var activeLineWidth = activeLine.offsetWidth;
+    var x = 0;
+    var width = 0;
+    if (props.activeLineMode === 'auto') {
+      x = activeTabLeft;
+      width = activeTabWidth;
+    } else if (props.activeLineMode === 'full') {
+      x = activeTabWrapperLeft;
+      width = activeTabWrapperWidth;
+    } else {
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
+    if (isRTL) {
+      /**
+       * In RTL mode, x equals the container width minus the x-coordinate of the current tab minus the width of the current tab.
+       * https://github.com/Fog3211/reproduce-codesandbox/blob/f0a3396a114cc00e88a51a67d3be60a746519b30/assets/images/antd_mobile_tabs_rtl_x.jpg?raw=true
+       */
+      var w = ['auto', 'full'].includes(props.activeLineMode) ? width : activeLineWidth;
+      x = -(containerWidth - x - w);
+    }
+    inkApi.start({
+      x: x,
+      width: width,
+      immediate: immediate
+    });
+    var maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    var nextScrollLeft = 0;
+    if (isRTL) {
+      /**
+       * 位移距离等于：activeTab的中心坐标距离容器中心坐标的距离，然后RTL取负数
+       * containerWidth / 2 - (activeTabLeft + (activeTabWidth - activeLineWidth) / 2) - activeLineWidth / 2,
+       */
+      nextScrollLeft = -bound(containerWidth / 2 - activeTabLeft + activeTabWidth / 2 - activeLineWidth, 0, maxScrollDistance);
+    } else {
+      nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, maxScrollDistance);
+    }
+    if (!fromMutation || props.autoScroll !== false) {
+      scrollApi.start({
+        scrollLeft: nextScrollLeft,
+        from: {
+          scrollLeft: containerScrollLeft
+        },
+        immediate: immediate
+      });
+    }
+  }
+  useIsomorphicLayoutEffect(function () {
+    animate(!x.isAnimating);
+  }, []);
+  useIsomorphicUpdateLayoutEffect(function () {
+    animate();
+  }, [activeKey]);
+  useResizeEffect(function () {
+    animate(!x.isAnimating);
+  }, tabListContainerRef);
+  useMutationEffect(function () {
+    animate(!x.isAnimating, true);
+  }, tabListContainerRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  var updateMask = useThrottleFn(function (immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var scrollLeft = container.scrollLeft;
+    var showLeftMask = false;
+    var showRightMask = false;
+    if (isRTL) {
+      /**
+       * RTL模式下，只要滑动过，scrollLeft就再也回不到0（chrome是0.5）
+       * 所以要加round才能终止触发条件
+       * round(443.5) + 375 < 819
+       */
+      showLeftMask = Math.round(-scrollLeft) + container.offsetWidth < container.scrollWidth;
+      showRightMask = scrollLeft < 0;
+    } else {
+      showLeftMask = scrollLeft > 0;
+      showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    }
+    maskApi.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate: immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  }).run;
+  useIsomorphicLayoutEffect(function () {
+    updateMask(true);
+  }, []);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    style: {
+      direction: props.direction
+    }
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, React.createElement(animated.div, {
+    className: classNames("".concat(classPrefix, "-header-mask"), "".concat(classPrefix, "-header-mask-left")),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: classNames("".concat(classPrefix, "-header-mask"), "".concat(classPrefix, "-header-mask-right")),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: "".concat(classPrefix, "-tab-list"),
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft,
+    onScroll: updateMask,
+    role: 'tablist'
+  }, React.createElement(animated.div, {
+    ref: activeLineRef,
+    className: "".concat(classPrefix, "-tab-line"),
+    style: {
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      x: x
+    }
+  }), panes.map(function (pane) {
+    var _a, _b;
+    return withNativeProps(pane.props, React.createElement("div", {
+      key: pane.key,
+      className: classNames("".concat(classPrefix, "-tab-wrapper"), (_a = {}, _a["".concat(classPrefix, "-tab-wrapper-stretch")] = props.stretch, _a))
+    }, React.createElement("div", {
+      onClick: function () {
+        var key = pane.key;
+        if (pane.props.disabled) return;
+        if (key === undefined || key === null) {
+          return;
+        }
+        setActiveKey(key.toString());
+      },
+      className: classNames("".concat(classPrefix, "-tab"), (_b = {}, _b["".concat(classPrefix, "-tab-active")] = pane.key === activeKey, _b["".concat(classPrefix, "-tab-disabled")] = pane.props.disabled, _b)),
+      role: 'tab',
+      "aria-selected": pane.key === activeKey
+    }, pane.props.title)));
+  }))), panes.map(function (pane) {
+    if (pane.props.children === undefined) {
+      return null;
+    }
+    var active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: "".concat(classPrefix, "-content"),
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
+  })));
+};

package/es/components/tabs/tabs.patch.css

@@ -0,0 +1,23 @@
+.ebscn-tabs-header {
+  border-bottom: solid 1px #eeeeee;
+}
+.ebscn-tabs-tab {
+  font-size: 17px;
+}
+.ebscn-tabs-tab-active {
+  color: #1677ff;
+}
+.ebscn-tabs-tab-line {
+  height: 2px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+.ebscn-tabs-content {
+  padding: 12px;
+}
+.ebscn-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.ebscn-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/es/components/tip/index.d.ts

@@ -0,0 +1,4 @@
+import { Tip } from './tip';
+import './tip.less';
+export type { TipProps } from './tip';
+export default Tip;

package/es/components/tip/index.js

@@ -0,0 +1,3 @@
+import { Tip } from './tip';
+import "./tip.css";
+export default Tip;

package/es/components/tip/tip.css

@@ -0,0 +1,22 @@
+.ebscn-tip {
+  --font-size: var(--ebscn-font-size-6);
+  --border-radius: 6px;
+  --padding: 12px 10px;
+  color: var(--tip-color);
+  position: relative;
+  padding: var(--padding);
+  font-size: var(--font-size);
+}
+.ebscn-tip::before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--tip-color);
+  opacity: 0.1;
+  box-sizing: content-box;
+  border-radius: var(--border-radius);
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
+}

package/es/components/tip/tip.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type TipProps = {
+    color?: 'strong' | 'normal' | 'weak' | string;
+    children?: ReactNode;
+} & NativeProps;
+export declare const Tip: FC<TipProps>;

package/es/components/tip/tip.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-tip";
+var defaultProps = {
+  color: 'strong'
+};
+export var Tip = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var colorRecord = {
+    strong: 'var(--ebscn-color-primary,#e84225)',
+    normal: 'var(--ebscn-color-orange, #fc6800)',
+    weak: 'var(--ebscn-color-weak, #999)'
+  };
+  var style = {
+    '--tip-color': (_a = colorRecord[props.color || 'strong']) !== null && _a !== void 0 ? _a : props.color
+  };
+  return withNativeProps(props, React.createElement("div", {
+    style: style,
+    className: classPrefix
+  }, props.children));
+};

package/es/components/toastLoading/toastLoading.css

@@ -15,7 +15,6 @@
 .ebscn-load-gif-img {
   width: 35%;
   height: 42px;
-  background: url(./images/loading.webp) center no-repeat;
   background-size: 100%;
   margin-top: 21px;
 }

package/es/components/toastLoading/toastLoading.js

@@ -1,6 +1,7 @@
+import { mergeProps } from '../../utils/with-default-props';
 import React, { useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '@ebscn/ui/utils/with-default-props';
+import Loading from '../../assets/images/loading.webp';
 var classPrefix = 'ebscn-load';
 var defaultProps = {
   title: '加载中',
@@ -8,7 +9,6 @@ var defaultProps = {
 };
 export function ToastLoading(p) {
   var props = mergeProps(defaultProps, p);
-  console.log(p, 'toast');
   var title = props.title,
     visible = props.visible;
   var _a = useState(visible),
@@ -21,7 +21,12 @@ export function ToastLoading(p) {
     }
   }, React.createElement("div", {
     className: "".concat(classPrefix, "-gif-img")
-  }), React.createElement("p", {
+  }, React.createElement("img", {
+    src: Loading,
+    style: {
+      width: '100%'
+    }
+  })), React.createElement("p", {
     className: "".concat(classPrefix, "-txt")
   }, title)));
 }

package/es/global/global.css

@@ -21,7 +21,7 @@
   --ebscn-color-warning: #ff8f1f;
   --ebscn-color-danger: #ff3141;
   --ebscn-color-yellow: #ff9f18;
-  --ebscn-color-wathet: #e7f1ff;
+  --ebscn-color-wathet: #FDECE9;
   --ebscn-color-text: #333333;
   --ebscn-color-text-secondary: #666666;
   --ebscn-color-weak: #999999;
@@ -287,3 +287,6 @@ div.ebscn-px-tester {
 .ebscn-p-20 {
   padding: 20px;
 }
+.ebscn-ui-icon {
+  vertical-align: -0.15em;
+}

package/es/global/theme-default.css

@@ -21,7 +21,7 @@
   --ebscn-color-warning: #ff8f1f;
   --ebscn-color-danger: #ff3141;
   --ebscn-color-yellow: #ff9f18;
-  --ebscn-color-wathet: #e7f1ff;
+  --ebscn-color-wathet: #FDECE9;
   --ebscn-color-text: #333333;
   --ebscn-color-text-secondary: #666666;
   --ebscn-color-weak: #999999;

package/es/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useFieldNames } from './useFieldNames';
+export type { FieldNamesType } from './useFieldNames';
+export type BaseOptionType = {
+    [key: string]: any;
+};

package/es/hooks/index.js

@@ -0,0 +1 @@
+export { useFieldNames } from './useFieldNames';

package/es/hooks/useFieldNames.d.ts

@@ -0,0 +1,7 @@
+export type FieldNamesType = {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+};
+export declare const useFieldNames: (fieldNames?: FieldNamesType) => string[];

package/es/hooks/useFieldNames.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+export var useFieldNames = function (fieldNames) {
+  if (fieldNames === void 0) {
+    fieldNames = {};
+  }
+  var fields = useMemo(function () {
+    var _a = fieldNames.label,
+      label = _a === void 0 ? 'label' : _a,
+      _b = fieldNames.value,
+      value = _b === void 0 ? 'value' : _b,
+      _c = fieldNames.disabled,
+      disabled = _c === void 0 ? 'disabled' : _c,
+      _d = fieldNames.children,
+      children = _d === void 0 ? 'children' : _d;
+    return [label, value, children, disabled];
+  }, [JSON.stringify(fieldNames)]);
+  return fields;
+};

package/es/index.d.ts

@@ -1,18 +1,37 @@
 import './global';
-export * from './components/icons';
-export { default as Card } from './components/card';
-export { default as NumberKeyboard } from './components/number-keyboard';
 export { default as AlphabetKeyboard } from './components/alphabet-keyboard';
-export { default as StockKeyboard } from './components/stock-keyboard';
-export { default as StockCountKeyboard } from './components/stock-count-keyboard';
-export { default as ToastLoading } from './components/toastLoading';
-export { default as ImageViewer } from './components/imageViewer';
-export { default as MarketTag } from './components/marketTag';
+export { Button, SelectorButton } from './components/button';
+export { default as Card } from './components/card';
 export { default as Checkbox } from './components/checkbox';
+export { default as Divider } from './components/divider';
 export { default as Grid } from './components/grid';
-export { default as Radio } from './components/radio';
-export { default as Protocal } from './components/protocol';
+export { default as Header } from './components/header';
+export * from './components/icons';
+export { default as ImageViewer } from './components/imageViewer';
+export { default as MarketTag } from './components/marketTag';
+export { default as Mask } from './components/mask';
+export { NoticeBar, NoticeBarGraph } from './components/notice-bar';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as PageIndicator } from './components/page-indicator';
 export { default as PdfLink } from './components/pdfLink';
-export { default as Switch } from './components/switch';
+export { default as Picker } from './components/picker';
+export { default as PickerView } from './components/picker-view';
+export { default as Popup } from './components/popup';
+export { default as ProSelector } from './components/pro-selector';
+export { default as Protocal } from './components/protocol';
+export { default as PullToRefresh } from './components/pull-to-refresh';
+export { default as Radio } from './components/radio';
 export { default as Search } from './components/search';
-export { default as Button } from './components/button';
+export { default as Selector } from './components/selector';
+export { default as Skeleton } from './components/skeleton';
+export { default as Space } from './components/space';
+export { default as SquaredGrid } from './components/squared-grid';
+export { default as StockCountKeyboard } from './components/stock-count-keyboard';
+export { default as StockKeyboard } from './components/stock-keyboard';
+export { default as Swiper } from './components/swiper';
+export { default as Switch } from './components/switch';
+export { default as Tabs } from './components/tabs';
+export { default as Tip } from './components/tip';
+export { default as ToastLoading } from './components/toastLoading';
+export { default as DateRangePicker } from './components/date-range-picker';
+export { default as HandRead } from './components/handRead';

package/es/index.js

@@ -1,18 +1,37 @@
 import './global';
-export * from './components/icons';
-export { default as Card } from './components/card';
-export { default as NumberKeyboard } from './components/number-keyboard';
 export { default as AlphabetKeyboard } from './components/alphabet-keyboard';
-export { default as StockKeyboard } from './components/stock-keyboard';
-export { default as StockCountKeyboard } from './components/stock-count-keyboard';
-export { default as ToastLoading } from './components/toastLoading';
-export { default as ImageViewer } from './components/imageViewer';
-export { default as MarketTag } from './components/marketTag';
+export { Button, SelectorButton } from './components/button';
+export { default as Card } from './components/card';
 export { default as Checkbox } from './components/checkbox';
+export { default as Divider } from './components/divider';
 export { default as Grid } from './components/grid';
-export { default as Radio } from './components/radio';
-export { default as Protocal } from './components/protocol';
+export { default as Header } from './components/header';
+export * from './components/icons';
+export { default as ImageViewer } from './components/imageViewer';
+export { default as MarketTag } from './components/marketTag';
+export { default as Mask } from './components/mask';
+export { NoticeBar, NoticeBarGraph } from './components/notice-bar';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as PageIndicator } from './components/page-indicator';
 export { default as PdfLink } from './components/pdfLink';
-export { default as Switch } from './components/switch';
+export { default as Picker } from './components/picker';
+export { default as PickerView } from './components/picker-view';
+export { default as Popup } from './components/popup';
+export { default as ProSelector } from './components/pro-selector';
+export { default as Protocal } from './components/protocol';
+export { default as PullToRefresh } from './components/pull-to-refresh';
+export { default as Radio } from './components/radio';
 export { default as Search } from './components/search';
-export { default as Button } from './components/button';
+export { default as Selector } from './components/selector';
+export { default as Skeleton } from './components/skeleton';
+export { default as Space } from './components/space';
+export { default as SquaredGrid } from './components/squared-grid';
+export { default as StockCountKeyboard } from './components/stock-count-keyboard';
+export { default as StockKeyboard } from './components/stock-keyboard';
+export { default as Swiper } from './components/swiper';
+export { default as Switch } from './components/switch';
+export { default as Tabs } from './components/tabs';
+export { default as Tip } from './components/tip';
+export { default as ToastLoading } from './components/toastLoading';
+export { default as DateRangePicker } from './components/date-range-picker';
+export { default as HandRead } from './components/handRead';

package/es/utils/convert-px.js

@@ -5,11 +5,11 @@ var tenPxTester = null;
 var tester = null;
 if (canUseDom) {
   tenPxTester = document.createElement('div');
-  tenPxTester.className = 'adm-px-tester';
+  tenPxTester.className = 'ebscn-px-tester';
   tenPxTester.style.setProperty('--size', '10');
   document.body.appendChild(tenPxTester);
   tester = document.createElement('div');
-  tester.className = 'adm-px-tester';
+  tester.className = 'ebscn-px-tester';
   document.body.appendChild(tester);
   if (isDev) {
     if (window.getComputedStyle(tester).position !== 'fixed') {

package/es/utils/use-lock-scroll.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { getScrollParent } from './get-scroll-parent';
 import { supportsPassive } from './supports-passive';
 var totalLockCount = 0;
-var BODY_LOCK_CLASS = 'adm-overflow-hidden';
+var BODY_LOCK_CLASS = 'ebscn-overflow-hidden';
 function getScrollableElement(el) {
   var current = el === null || el === void 0 ? void 0 : el.parentElement;
   while (current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebscn/ui",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.0",
   "description": "ebscn react library",
   "module": "./es/index.js",
   "types": "./es/index.d.ts",