antd-mobile 5.17.0 → 5.18.0

package/cjs/components/slider/slider.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slider = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ticks = _interopRequireDefault(require("./ticks"));
+
+var _marks = _interopRequireDefault(require("./marks"));
+
+var _thumb = _interopRequireDefault(require("./thumb"));
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _nearest = require("../../utils/nearest");
+
+var _usePropsValue = require("../../utils/use-props-value");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-slider`;
+const defaultProps = {
+  min: 0,
+  max: 100,
+  step: 1,
+  ticks: false,
+  range: false,
+  disabled: false,
+  popover: false
+};
+
+const Slider = p => {
+  var _a;
+
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    min,
+    max,
+    disabled,
+    marks,
+    ticks,
+    step,
+    icon
+  } = props;
+
+  function sortValue(val) {
+    return val.sort((a, b) => a - b);
+  }
+
+  function convertValue(value) {
+    return props.range ? value : [props.min, value];
+  }
+
+  function reverseValue(value) {
+    return props.range ? value : value[1];
+  }
+
+  function onAfterChange(value) {
+    var _a;
+
+    (_a = props.onAfterChange) === null || _a === void 0 ? void 0 : _a.call(props, reverseValue(value));
+  }
+
+  const [rawValue, setRawValue] = (0, _usePropsValue.usePropsValue)({
+    value: props.value,
+    defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : props.range ? [min, min] : min,
+    onChange: props.onChange
+  });
+  const sliderValue = sortValue(convertValue(rawValue));
+
+  function setSliderValue(value) {
+    const next = sortValue(value);
+    const current = sliderValue;
+    if (next[0] === current[0] && next[1] === current[1]) return;
+    setRawValue(reverseValue(next));
+  }
+
+  const trackRef = (0, _react.useRef)(null);
+  const fillSize = `${100 * (sliderValue[1] - sliderValue[0]) / (max - min)}%`;
+  const fillStart = `${100 * (sliderValue[0] - min) / (max - min)}%`; // 计算要显示的点
+
+  const pointList = (0, _react.useMemo)(() => {
+    if (marks) {
+      return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
+    } else {
+      const points = [];
+
+      for (let i = min; i <= max; i += step) {
+        points.push(i);
+      }
+
+      return points;
+    }
+  }, [marks, ticks, step, min, max]);
+
+  function getValueByPosition(position) {
+    const newPosition = position < min ? min : position > max ? max : position;
+    let value = min; // 显示了刻度点，就只能移动到点上
+
+    if (pointList.length) {
+      value = (0, _nearest.nearest)(pointList, newPosition);
+    } else {
+      const lengthPerStep = 100 / ((max - min) / step);
+      const steps = Math.round(newPosition / lengthPerStep);
+      value = steps * lengthPerStep * (max - min) * 0.01 + min;
+    }
+
+    return value;
+  }
+
+  const dragLockRef = (0, _react.useRef)(0);
+
+  const onTrackClick = event => {
+    if (dragLockRef.current > 0) return;
+    event.stopPropagation();
+    if (disabled) return;
+    const track = trackRef.current;
+    if (!track) return;
+    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) {
+      // 移动的滑块采用就近原则
+      if (Math.abs(targetValue - sliderValue[0]) > Math.abs(targetValue - sliderValue[1])) {
+        nextSliderValue = [sliderValue[0], targetValue];
+      } else {
+        nextSliderValue = [targetValue, sliderValue[1]];
+      }
+    } else {
+      nextSliderValue = [props.min, targetValue];
+    }
+
+    setSliderValue(nextSliderValue);
+    onAfterChange(nextSliderValue);
+  };
+
+  const valueBeforeDragRef = (0, _react.useRef)();
+
+  const renderThumb = index => {
+    return _react.default.createElement(_thumb.default, {
+      key: index,
+      value: sliderValue[index],
+      min: min,
+      max: max,
+      disabled: disabled,
+      trackRef: trackRef,
+      icon: icon,
+      popover: props.popover,
+      onDrag: (position, first, last) => {
+        if (first) {
+          dragLockRef.current += 1;
+          valueBeforeDragRef.current = sliderValue;
+        }
+
+        const val = getValueByPosition(position);
+        const valueBeforeDrag = valueBeforeDragRef.current;
+        if (!valueBeforeDrag) return;
+        const next = [...valueBeforeDrag];
+        next[index] = val;
+        setSliderValue(next);
+
+        if (last) {
+          onAfterChange(next);
+          window.setTimeout(() => {
+            dragLockRef.current -= 1;
+          }, 100);
+        }
+      },
+      "aria-label": props['aria-label']
+    });
+  };
+
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-disabled`]: disabled
+    })
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-track-container`,
+    onClick: onTrackClick
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-track`,
+    onClick: onTrackClick,
+    ref: trackRef
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-fill`,
+    style: {
+      width: fillSize,
+      left: fillStart
+    }
+  }), props.ticks && _react.default.createElement(_ticks.default, {
+    points: pointList,
+    min: min,
+    max: max,
+    lowerBound: sliderValue[0],
+    upperBound: sliderValue[1]
+  }), props.range && renderThumb(0), renderThumb(1))), marks && _react.default.createElement(_marks.default, {
+    min: min,
+    max: max,
+    marks: marks,
+    lowerBound: sliderValue[0],
+    upperBound: sliderValue[1]
+  })));
+};
+
+exports.Slider = Slider;

package/cjs/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/cjs/components/slider/thumb-icon.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThumbIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ThumbIcon = props => {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("svg", {
+    viewBox: '0 0 24 24',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, _react.default.createElement("g", {
+    fill: 'currentColor',
+    fillRule: 'evenodd'
+  }, _react.default.createElement("rect", {
+    x: 10,
+    width: 4,
+    height: 24,
+    rx: 2
+  }), _react.default.createElement("rect", {
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }), _react.default.createElement("rect", {
+    x: 20,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 2
+  }))));
+};
+
+exports.ThumbIcon = ThumbIcon;

package/cjs/components/slider/thumb.d.ts

@@ -0,0 +1,14 @@
+import React, { FC, RefObject, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type ThumbProps = {
+    value: number;
+    min: number;
+    max: number;
+    disabled: boolean;
+    onDrag: (value: number, first: boolean, last: boolean) => void;
+    trackRef: RefObject<HTMLDivElement>;
+    icon?: React.ReactNode;
+    popover: boolean | ((value: number) => ReactNode);
+} & NativeProps;
+declare const Thumb: FC<ThumbProps>;
+export default Thumb;

package/cjs/components/slider/thumb.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@use-gesture/react");
+
+var _thumbIcon = require("./thumb-icon");
+
+var _popover = require("../popover/popover");
+
+var _configProvider = require("../config-provider");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classPrefix = `adm-slider`;
+
+const Thumb = props => {
+  const {
+    value,
+    min,
+    max,
+    disabled,
+    onDrag,
+    icon
+  } = props;
+  const prevValue = (0, _react.useRef)(value);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+
+  const currentPosition = () => {
+    return {
+      left: `${(value - min) / (max - min) * 100}%`,
+      right: 'auto'
+    };
+  };
+
+  const [dragging, setDragging] = (0, _react.useState)(false);
+  const bind = (0, _react2.useDrag)(state => {
+    var _a;
+
+    if (disabled) return;
+
+    if (state.first) {
+      prevValue.current = value;
+    }
+
+    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;
+    const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
+    onDrag(prevValue.current + diff, state.first, state.last);
+    setDragging(!state.last);
+  }, {
+    axis: 'x',
+    pointer: {
+      touch: true
+    }
+  });
+  const renderPopoverContent = typeof props.popover === 'function' ? props.popover : props.popover ? value => value.toString() : null;
+
+  const thumbElement = _react.default.createElement("div", {
+    className: `${classPrefix}-thumb`
+  }, icon ? icon : _react.default.createElement(_thumbIcon.ThumbIcon, {
+    className: `${classPrefix}-thumb-icon`
+  }));
+
+  return _react.default.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind(), {
+    role: 'slider',
+    "aria-label": props['aria-label'] || locale.Slider.name,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-disabled": disabled
+  }), renderPopoverContent ? _react.default.createElement(_popover.Popover, {
+    content: renderPopoverContent(value),
+    placement: 'top',
+    visible: dragging,
+    getContainer: null,
+    mode: 'dark'
+  }, thumbElement) : thumbElement);
+};
+
+var _default = Thumb;
+exports.default = _default;

package/cjs/components/slider/ticks.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+declare type TicksProps = {
+    points: number[];
+    max: number;
+    min: number;
+    upperBound: number;
+    lowerBound: number;
+};
+declare const Ticks: FC<TicksProps>;
+export default Ticks;

package/cjs/components/slider/ticks.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-slider`;
+
+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
+    };
+    const pointClassName = (0, _classnames.default)({
+      [`${classPrefix}-tick`]: true,
+      [`${classPrefix}-tick-active`]: isActived
+    });
+    return _react.default.createElement("span", {
+      className: pointClassName,
+      style: style,
+      key: point
+    });
+  });
+  return _react.default.createElement("div", {
+    className: `${classPrefix}-ticks`
+  }, elements);
+};
+
+var _default = Ticks;
+exports.default = _default;

