@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/divider/style/index.less

@@ -0,0 +1,101 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(padding, divider-padding, '', 0);
+    .use-var(border-color, divider-line-color);
+    border-width: 0;
+    border-style: solid;
+
+    &::before,
+    &::after {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: inherit;
+        border-width: 0;
+        border-color: inherit;
+        border-style: inherit;
+        .use-var(border-top-width, divider-line-thickness);
+    }
+
+    &::before {
+        content: '';
+    }
+
+    &--hairline {
+        &::before,
+        &::after {
+            transform: scaleY(0.5);
+
+            @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+                transform: scaleY(0.33333333);
+            }
+        }
+    }
+
+    &--with-text {
+        .use-var(font-size, divider-content-font-size);
+        .use-var(color, divider-content-font-color);
+
+        &::before {
+            .use-var-with-rtl(margin-right, divider-content-padding);
+        }
+
+        &::after {
+            content: '';
+            .use-var-with-rtl(margin-left, divider-content-padding);
+        }
+    }
+
+    &--with-width {
+        &::before,
+        &::after {
+            flex-shrink: 0;
+            flex-grow: 0;
+        }
+    }
+
+    &--text-left::before {
+        .use-var(max-width, divider-left-width);
+    }
+    &--text-right::after {
+        .use-var(max-width, divider-right-width);
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-divider {
+    @{arco-dark-mode-selector} & {
+      .use-var(border-color, dark-divider-line-color);
+    }
+    &--with-text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-divider-content-font-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/dropdown/dropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownOptionsProps, DropdownOptionsRef, DropdownRef } from './type';
+export declare function componentGenerator<P extends DropdownOptionsProps = DropdownOptionsProps, R extends DropdownOptionsRef = DropdownOptionsRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<(import("./type").DropdownBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownRef>) | (import("./type").DropdownBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownRef>)>;

package/esnext/dropdown/dropdown.js

@@ -0,0 +1,196 @@
+import React, { useRef, useEffect, useCallback, forwardRef, useImperativeHandle, useState, } from 'react';
+import { cls, nextTick } from '@arco-design/mobile-utils';
+import { CSSTransition } from 'react-transition-group';
+import { ContextLayout } from '../context-provider';
+import { getStyleWithVendor, usePopupScroll, usePreventBodyScroll, useSystem, useWindowSize, } from '../_helpers';
+import Portal from '../portal';
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const optionsWrapper = useRef(null);
+        const domRef = useRef(null);
+        const { className = '', style = {}, options = [], showDropdown = false, showMask = true, direction = 'down', height, maxHeight = 500, touchToClose = true, useColumn, optionIcon, multiple, defaultSelectedValue, onCancel, getAnchorElement, isStopTouchEl, getStopTouchElements, getScrollContainer = () => optionsWrapper.current, getPortalContainer, clickOtherToClose = true, dropdownAnimationTimeout = 300, dropdownAnimationFunction = 'cubic-bezier(0.32, 0.96, 0.6, 1)', 
+        // 坑：ios touchstart会停留300ms 导致点击关闭蒙层后出现点击穿透 触发底部可点区域事件 这里设置更长的timeout规避
+        // @en In iOS, touchstart will stay for 300ms, resulting in click penetration after clicking to close the mask, triggering the bottom clickable area event, and setting a longer timeout to avoid it
+        maskAnimationTimeout = 500, maskAnimationFunction = 'cubic-bezier(0.32, 0.96, 0.6, 1)', mountOnEnter = true, unmountOnExit = true, preventBodyScroll = true, initialBodyOverflow, } = props;
+        const system = useSystem();
+        const { windowHeight, windowWidth } = useWindowSize();
+        const [positionStyle, setPositionStyle] = useState({ top: '', bottom: '' });
+        const [innerValue, setInnerValue] = useState(() => {
+            const defaultValue = multiple ? [] : 0;
+            return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+        });
+        // down=0为向上展开，1为向下展开
+        // @en down=0 is to expand upwards, 1 is to expand downwards
+        const [down, setDown] = useState(null);
+        const maskHeight = useRef(0);
+        const optionsContainer = useRef(null);
+        const dropdownContainer = useRef(null);
+        const [optionsWrapperHeight, setOptionsWrapperHeight] = useState(0);
+        /**
+         * 判断是否阻止touch事件
+         * @en Determine whether to block touch events
+         * */
+        const ifStopTouch = (el) => {
+            if (isStopTouchEl)
+                return isStopTouchEl(el);
+            let tempEl = el;
+            const elements = getStopTouchElements
+                ? getStopTouchElements()
+                : [dropdownContainer.current?.parentElement];
+            for (let i = 0; i < elements.length; i++) {
+                while (tempEl && elements[i]) {
+                    if (tempEl === elements[i]) {
+                        return true;
+                    }
+                    tempEl = tempEl.parentElement;
+                }
+            }
+            return false;
+        };
+        usePopupScroll(showDropdown, domRef.current, getScrollContainer);
+        usePreventBodyScroll(showDropdown, preventBodyScroll, initialBodyOverflow);
+        const updateDown = useCallback((wrapperHeight) => {
+            // 为0的时候不改变
+            // @en Does not change when it is 0
+            if (wrapperHeight === 0) {
+                return;
+            }
+            const tempEl = getAnchorElement
+                ? getAnchorElement()
+                : dropdownContainer.current?.parentElement;
+            const { bottom, top } = tempEl?.getBoundingClientRect() || {
+                bottom: 0,
+                top: 0,
+            };
+            const tempTop = props.top || bottom;
+            const tempBottom = props.bottom || windowHeight - top;
+            const tempMaskHeight = windowHeight - tempTop;
+            // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
+            // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
+            const tempDown = (direction !== 'up' && wrapperHeight < tempMaskHeight) ||
+                wrapperHeight > tempTop;
+            if (tempDown) {
+                maskHeight.current = tempMaskHeight;
+                setPositionStyle({ top: `${tempTop}px`, bottom: '' });
+            }
+            else {
+                maskHeight.current = windowHeight - tempBottom;
+                setPositionStyle({ top: '', bottom: `${tempBottom}px` });
+            }
+            setDown(tempDown);
+        }, [props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
+        /**
+         * 取消选择
+         * @en Cancel selection
+         * */
+        const handleCancel = useCallback(e => {
+            const optionsWrapperDom = optionsWrapper.current;
+            if (!e || !optionsWrapperDom) {
+                return;
+            }
+            const target = e.target;
+            if (!optionsWrapperDom.contains(target) && !ifStopTouch(target)) {
+                onCancel();
+            }
+            e.stopPropagation();
+        }, [ifStopTouch, onCancel]);
+        /**
+         * 当面板放下时，给body添加事件监听，面板收起时，移除
+         * @en When the panel is down, add an event listener to the body, and when the panel is retracted, remove it
+         * */
+        useEffect(() => {
+            const needBind = showDropdown && clickOtherToClose;
+            const event = touchToClose ? 'touchstart' : 'click';
+            if (needBind) {
+                document.addEventListener(event, handleCancel);
+            }
+            return () => {
+                if (needBind) {
+                    document.removeEventListener(event, handleCancel);
+                }
+            };
+        }, [showDropdown, clickOtherToClose, handleCancel]);
+        useEffect(() => {
+            let wrapperHeight = 0;
+            if (height !== void 0) {
+                // 受控模式下，完全交由外层控制
+                // @en In controlled mode, it is completely controlled by the outer layer
+                wrapperHeight = height;
+            }
+            else {
+                if (!optionsContainer.current)
+                    return;
+                if (!showDropdown) {
+                    wrapperHeight = 0;
+                }
+                else {
+                    wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
+                }
+            }
+            updateDown(wrapperHeight);
+            nextTick(() => {
+                setOptionsWrapperHeight(wrapperHeight);
+            });
+        }, [showDropdown, options.length, height, updateDown]);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        function getOptionsStyle() {
+            const trans = down ? 'translateY(-100%)' : 'translateY(100%)';
+            const transStyle = down === null
+                ? {
+                    opacity: 0,
+                }
+                : {
+                    opacity: 1,
+                    transform: optionsWrapperHeight ? 'translateY(0)' : trans,
+                    transition: `all ${dropdownAnimationTimeout}ms ${dropdownAnimationFunction}`,
+                };
+            return getStyleWithVendor({
+                // height: `${optionsWrapperHeight}px`,
+                ...transStyle,
+                overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
+                maxHeight: `${maxHeight}px`,
+            });
+        }
+        function renderInnerOptions() {
+            const value = props.selectedValue !== void 0 ? props.selectedValue : innerValue;
+            const optionProps = {
+                options,
+                useColumn,
+                icon: optionIcon,
+                selectedValue: value,
+                multiple: props.multiple,
+                onOptionClick: props.onOptionClick,
+                onOptionChange: (vals, op) => {
+                    setInnerValue(vals);
+                    props.onOptionChange?.(vals, op);
+                },
+            };
+            return React.createElement(Comp, Object.assign({}, optionProps));
+        }
+        return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { ref: dropdownContainer },
+            React.createElement(Portal, { getContainer: getPortalContainer },
+                React.createElement(CSSTransition, { in: showDropdown, timeout: Math.max(dropdownAnimationTimeout, maskAnimationTimeout), onEnter: el => {
+                        el.style.visibility = 'visible';
+                    }, onExited: el => {
+                        el.style.visibility = 'hidden';
+                        setDown(null);
+                    }, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
+                    React.createElement("div", { className: cls(`${prefixCls}-dropdown all-border-box`, system, className, { 'drop-up': !down }), ref: domRef, style: {
+                            height: `${maskHeight.current}px`,
+                            maxWidth: `${windowWidth}px`,
+                            ...style,
+                            ...positionStyle,
+                        } },
+                        React.createElement("div", { className: cls(`${prefixCls}-dropdown-options`), ref: optionsWrapper, style: getOptionsStyle() },
+                            React.createElement("div", { className: cls(`${prefixCls}-dropdown-options-container`), ref: optionsContainer },
+                                props.children || renderInnerOptions(),
+                                props.extraNode)),
+                        showMask && (React.createElement("div", { className: cls(`${prefixCls}-dropdown-mask`, {
+                                'is-show': optionsWrapperHeight,
+                            }), style: {
+                                transition: `opacity ${maskAnimationTimeout}ms ${maskAnimationFunction}`,
+                            } })))))))));
+    });
+}

