antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/es/components/tabs/tabs.css

@@ -1,9 +1,18 @@
+.adm-tabs {
+  --title-font-size: 17px;
+  --content-padding: 12px;
+  position: relative;
+}
+.adm-tabs-header {
+  position: relative;
+  border-bottom: solid 1px var(--adm-border-color);
+}
 .adm-tabs-tab-list {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 1px var(--adm-border-color);
+  position: relative;
   overflow-x: scroll;
   scrollbar-width: none;
 }
@@ -11,31 +20,51 @@
   display: none;
 }
 .adm-tabs-tab-wrapper {
-  flex: auto;
   padding: 0 12px;
 }
+.adm-tabs-tab-wrapper-stretch {
+  flex: auto;
+}
 .adm-tabs-tab {
   white-space: nowrap;
   padding: 8px 0 10px;
   width: min-content;
   margin: 0 auto;
-  font-size: 17px;
+  font-size: var(--title-font-size);
   position: relative;
   cursor: pointer;
 }
 .adm-tabs-tab-active {
   color: var(--adm-color-primary);
 }
-.adm-tabs-tab-active::after {
-  display: block;
+.adm-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.adm-tabs-tab-line {
   position: absolute;
   bottom: 0;
-  left: 0;
-  width: 100%;
   height: 2px;
+  color: var(--adm-color-primary);
   background: var(--adm-color-primary);
-  content: ' ';
 }
 .adm-tabs-content {
-  padding: 12px;
+  padding: var(--content-padding);
+}
+.adm-tabs-header-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 30px;
+  height: 100%;
+  pointer-events: none;
+}
+.adm-tabs-header-mask-left {
+  left: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.adm-tabs-header-mask-right {
+  right: 0;
+  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
 }

package/es/components/tabs/tabs.d.ts

@@ -1,13 +1,16 @@
 import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TabPaneProps = {
+export declare type TabProps = {
     title: ReactNode;
+    disabled?: boolean;
     forceRender?: boolean;
 } & NativeProps;
-export declare const TabPane: FC<TabPaneProps>;
+export declare const Tab: FC<TabProps>;
 export declare type TabsProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
-    onChange?: (val: string) => void;
-} & NativeProps;
+    activeLineMode?: 'auto' | 'full' | 'fixed';
+    stretch?: boolean;
+    onChange?: (key: string) => void;
+} & NativeProps<'--fixed-active-line-width' | '--title-font-size' | '--content-padding'>;
 export declare const Tabs: FC<TabsProps>;

package/es/components/tabs/tabs.js

