@arco-design/mobile-react 2.19.0

package/esm/slider/hooks/useSliderEvents.d.ts

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { LinePosition } from '.';
+declare enum IsTouchingStatus {
+    Idle = 0,
+    Start = 1,
+    Moving = 2
+}
+export declare const useSliderEvents: ({ getLinePosition, lineRef, valueGroup, setValueGroup, setCommonIsTouching, }: {
+    getLinePosition: () => LinePosition;
+    lineRef: RefObject<HTMLDivElement>;
+    valueGroup: number | number[];
+    setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
+    setCommonIsTouching: React.Dispatch<React.SetStateAction<number>>;
+}) => {
+    isTouching: IsTouchingStatus;
+};
+export {};

package/esm/slider/hooks/useSliderEvents.js

@@ -0,0 +1,174 @@
+import { useCallback, useContext, useState, useEffect, useMemo, useRef } from 'react';
+import { SliderContext } from '.';
+var IsTouchingStatus;
+
+(function (IsTouchingStatus) {
+  IsTouchingStatus[IsTouchingStatus["Idle"] = 0] = "Idle";
+  IsTouchingStatus[IsTouchingStatus["Start"] = 1] = "Start";
+  IsTouchingStatus[IsTouchingStatus["Moving"] = 2] = "Moving";
+})(IsTouchingStatus || (IsTouchingStatus = {}));
+
+export var useSliderEvents = function useSliderEvents(_ref) {
+  var getLinePosition = _ref.getLinePosition,
+      lineRef = _ref.lineRef,
+      valueGroup = _ref.valueGroup,
+      setValueGroup = _ref.setValueGroup,
+      setCommonIsTouching = _ref.setCommonIsTouching;
+
+  var _useContext = useContext(SliderContext),
+      disabled = _useContext.disabled,
+      step = _useContext.step,
+      min = _useContext.min,
+      max = _useContext.max,
+      type = _useContext.type,
+      draggableTrackOnly = _useContext.draggableTrackOnly;
+
+  var _useState = useState(IsTouchingStatus.Idle),
+      isTouching = _useState[0],
+      setIsTouching = _useState[1];
+
+  var _useState2 = useState(0),
+      touchStartPosition = _useState2[0],
+      setTouchStartPosition = _useState2[1];
+
+  var linePositionRef = useRef({
+    length: 0,
+    start: 0
+  });
+  var isHorizontal = /^horizontal/g.test(type);
+  var validateValue = useCallback(function (value) {
+    if (value >= min && value <= max) return value;
+    return value <= (min + max) / 2 ? min : max;
+  }, [min, max]); // 通过位置获取值
+  // @en Get value by position
+
+  var getValueFromPosition = useCallback(function (touchPosition) {
+    var _linePositionRef$curr = linePositionRef.current,
+        length = _linePositionRef$curr.length,
+        start = _linePositionRef$curr.start;
+    if (length === 0) return 0;
+    var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
+
+    if (newWidth < 0) {
+      newWidth = 0;
+    } else if (newWidth > length) {
+      newWidth = length;
+    }
+
+    var newRealTimeValue = validateValue(Math.round(newWidth / length * (max - min) / step) * step + min);
+    return newRealTimeValue;
+  }, [isHorizontal, max, min, step]); // 设置不同的值，因为可以点击 line ，需要提前计算具体修改的是哪个值。
+  // @en Set different values. Because line can  be clicked, it needs to calculate which value to modify in advance.
+
+  var setCommonValue = useMemo(function () {
+    var start = getValueFromPosition(touchStartPosition);
+
+    if (!Array.isArray(valueGroup)) {
+      if (isTouching) {
+        setValueGroup(start);
+        setCommonIsTouching(0);
+        setIsTouching(IsTouchingStatus.Moving);
+      }
+
+      return function (realTimeValue) {
+        setValueGroup(realTimeValue);
+      };
+    } else {
+      var index = Math.abs(valueGroup[0] - start) < Math.abs(valueGroup[1] - start) ? 0 : 1;
+
+      var handleValue = function handleValue(realTimeValue) {
+        setValueGroup(function (passValueGroup) {
+          if (typeof passValueGroup === 'number') {
+            return [passValueGroup, realTimeValue];
+          }
+
+          var newValueGroup = [].concat(passValueGroup);
+          newValueGroup[index] = realTimeValue;
+          return newValueGroup;
+        });
+      };
+
+      if (isTouching) {
+        setCommonIsTouching(index);
+        handleValue(start);
+        setIsTouching(IsTouchingStatus.Moving);
+      }
+
+      return handleValue;
+    }
+  }, [touchStartPosition, getValueFromPosition]);
+  useEffect(function () {
+    var _lineRef$current;
+
+    if (disabled) return;
+
+    var handleTouchStart = function handleTouchStart(e) {
+      if (draggableTrackOnly && e.target === lineRef.current) return;
+      linePositionRef.current = getLinePosition();
+      var _e$touches$ = e.touches[0],
+          clientX = _e$touches$.clientX,
+          clientY = _e$touches$.clientY;
+      var touchPosition = isHorizontal ? clientX : clientY;
+      setIsTouching(IsTouchingStatus.Start);
+      setTouchStartPosition(touchPosition);
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.addEventListener('touchstart', handleTouchStart);
+    return function () {
+      var _lineRef$current2;
+
+      !disabled && ((_lineRef$current2 = lineRef.current) == null ? void 0 : _lineRef$current2.removeEventListener('touchstart', handleTouchStart));
+    };
+  }, [disabled, isHorizontal, draggableTrackOnly]);
+  useEffect(function () {
+    var _lineRef$current3;
+
+    if (disabled) return;
+
+    var handleTouchMove = function handleTouchMove(e) {
+      if (isTouching === IsTouchingStatus.Moving) {
+        var _e$touches$2 = e.touches[0],
+            clientX = _e$touches$2.clientX,
+            clientY = _e$touches$2.clientY;
+        var touchPosition = isHorizontal ? clientX : clientY;
+        setCommonValue(getValueFromPosition(touchPosition));
+      }
+
+      e.stopPropagation();
+      e.cancelable && e.preventDefault();
+    };
+
+    (_lineRef$current3 = lineRef.current) == null ? void 0 : _lineRef$current3.addEventListener('touchmove', handleTouchMove);
+    return function () {
+      var _lineRef$current4;
+
+      !disabled && ((_lineRef$current4 = lineRef.current) == null ? void 0 : _lineRef$current4.removeEventListener('touchmove', handleTouchMove));
+    };
+  }, [disabled, isHorizontal, isTouching]);
+  useEffect(function () {
+    var _lineRef$current5, _lineRef$current6;
+
+    if (disabled) return;
+
+    var handleTouchEnd = function handleTouchEnd(e) {
+      setIsTouching(IsTouchingStatus.Idle);
+      setCommonIsTouching(-1);
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    (_lineRef$current5 = lineRef.current) == null ? void 0 : _lineRef$current5.addEventListener('touchend', handleTouchEnd);
+    (_lineRef$current6 = lineRef.current) == null ? void 0 : _lineRef$current6.addEventListener('touchcancel', handleTouchEnd);
+    return function () {
+      var _lineRef$current7, _lineRef$current8;
+
+      !disabled && ((_lineRef$current7 = lineRef.current) == null ? void 0 : _lineRef$current7.removeEventListener('touchend', handleTouchEnd));
+      !disabled && ((_lineRef$current8 = lineRef.current) == null ? void 0 : _lineRef$current8.removeEventListener('touchcancel', handleTouchEnd));
+    };
+  }, [disabled]);
+  return {
+    isTouching: isTouching
+  };
+};

package/esm/slider/hooks/useSliderIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useSliderIcon: ({ valueGroup }: {
+    valueGroup: number | [number, number];
+}) => {
+    renderPrefixLabel: JSX.Element | null;
+    renderSuffixLabel: JSX.Element | null;
+};

package/esm/slider/hooks/useSliderIcon.js

@@ -0,0 +1,53 @@
+import React, { useMemo, useContext } from 'react';
+import { GlobalContext } from '../../context-provider';
+import { SliderContext } from '.';
+export var useSliderIcon = function useSliderIcon(_ref) {
+  var valueGroup = _ref.valueGroup;
+
+  var _useContext = useContext(GlobalContext),
+      _useContext$prefixCls = _useContext.prefixCls,
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+
+  var _useContext2 = useContext(SliderContext),
+      max = _useContext2.max,
+      suffixLabel = _useContext2.suffixLabel,
+      min = _useContext2.min,
+      prefixLabel = _useContext2.prefixLabel;
+
+  var renderPrefixLabel = useMemo(function () {
+    if (!prefixLabel) return null;
+    var inner;
+
+    if (typeof prefixLabel === 'boolean' && prefixLabel) {
+      inner = min;
+    } else if (typeof prefixLabel === 'function') {
+      inner = prefixLabel(valueGroup);
+    } else {
+      inner = prefixLabel;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-slider-label is-prefix"
+    }, inner);
+  }, [min, prefixLabel, valueGroup]);
+  var renderSuffixLabel = useMemo(function () {
+    if (!suffixLabel) return null;
+    var inner;
+
+    if (typeof suffixLabel === 'boolean' && suffixLabel) {
+      inner = max;
+    } else if (typeof suffixLabel === 'function') {
+      inner = suffixLabel(valueGroup);
+    } else {
+      inner = suffixLabel;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-slider-label is-suffix"
+    }, inner);
+  }, [max, suffixLabel, valueGroup]);
+  return {
+    renderPrefixLabel: renderPrefixLabel,
+    renderSuffixLabel: renderSuffixLabel
+  };
+};

