@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/collapse/collapse.js

@@ -0,0 +1,111 @@
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext, } from 'react';
+import { cls, convertCssDuration, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useRefState, useSameRefState, useUpdateEffect } from '../_helpers';
+import IconArrowDown from '../icon/IconArrowDown';
+import { allContexts, CollapseKeyContext } from './utils';
+export const Collapse = forwardRef((props, ref) => {
+    const { header = '', icon, hideIcon = false, disabled = false, content = null, defaultActive = false, value = '', active, animationTimeout, animationFunction, className = '', style = {}, } = props;
+    const [innerActive, setInnerActive] = useState(defaultActive);
+    const [itemActive, itemActiveRef, setItemActive] = useRefState(active === void 0 ? innerActive : active);
+    const contentHeightRef = useRef(0);
+    const collapseHeaderRef = useRef(null);
+    const domRef = useRef(null);
+    const contentWrapRef = useRef(null);
+    const contentRef = useRef(null);
+    const { key: groupKey } = useContext(CollapseKeyContext);
+    const CollapseContext = allContexts[groupKey] || {};
+    const groupContext = useContext(CollapseContext) || {};
+    const [opened, openedRef, setOpened] = useSameRefState(false);
+    useEffect(() => {
+        let show = false;
+        // 优先级： group > children
+        // @en Priority: group > children
+        if (groupContext.isGroup) {
+            if (active !== void 0) {
+                show = active;
+            }
+            if (groupContext.value)
+                show = groupContext.value.includes(value);
+        }
+        else {
+            show = itemActive;
+        }
+        setOpened(show);
+    }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
+    const getContentHeight = () => {
+        const div = contentRef.current;
+        return div?.getBoundingClientRect()?.height ?? 0;
+    };
+    const resetHeight = (newHeight) => {
+        if (!contentWrapRef.current) {
+            return;
+        }
+        contentWrapRef.current.style.height = newHeight;
+        const transTimeout = convertCssDuration(contentWrapRef.current, 'transitionDuration');
+        setTimeout(() => contentWrapRef.current &&
+            (contentWrapRef.current.style.height = openedRef.current ? 'auto' : '0px'), openedRef.current ? transTimeout : 20);
+    };
+    const toggleOpened = () => {
+        const height = getContentHeight();
+        const isBeginning = contentHeightRef.current === 0;
+        contentHeightRef.current = height;
+        if (isBeginning) {
+            const initHeight = opened ? 'auto' : '0px';
+            contentWrapRef.current && (contentWrapRef.current.style.height = initHeight);
+            return;
+        }
+        resetHeight(`${height}px`);
+    };
+    const updateLayout = () => {
+        if (!contentWrapRef.current) {
+            return;
+        }
+        const height = getContentHeight();
+        contentWrapRef.current.style.height = openedRef.current
+            ? `${contentHeightRef.current}px`
+            : '0px';
+        nextTick(() => {
+            contentHeightRef.current = height;
+            resetHeight(openedRef.current ? `${height}px` : '0px');
+        });
+    };
+    const onCollapse = (val) => {
+        if (disabled)
+            return;
+        props.onCollapse && props.onCollapse(val);
+        if (!groupContext.isGroup) {
+            setInnerActive(!itemActiveRef.current);
+        }
+        else {
+            groupContext.onCollapse(value);
+        }
+    };
+    useEffect(() => {
+        setItemActive(active === void 0 ? innerActive : active);
+    }, [active, innerActive]);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        head: collapseHeaderRef.current,
+        updateLayout,
+    }));
+    useEffect(() => {
+        toggleOpened();
+    }, [opened]);
+    useUpdateEffect(() => {
+        updateLayout();
+    }, [content]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-collapse-item`, className, {
+            disabled: disabled || groupContext.disabled,
+        }), style: style, ref: domRef },
+        React.createElement("div", { className: cls(`${prefixCls}-collapse-header`), ref: collapseHeaderRef, onClick: () => onCollapse(value) },
+            header,
+            !hideIcon && (React.createElement("div", { className: cls(`${prefixCls}-collapse-icon`) }, icon || (React.createElement(IconArrowDown, { className: `${prefixCls}-collapse-icon-arrow`, style: {
+                    transform: `rotate(${opened ? '180deg' : '0deg'})`,
+                } }))))),
+        React.createElement("div", { className: cls(`${prefixCls}-collapse-content`), ref: contentWrapRef, style: {
+                transitionDuration: animationTimeout !== void 0 ? `${animationTimeout}ms` : void 0,
+                transitionTimingFunction: animationFunction,
+            } },
+            React.createElement("div", { className: cls(`${prefixCls}-collapse-content-container`), ref: contentRef }, content))))));
+});

package/esnext/collapse/group.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CollapseItemContent, CollapseProps, CollapseRef, CollapseGroupRef } from './type';
+export declare function componentGenerator<P extends CollapseItemContent = CollapseProps, R extends CollapseRef = CollapseRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<import("./type").CollapseCommonProps & {
+    useAccordion?: boolean | undefined;
+    activeItems?: string[] | undefined;
+    defaultActiveItems?: string[] | undefined;
+    disabled?: boolean | undefined;
+    items?: P[] | undefined;
+    children?: React.ReactNode;
+    groupKey?: string | undefined;
+} & React.RefAttributes<CollapseGroupRef>>;
+export declare const Group: React.ForwardRefExoticComponent<import("./type").CollapseCommonProps & {
+    useAccordion?: boolean | undefined;
+    activeItems?: string[] | undefined;
+    defaultActiveItems?: string[] | undefined;
+    disabled?: boolean | undefined;
+    items?: (CollapseProps & React.RefAttributes<CollapseRef>)[] | undefined;
+    children?: React.ReactNode;
+    groupKey?: string | undefined;
+} & React.RefAttributes<CollapseGroupRef>>;
+export default Group;

package/esnext/collapse/group.js

@@ -0,0 +1,80 @@
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { Collapse } from './collapse';
+import { defaultContextKey, getCollapseContext, CollapseKeyContext } from './utils';
+import { GlobalContext } from '../context-provider';
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { items = [], className = '', style = {}, defaultActiveItems = [], useAccordion = false, disabled = false, children, groupKey, } = props;
+        const [innerActiveItems, setInnerActiveItems] = useState([]);
+        const [activeItems, setActiveItems] = useState([]);
+        /** 用于children模式下的active管理 */
+        const [childActiveItems, setChildActiveItems] = useState([]);
+        const contextKey = groupKey || defaultContextKey;
+        const CollapseContext = getCollapseContext(contextKey);
+        const domRef = useRef(null);
+        const { prefixCls } = useContext(GlobalContext);
+        const formatArray = (input) => {
+            const arr = input;
+            return items.map(item => arr.indexOf(item.value) > -1);
+        };
+        const handleChange = (value) => {
+            if (disabled)
+                return;
+            if (props.onCollapse) {
+                props.onCollapse(value);
+            }
+            if (props.activeItems !== void 0) {
+                setInnerActiveItems(formatArray(props.activeItems));
+                setChildActiveItems(props.activeItems);
+                return;
+            }
+            if (!children) {
+                const temp = items.findIndex(item => item.value === value);
+                if (temp < 0 || items[temp].disabled)
+                    return;
+                const tempActiveItems = innerActiveItems.map((activeItem, index) => index === temp ? !activeItem : !useAccordion && activeItem);
+                setInnerActiveItems(tempActiveItems);
+            }
+            else {
+                const tempValue = childActiveItems.includes(value);
+                setChildActiveItems(tempValue
+                    ? childActiveItems.filter(item => item !== value)
+                    : useAccordion // 手风琴模式只有一个展开项
+                        ? [value]
+                        : [...childActiveItems, value]);
+            }
+        };
+        useEffect(() => {
+            setInnerActiveItems(formatArray(defaultActiveItems));
+            setChildActiveItems(defaultActiveItems);
+        }, []);
+        useEffect(() => {
+            setActiveItems(props.activeItems === void 0 ? innerActiveItems : formatArray(props.activeItems));
+            if (children && props.activeItems) {
+                setChildActiveItems(props.activeItems);
+            }
+        }, [props.activeItems, innerActiveItems]);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        return (React.createElement("div", { className: cls(`${prefixCls}-collapse-group`, className), style: style, ref: domRef },
+            React.createElement(CollapseKeyContext.Provider, { value: { key: contextKey } },
+                React.createElement(CollapseContext.Provider, { value: {
+                        isGroup: true,
+                        onCollapse: handleChange,
+                        disabled,
+                        value: children ? childActiveItems : void 0,
+                    } }, children || (React.createElement(React.Fragment, null, items.map((item, index) => {
+                    const compProps = {
+                        active: activeItems[index],
+                        disabled: disabled || item.disabled,
+                        defaultActive: formatArray(defaultActiveItems)[index],
+                        ...item,
+                    };
+                    return React.createElement(Comp, Object.assign({ key: item.value }, compProps));
+                })))))));
+    });
+}
+export const Group = componentGenerator(Collapse);
+export default Group;

package/esnext/collapse/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export * from './collapse';
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").CollapseProps & import("react").RefAttributes<import("./type").CollapseRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").CollapseCommonProps & {
+        useAccordion?: boolean | undefined;
+        activeItems?: string[] | undefined;
+        defaultActiveItems?: string[] | undefined;
+        disabled?: boolean | undefined;
+        items?: (import("./type").CollapseProps & import("react").RefAttributes<import("./type").CollapseRef>)[] | undefined;
+        children?: import("react").ReactNode;
+        groupKey?: string | undefined;
+    } & import("react").RefAttributes<import("./type").CollapseGroupRef>>;
+};
+/**
+ * 折叠面板组件，支持手风琴模式。
+ * @en Collapse supports accordion mode.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 折叠面板
+ * @name_en Collapse
+ */
+export default _default;

package/esnext/collapse/index.js

@@ -0,0 +1,14 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { Collapse } from './collapse';
+import Group from './group';
+export * from './collapse';
+export * from './type';
+/**
+ * 折叠面板组件，支持手风琴模式。
+ * @en Collapse supports accordion mode.
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 折叠面板
+ * @name_en Collapse
+ */
+export default componentWrapper(Collapse, { Group });