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

package/2x/es/components/swiper/swiper.js

@@ -1,11 +1,11 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import { SwiperItem } from './swiper-item';
 import { devWarning } from '../../utils/dev-log';
 import { useSpring, animated } from '@react-spring/web';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import PageIndicator from '../page-indicator';
 import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
@@ -15,10 +15,18 @@ var defaultProps = {
   allowTouchMove: true,
   autoplay: false,
   autoplayInterval: 3000,
-  loop: true
+  loop: false,
+  direction: 'horizontal',
+  slideSize: 100,
+  trackOffset: 0,
+  stuckAtBoundary: true,
+  rubberband: true
 };
 export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
   var props = mergeProps(defaultProps, p);
+  var isVertical = props.direction === 'vertical';
+  var slideRatio = props.slideSize / 100;
+  var offsetRatio = props.trackOffset / 100;
 
   var _useMemo = useMemo(function () {
     var count = 0;
@@ -41,7 +49,7 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
       validChildren = _useMemo.validChildren,
       count = _useMemo.count;
 
-  if (count === 0) {
+  if (count === 0 || !validChildren) {
     devWarning('Swiper', '`Swiper` needs at least one child.');
     return null;
   }
@@ -49,17 +57,17 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
   return function () {
     var loop = props.loop;
 
-    if (count === 1 && loop) {
-      devWarning('Swiper', '`Swiper` needs at least two children to enable loop.');
+    if (slideRatio * (count - 1) < 1) {
       loop = false;
     }
 
     var trackRef = useRef(null);
 
-    function getWidth() {
+    function getSlidePixels() {
       var track = trackRef.current;
       if (!track) return 0;
-      return track.offsetWidth;
+      var trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
+      return trackPixels * props.slideSize / 100;
     }
 
     var _useState = useState(props.defaultIndex),
@@ -71,72 +79,100 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
         setDragging = _useRefState[1],
         draggingRef = _useRefState[2];
 
+    function boundIndex(current) {
+      var min = 0;
+      var max = count - 1;
+
+      if (props.stuckAtBoundary) {
+        min += offsetRatio / slideRatio;
+        max -= (1 - slideRatio - offsetRatio) / slideRatio;
+      }
+
+      return bound(current, min, max);
+    }
+
     var _useSpring = useSpring(function () {
       return {
-        x: bound(current, 0, count - 1) * 100,
+        position: boundIndex(current) * 100,
         config: {
           tension: 200,
           friction: 30
         },
         onRest: function onRest() {
           if (draggingRef.current) return;
-          var rawX = x.get();
+          var rawX = position.get();
           var totalWidth = 100 * count;
-          var standardX = modulus(rawX, totalWidth);
-          if (standardX === rawX) return;
+          var standardPosition = modulus(rawX, totalWidth);
+          if (standardPosition === rawX) return;
           api.start({
-            x: standardX,
+            position: standardPosition,
             immediate: true
           });
         }
       };
     }, [count]),
-        x = _useSpring[0].x,
+        position = _useSpring[0].position,
         api = _useSpring[1];
 
     var bind = useDrag(function (state) {
-      var width = getWidth();
-      if (!width) return;
-      var _state$movement = state.movement,
-          mx = _state$movement[0];
+      var slidePixels = getSlidePixels();
+      if (!slidePixels) return;
+      var paramIndex = isVertical ? 1 : 0;
+      var offset = state.offset[paramIndex];
+      var direction = state.direction[paramIndex];
+      var velocity = state.velocity[paramIndex];
+      setDragging(true);
 
-      if (state.last) {
-        window.setTimeout(function () {
-          setDragging(false);
-        });
-        var index = Math.round((mx + state.vxvy[0] * 100) / width);
-        swipeTo(index);
-      } else {
-        setDragging(true);
+      if (!state.last) {
         api.start({
-          x: mx * 100 / width,
+          position: offset * 100 / slidePixels,
           immediate: true
         });
+      } else {
+        var minIndex = Math.floor(offset / slidePixels);
+        var maxIndex = minIndex + 1;
+        var index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
+        swipeTo(bound(index, minIndex, maxIndex));
+        window.setTimeout(function () {
+          setDragging(false);
+        });
       }
     }, {
       transform: function transform(_ref) {
         var x = _ref[0],
             y = _ref[1];
-        return [-x, y];
+        return [-x, -y];
       },
-      initial: function initial() {
-        var width = getWidth();
-        return [x.get() / 100 * width, 0];
+      from: function from() {
+        var slidePixels = getSlidePixels();
+        return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
       bounds: function bounds() {
         if (loop) return {};
-        var width = getWidth();
-        return {
-          left: 0,
-          right: (count - 1) * width
+        var slidePixels = getSlidePixels();
+        var lowerBound = boundIndex(0) * slidePixels;
+        var upperBound = boundIndex(count - 1) * slidePixels;
+        return isVertical ? {
+          top: lowerBound,
+          bottom: upperBound
+        } : {
+          left: lowerBound,
+          right: upperBound
         };
       },
-      rubberband: true,
-      axis: 'x',
-      experimental_preventWindowScrollY: true
+      rubberband: props.rubberband,
+      axis: isVertical ? 'y' : 'x',
+      preventScroll: !isVertical,
+      pointer: {
+        touch: true
+      }
     });
 
-    function swipeTo(index) {
+    function swipeTo(index, immediate) {
+      if (immediate === void 0) {
+        immediate = false;
+      }
+
       var _a, _b;
 
       if (loop) {
@@ -144,7 +180,8 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
         setCurrent(i);
         (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, i);
         api.start({
-          x: index * 100
+          position: index * 100,
+          immediate: immediate
         });
       } else {
         var _i = bound(index, 0, count - 1);
@@ -152,17 +189,18 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
         setCurrent(_i);
         (_b = props.onIndexChange) === null || _b === void 0 ? void 0 : _b.call(props, _i);
         api.start({
-          x: _i * 100
+          position: boundIndex(_i) * 100,
+          immediate: immediate
         });
       }
     }
 
     function swipeNext() {
-      swipeTo(Math.round(x.get() / 100) + 1);
+      swipeTo(Math.round(position.get() / 100) + 1);
     }
 
     function swipePrev() {
-      swipeTo(Math.round(x.get() / 100) - 1);
+      swipeTo(Math.round(position.get() / 100) - 1);
     }
 
     useImperativeHandle(ref, function () {
@@ -172,6 +210,13 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
         swipePrev: swipePrev
       };
     });
+    useLayoutEffect(function () {
+      var maxIndex = validChildren.length - 1;
+
+      if (current > maxIndex) {
+        swipeTo(maxIndex, true);
+      }
+    });
     var autoplay = props.autoplay,
         autoplayInterval = props.autoplayInterval;
     useEffect(function () {
@@ -183,43 +228,64 @@ export var Swiper = /*#__PURE__*/forwardRef(staged(function (p, ref) {
         window.clearInterval(interval);
       };
     }, [autoplay, autoplayInterval, dragging]);
+
+    function renderTrackInner() {
+      if (loop) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: 'adm-swiper-track-inner'
+        }, React.Children.map(validChildren, function (child, index) {
+          var _style;
+
+          return /*#__PURE__*/React.createElement(animated.div, {
+            className: 'adm-swiper-slide',
+            style: (_style = {}, _style[isVertical ? 'y' : 'x'] = position.to(function (position) {
+              var finalPosition = -position + index * 100;
+              var totalWidth = count * 100;
+              var flagWidth = totalWidth / 2;
+              finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+              return finalPosition + "%";
+            }), _style[isVertical ? 'top' : 'left'] = "-" + index * 100 + "%", _style)
+          }, child);
+        }));
+      } else {
+        var _style2;
+
+        return /*#__PURE__*/React.createElement(animated.div, {
+          className: 'adm-swiper-track-inner',
+          style: (_style2 = {}, _style2[isVertical ? 'y' : 'x'] = position.to(function (position) {
+            return -position + "%";
+          }), _style2)
+        }, React.Children.map(validChildren, function (child, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: 'adm-swiper-slide'
+          }, child);
+        }));
+      }
+    }
+
+    var style = {
+      '--slide-size': props.slideSize + "%",
+      '--track-offset': props.trackOffset + "%"
+    };
     return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-      className: 'adm-swiper'
+      className: classNames('adm-swiper', "adm-swiper-" + props.direction),
+      style: style
     }, /*#__PURE__*/React.createElement("div", Object.assign({
+      ref: trackRef,
       className: classNames('adm-swiper-track', {
         'adm-swiper-track-allow-touch-move': props.allowTouchMove
       }),
       onClickCapture: function onClickCapture(e) {
         if (draggingRef.current) {
           e.stopPropagation();
-          e.preventDefault();
         }
       }
-    }, props.allowTouchMove ? bind() : {}), /*#__PURE__*/React.createElement("div", {
-      className: 'adm-swiper-track-inner',
-      ref: trackRef
-    }, React.Children.map(validChildren, function (child, index) {
-      return /*#__PURE__*/React.createElement(animated.div, {
-        className: 'adm-swiper-slide',
-        style: {
-          x: x.to(function (x) {
-            var position = -x + index * 100;
-
-            if (loop) {
-              var totalWidth = count * 100;
-              position = modulus(position + 100, totalWidth) - 100;
-            }
-
-            return position + "%";
-          }),
-          left: "-" + index * 100 + "%"
-        }
-      }, child);
-    }))), props.indicator === undefined ? /*#__PURE__*/React.createElement("div", {
+    }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? /*#__PURE__*/React.createElement("div", {
       className: 'adm-swiper-indicator'
     }, /*#__PURE__*/React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
       total: count,
-      current: current
+      current: current,
+      direction: props.direction
     }))) : props.indicator(count, current)));
   };
 }));