package/cjs/components/space/index.d.ts

@@ -0,0 +1,4 @@
+import './space.less';
+import { Space } from './space';
+export type { SpaceProps } from './space';
+export default Space;

package/cjs/components/space/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./space.css");
+
+var _space2 = require("./space");
+
+var _default = _space2.Space;
+exports.default = _default;

package/cjs/components/space/space.css

@@ -0,0 +1,70 @@
+.adm-space-item {
+  flex: none;
+}
+.adm-space {
+  display: inline-flex;
+  --gap: 8px;
+  --gap-vertical: var(--gap);
+  --gap-horizontal: var(--gap);
+}
+.adm-space-vertical {
+  flex-direction: column;
+}
+.adm-space-vertical > .adm-space-item {
+  margin-bottom: var(--gap-vertical);
+}
+.adm-space-vertical > .adm-space-item:last-child {
+  margin-bottom: 0;
+}
+.adm-space-horizontal {
+  flex-direction: row;
+}
+.adm-space-horizontal > .adm-space-item {
+  margin-right: var(--gap-horizontal);
+}
+.adm-space-horizontal > .adm-space-item:last-child {
+  margin-right: 0;
+}
+.adm-space-horizontal.adm-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: calc(var(--gap-vertical) * -1);
+}
+.adm-space-horizontal.adm-space-wrap > .adm-space-item {
+  padding-bottom: var(--gap-vertical);
+}
+.adm-space.adm-space-block {
+  display: flex;
+}
+.adm-space-align-center {
+  align-items: center;
+}
+.adm-space-align-start {
+  align-items: flex-start;
+}
+.adm-space-align-end {
+  align-items: flex-end;
+}
+.adm-space-align-baseline {
+  align-items: baseline;
+}
+.adm-space-justify-center {
+  justify-content: center;
+}
+.adm-space-justify-start {
+  justify-content: flex-start;
+}
+.adm-space-justify-end {
+  justify-content: flex-end;
+}
+.adm-space-justify-between {
+  justify-content: space-between;
+}
+.adm-space-justify-around {
+  justify-content: space-around;
+}
+.adm-space-justify-evenly {
+  justify-content: space-evenly;
+}
+.adm-space-justify-stretch {
+  justify-content: stretch;
+}