package/esm/slider/hooks/useSliderInit.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const useSliderInit: ({ commonIsTouching }: {
+    commonIsTouching: number;
+}) => {
+    valueGroup: number | [number, number];
+    setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
+    firstRender: boolean;
+    runTimeConfig: {
+        activated: boolean;
+        value: number;
+        label: {} | null | undefined;
+    }[];
+    isMultiThumb: boolean;
+};

package/esm/slider/hooks/useSliderInit.js

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useMemo, useContext, useCallback } from 'react';
+import { SliderContext } from '.';
+export var useSliderInit = function useSliderInit(_ref) {
+  var _ref2, _ctx$value;
+
+  var commonIsTouching = _ref.commonIsTouching;
+  var ctx = useContext(SliderContext);
+  var value = ctx.value,
+      min = ctx.min,
+      max = ctx.max,
+      onAfterChange = ctx.onAfterChange,
+      onChange = ctx.onChange,
+      useMarkOnly = ctx.useMarkOnly,
+      marks = ctx.marks,
+      useRange = ctx.useRange;
+  var baseValue = (_ref2 = (_ctx$value = ctx == null ? void 0 : ctx.value) != null ? _ctx$value : ctx == null ? void 0 : ctx.defaultValue) != null ? _ref2 : min;
+
+  var _useState = useState(baseValue),
+      valueGroup = _useState[0],
+      setValueGroup = _useState[1];
+
+  var _useState2 = useState(false),
+      firstRender = _useState2[0],
+      setFirstRender = _useState2[1];
+
+  var _useState3 = useState(false),
+      firstTouch = _useState3[0],
+      setFirstTouch = _useState3[1]; // 基础标签数组
+  // @en Base mark list
+
+
+  var baseConfig = useMemo(function () {
+    if (marks === void 0) return [];
+    var res = [];
+
+    if (typeof marks === 'number') {
+      res = Array((max - min) / marks + 1).fill('').map(function (_, idx) {
+        return idx * marks;
+      });
+    } else if (Array.isArray(marks)) {
+      res = marks;
+    } else {
+      res = Object.keys(marks).map(function (e) {
+        return parseInt(e);
+      });
+    }
+
+    return [].concat(res).filter(function (e) {
+      return e <= max && e >= min;
+    }).sort(function (a, b) {
+      return a > b ? 1 : -1;
+    });
+  }, [marks, max, min]);
+  var validate = useCallback(function (newValue) {
+    if (typeof valueGroup === 'number') return newValue <= valueGroup;
+
+    var _sort = [].concat(valueGroup).sort(function (a, b) {
+      return a > b ? 1 : -1;
+    }),
+        small = _sort[0],
+        large = _sort[1];
+
+    return newValue >= small && newValue <= large;
+  }, [valueGroup]); // 实际 mark 标签
+  // @en Actual mark tags
+
+  var runTimeConfig = useMemo(function () {
+    return baseConfig.map(function (e) {
+      var label = marks && !Array.isArray(marks) && marks[String(e)] && typeof marks !== 'number' ? marks[String(e)] : /*#__PURE__*/React.createElement("p", null, e);
+      return {
+        activated: validate(e),
+        value: e,
+        label: label
+      };
+    });
+  }, [baseConfig, valueGroup, validate, marks]); // 当前值最近的标签值
+  // @en The mark value closest to the current value
+
+  var formatMarksValue = useCallback(function (newValue) {
+    if (!useMarkOnly || marks === void 0) return newValue;
+
+    var format = function format(v) {
+      var idx;
+      baseConfig.forEach(function (e, i) {
+        if (v >= e) {
+          idx = i;
+        }
+      });
+
+      if (idx !== void 0) {
+        var largerIdx = idx + 1;
+
+        if (largerIdx < baseConfig.length && Math.abs(baseConfig[largerIdx] - v) < Math.abs(baseConfig[idx] - v)) {
+          return baseConfig[largerIdx];
+        }
+
+        return baseConfig[idx];
+      }
+
+      return baseConfig[0];
+    };
+
+    if (typeof newValue === 'number') return format(newValue);
+    return newValue.map(function (v) {
+      return format(v);
+    });
+  }, [useMarkOnly, marks, baseConfig]);
+  /**
+   * 标记第一次渲染，方便获取位置
+   * @en Mark the first render for easy location
+   */
+
+  useEffect(function () {
+    if (commonIsTouching) setFirstTouch(true);
+  }, [commonIsTouching]);
+  /**
+   * 是否为 range，多个游标
+   * @en Whether it is range, multiple cursors
+   */
+
+  var isMultiThumb = useMemo(function () {
+    return useRange || Array.isArray(baseValue);
+  }, [useRange, typeof baseValue === 'number']);
+  /**
+   * 为 range 组件初始化数据
+   * @en Initialize data for the range component
+   */
+
+  useEffect(function () {
+    setFirstRender(true);
+    /**
+     * 初始化数据
+     * @en Initialize data
+     */
+
+    var newValue = isMultiThumb && typeof valueGroup === 'number' ? formatMarksValue([valueGroup, valueGroup]) : formatMarksValue(valueGroup);
+    setValueGroup(newValue);
+  }, [isMultiThumb]);
+  /**
+   * 监听数据 value 变化
+   * @en Monitor data value changes
+   */
+
+  useEffect(function () {
+    if (value === void 0 || !firstRender || commonIsTouching !== -1) return;
+    var newValue = isMultiThumb && typeof value === 'number' ? formatMarksValue([value, value]) : formatMarksValue(value);
+    setValueGroup(newValue); // 如果受控需要还原
+    // @en If controlled, it needs to restore
+  }, [firstRender && value, commonIsTouching]);
+  /**
+   * 上报排序后的值
+   * @en report sorted value
+   */
+
+  var formatValueGroup = useMemo(function () {
+    return typeof valueGroup === 'number' ? valueGroup : [].concat(valueGroup).sort(function (a, b) {
+      return a > b ? 1 : -1;
+    });
+  }, [valueGroup]);
+  useEffect(function () {
+    if (!firstTouch) return;
+    if (commonIsTouching > -1) onChange(formatValueGroup);
+  }, [valueGroup]);
+  useEffect(function () {
+    if (!firstTouch) return;
+
+    if (commonIsTouching === -1) {
+      onAfterChange(formatMarksValue(formatValueGroup));
+
+      if (value === void 0) {
+        var newValue = formatMarksValue(valueGroup);
+        setValueGroup(newValue);
+      }
+    }
+  }, [commonIsTouching, formatMarksValue]);
+  return {
+    valueGroup: valueGroup,
+    setValueGroup: setValueGroup,
+    firstRender: firstRender,
+    runTimeConfig: runTimeConfig,
+    isMultiThumb: isMultiThumb
+  };
+};

