@arco-design/mobile-react 2.19.0

package/umd/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;

package/umd/slider/index.js

@@ -0,0 +1,200 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./hooks", "./thumb", "./marks"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./hooks"), require("./thumb"), require("./marks"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.hooks, global.thumb, global.marks);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _hooks, _thumb, _marks) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _thumb = _interopRequireDefault(_thumb);
+  _marks = _interopRequireDefault(_marks);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+  var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        _useContext$prefixCls = _useContext.prefixCls,
+        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+
+    var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
+        className = _useContext2.className,
+        style = _useContext2.style,
+        disabled = _useContext2.disabled,
+        min = _useContext2.min,
+        max = _useContext2.max,
+        type = _useContext2.type,
+        showTooltip = _useContext2.showTooltip,
+        showMarks = _useContext2.showMarks;
+
+    var domRef = (0, _react.useRef)(null);
+    var lineRef = (0, _react.useRef)(null); // 拖动滑块的 index 为当前的 isTouching
+    // @en The index of the slider is the current isTouching
+
+    var _useState = (0, _react.useState)(-1),
+        commonIsTouching = _useState[0],
+        setCommonIsTouching = _useState[1];
+
+    var isHorizontal = /^horizontal/g.test(type);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+
+    var _useSliderInit = (0, _hooks.useSliderInit)({
+      commonIsTouching: commonIsTouching
+    }),
+        firstRender = _useSliderInit.firstRender,
+        valueGroup = _useSliderInit.valueGroup,
+        setValueGroup = _useSliderInit.setValueGroup,
+        runTimeConfig = _useSliderInit.runTimeConfig,
+        isMultiThumb = _useSliderInit.isMultiThumb; // 最长线 div 位置
+
+
+    var getLinePosition = (0, _react.useCallback)(function () {
+      var _lineRef$current$getB, _lineRef$current;
+
+      var _ref = (_lineRef$current$getB = (_lineRef$current = lineRef.current) == null ? void 0 : _lineRef$current.getBoundingClientRect()) != null ? _lineRef$current$getB : {
+        width: 0,
+        left: 0,
+        top: 0,
+        height: 0
+      },
+          width = _ref.width,
+          left = _ref.left,
+          top = _ref.top,
+          height = _ref.height;
+
+      return {
+        length: isHorizontal ? width : height,
+        start: isHorizontal ? left : top
+      };
+    }, [isHorizontal, firstRender]);
+
+    var _useSliderStyle = (0, _hooks.useSliderStyle)({
+      getLinePosition: getLinePosition,
+      commonIsTouching: commonIsTouching,
+      valueGroup: valueGroup
+    }),
+        heightStyle = _useSliderStyle.heightStyle,
+        transitionClass = _useSliderStyle.transitionClass,
+        activeLineStyle = _useSliderStyle.activeLineStyle;
+
+    (0, _hooks.useSliderEvents)({
+      lineRef: lineRef,
+      valueGroup: valueGroup,
+      setValueGroup: setValueGroup,
+      getLinePosition: getLinePosition,
+      setCommonIsTouching: setCommonIsTouching
+    });
+
+    var _useSliderIcon = (0, _hooks.useSliderIcon)({
+      valueGroup: valueGroup
+    }),
+        renderPrefixLabel = _useSliderIcon.renderPrefixLabel,
+        renderSuffixLabel = _useSliderIcon.renderSuffixLabel;
+    /**
+     * 为了减少 dom 元素计算，只改变激活 line 的样式，让对应的 thumb 附着在两边，所以需要实时调整 className
+     * @en In order to reduce the calculation of dom elements, only the style of the active line is changed, so that the corresponding thumb is attached to both sides, so the className needs to be adjusted in real time
+     */
+
+
+    var thumbConfig = (0, _react.useMemo)(function () {
+      if (isMultiThumb) {
+        var classNames = ['is-end', 'is-start'];
+        return Array(2).fill('').map(function (_, index) {
+          var childClassName = classNames[index];
+
+          if (valueGroup[index] > valueGroup[1 - index]) {
+            childClassName = classNames[0];
+          } else if (valueGroup[index] < valueGroup[1 - index]) {
+            childClassName = classNames[1];
+          }
+
+          return {
+            className: childClassName
+          };
+        });
+      }
+
+      return [{
+        className: 'is-end'
+      }];
+      /**
+       * 只有 range 状态才监听 valueGroup
+       * @en Only listen to valueGroup in the range state
+       */
+    }, [isMultiThumb && valueGroup]);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-slider " + className, "is-" + type, {
+        'is-disabled': disabled,
+        'show-tooltip': showTooltip !== 'never' && !disabled,
+        'show-marks': showMarks
+      }),
+      style: style,
+      ref: domRef
+    }, isHorizontal ? renderPrefixLabel : renderSuffixLabel, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-wrapper"
+    }, /*#__PURE__*/_react.default.createElement(_marks.default, {
+      runTimeConfig: runTimeConfig,
+      className: transitionClass
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-line",
+      style: heightStyle,
+      ref: lineRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-line is-activated " + transitionClass,
+      style: (0, _extends2.default)({}, heightStyle, activeLineStyle)
+    }, thumbConfig.map(function (cfg, idx) {
+      return /*#__PURE__*/_react.default.createElement(_thumb.default, (0, _extends2.default)({
+        key: idx
+      }, (0, _extends2.default)({
+        value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
+        min: min,
+        max: max,
+        isTouching: commonIsTouching === idx
+      }, cfg)));
+    })))), isHorizontal ? renderSuffixLabel : renderPrefixLabel);
+  });
+  /**
+   * 滑动型输入器，展示当前值和可选范围。
+   * @en Slide input component, displays the current value and optional range.
+   * @name 滑动输入条
+   * @name_en Slider
+   * @type 数据输入
+   * @type_en Data Entry
+   */
+
+  var SliderWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _useContext3 = (0, _react.useContext)(_contextProvider.GlobalContext),
+        _useContext3$prefixCl = _useContext3.prefixCls,
+        prefixCls = _useContext3$prefixCl === void 0 ? '' : _useContext3$prefixCl;
+
+    var defaultProps = (0, _react.useContext)(_hooks.SliderContext);
+    var newProps = (0, _extends2.default)({}, defaultProps, {
+      renderThumb: (0, _hooks.baseRenderThumb)(prefixCls)
+    }, props);
+    return /*#__PURE__*/_react.default.createElement(_hooks.SliderContext.Provider, {
+      value: newProps
+    }, /*#__PURE__*/_react.default.createElement(Slider, {
+      ref: ref
+    }));
+  });
+  var _default = SliderWrapper;
+  _exports.default = _default;
+});