package/cjs/components/space/space.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SpaceProps = {
+    direction?: 'horizontal' | 'vertical';
+    align?: 'start' | 'end' | 'center' | 'baseline';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
+    wrap?: boolean;
+    block?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: React.ReactNode;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Space: FC<SpaceProps>;

package/cjs/components/space/space.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Space = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-space`;
+const defaultProps = {
+  direction: 'horizontal'
+};
+
+const Space = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    direction,
+    onClick
+  } = props;
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(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.default.Children.map(props.children, child => {
+    return child !== null && child !== undefined && _react.default.createElement("div", {
+      className: `${classPrefix}-item`
+    }, child);
+  })));
+};
+
+exports.Space = Space;

package/cjs/components/space/space.patch.css

@@ -0,0 +1,13 @@
+.adm-space-vertical > .adm-space-item {
+  margin-bottom: 8px;
+}
+.adm-space-horizontal > .adm-space-item {
+  margin-right: 8px;
+}
+.adm-space-horizontal.adm-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: -8px;
+}
+.adm-space-horizontal.adm-space-wrap > .adm-space-item {
+  padding-bottom: 8px;
+}

package/cjs/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/cjs/components/spin-loading/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./spin-loading.css");
+
+var _spinLoading2 = require("./spin-loading");
+
+var _default = _spinLoading2.SpinLoading;
+exports.default = _default;

package/cjs/components/spin-loading/spin-loading.css

@@ -0,0 +1,22 @@
+.adm-spin-loading {
+  --color: var(--adm-color-weak);
+  --size: 32px;
+  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/cjs/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>;