antd-mobile 5.0.0-rc.9 → 5.2.0

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

@@ -3,34 +3,32 @@ import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { generateIntArray } from '../../utils/generate-int-array';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = 'adm-skeleton';
-export var Skeleton = function Skeleton(props) {
-  var _classNames;
-
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-animated"] = props.animated, _classNames))
+const classPrefix = 'adm-skeleton';
+export const Skeleton = props => {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-animated`]: props.animated
+    })
   }));
 };
-export var SkeletonTitle = function SkeletonTitle(props) {
-  return withNativeProps(props, /*#__PURE__*/React.createElement(Skeleton, {
+export const SkeletonTitle = props => {
+  return withNativeProps(props, React.createElement(Skeleton, {
     animated: props.animated,
-    className: classPrefix + "-title"
+    className: `${classPrefix}-title`
   }));
 };
-var defaultSkeletonParagraphProps = {
+const defaultSkeletonParagraphProps = {
   lineCount: 3
 };
-export var SkeletonParagraph = function SkeletonParagraph(p) {
-  var props = mergeProps(defaultSkeletonParagraphProps, p);
-  var keys = generateIntArray(1, props.lineCount);
-  var node = /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-paragraph"
-  }, keys.map(function (key) {
-    return /*#__PURE__*/React.createElement(Skeleton, {
-      key: key,
-      animated: props.animated,
-      className: classPrefix + "-paragraph-line"
-    });
-  }));
+export const SkeletonParagraph = p => {
+  const props = mergeProps(defaultSkeletonParagraphProps, p);
+  const keys = generateIntArray(1, props.lineCount);
+  const node = React.createElement("div", {
+    className: `${classPrefix}-paragraph`
+  }, keys.map(key => React.createElement(Skeleton, {
+    key: key,
+    animated: props.animated,
+    className: `${classPrefix}-paragraph-line`
+  })));
   return withNativeProps(props, node);
 };

package/2x/es/components/slider/marks.js

@@ -1,40 +1,38 @@
 import React from 'react';
 import classNames from 'classnames';
-var classPrefix = "adm-slider-mark";
+const classPrefix = `adm-slider-mark`;
 
-var Marks = function Marks(_ref) {
-  var marks = _ref.marks,
-      upperBound = _ref.upperBound,
-      lowerBound = _ref.lowerBound,
-      max = _ref.max,
-      min = _ref.min;
-  var marksKeys = Object.keys(marks);
-  var range = max - min;
-  var elements = marksKeys.map(parseFloat).sort(function (a, b) {
-    return a - b;
-  }).filter(function (point) {
-    return point >= min && point <= max;
-  }).map(function (point) {
-    var _classNames;
-
-    var markPoint = marks[point];
+const Marks = ({
+  marks,
+  upperBound,
+  lowerBound,
+  max,
+  min
+}) => {
+  const marksKeys = Object.keys(marks);
+  const range = max - min;
+  const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).filter(point => point >= min && point <= max).map(point => {
+    const markPoint = marks[point];
 
     if (!markPoint && markPoint !== 0) {
       return null;
     }
 
-    var isActive = point <= upperBound && point >= lowerBound;
-    var markClassName = classNames((_classNames = {}, _classNames[classPrefix + "-text"] = true, _classNames[classPrefix + "-text-active"] = isActive, _classNames));
-    var style = {
-      left: (point - min) / range * 100 + "%"
+    const isActive = point <= upperBound && point >= lowerBound;
+    const markClassName = classNames({
+      [`${classPrefix}-text`]: true,
+      [`${classPrefix}-text-active`]: isActive
+    });
+    const style = {
+      left: `${(point - min) / range * 100}%`
     };
-    return /*#__PURE__*/React.createElement("span", {
+    return React.createElement("span", {
       className: markClassName,
       style: style,
       key: point
     }, markPoint);
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return React.createElement("div", {
     className: classPrefix
   }, elements);
 };

package/2x/es/components/slider/slider.css

@@ -18,6 +18,7 @@
 
 .adm-slider-fill {
   position: absolute;
+  z-index: 1;
   height: 8px;
   background-color: var(--fill-color);
 }
@@ -31,12 +32,13 @@
 
 .adm-slider-tick {
   position: absolute;
-  top: -7px;
+  top: 50%;
   width: 22px;
   height: 22px;
   margin-left: -10px;
   background-color: #f5f5f5;
   border-radius: 50%;
+  transform: translate(0, -50%);
 }
 
 .adm-slider-tick-active {
@@ -44,16 +46,11 @@
 }
 
 .adm-slider-thumb {
-  touch-action: none;
-  position: absolute;
   width: 44px;
   height: 44px;
+  margin: 10px;
   border-radius: 50%;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: #fff url('../../assets/slider-thumb.svg') no-repeat center center;
-  background-size: 20px 20px;
+  background: var(--adm-color-white);
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.25);
 }
 
@@ -61,9 +58,18 @@
   outline: none;
 }
 
+.adm-slider-thumb-icon {
+  width: 20px;
+  height: 20px;
+  margin: 12px;
+  user-select: none;
+}
+
 .adm-slider-thumb-container {
+  cursor: grab;
   touch-action: none;
   position: absolute;
+  z-index: 2;
   width: 64px;
   height: 64px;
   border-radius: 50%;

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

@@ -7,8 +7,8 @@ import Thumb from './thumb';
 import { mergeProps } from '../../utils/with-default-props';
 import { nearest } from '../../utils/nearest';
 import { usePropsValue } from '../../utils/use-props-value';
-var classPrefix = "adm-slider";
-var defaultProps = {
+const classPrefix = `adm-slider`;
+const defaultProps = {
   min: 0,
   max: 100,
   step: 1,
@@ -16,23 +16,21 @@ var defaultProps = {
   range: false,
   disabled: false
 };
-export var Slider = function Slider(p) {
-  var _classNames;
-
+export const Slider = p => {
   var _a;
 
-  var props = mergeProps(defaultProps, p);
-  var min = props.min,
-      max = props.max,
-      disabled = props.disabled,
-      marks = props.marks,
-      ticks = props.ticks,
-      step = props.step;
+  const props = mergeProps(defaultProps, p);
+  const {
+    min,
+    max,
+    disabled,
+    marks,
+    ticks,
+    step
+  } = props;
 
   function sortValue(val) {
-    return val.sort(function (a, b) {
-      return a - b;
-    });
+    return val.sort((a, b) => a - b);
   }
 
   function convertValue(value) {
@@ -49,36 +47,31 @@ export var Slider = function Slider(p) {
     (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
   }
 
-  var _usePropsValue = usePropsValue({
+  const [rawValue, setRawValue] = usePropsValue({
     value: props.value,
     defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
     onChange: props.onChange
-  }),
-      rawValue = _usePropsValue[0],
-      setRawValue = _usePropsValue[1];
-
-  var sliderValue = sortValue(convertValue(rawValue));
+  });
+  const sliderValue = sortValue(convertValue(rawValue));
 
   function setSliderValue(value) {
-    var next = sortValue(value);
-    var current = sliderValue;
+    const next = sortValue(value);
+    const current = sliderValue;
     if (next[0] === current[0] && next[1] === current[1]) return;
     setRawValue(reverseValue(next));
   }
 
-  var trackRef = useRef(null);
-  var fillSize = 100 * (sliderValue[1] - sliderValue[0]) / (max - min) + "%";
-  var fillStart = 100 * (sliderValue[0] - min) / (max - min) + "%"; // 计算要显示的点
+  const trackRef = useRef(null);
+  const fillSize = `${100 * (sliderValue[1] - sliderValue[0]) / (max - min)}%`;
+  const fillStart = `${100 * (sliderValue[0] - min) / (max - min)}%`; // 计算要显示的点
 
-  var pointList = useMemo(function () {
+  const pointList = useMemo(() => {
     if (marks) {
-      return Object.keys(marks).map(parseFloat).sort(function (a, b) {
-        return a - b;
-      });
+      return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
     } else {
-      var points = [];
+      const points = [];
 
-      for (var i = min; i <= max; i += step) {
+      for (let i = min; i <= max; i += step) {
         points.push(i);
       }
 
@@ -87,32 +80,32 @@ export var Slider = function Slider(p) {
   }, [marks, ticks, step, min, max]);
 
   function getValueByPosition(position) {
-    var newPosition = position < min ? min : position > max ? max : position;
-    var value = min; // 显示了刻度点，就只能移动到点上
+    const newPosition = position < min ? min : position > max ? max : position;
+    let value = min; // 显示了刻度点，就只能移动到点上
 
     if (pointList.length) {
       value = nearest(pointList, newPosition);
     } else {
-      var lengthPerStep = 100 / ((max - min) / step);
-      var steps = Math.round(newPosition / lengthPerStep);
+      const lengthPerStep = 100 / ((max - min) / step);
+      const steps = Math.round(newPosition / lengthPerStep);
       value = steps * lengthPerStep * (max - min) * 0.01 + min;
     }
 
     return value;
   }
 
-  var dragLockRef = useRef(0);
+  const dragLockRef = useRef(0);
 
-  var onTrackClick = function onTrackClick(event) {
+  const onTrackClick = event => {
     if (dragLockRef.current > 0) return;
     event.stopPropagation();
     if (disabled) return;
-    var track = trackRef.current;
+    const track = trackRef.current;
     if (!track) return;
-    var sliderOffsetLeft = track.getBoundingClientRect().left;
-    var position = (event.clientX - sliderOffsetLeft) / Math.ceil(track.offsetWidth) * (max - min) + min;
-    var targetValue = getValueByPosition(position);
-    var nextSliderValue;
+    const sliderOffsetLeft = track.getBoundingClientRect().left;
+    const position = (event.clientX - sliderOffsetLeft) / Math.ceil(track.offsetWidth) * (max - min) + min;
+    const targetValue = getValueByPosition(position);
+    let nextSliderValue;
 
     if (props.range) {
       // 移动的滑块采用就近原则
@@ -129,32 +122,32 @@ export var Slider = function Slider(p) {
     onAfterChange(nextSliderValue);
   };
 
-  var valueBeforeDragRef = useRef();
+  const valueBeforeDragRef = useRef();
 
-  var renderThumb = function renderThumb(index) {
-    return /*#__PURE__*/React.createElement(Thumb, {
+  const renderThumb = index => {
+    return React.createElement(Thumb, {
       key: index,
       value: sliderValue[index],
       min: min,
       max: max,
       disabled: disabled,
       trackRef: trackRef,
-      onDrag: function onDrag(position, first, last) {
+      onDrag: (position, first, last) => {
         if (first) {
           dragLockRef.current += 1;
           valueBeforeDragRef.current = sliderValue;
         }
 
-        var val = getValueByPosition(position);
-        var valueBeforeDrag = valueBeforeDragRef.current;
+        const val = getValueByPosition(position);
+        const valueBeforeDrag = valueBeforeDragRef.current;
         if (!valueBeforeDrag) return;
-        var next = [].concat(valueBeforeDrag);
+        const next = [...valueBeforeDrag];
         next[index] = val;
         setSliderValue(next);
 
         if (last) {
           onAfterChange(next);
-          window.setTimeout(function () {
+          window.setTimeout(() => {
             dragLockRef.current -= 1;
           }, 100);
         }
@@ -162,28 +155,30 @@ export var Slider = function Slider(p) {
     });
   };
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = disabled, _classNames))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-track-container",
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-disabled`]: disabled
+    })
+  }, React.createElement("div", {
+    className: `${classPrefix}-track-container`,
     onClick: onTrackClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-track",
+  }, React.createElement("div", {
+    className: `${classPrefix}-track`,
     onClick: onTrackClick,
     ref: trackRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-fill",
+  }, React.createElement("div", {
+    className: `${classPrefix}-fill`,
     style: {
       width: fillSize,
       left: fillStart
     }
-  }), props.ticks && /*#__PURE__*/React.createElement(Ticks, {
+  }), props.ticks && React.createElement(Ticks, {
     points: pointList,
     min: min,
     max: max,
     lowerBound: sliderValue[0],
     upperBound: sliderValue[1]
-  }), props.range && renderThumb(0), renderThumb(1))), marks && /*#__PURE__*/React.createElement(Marks, {
+  }), props.range && renderThumb(0), renderThumb(1))), marks && React.createElement(Marks, {
     min: min,
     max: max,
     marks: marks,

package/2x/es/components/slider/thumb-icon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const ThumbIcon: FC<NativeProps>;

package/2x/es/components/slider/thumb-icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const ThumbIcon = props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 20 20'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, React.createElement("g", {
+    transform: 'translate(-604.000000, -656.000000)',
+    fill: '#999999'
+  }, React.createElement("g", {
+    transform: 'translate(592.000000, 644.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(12.000000, 12.000000)'
+  }, React.createElement("polygon", {
+    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
+  }), React.createElement("polygon", {
+    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
+  }), React.createElement("path", {
+    d: 'M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z'
+  })))))));
+};