package/2x/es/components/switch/switch.d.ts

@@ -5,6 +5,7 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    beforeChange?: (val: boolean) => Promise<void>;
     onChange?: (checked: boolean) => void;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;

package/2x/es/components/switch/switch.js

@@ -1,8 +1,40 @@
+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());
+  });
+};
+
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 import SpinIcon from '../../assets/spin.svg';
 import { withNativeProps } from '../../utils/native-props';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 var classPrefix = "adm-switch";
 var defaultProps = {
@@ -14,31 +46,84 @@ export var Switch = function Switch(p) {
   var props = mergeProps(defaultProps, p);
   var disabled = props.disabled || props.loading || false;
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _useState = useState(false),
+      changing = _useState[0],
+      setChanging = _useState[1];
+
+  var _usePropsValue = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
     onChange: props.onChange
   }),
-      checked = _useNewControllableVa[0],
-      setChecked = _useNewControllableVa[1];
-
-  return withNativeProps(props, /*#__PURE__*/React.createElement("label", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-checked"] = checked, _classNames[classPrefix + "-disabled"] = disabled, _classNames))
-  }, /*#__PURE__*/React.createElement("input", {
-    type: 'checkbox',
-    checked: checked,
-    onChange: function onChange(e) {
-      disabled || setChecked(e.target.checked);
-    },
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement("div", {
+      checked = _usePropsValue[0],
+      setChecked = _usePropsValue[1];
+
+  function onClick() {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var nextChecked;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(disabled || props.loading || changing)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              nextChecked = !checked;
+
+              if (!props.beforeChange) {
+                _context.next = 18;
+                break;
+              }
+
+              setChanging(true);
+              _context.prev = 5;
+              _context.next = 8;
+              return props.beforeChange(nextChecked);
+
+            case 8:
+              setChecked(nextChecked);
+              setChanging(false);
+              _context.next = 16;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](5);
+              setChanging(false);
+              throw _context.t0;
+
+            case 16:
+              _context.next = 19;
+              break;
+
+            case 18:
+              setChecked(nextChecked);
+
+            case 19:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[5, 12]]);
+    }));
+  }
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-checked"] = checked, _classNames[classPrefix + "-disabled"] = disabled || changing, _classNames))
+  }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-checkbox"
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-handle"
-  }, // 禁用状态优先于加载状态
-  props.disabled || props.loading && /*#__PURE__*/React.createElement("img", {
+  }, (props.loading || changing) && /*#__PURE__*/React.createElement("img", {
     src: SpinIcon,
-    className: classPrefix + "-icon"
+    className: classPrefix + "-icon",
+    alt: 'switch-handle'
   })), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-inner"
   }, checked ? props.checkedText : props.uncheckedText))));

