antd-mobile 0.0.0-dev-626cbf51f

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

@@ -0,0 +1,52 @@
+"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-mark`;
+
+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;
+    }
+
+    const isActive = point <= upperBound && point >= lowerBound;
+    const markClassName = (0, _classnames.default)({
+      [`${classPrefix}-text`]: true,
+      [`${classPrefix}-text-active`]: isActive
+    });
+    const style = {
+      left: `${(point - min) / range * 100}%`
+    };
+    return _react.default.createElement("span", {
+      className: markClassName,
+      style: style,
+      key: point
+    }, markPoint);
+  });
+  return _react.default.createElement("div", {
+    className: classPrefix
+  }, elements);
+};
+
+var _default = Marks;
+exports.default = _default;

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

@@ -0,0 +1,114 @@
+.adm-slider {
+  --fill-color: var(--adm-color-primary);
+  padding: 8px 24px;
+  list-style: none;
+  user-select: none;
+}
+
+.adm-slider-track-container {
+  padding: 16px 0;
+}
+
+.adm-slider-track {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background-color: #f5f5f5;
+}
+
+.adm-slider-fill {
+  position: absolute;
+  z-index: 1;
+  height: 8px;
+  background-color: var(--fill-color);
+}
+
+.adm-slider-ticks {
+  position: absolute;
+  width: 100%;
+  height: 8px;
+  background: transparent;
+}
+
+.adm-slider-tick {
+  position: absolute;
+  top: 50%;
+  width: 22px;
+  height: 22px;
+  margin-left: -10px;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  transform: translate(0, -50%);
+}
+
+.adm-slider-tick-active {
+  background-color: var(--fill-color);
+}
+
+.adm-slider-thumb {
+  width: 44px;
+  height: 44px;
+  margin: 10px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 44px;
+  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);
+}
+
+.adm-slider-thumb:focus {
+  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%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.adm-slider-mark {
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  font-size: 24px;
+  height: 24px;
+  margin-top: 8px;
+}
+
+.adm-slider-mark-text {
+  position: absolute;
+  display: inline-block;
+  line-height: 32px;
+  color: #999;
+  text-align: center;
+  word-break: keep-all;
+  user-select: none;
+  transform: translateX(-50%);
+}
+
+.adm-slider-disabled {
+  opacity: 0.4;
+}
+
+.adm-slider-disabled .adm-slider-thumb {
+  cursor: not-allowed;
+}
+
+.adm-slider-disabled .adm-slider-mark-text,
+.adm-slider-disabled .adm-slider-tick {
+  cursor: not-allowed;
+  box-shadow: none;
+}

package/2x/cjs/components/slider/slider.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { SliderMarks } from './marks';
+export declare type SliderValue = number | [number, number];
+export declare type SliderProps = {
+    min?: number;
+    max?: number;
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    step?: number;
+    marks?: SliderMarks;
+    ticks?: boolean;
+    disabled?: boolean;
+    range?: boolean;
+    icon?: React.ReactNode;
+    onChange?: (value: SliderValue) => void;
+    onAfterChange?: (value: SliderValue) => void;
+} & NativeProps<'--fill-color'>;
+export declare const Slider: FC<SliderProps>;

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

@@ -0,0 +1,215 @@
+"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
+};
+
+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, {
+      icon: icon,
+      key: index,
+      value: sliderValue[index],
+      min: min,
+      max: max,
+      disabled: disabled,
+      trackRef: trackRef,
+      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);
+        }
+      }
+    });
+  };
+
+  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/2x/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/2x/cjs/components/slider/thumb-icon.js

@@ -0,0 +1,38 @@
+"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 20 20'
+  }, _react.default.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, _react.default.createElement("g", {
+    transform: 'translate(-604.000000, -656.000000)',
+    fill: '#999999'
+  }, _react.default.createElement("g", {
+    transform: 'translate(592.000000, 644.000000)'
+  }, _react.default.createElement("g", {
+    transform: 'translate(12.000000, 12.000000)'
+  }, _react.default.createElement("polygon", {
+    points: '0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778'
+  }), _react.default.createElement("polygon", {
+    points: '17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778'
+  }), _react.default.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'
+  })))))));
+};
+
+exports.ThumbIcon = ThumbIcon;

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

@@ -0,0 +1,12 @@
+import React, { FC, RefObject } from 'react';
+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;
+};
+declare const Thumb: FC<ThumbProps>;
+export default Thumb;

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

@@ -0,0 +1,69 @@
+"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");
+
+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 currentPosition = () => {
+    return {
+      left: `${(value - min) / (max - min) * 100}%`,
+      right: 'auto'
+    };
+  };
+
+  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);
+  }, {
+    axis: 'x',
+    pointer: {
+      touch: true
+    }
+  });
+  return _react.default.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind()), _react.default.createElement("div", {
+    className: `${classPrefix}-thumb`
+  }, icon ? icon : _react.default.createElement(_thumbIcon.ThumbIcon, {
+    className: `${classPrefix}-thumb-icon`
+  })));
+};
+
+var _default = Thumb;
+exports.default = _default;

package/2x/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/2x/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/2x/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/2x/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/2x/cjs/components/space/space.css

@@ -0,0 +1,91 @@
+.adm-space-item {
+  flex: none;
+}
+
+.adm-space {
+  display: inline-flex;
+  --gap: 16px;
+  --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;
+}