package/2x/es/components/slider/thumb.js

@@ -1,23 +1,26 @@
 import React, { useRef } from 'react';
 import { useDrag } from '@use-gesture/react';
-var classPrefix = "adm-slider";
+import { ThumbIcon } from './thumb-icon';
+const classPrefix = `adm-slider`;
 
-var Thumb = function Thumb(props) {
-  var value = props.value,
-      min = props.min,
-      max = props.max,
-      disabled = props.disabled,
-      onDrag = props.onDrag;
-  var prevValue = useRef(value);
+const Thumb = props => {
+  const {
+    value,
+    min,
+    max,
+    disabled,
+    onDrag
+  } = props;
+  const prevValue = useRef(value);
 
-  var currentPosition = function currentPosition() {
+  const currentPosition = () => {
     return {
-      left: (value - min) / (max - min) * 100 + "%",
+      left: `${(value - min) / (max - min) * 100}%`,
       right: 'auto'
     };
   };
 
-  var bind = useDrag(function (state) {
+  const bind = useDrag(state => {
     var _a;
 
     if (disabled) return;
@@ -26,10 +29,10 @@ var Thumb = function Thumb(props) {
       prevValue.current = value;
     }
 
-    var x = state.xy[0] - state.initial[0];
-    var sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const x = state.xy[0] - state.initial[0];
+    const sliderOffsetWith = (_a = props.trackRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     if (!sliderOffsetWith) return;
-    var diff = x / Math.ceil(sliderOffsetWith) * (max - min);
+    const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
   }, {
     axis: 'x',
@@ -37,12 +40,14 @@ var Thumb = function Thumb(props) {
       touch: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classPrefix + "-thumb-container",
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
     style: currentPosition()
-  }, bind()), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-thumb"
-  }));
+  }, bind()), React.createElement("div", {
+    className: `${classPrefix}-thumb`
+  }, React.createElement(ThumbIcon, {
+    className: `${classPrefix}-thumb-icon`
+  })));
 };
 
 export default Thumb;