@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import classNames from 'classnames';
+import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
+import { bound } from '../../utils/bound';
+import { useUpdateLayoutEffect, useThrottleFn } from 'ahooks';
+import { useMutationEffect } from '../../utils/use-mutation-effect';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-tabs";
-export var TabPane = function TabPane() {
+export var Tab = function Tab() {
   return null;
 };
-export var Tabs = function Tabs(props) {
+var defaultProps = {
+  activeLineMode: 'auto',
+  stretch: true
+};
+export var Tabs = function Tabs(p) {
   var _a;
 
-  var childrenRecord = {};
+  var props = mergeProps(defaultProps, p);
+  var tabListContainerRef = useRef(null);
+  var activeLineRef = useRef(null);
+  var keyToIndexRecord = {};
   var firstActiveKey = null;
   var panes = [];
   React.Children.forEach(props.children, function (child, index) {
@@ -21,31 +34,197 @@ export var Tabs = function Tabs(props) {
       firstActiveKey = key;
     }
 
-    childrenRecord[key] = child.props.children;
-    panes.push(child);
+    var length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
   });
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.activeKey,
     defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
     onChange: props.onChange
   }),
-      activeKey = _useNewControllableVa[0],
-      setActiveKey = _useNewControllableVa[1];
+      activeKey = _usePropsValue[0],
+      setActiveKey = _usePropsValue[1];
+
+  var _useSpring = useSpring(function () {
+    return {
+      x: 0,
+      width: 0,
+      config: {
+        tension: 300,
+        clamp: true
+      }
+    };
+  }),
+      _useSpring$ = _useSpring[0],
+      x = _useSpring$.x,
+      width = _useSpring$.width,
+      api = _useSpring[1];
+
+  var _useSpring2 = useSpring(function () {
+    return {
+      scrollLeft: 0,
+      config: {
+        tension: 300,
+        clamp: true
+      }
+    };
+  }),
+      scrollLeft = _useSpring2[0].scrollLeft,
+      scrollApi = _useSpring2[1];
+
+  var _useSpring3 = useSpring(function () {
+    return {
+      leftMaskOpacity: 0,
+      rightMaskOpacity: 0,
+      config: {
+        clamp: true
+      }
+    };
+  }),
+      _useSpring3$ = _useSpring3[0],
+      leftMaskOpacity = _useSpring3$.leftMaskOpacity,
+      rightMaskOpacity = _useSpring3$.rightMaskOpacity,
+      maskApi = _useSpring3[1];
+
+  function animate(immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var activeIndex = keyToIndexRecord[activeKey];
+
+    if (activeIndex === undefined) {
+      api.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;
+    }
+
+    api.start({
+      x: x,
+      width: width,
+      immediate: immediate
+    });
+    var maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    var nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    scrollApi.start({
+      scrollLeft: nextScrollLeft,
+      from: {
+        scrollLeft: containerScrollLeft
+      },
+      immediate: immediate
+    });
+  }
+
+  useLayoutEffect(function () {
+    animate(true);
+  }, []);
+  useUpdateLayoutEffect(function () {
+    animate();
+  }, [activeKey]);
+  useResizeEffect(function () {
+    animate(true);
+  }, tabListContainerRef);
+  useMutationEffect(function () {
+    animate(true);
+  }, tabListContainerRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+
+  var _useThrottleFn = useThrottleFn(function (immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var scrollLeft = container.scrollLeft;
+    var showLeftMask = scrollLeft > 0;
+    var showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    maskApi.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate: immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  }),
+      updateMask = _useThrottleFn.run;
 
+  useLayoutEffect(function () {
+    updateMask(true);
+  }, []);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-tab-list"
-  }, panes.map(function (pane) {
-    var _classNames;
+    className: classPrefix + "-header"
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    className: classNames(classPrefix + "-header-mask", classPrefix + "-header-mask-left"),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), /*#__PURE__*/React.createElement(animated.div, {
+    className: classNames(classPrefix + "-header-mask", classPrefix + "-header-mask-right"),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }), /*#__PURE__*/React.createElement(animated.div, {
+    className: classPrefix + "-tab-list",
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft,
+    onScroll: updateMask
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    ref: activeLineRef,
+    className: classPrefix + "-tab-line",
+    style: {
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      x: x
+    }
+  }), panes.map(function (pane) {
+    var _classNames, _classNames2;
 
     return withNativeProps(pane.props, /*#__PURE__*/React.createElement("div", {
       key: pane.key,
-      className: classPrefix + "-tab-wrapper"
+      className: classNames(classPrefix + "-tab-wrapper", (_classNames = {}, _classNames[classPrefix + "-tab-wrapper-stretch"] = props.stretch, _classNames))
     }, /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         var key = pane.key;
+        if (pane.props.disabled) return;
 
         if (key === undefined || key === null) {
           return;
@@ -53,9 +232,9 @@ export var Tabs = function Tabs(props) {
 
         setActiveKey(key.toString());
       },
-      className: classNames(classPrefix + "-tab", (_classNames = {}, _classNames[classPrefix + "-tab-active"] = pane.key === activeKey, _classNames))
+      className: classNames(classPrefix + "-tab", (_classNames2 = {}, _classNames2[classPrefix + "-tab-active"] = pane.key === activeKey, _classNames2[classPrefix + "-tab-disabled"] = pane.props.disabled, _classNames2))
     }, pane.props.title)));
-  })), panes.map(function (pane) {
+  }))), panes.map(function (pane) {
     if (pane.props.children === undefined) {
       return null;
     }

package/es/components/tag/tag.css

@@ -1,19 +1,17 @@
 .adm-tag {
-  padding: 2px 4px;
-  font-size: 10px;
+  --border-radius: var(--adm-tag-border-radius, 2px);
+  padding: 3px 5px;
+  font-size: 12px;
+  line-height: 1;
   font-weight: normal;
-  background-color: var(--color);
-  color: #ffffff;
+  background: var(--background-color);
+  color: var(--text-color);
   display: inline-block;
   white-space: nowrap;
-  border-radius: 2px;
-  border: 0.5px solid var(--color);
+  border-radius: var(--border-radius);
+  border: 0.5px solid var(--border-color);
   box-sizing: border-box;
 }
 .adm-tag-round {
   border-radius: 100px;
 }
-.adm-tag-outline {
-  background: transparent;
-  color: var(--color);
-}

package/es/components/tag/tag.d.ts

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TagProps = {
-    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | string;
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
     fill?: 'solid' | 'outline';
     round?: boolean;
-} & NativeProps;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+} & NativeProps<'--border-color' | '--background-color' | '--text-color' | '--border-radius'>;
 export declare const Tag: FC<TagProps>;

package/es/components/tag/tag.js

@@ -23,10 +23,13 @@ export var Tag = function Tag(p) {
   var props = mergeProps(defaultProps, p);
   var color = (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color;
   var style = {
-    '--color': color
+    '--border-color': color,
+    '--text-color': props.fill === 'outline' ? color : '#ffffff',
+    '--background-color': props.fill === 'outline' ? 'transparent' : color
   };
   return withNativeProps(props, /*#__PURE__*/React.createElement("span", {
     style: style,
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-round"] = props.round, _classNames[classPrefix + "-outline"] = props.fill === 'outline', _classNames))
+    onClick: props.onClick,
+    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-round"] = props.round, _classNames))
   }, props.children));
 };

package/es/components/text-area/text-area.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
     onChange?: (val: string) => void;
@@ -7,7 +8,7 @@ export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaH
     placeholder?: string;
     rows?: number;
     maxLength?: number;
-    showCount?: boolean;
+    showCount?: boolean | ((length: number, maxLength?: number) => ReactNode);
     autoSize?: boolean | {
         minRows?: number;
         maxRows?: number;
@@ -19,14 +20,14 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "autoComplete" | "readOnly" | "onFocus" | "onBlur"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;
     placeholder?: string | undefined;
     rows?: number | undefined;
     maxLength?: number | undefined;
-    showCount?: boolean | undefined;
+    showCount?: boolean | ((length: number, maxLength?: number | undefined) => ReactNode) | undefined;
     autoSize?: boolean | {
         minRows?: number | undefined;
         maxRows?: number | undefined;

package/es/components/text-area/text-area.js

@@ -13,7 +13,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = 'adm-text-area';
 var defaultProps = {
@@ -35,9 +35,9 @@ export var TextArea = /*#__PURE__*/forwardRef(function (p, ref) {
       showCount = props.showCount,
       textAreaProps = __rest(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var nativeTextAreaRef = useRef(null);
   useImperativeHandle(ref, function () {
@@ -79,6 +79,16 @@ export var TextArea = /*#__PURE__*/forwardRef(function (p, ref) {
 
     textArea.style.height = height + "px";
   }, [value, autoSize]);
+  var count;
+
+  if (typeof showCount === 'function') {
+    count = showCount(value.length, props.maxLength);
+  } else if (showCount) {
+    count = /*#__PURE__*/React.createElement("div", {
+      className: classPrefix + "-count"
+    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix + "-wrapper", className),
     style: style
@@ -102,8 +112,6 @@ export var TextArea = /*#__PURE__*/forwardRef(function (p, ref) {
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     id: props.id
-  })), showCount && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-count"
-  }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength));
+  })), count);
 });
 TextArea.defaultProps = defaultProps;

package/es/components/toast/methods.js

@@ -1,95 +1,77 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { noop } from '../../utils/noop';
+import React, { useEffect, useState } from 'react';
 import { resolveContainer } from '../../utils/get-container';
 import ReactDOM from 'react-dom';
-import { useUpdateEffect } from 'ahooks';
 import { InternalToast } from './toast';
-var toastArray = [];
+import { mergeProps } from '../../utils/with-default-props';
+var containers = [];
+
+function unmount(container) {
+  var unmountResult = ReactDOM.unmountComponentAtNode(container);
+
+  if (unmountResult && container.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+}
+
+var defaultProps = {
+  duration: 2000
+};
 export function show(p) {
-  var props = typeof p === 'string' ? {
+  var props = mergeProps(defaultProps, typeof p === 'string' ? {
     content: p
-  } : p;
+  } : p);
   var timer = 0;
-  var _props$afterClose = props.afterClose,
-      afterClose = _props$afterClose === void 0 ? noop : _props$afterClose,
-      _props$getContainer = props.getContainer,
+  var _props$getContainer = props.getContainer,
       getContainer = _props$getContainer === void 0 ? function () {
     return document.body;
   } : _props$getContainer;
   var container = document.createElement('div');
   var bodyContainer = resolveContainer(getContainer);
   bodyContainer.appendChild(container);
+  clear();
+  containers.push(container);
 
   var TempToast = function TempToast() {
     var _useState = useState(true),
         visible = _useState[0],
         setVisible = _useState[1];
 
-    var _useState2 = useState(Object.assign({
-      duration: 2000
-    }, props)),
-        state = _useState2[0],
-        setState = _useState2[1]; // clearDOM after animation
-
-
-    var _afterClose = function _afterClose() {
-      afterClose();
-      var unmountResult = ReactDOM.unmountComponentAtNode(container);
-
-      if (unmountResult && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    }; // close with animation
-
-
-    var destroy = useCallback(function () {
-      setVisible(false);
-    }, []);
     useEffect(function () {
-      _clear();
+      return function () {
+        var _a;
 
-      toastArray.push(_afterClose);
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      };
     }, []);
     useEffect(function () {
-      if (state.duration !== 0 && 'duration' in state) {
-        timer = window.setTimeout(destroy, state.duration);
+      if (props.duration === 0) {
+        return;
       }
 
+      timer = window.setTimeout(function () {
+        setVisible(false);
+      }, props.duration);
       return function () {
-        if (timer !== 0) {
-          window.clearTimeout(timer);
-        }
-      };
-    }, []); // 当修改 duration 时，重新计时
-
-    useUpdateEffect(function () {
-      if ('duration' in state) {
         window.clearTimeout(timer);
-        timer = window.setTimeout(destroy, state.duration);
-      }
-    }, [state.duration]);
-    return /*#__PURE__*/React.createElement(InternalToast, Object.assign({}, state, {
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(InternalToast, Object.assign({}, props, {
       getContainer: function getContainer() {
         return container;
       },
       visible: visible,
-      afterClose: _afterClose
+      afterClose: function afterClose() {
+        unmount(container);
+      }
     }));
   };
 
   ReactDOM.render( /*#__PURE__*/React.createElement(TempToast, null), container);
-} // 同步的销毁
-
-function _clear() {
-  var fn = toastArray.pop();
-
-  while (fn) {
-    fn();
-    fn = toastArray.pop();
-  }
-} // 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
-
-
+}
 export function clear() {
-  setTimeout(_clear);
+  while (true) {
+    var container = containers.pop();
+    if (!container) break;
+    unmount(container);
+  }
 }

package/es/components/toast/toast.css

@@ -1,5 +1,5 @@
 .adm-toast-mask .adm-toast-wrap {
-  position: relative;
+  position: absolute;
   top: 50%;
   left: 50%;
   width: fit-content;
@@ -8,21 +8,26 @@
   max-height: 70%;
   overflow: auto;
   color: white;
-  text-align: center;
   word-break: break-all;
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   transform: translate(-50%, -50%);
   pointer-events: all;
+  font-size: 15px;
+  line-height: 1.5;
 }
 .adm-toast-mask .adm-toast-wrap-text {
-  padding: 8px 12px;
+  padding: 12px;
 }
 .adm-toast-mask .adm-toast-wrap-icon {
-  padding: 16px;
+  padding: 35px 40px;
 }
 .adm-toast-mask .adm-toast-wrap-icon .adm-toast-icon {
+  text-align: center;
   margin-bottom: 8px;
   font-size: 36px;
   line-height: 1;
 }
+.adm-toast-loading {
+  font-size: 24px;
+}