package/umd/slider/marks.d.ts

@@ -0,0 +1,11 @@
+import React, { CSSProperties, ReactNode } from 'react';
+declare const Marks: ({ runTimeConfig, className, style, }: {
+    runTimeConfig: Array<{
+        value: number;
+        activated: boolean;
+        label: ReactNode;
+    }>;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+}) => JSX.Element;
+export default Marks;

package/umd/slider/marks.js

@@ -0,0 +1,70 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "../context-provider", "./hooks", "@arco-design/mobile-utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("../context-provider"), require("./hooks"), require("@arco-design/mobile-utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.contextProvider, global.hooks, global.mobileUtils);
+    global.marks = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _contextProvider, _hooks, _mobileUtils) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+  var Marks = function Marks(_ref) {
+    var runTimeConfig = _ref.runTimeConfig,
+        _ref$className = _ref.className,
+        className = _ref$className === void 0 ? '' : _ref$className,
+        _ref$style = _ref.style,
+        style = _ref$style === void 0 ? {} : _ref$style;
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        _useContext$prefixCls = _useContext.prefixCls,
+        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+
+    var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
+        type = _useContext2.type,
+        showMarks = _useContext2.showMarks,
+        max = _useContext2.max,
+        min = _useContext2.min;
+
+    var isHorizontal = /^horizontal/g.test(type);
+    var genMarkStyle = (0, _react.useCallback)(function (value) {
+      var _ref2;
+
+      return _ref2 = {}, _ref2[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
+    }, [isHorizontal, min, max]);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-marks"
+    }, runTimeConfig.map(function (_ref3) {
+      var value = _ref3.value,
+          label = _ref3.label,
+          activated = _ref3.activated;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: value,
+        className: (0, _mobileUtils.cls)(prefixCls + "-slider-marks-item", {
+          'is-activated': activated
+        }, className),
+        style: (0, _extends2.default)({}, genMarkStyle(value), style)
+      }, showMarks && /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixCls + "-slider-marks-item-label"
+      }, label));
+    }));
+  };
+
+  var _default = Marks;
+  _exports.default = _default;
+});

package/umd/slider/popover.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const Popover: ({ visible, content, children, }: {
+    visible: boolean;
+    content: ReactNode;
+    children: ReactNode;
+}) => JSX.Element;

package/umd/slider/popover.js

@@ -0,0 +1,53 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "../transition", "../context-provider"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("../transition"), require("../context-provider"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.transition, global.contextProvider);
+    global.popover = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _transition, _contextProvider) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.Popover = void 0;
+  _react = _interopRequireWildcard(_react);
+  _transition = _interopRequireDefault(_transition);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+  var Popover = function Popover(_ref) {
+    var visible = _ref.visible,
+        content = _ref.content,
+        children = _ref.children;
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        _useContext$prefixCls = _useContext.prefixCls,
+        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-popover-wrapper"
+    }, /*#__PURE__*/_react.default.createElement(_transition.default, {
+      in: visible,
+      timeout: 300,
+      type: "fade",
+      mountOnEnter: true
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-popover" + (content ? '' : ' no-content')
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-popover-content"
+    }, content), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-slider-popover-arrow"
+    }))), children);
+  };
+
+  _exports.Popover = Popover;
+});