package/2x/es/components/slider/ticks.js

@@ -1,31 +1,33 @@
 import React from 'react';
 import classNames from 'classnames';
-var classPrefix = "adm-slider";
+const classPrefix = `adm-slider`;
 
-var Ticks = function Ticks(_ref) {
-  var points = _ref.points,
-      max = _ref.max,
-      min = _ref.min,
-      upperBound = _ref.upperBound,
-      lowerBound = _ref.lowerBound;
-  var range = max - min;
-  var elements = points.map(function (point) {
-    var _classNames;
-
-    var offset = Math.abs(point - min) / range * 100 + "%";
-    var isActived = point <= upperBound && point >= lowerBound;
-    var style = {
+const Ticks = ({
+  points,
+  max,
+  min,
+  upperBound,
+  lowerBound
+}) => {
+  const range = max - min;
+  const elements = points.map(point => {
+    const offset = `${Math.abs(point - min) / range * 100}%`;
+    const isActived = point <= upperBound && point >= lowerBound;
+    const style = {
       left: offset
     };
-    var pointClassName = classNames((_classNames = {}, _classNames[classPrefix + "-tick"] = true, _classNames[classPrefix + "-tick-active"] = isActived, _classNames));
-    return /*#__PURE__*/React.createElement("span", {
+    const pointClassName = classNames({
+      [`${classPrefix}-tick`]: true,
+      [`${classPrefix}-tick-active`]: isActived
+    });
+    return React.createElement("span", {
       className: pointClassName,
       style: style,
       key: point
     });
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-ticks"
+  return React.createElement("div", {
+    className: `${classPrefix}-ticks`
   }, elements);
 };
 

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

@@ -2,22 +2,28 @@ import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-space";
-var defaultProps = {
+const classPrefix = `adm-space`;
+const defaultProps = {
   direction: 'horizontal'
 };
-export var Space = function Space(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var direction = props.direction,
-      onClick = props.onClick;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-wrap"] = props.wrap, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-" + direction] = true, _classNames[classPrefix + "-align-" + props.align] = !!props.align, _classNames[classPrefix + "-justify-" + props.justify] = !!props.justify, _classNames)),
+export const Space = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    direction,
+    onClick
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-wrap`]: props.wrap,
+      [`${classPrefix}-block`]: props.block,
+      [`${classPrefix}-${direction}`]: true,
+      [`${classPrefix}-align-${props.align}`]: !!props.align,
+      [`${classPrefix}-justify-${props.justify}`]: !!props.justify
+    }),
     onClick: onClick
-  }, React.Children.map(props.children, function (child) {
-    return child !== null && child !== undefined && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-item"
+  }, React.Children.map(props.children, child => {
+    return child !== null && child !== undefined && React.createElement("div", {
+      className: `${classPrefix}-item`
     }, child);
   })));
 };

package/2x/es/components/spin-loading/index.d.ts

@@ -0,0 +1,4 @@
+import './spin-loading.less';
+import { SpinLoading } from './spin-loading';
+export type { SpinLoadingProps } from './spin-loading';
+export default SpinLoading;

package/2x/es/components/spin-loading/index.js

@@ -0,0 +1,3 @@
+import "./spin-loading.css";
+import { SpinLoading } from './spin-loading';
+export default SpinLoading;

package/2x/es/components/spin-loading/spin-loading.css

@@ -0,0 +1,29 @@
+.adm-spin-loading {
+  --color: var(--adm-color-weak);
+  --size: 64px;
+  --pi: 3.14159265;
+  --radius: 15;
+  --circumference: calc(var(--radius) * var(--pi) * 2);
+  width: var(--size);
+  height: var(--size);
+}
+
+.adm-spin-loading-svg {
+  width: 100%;
+  height: 100%;
+  animation: adm-spin-loading-rotate 0.8s infinite linear;
+}
+
+.adm-spin-loading-svg > .adm-spin-loading-fill {
+  stroke: var(--color);
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/2x/es/components/spin-loading/spin-loading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SpinLoadingProps = {
+    color?: 'default' | 'primary' | 'white' | (string & {});
+} & NativeProps<'--color' | '--size'>;
+export declare const SpinLoading: React.NamedExoticComponent<SpinLoadingProps>;