package/2x/es/components/tab-bar/tab-bar.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
-  align-items: center;
+  align-items: stretch;
   overflow: hidden;
   min-height: 100px;
 }
@@ -17,6 +17,7 @@
   cursor: pointer;
   display: flex;
   align-items: center;
+  justify-content: center;
   flex-direction: column;
 }
 
@@ -34,4 +35,13 @@
 
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
+}
+
+.adm-tab-bar-icon-badge {
+  --top: 12px;
+}
+
+.adm-tab-bar-title-badge {
+  --right: -4px;
+  --top: -4px;
 }

package/2x/es/components/tab-bar/tab-bar.d.ts

@@ -1,14 +1,15 @@
 import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { BadgeProps } from '../badge';
 export declare type TabBarItemProps = {
-    icon?: ReactNode;
-    title?: string;
-    badge?: ReactNode;
+    icon?: ReactNode | ((active: boolean) => ReactNode);
+    title?: ReactNode;
+    badge?: BadgeProps['content'];
 } & NativeProps;
 export declare const TabBarItem: FC<TabBarItemProps>;
 export declare type TabBarProps = {
-    activeKey?: string;
-    defaultActiveKey?: string;
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
 } & NativeProps;
 export declare const TabBar: FC<TabBarProps>;

package/2x/es/components/tab-bar/tab-bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import Badge from '../badge';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 export var TabBarItem = function TabBarItem() {
   return null;
 };