package/esm/slider/hooks/useSliderStyle.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { LinePosition } from '.';
+export declare const useSliderStyle: ({ getLinePosition, commonIsTouching, valueGroup, }: {
+    commonIsTouching: number;
+    getLinePosition: () => LinePosition;
+    valueGroup: number | [number, number];
+}) => {
+    heightStyle: {
+        [x: string]: string;
+    };
+    transitionClass: string;
+    activeLineStyle: CSSProperties;
+};

package/esm/slider/hooks/useSliderStyle.js

@@ -0,0 +1,54 @@
+import { useContext, useMemo } from 'react';
+import { SliderContext } from '.';
+export var useSliderStyle = function useSliderStyle(_ref) {
+  var getLinePosition = _ref.getLinePosition,
+      commonIsTouching = _ref.commonIsTouching,
+      valueGroup = _ref.valueGroup;
+
+  var _useContext = useContext(SliderContext),
+      size = _useContext.size,
+      useAnimation = _useContext.useAnimation,
+      min = _useContext.min,
+      max = _useContext.max,
+      type = _useContext.type;
+
+  var isHorizontal = /^horizontal/g.test(type);
+  var heightStyle = useMemo(function () {
+    var _ref2;
+
+    if (size === void 0) return {};
+    var sizeCount = typeof size === 'string' ? parseInt(size) : size;
+    return _ref2 = {}, _ref2[isHorizontal ? 'height' : 'width'] = sizeCount + "px", _ref2;
+  }, [size, isHorizontal]);
+  var transitionClass = useMemo(function () {
+    return useAnimation && commonIsTouching === -1 ? 'is-transferable' : '';
+  }, [commonIsTouching, useAnimation]);
+  var activeLineStyle = useMemo(function () {
+    var _ref3;
+
+    var _getLinePosition = getLinePosition(),
+        length = _getLinePosition.length;
+
+    var start = 0;
+
+    if (typeof valueGroup === 'number') {
+      length *= (valueGroup - min) / (max - min);
+    } else {
+      var _sort = [].concat(valueGroup).sort(function (a, b) {
+        return a > b ? 1 : -1;
+      }),
+          smaller = _sort[0],
+          larger = _sort[1];
+
+      start = (smaller - min) / (max - min) * length;
+      length = (larger - min) / (max - min) * length - start;
+    }
+
+    return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
+  }, [valueGroup, getLinePosition, min, max, isHorizontal]);
+  return {
+    heightStyle: heightStyle,
+    transitionClass: transitionClass,
+    activeLineStyle: activeLineStyle
+  };
+};

