@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/slider/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import './index.css';

package/esnext/slider/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import './index.css';

package/esnext/slider/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import './index.less';

package/esnext/slider/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import './index.less';

package/esnext/slider/style/index.less

@@ -0,0 +1,366 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-slider {
+    position: relative;
+    display: flex;
+    .use-var(padding, slider-padding);
+
+    &.is-vertical {
+        flex-direction: column;
+    }
+
+    &.is-horizontal.show-marks {
+        .use-var(padding-bottom, slider-has-mark-padding-bottom);
+    }
+
+    &-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        .is-vertical & {
+            flex-direction: column;
+        }
+    }
+
+    &-label {
+        display: flex;
+        align-items: center;
+        .use-var(font-size, slider-label-font-size);
+        .use-var(color, slider-text-color);
+
+        .is-horizontal & {
+            .use-var-with-rtl(margin-right, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            flex-direction: column;
+            .use-var(margin-bottom, slider-label-gutter);
+        }
+    }
+
+    &-wrapper + &-label {
+
+        .is-horizontal & {
+            margin-right: 0;
+            .use-var-with-rtl(margin-left, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            margin-bottom: 0;
+            .use-var(margin-top, slider-label-gutter);
+        }
+    }
+
+    &-line {
+        position: relative;
+        display: flex;
+        flex: 1;
+        .use-var(border-radius, slider-line-border-radius);
+        .use-var(background, slider-line-color);
+
+        &:not(.is-activated)::before {
+            position: absolute;
+            content: "";
+            width: 100%;
+            height: 100%;
+
+            .is-horizontal & {
+                top: -50%;
+                transform: translateY(-50%);
+                .use-var(padding, slider-mask-padding, "", 0);
+            }
+
+            .is-vertical & {
+                left: -50%;
+                transform: translateX(-50%);
+                .use-var(padding, slider-mask-padding, 0);
+            }
+        }
+
+        &.is-activated {
+            position: absolute;
+            .use-var(background, slider-line-activated-color);
+
+            .is-disabled & {
+                .use-var(background, slider-line-disabled-color);
+            }
+        }
+    }
+
+    &-thumb {
+        .use-var(width, slider-thumb-width);
+        .use-var(height, slider-thumb-height);
+        .use-var(background, slider-thumb-background);
+        .use-var(box-shadow, slider-thumb-box-shadow);
+        .use-var(border-radius, slider-thumb-border-radius);
+
+        &-wrapper {
+            position: absolute;
+            display: flex;
+            width: fit-content;
+            height: fit-content;
+            margin: auto;
+            align-items: center;
+
+            .is-vertical & {
+                left: 1PX;
+                right: 0;
+
+                &.is-end {
+                    top: 0;
+                    transform: translate(-50%, -50%);
+                }
+
+                &.is-start {
+                    bottom: 0;
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+
+                &.is-end {
+                    .set-prop-with-rtl(right, 0);
+                    transform: translateX(50%);
+                    .style-with-rtl({
+                        transform: translateX(-50%);
+                    });
+                }
+
+                &.is-start {
+                    .set-prop-with-rtl(left, 0);
+                    transform: translateX(-50%);
+                    .style-with-rtl({
+                        transform: translateX(50%);
+                    });
+                }
+            }
+        }
+    }
+
+    &-popover-wrapper &-thumb {
+        position: relative;
+    }
+
+    &-popover {
+        position: absolute;
+        width: max-content;
+        .use-var(color, popover-content-color);
+        .use-var(font-size, slider-popover-font-size);
+        .use-var(line-height, slider-popover-line-height);
+
+        .is-horizontal & {
+            bottom: 100%;
+            .use-var(margin-bottom, slider-popover-gutter);
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .is-vertical & {
+            left: 100%;
+            .use-var(margin-left, slider-popover-gutter);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &.no-content {
+            display: none;
+        }
+
+        &-wrapper {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &-content {
+            position: relative;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            .use-var(border-radius, popover-inner-border-radius);
+            .use-var(padding, popover-content-padding);
+            z-index: 2;
+            .use-var(background-color, popover-background-color);
+
+            .android & {
+                .use-var(padding, popover-content-android-padding);
+            }
+
+            p {
+                white-space: normal;
+                word-break: break-all;
+                text-align: left;
+                .use-var(font-size, popover-content-font-size);
+                .use-var(line-height, popover-content-line-height);
+            }
+        }
+
+        &-arrow {
+            position: absolute;
+            margin: auto;
+            width: 0;
+            height: 0;
+            .use-var(border-width, slider-popover-arrow-size);
+            border-style: solid;
+            border-color: transparent;
+
+            .is-horizontal & {
+                transform: translateY(100%);
+                bottom: 0;
+                left: 0;
+                right: 0;
+                .use-var(border-top-color, popover-background-color);
+            }
+
+            .is-vertical & {
+                .use-var(border-right-color, popover-background-color);
+                transform: translateX(-100%);
+                left: 0;
+                top: 0;
+                bottom: 0;
+            }
+        }
+    }
+
+    &-marks {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        flex: 1;
+
+        &-item {
+            position: absolute;
+            margin: auto;
+            .use-var(width, slider-mark-width);
+            .use-var(height, slider-mark-height);
+            .use-var(border-radius, slider-mark-border-radius);
+            .use-var(background, slider-line-color);
+            transform: translateX(-50%);
+            .style-with-rtl({
+                transform: translateX(50%);
+            });
+
+            &.is-activated {
+                .use-var(background, slider-line-activated-color);
+            }
+
+            .is-vertical & {
+                left: 0;
+                right: 0;
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+            }
+
+            &-label {
+                position: absolute;
+                .use-var(font-size, slider-mark-label-font-size);
+                .use-var(line-height, slider-mark-label-line-height);
+                .use-var(color, slider-text-color);
+
+                .is-horizontal & {
+                    left: 50%;
+                    .use-var(top, slider-horizontal-mark-label-top);
+                    transform: translateX(-50%);
+                }
+
+                .is-vertical & {
+                    top: 50%;
+                    .use-var(right, slider-vertical-mark-label-right);
+                    transform: translateY(-50%);
+                }
+            }
+        }
+    }
+
+    .is-transferable {
+        transition: all .3s;
+    }
+
+    .@{prefix}-fade-enter-active,
+    .@{prefix}-fade-enter-done {
+        .use-var(opacity, popover-inner-opacity);
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-slider {
+    &-label {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-slider-text-color);
+      }
+    }
+    &-line {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-slider-line-color);
+      }
+      &.is-activated {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-slider-line-activated-color);
+        }
+        .is-disabled & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-slider-line-disabled-color);
+          }
+        }
+      }
+    }
+    &-thumb {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-slider-thumb-background);
+      }
+    }
+    &-popover {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-popover-content-color);
+      }
+    }
+    &-marks {
+      &-item {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-slider-line-color);
+        }
+        &.is-activated {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-slider-line-activated-color);
+          }
+        }
+        &-label {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-slider-text-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/slider/thumb.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+declare function Thumb({ className, value, style, isTouching, idx, }: {
+    className?: string;
+    value: number;
+    isTouching: boolean;
+    style?: CSSProperties;
+    idx: number;
+}): JSX.Element;
+export default Thumb;

package/esnext/slider/thumb.js

@@ -0,0 +1,21 @@
+import React, { useMemo, useContext } from 'react';
+import { Popover } from './popover';
+import { SliderContext } from './hooks';
+import { GlobalContext } from '../context-provider';
+function Thumb({ className = '', value, style, isTouching, idx, }) {
+    const { prefixCls = '' } = useContext(GlobalContext);
+    const { showTooltip, renderThumb, formatTooltip, renderThumbPopover } = useContext(SliderContext);
+    const isHidden = showTooltip === 'never';
+    const renderValue = useMemo(() => formatTooltip(value), [formatTooltip, value]);
+    const isTooltipVisible = useMemo(() => {
+        if (isHidden)
+            return false;
+        if (showTooltip === 'always')
+            return true;
+        return isTouching;
+    }, [showTooltip, isTouching]);
+    const thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
+    const popoverEl = typeof renderThumbPopover === 'function' ? (renderThumbPopover({ value, visible: isTooltipVisible, thumbEl, index: idx })) : (React.createElement(Popover, { visible: isTooltipVisible, content: renderValue }, thumbEl));
+    return (React.createElement("div", { className: `${prefixCls}-slider-thumb-wrapper ${className}`, style: style }, isHidden ? thumbEl : popoverEl));
+}
+export default Thumb;

package/esnext/stepper/hooks/useButtonClick.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useButtonClick(params: Required<Pick<StepperProps, 'min' | 'max' | 'step' | 'disabled' | 'digits' | 'digits' | 'equalLimitDisabled'>> & Pick<StepperProps, 'onAddButtonClick' | 'onMinusButtonClick'> & {
+    actualInputValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    minusButtonDisable: boolean;
+    addButtonDisable: boolean;
+    handleMinusButtonClick: (e: React.MouseEvent) => void;
+    handleAddButtonClick: (e: React.MouseEvent) => void;
+};

package/esnext/stepper/hooks/useButtonClick.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+function correctCalculation(leftNumber, rightNumber, operator) {
+    const magnification = 1e17;
+    const left = leftNumber * magnification;
+    const right = rightNumber * magnification;
+    return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
+}
+export default function useButtonClick(params) {
+    const { actualInputValue, min, max, step, disabled, equalLimitDisabled, updateValue, onAddButtonClick, onMinusButtonClick, } = params;
+    const minusDisable = actualInputValue <= min || disabled;
+    const [minusButtonDisable, setMinusButtonDisable] = useState(minusDisable);
+    const addDisable = actualInputValue >= max || disabled;
+    const [addButtonDisable, setAddButtonDisable] = useState(addDisable);
+    const handleMinusButtonClick = (e) => {
+        if (minusButtonDisable) {
+            return;
+        }
+        updateValue(oldValue => {
+            const result = correctCalculation(oldValue, step, '-');
+            return result < min ? (equalLimitDisabled ? oldValue : min) : result;
+        });
+        onMinusButtonClick && onMinusButtonClick(e);
+    };
+    const handleAddButtonClick = (e) => {
+        if (addButtonDisable) {
+            return;
+        }
+        updateValue(oldValue => {
+            const result = correctCalculation(Number(oldValue), step, '+');
+            return result > max ? (equalLimitDisabled ? oldValue : max) : result;
+        });
+        onAddButtonClick && onAddButtonClick(e);
+    };
+    // 当前值改变时，更新按钮状态
+    // Changes button status when value changed
+    useEffect(() => {
+        setMinusButtonDisable(minusDisable);
+        setAddButtonDisable(addDisable);
+    }, [minusDisable, addDisable]);
+    return {
+        minusButtonDisable,
+        addButtonDisable,
+        handleMinusButtonClick,
+        handleAddButtonClick,
+    };
+}

package/esnext/stepper/hooks/useInputEvent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useInputEvent(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> & Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
+    actualInputValue: number;
+    innerValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    handleInput: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+};

package/esnext/stepper/hooks/useInputEvent.js

@@ -0,0 +1,41 @@
+import { useUpdateEffect } from '../../_helpers';
+export default function useInputEvent(params) {
+    const { defaultValue, min, max, digits, actualInputValue, innerValue, allowEmpty, updateValue, onBlur, onChange, onInput, } = params;
+    const handleInput = (e) => {
+        const targetValue = e.target.value;
+        const numberValue = Number(targetValue);
+        const pointIndex = targetValue.indexOf('.');
+        if (digits > 0 && pointIndex !== -1) {
+            const decimalLength = targetValue.slice(pointIndex + 1).length;
+            updateValue(decimalLength > digits ? actualInputValue : numberValue);
+        }
+        else if (allowEmpty && targetValue === '') {
+            updateValue(Number.MIN_VALUE);
+        }
+        else {
+            updateValue(numberValue);
+        }
+        onInput && onInput(e);
+    };
+    const handleBlur = (e) => {
+        const targetValue = e.target.value;
+        const numberValue = Number(targetValue);
+        if (allowEmpty && targetValue === '') {
+            updateValue(Number.MIN_VALUE);
+        }
+        else if (!allowEmpty && targetValue === '') {
+            updateValue(defaultValue);
+        }
+        else {
+            updateValue(Math.max(min, Math.min(max, numberValue)));
+        }
+        onBlur && onBlur(e);
+    };
+    useUpdateEffect(() => {
+        onChange && onChange(innerValue);
+    }, [innerValue]);
+    return {
+        handleInput,
+        handleBlur,
+    };
+}

package/esnext/stepper/hooks/useValue.d.ts

@@ -0,0 +1,7 @@
+import { StepperProps } from '..';
+export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+    actualInputValue: number;
+    showValue: string | number;
+    innerValue: number;
+};

package/esnext/stepper/hooks/useValue.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+export default function useValue(params) {
+    const { defaultValue, formatter, max, min, value, digits } = params;
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const updateValue = (updater) => {
+        const tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
+        if (formatter) {
+            new Promise(resolve => {
+                resolve(formatter(Number(tempValue)));
+            }).then((result) => {
+                const res = Math.max(min, Math.min(max, result));
+                setInnerValue(res);
+            });
+        }
+        else {
+            setInnerValue(tempValue);
+        }
+    };
+    const actualInputValue = value !== undefined ? value : innerValue;
+    // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
+    // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
+    const showValue = actualInputValue === Number.MIN_VALUE
+        ? ''
+        : digits > 0
+            ? parseFloat(String(actualInputValue)).toFixed(digits)
+            : actualInputValue;
+    return {
+        updateValue,
+        actualInputValue,
+        showValue,
+        innerValue,
+    };
+}

package/esnext/stepper/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StepperProps, StepperRef } from './type';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ * @displayName Stepper
+ */
+export default _default;