package/esnext/dropdown/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<(import("./type").DropdownBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownRef>) | (import("./type").DropdownBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownRef>)> & {
+    Options: import("react").ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & import("react").RefAttributes<import("./type").DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & import("react").RefAttributes<import("./type").DropdownOptionsRef>)>;
+};
+/**
+ * 下拉面板，展示供选择的选择项
+ * @en Dropdown panel, showing options to choose from
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉面板
+ * @name_en Dropdown
+ */
+export default _default;

package/esnext/dropdown/index.js

@@ -0,0 +1,16 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import Options from './options';
+import { componentGenerator } from './dropdown';
+export * from './type';
+const Dropdown = componentGenerator(Options);
+/**
+ * 下拉面板，展示供选择的选择项
+ * @en Dropdown panel, showing options to choose from
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉面板
+ * @name_en Dropdown
+ */
+export default componentWrapper(Dropdown, {
+    Options,
+});

package/esnext/dropdown/options.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownOptionsRef } from './type';
+declare const Options: React.ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownOptionsRef>)>;
+export default Options;

package/esnext/dropdown/options.js

@@ -0,0 +1,61 @@
+import React, { forwardRef, useContext, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import IconCheck from '../icon/IconCheck';
+const Options = forwardRef((props, ref) => {
+    const { options, useColumn, icon, selectedValue, defaultSelectedValue, multiple } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    const [innerValue, setInnerValue] = useState(() => {
+        const defaultValue = multiple ? [] : 0;
+        return defaultSelectedValue !== void 0 ? defaultSelectedValue : defaultValue;
+    });
+    const value = useMemo(() => (selectedValue === void 0 ? innerValue : selectedValue), [selectedValue, innerValue]);
+    const colCount = useColumn === true ? 4 : Number(useColumn) || 0;
+    const fakeOpts = new Array(colCount && options.length % colCount ? colCount - (options.length % colCount) : 0).fill('');
+    const minWidthStyle = useColumn ? { minWidth: `${(1 / (colCount + 1)) * 100}%` } : {};
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    /**
+     * 当选项改变时触发的回调函数
+     * @en callback when options change
+     * */
+    function handleOptionChange(e, op) {
+        if (op.disabled)
+            return;
+        if (props.multiple === true) {
+            if (!Array.isArray(value)) {
+                return;
+            }
+            const index = value.indexOf(op.value);
+            const checked = index >= 0;
+            props.onOptionClick?.(checked, op.value, op);
+            const newValue = [...value];
+            checked ? newValue.splice(index, 1) : newValue.push(op.value);
+            setInnerValue(newValue);
+            props.onOptionChange?.(newValue, op);
+        }
+        else {
+            const newValue = op.value;
+            props.onOptionClick?.(newValue, op);
+            setInnerValue(newValue);
+            newValue !== value && props.onOptionChange?.(newValue, op);
+        }
+        e.stopPropagation();
+    }
+    function checkSelected(op) {
+        return multiple && Array.isArray(value) ? value.includes(op.value) : op.value === value;
+    }
+    return (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-dropdown-options-wrap`, {
+            'use-column': useColumn,
+        }) },
+        options.map(op => (React.createElement("div", { className: cls(`${prefixCls}-dropdown-options-item${useColumn ? '-col' : ''}`, {
+                disabled: op.disabled,
+                selected: checkSelected(op),
+            }), key: op.value, onClick: e => handleOptionChange(e, op), style: minWidthStyle },
+            op.label,
+            icon !== void 0 ? (icon) : (React.createElement(IconCheck, { className: `${prefixCls}-dropdown-options-item-icon` }))))),
+        fakeOpts.map((_, i) => (React.createElement("div", { className: cls(`${prefixCls}-dropdown-options-item-fake-col`), key: i, style: minWidthStyle })))));
+});
+export default Options;