package/esm/slider/index.d.ts

@@ -0,0 +1,150 @@
+import React, { ReactNode } from 'react';
+export interface SliderProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     * @default ""
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     * @default {}
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否禁用
+     * @en Disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 使用范围选择
+     * @en Use range selection
+     * @default 根据 传入初始参数判断，没有则为 false
+     * @default_en Judging by the incoming initial parameters, false if not
+     */
+    useRange?: boolean;
+    /**
+     * 非点击状态使用动画
+     * @en Use animation for non-click state
+     * @default true
+     */
+    useAnimation?: boolean;
+    /**
+     * 最小值
+     * @en Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大值
+     * @en Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * 默认初始值
+     * @en Default initial value
+     */
+    defaultValue?: number | [number, number];
+    /**
+     * 基础值，组件受控
+     * @en Value, component will be controlled
+     */
+    value?: number | [number, number];
+    /**
+     * 最小单位
+     * @en Step
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 组件方向
+     * @en Component direction
+     * @default "horizontal"
+     */
+    type?: 'horizontal' | 'vertical';
+    /**
+     * 是否展示气泡
+     * @en Whether to show tooltips
+     * @default "auto"
+     */
+    showTooltip?: 'auto' | 'always' | 'never';
+    /**
+     * 滑动条节点配置
+     * @en Slider node configuration
+     */
+    marks?: number | number[] | Record<string, ReactNode>;
+    /**
+     * 是否展示标签底部文案
+     * @en Whether to display the bottom mark text
+     * @default false
+     */
+    showMarks?: boolean;
+    /**
+     * 是否只可用标志的值，覆盖 step
+     * @en Whether only the value of the mark is available, overriding step
+     * @default false
+     */
+    useMarkOnly?: boolean;
+    /**
+     * 前缀 icon 或者 文案
+     * @en prefix icon or label
+     */
+    prefixLabel?: boolean | ((value: number | [number, number]) => ReactNode) | ReactNode;
+    /**
+     * 后缀 icon 或者 文案
+     * @en Suffix icon or label
+     */
+    suffixLabel?: boolean | ((value: number | [number, number]) => ReactNode) | ReactNode;
+    /**
+     * 组件横条粗细，单位 px
+     * @en Slider bar thickness (unit: px)
+     * @default 2
+     */
+    size?: number | string;
+    /**
+     * 只允许拖动滑块 默认 false
+     * @en Only allow dragging of sliders,  the default is false
+     * @default false
+     */
+    draggableTrackOnly?: boolean;
+    /**
+     * 自定义气泡内容
+     * @en Custom tooltip content
+     */
+    formatTooltip?: (value: number) => string | ReactNode;
+    /**
+     * 修改后事件，时机同 touchend
+     * @en Callback after value changes, the timing is the same as touchend
+     */
+    onAfterChange?: (value: number | [number, number]) => void;
+    /**
+     * 实时修改事件
+     * @en Callback when value changes in real time
+     */
+    onChange?: (value: number | [number, number]) => void;
+    /**
+     * 自定义滑块
+     * @en Custom slider
+     */
+    renderThumb?: (value: number) => ReactNode;
+}
+export interface SliderRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 滑动型输入器，展示当前值和可选范围。
+ * @en Slide input component, displays the current value and optional range.
+ * @name 滑动输入条
+ * @name_en Slider
+ * @type 数据输入
+ * @type_en Data Entry
+ */
+declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;
+export default SliderWrapper;