@@ -23,39 +23,37 @@ export var TabBar = function TabBar(props) {
     items.push(child);
   });
 
-  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];
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: 'adm-tab-bar'
   }, items.map(function (item) {
+    var active = item.key === activeKey;
+
     function renderContent() {
       var iconElement = item.props.icon && /*#__PURE__*/React.createElement("div", {
         className: 'adm-tab-bar-item-icon'
-      }, item.props.icon);
+      }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
       var titleElement = item.props.title && /*#__PURE__*/React.createElement("div", {
         className: 'adm-tab-bar-item-title'
       }, item.props.title);
 
-      if (item.props.badge !== undefined) {
-        if (iconElement) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
-            content: item.props.badge,
-            offset: [0, 6]
-          }, iconElement), titleElement);
-        } else if (titleElement) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
-            content: item.props.badge,
-            offset: [2, -2]
-          }, titleElement));
-        }
-      } else {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, titleElement);
+      if (iconElement) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
+          content: item.props.badge,
+          className: 'adm-tab-bar-icon-badge'
+        }, iconElement), titleElement);
+      } else if (titleElement) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
+          content: item.props.badge,
+          className: 'adm-tab-bar-title-badge'
+        }, titleElement));
       }
 
       return null;
@@ -69,7 +67,7 @@ export var TabBar = function TabBar(props) {
         setActiveKey(key.toString());
       },
       className: classNames('adm-tab-bar-item', {
-        'adm-tab-bar-item-active': item.key === activeKey
+        'adm-tab-bar-item-active': active
       })
     }, renderContent()));
   })));

package/2x/es/components/tabs/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import './tabs.less';
-export type { TabsProps, TabPaneProps } from './tabs';
+export type { TabsProps, TabProps } from './tabs';
 declare const _default: import("react").FC<import("./tabs").TabsProps> & {
-    TabPane: import("react").FC<import("./tabs").TabPaneProps>;
+    Tab: import("react").FC<import("./tabs").TabProps>;
 };
 export default _default;

package/2x/es/components/tabs/index.js

@@ -1,6 +1,6 @@
 import "./tabs.css";
-import { TabPane, Tabs } from './tabs';
+import { Tab, Tabs } from './tabs';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 export default attachPropertiesToComponent(Tabs, {
-  TabPane: TabPane
+  Tab: Tab
 });