package/esnext/stepper/index.js

@@ -0,0 +1,81 @@
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { ContextLayout } from '../context-provider';
+import useButtonClick from './hooks/useButtonClick';
+import useInputEvent from './hooks/useInputEvent';
+import { IconAdd, IconMinus } from '../icon';
+import useValue from './hooks/useValue';
+export * from './type';
+const Stepper = forwardRef((props, ref) => {
+    const { className = '', style, inputStyle, inputClass = '', value, defaultValue = 1, allowEmpty = false, digits = 0, disabled = false, inputReadonly = false, max = Infinity, min = 1, equalLimitDisabled = false, step = 1, theme = 'default', formatter, addButton, minusButton, renderContent, onBlur, onChange, onFocus, onAddButtonClick, onMinusButtonClick, onClick, onInput, } = props;
+    // 值的相关逻辑
+    // @en The logic is that handle value
+    const { updateValue, actualInputValue, showValue, innerValue } = useValue({
+        defaultValue,
+        formatter,
+        min,
+        max,
+        value,
+        digits,
+    });
+    // 按钮点击的相关逻辑
+    // @en The logic is that handle button click
+    const { minusButtonDisable, addButtonDisable, handleAddButtonClick, handleMinusButtonClick } = useButtonClick({
+        actualInputValue,
+        min,
+        max,
+        step,
+        disabled,
+        digits,
+        equalLimitDisabled,
+        updateValue,
+        onAddButtonClick,
+        onMinusButtonClick,
+    });
+    // 输入框操作的相关逻辑
+    // @en The logic is that handle input operation
+    const { handleInput, handleBlur } = useInputEvent({
+        defaultValue,
+        min,
+        max,
+        digits,
+        actualInputValue,
+        allowEmpty,
+        innerValue,
+        updateValue,
+        onBlur,
+        onChange,
+        onInput,
+    });
+    const domRef = useRef(null);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        input: inputRef.current,
+        changeValue: (newValue) => {
+            let tempValue = newValue != null ? newValue : defaultValue;
+            tempValue = Math.min(max, Math.max(tempValue, min));
+            updateValue(tempValue);
+        },
+    }));
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-stepper`, `${prefixCls}-${theme}`, className), style: style, ref: domRef, onClick: onClick },
+        React.createElement("div", { "aria-label": "decrease", onClick: handleMinusButtonClick }, minusButton || (React.createElement("div", { className: cls(`${prefixCls}-stepper-minus-button`) },
+            React.createElement(IconMinus, { className: cls(`${prefixCls}-stepper-minus-button-icon`, {
+                    disabled: minusButtonDisable,
+                }) })))),
+        renderContent ? (renderContent(actualInputValue)) : (React.createElement("input", { style: inputStyle, className: cls(`${prefixCls}-stepper-input`, inputClass), onFocus: onFocus, onInput: handleInput, onBlur: handleBlur, disabled: disabled, value: showValue, readOnly: inputReadonly, ref: inputRef, type: "number", role: "spinbutton", "aria-valuenow": Number(showValue), "aria-valuemax": max, "aria-valuemin": min })),
+        React.createElement("div", { "aria-label": "increase", onClick: handleAddButtonClick }, addButton || (React.createElement("div", { className: cls(`${prefixCls}-stepper-add-button`) },
+            React.createElement(IconAdd, { className: cls(`${prefixCls}-stepper-add-button-icon`, {
+                    disabled: addButtonDisable,
+                }) }))))))));
+});
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ * @displayName Stepper
+ */
+export default componentWrapper(Stepper, 'Stepper');