sard 1.0.0-canary.0

package/dist/dialog/Dialog.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useState, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { Popup } from '../popup';
+import { Button } from '../button';
+import { useBem, useControllableValue, useEvent } from '../use';
+import useTranslate from '../locale/useTranslate';
+import { isFunction, isNullish, noop } from '../utils';
+import Halfline from '../halfline';
+const CLOSE = 'close';
+const CANCEL = 'cancel';
+const CONFIRM = 'confirm';
+const buttonProps = {
+    text: {
+        cancel: {
+            type: 'text',
+            theme: 'secondary',
+            size: 'large',
+        },
+        confirm: {
+            type: 'text',
+            theme: 'primary',
+            size: 'large',
+        },
+    },
+    round: {
+        cancel: {
+            type: 'pale',
+            theme: 'primary',
+            round: true,
+        },
+        confirm: {
+            type: 'default',
+            theme: 'primary',
+            round: true,
+        },
+    },
+};
+export const Dialog = forwardRef((props, ref) => {
+    const { t } = useTranslate('dialog');
+    const { className, style, children, contentClass, contentStyle, title, message, header, headed, footer, buttonType = 'text', showCancel = false, cancelText = t('cancel'), cancelProps, showConfirm = true, confirmText = t('confirm'), confirmProps, maskClosable = false, onClose, onCancel, onConfirm, visible, defaultVisible, onVisible, onMaskClick, timeout, ...restProps } = props;
+    const [bem] = useBem('dialog');
+    const [loading, setLoading] = useState({
+        cancel: false,
+        confirm: false,
+    });
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const perhapsClose = (type, callback) => {
+        function toggleLoading(play) {
+            setLoading((loading) => ({
+                ...loading,
+                [type]: play,
+            }));
+        }
+        if (isFunction(callback)) {
+            const result = callback();
+            if (result instanceof Promise) {
+                toggleLoading(true);
+                return result
+                    .then(() => {
+                    setInnerVisible?.(false);
+                })
+                    .catch(noop)
+                    .finally(() => {
+                    toggleLoading(false);
+                });
+            }
+        }
+        setInnerVisible?.(false);
+    };
+    const handleRequestClose = useEvent(() => {
+        setInnerVisible(false);
+    });
+    const handleMaskClick = useEvent((event) => {
+        onMaskClick?.(event);
+        if (maskClosable) {
+            perhapsClose(CLOSE, onClose);
+        }
+    });
+    const handleClose = () => {
+        perhapsClose(CLOSE, onClose);
+    };
+    const handleCancel = () => {
+        perhapsClose(CANCEL, onCancel);
+    };
+    const handleConfirm = () => {
+        perhapsClose(CONFIRM, onConfirm);
+    };
+    useImperativeHandle(ref, () => ({}), []);
+    const renderTitle = () => {
+        return (_jsx(View, { className: classNames(bem.e('title'), bem.em('title', 'headed', headed), bem.em('title', 'headless', !headed), bem.em('title', 'headless-message', !headed && !isNullish(message))), children: title }));
+    };
+    return (_jsxs(Popup, { ...restProps, effect: "zoom", visible: innerVisible, mask: true, timeout: timeout, onMaskClick: handleMaskClick, onRequestClose: handleRequestClose, className: classNames(bem.e('popup'), className), style: style, contentClass: classNames(bem.b(), bem.m('headed', headed), contentClass), contentStyle: contentStyle, children: [headed && (_jsxs(View, { className: classNames(bem.e('header'), bem.em('header', 'titled', !isNullish(title))), children: [header ?? renderTitle(), _jsx(Button, { className: bem.e('close'), type: "pale-text", theme: "secondary", size: "large", onClick: handleClose, iconProps: {
+                            name: 'close',
+                        } }), !isNullish(title) && _jsx(Halfline, { direction: "bottom" })] })), _jsx(View, { className: classNames(bem.e('body'), bem.em('body', 'untitled', isNullish(title))), children: children ?? (_jsxs(_Fragment, { children: [!headed && !isNullish(title) && renderTitle(), !isNullish(message) && (_jsx(View, { className: classNames(bem.e('message'), bem.em('message', 'headless-titled', !headed && !isNullish(title)), bem.em('message', 'headed-untitled', headed && isNullish(title))), children: message }))] })) }), _jsxs(View, { className: classNames(bem.e('footer'), bem.em('footer', 'text-button', buttonType === 'text'), bem.em('footer', 'round-button', buttonType === 'round')), children: [footer ?? (_jsxs(_Fragment, { children: [showCancel && (_jsx(Button, { ...buttonProps[buttonType].cancel, className: classNames(bem.e('button'), bem.e('cancel'), bem.em('button', 'text', buttonType === 'text'), bem.em('button', 'text-first', buttonType === 'text'), bem.em('button', 'text-last', buttonType === 'text' && !showConfirm)), ...cancelProps, loading: loading.cancel, onClick: handleCancel, children: cancelText })), showCancel && buttonType === 'text' && (_jsx(View, { className: bem.e('divider'), children: _jsx(Halfline, { direction: "left" }) })), showConfirm && (_jsx(Button, { ...buttonProps[buttonType].confirm, className: classNames(bem.e('button'), bem.e('confirm'), bem.em('button', 'text', buttonType === 'text'), bem.em('button', 'text-last', buttonType === 'text'), bem.em('button', 'text-first', buttonType === 'text' && !showCancel), bem.em('button', 'round-later', showCancel && buttonType === 'round')), ...confirmProps, loading: loading.confirm, onClick: handleConfirm, children: confirmText }))] })), buttonType === 'text' && _jsx(Halfline, { direction: "top" })] })] }));
+});
+export default Dialog;

package/dist/dialog/imperative.d.ts

@@ -0,0 +1,17 @@
+import { DialogProps } from './Dialog';
+import { ReactNode } from 'react';
+export interface DialogOptions extends DialogProps {
+    id?: string;
+}
+export interface DialogShow {
+    (options: DialogOptions): void;
+    (title: ReactNode, options?: DialogOptions): void;
+}
+export interface DialogInternalShow {
+    (optionsOrTitle: ReactNode | DialogOptions, options: DialogOptions, internalOptions: DialogOptions): void;
+}
+export declare const show: DialogShow;
+export declare const alert: DialogShow;
+export declare const confirm: DialogShow;
+export declare const hide: (id?: string) => void;
+export declare const hideAll: () => void;

package/dist/dialog/imperative.js

@@ -0,0 +1,35 @@
+import { mapIdAgent } from './Agent';
+import { isNotReactNode } from '../utils';
+const internalShow = (optionsOrTitle, options, internalOptions) => {
+    if (isNotReactNode(optionsOrTitle)) {
+        options = optionsOrTitle;
+    }
+    else {
+        options.title = optionsOrTitle;
+    }
+    const { id = 'dialog' } = options;
+    const ref = mapIdAgent[id];
+    if (ref) {
+        ref.current?.show({
+            ...options,
+            ...internalOptions,
+        });
+    }
+};
+export const show = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, { showCancel: false });
+};
+export const alert = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, { showCancel: false });
+};
+export const confirm = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, {
+        showCancel: true,
+    });
+};
+export const hide = (id = 'dialog') => {
+    mapIdAgent[id]?.current?.hide();
+};
+export const hideAll = () => {
+    Object.keys(mapIdAgent).forEach((key) => mapIdAgent[key]?.current?.hide());
+};

package/dist/dialog/index.d.ts

@@ -0,0 +1,14 @@
+import type { DialogFC as DialogOriginFC, DialogProps, DialogRef, DialogCloseType } from './Dialog';
+import { DialogAgent } from './Agent';
+import { show, alert, confirm, hide, hideAll } from './imperative';
+interface DialogFC extends DialogOriginFC {
+    show: typeof show;
+    alert: typeof alert;
+    confirm: typeof confirm;
+    hide: typeof hide;
+    hideAll: typeof hideAll;
+    Agent: typeof DialogAgent;
+}
+declare const Dialog: DialogFC;
+export { Dialog, DialogProps, DialogRef, DialogAgent, DialogCloseType };
+export default Dialog;

package/dist/dialog/index.js

@@ -0,0 +1,12 @@
+import { Dialog as DialogOrigin } from './Dialog';
+import { DialogAgent } from './Agent';
+import { show, alert, confirm, hide, hideAll } from './imperative';
+const Dialog = DialogOrigin;
+Dialog.show = show;
+Dialog.alert = alert;
+Dialog.confirm = confirm;
+Dialog.hide = hide;
+Dialog.hideAll = hideAll;
+Dialog.Agent = DialogAgent;
+export { Dialog, DialogAgent };
+export default Dialog;

package/dist/dialog/index.scss

@@ -0,0 +1,156 @@
+@import '../style/base.scss';
+// #variables
+$sar-dialog-z-index: 1110 !default;
+
+$sar-dialog-width: 320px !default;
+$sar-dialog-max-width: 90% !default;
+$sar-dialog-bg-color: $sar-emphasis-bg-color !default;
+$sar-dialog-border-radius: $sar-rounded-xl !default;
+
+$sar-dialog-header-padding-y: 16px !default;
+$sar-dialog-header-padding-x: 16px !default;
+
+$sar-dialog-title-padding-x: 16px !default;
+$sar-dialog-title-padding-y: 24px !default;
+$sar-dialog-title-headless-message-padding-bottom: 4px !default;
+$sar-dialog-title-font-size: $sar-text-lg !default;
+$sar-dialog-headed-title-font-size: $sar-text-base !default;
+
+$sar-dialog-close-padding: 16px !default;
+$sar-dialog-close-font-size: $sar-text-lg !default;
+
+$sar-dialog-message-padding-y: 24px !default;
+$sar-dialog-message-padding-x: 16px !default;
+$sar-dialog-message-less-padding-top: 4px !default;
+$sar-dialog-message-font-size: $sar-text-base !default;
+$sar-dialog-message-color: $sar-secondary-color !default;
+
+$sar-dialog-round-button-footer-padding-x: 16px !default;
+$sar-dialog-round-button-footer-padding-y: 16px !default;
+$sar-dialog-round-button-button-gap: 16px !default;
+
+// 暗黑模式
+$sar-dialog-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-dialog-message-dark-color: $sar-dark-secondary-color !default;
+// #endvariables
+
+@include bem(dialog) {
+  @include b() {
+    @include universal;
+    width: $sar-dialog-width;
+    max-width: $sar-dialog-max-width;
+    background-color: $sar-dialog-bg-color;
+    border-radius: $sar-dialog-border-radius;
+  }
+
+  @include e(popup) {
+    z-index: $sar-dialog-z-index;
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: $sar-dialog-header-padding-y;
+    padding-left: $sar-dialog-header-padding-x;
+    padding-right: $sar-dialog-header-padding-x;
+
+    @include m(titled) {
+      padding-bottom: $sar-dialog-header-padding-y;
+    }
+  }
+
+  @include e(title) {
+    @include universal;
+    font-size: $sar-dialog-title-font-size;
+    font-weight: $sar-font-bold;
+    text-align: center;
+
+    @include m(headed) {
+      font-size: $sar-dialog-headed-title-font-size;
+    }
+
+    @include m(headless) {
+      padding: $sar-dialog-title-padding-y $sar-dialog-title-padding-x;
+    }
+
+    @include m(headless-message) {
+      padding-bottom: $sar-dialog-title-headless-message-padding-bottom;
+    }
+  }
+
+  @include e(close) {
+    @include universal;
+    margin-top: $sar-dialog-header-padding-y * -1;
+    margin-right: $sar-dialog-header-padding-x * -1;
+    margin-bottom: $sar-dialog-header-padding-y * -1;
+    padding: $sar-dialog-close-padding;
+    border-width: 0;
+    font-size: $sar-dialog-close-font-size;
+    line-height: $sar-dialog-close-font-size * $sar-leading-none;
+  }
+
+  @include e(message) {
+    @include universal;
+    padding: $sar-dialog-message-padding-y $sar-dialog-message-padding-x;
+    font-size: $sar-dialog-message-font-size;
+    text-align: center;
+    color: $sar-dialog-message-color;
+
+    @include m(headless-titled, headed-untitled) {
+      padding-top: $sar-dialog-message-less-padding-top;
+    }
+  }
+
+  @include e(footer) {
+    @include universal;
+    flex-direction: row;
+
+    @include m(round-button) {
+      padding-left: $sar-dialog-round-button-footer-padding-x;
+      padding-right: $sar-dialog-round-button-footer-padding-x;
+      padding-bottom: $sar-dialog-round-button-footer-padding-y;
+    }
+  }
+
+  @include e(button) {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    margin: 0;
+
+    @include m(text) {
+      border-radius: 0;
+    }
+
+    @include m(text-first) {
+      border-bottom-left-radius: $sar-dialog-border-radius;
+    }
+
+    @include m(text-last) {
+      border-bottom-right-radius: $sar-dialog-border-radius;
+    }
+
+    @include m(round-later) {
+      margin-left: $sar-dialog-round-button-button-gap;
+    }
+  }
+
+  @include e(divider) {
+    @include universal;
+    flex: none;
+  }
+}
+
+@include theme(dark) {
+  @include bem(dialog) {
+    @include b() {
+      background-color: $sar-dialog-dark-bg-color;
+    }
+
+    @include e(message) {
+      color: $sar-dialog-message-dark-color;
+    }
+  }
+}

package/dist/dropdown/Item.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { PopupProps } from '../popup';
+import { DropdownOptionProps } from './Option';
+import { BaseProps } from '../base';
+export interface DropdownItemProps extends BaseProps {
+    title?: ReactNode;
+    label?: ReactNode;
+    options?: DropdownOptionProps[];
+    direction?: 'down' | 'up';
+    disabled?: boolean;
+    value?: number | string;
+    defaultValue?: number | string;
+    onChange?: (value: number | string) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    awayClosable?: boolean;
+    maskClosable?: boolean;
+    arrow?: (visible: boolean, direction: DropdownItemProps['direction']) => ReactNode;
+    onClick?: (event: ITouchEvent) => void;
+    popupProps?: PopupProps;
+    separator?: string;
+    placeholder?: ReactNode;
+    _itemShow?: boolean;
+}
+export interface DropdownItemRef {
+    toggle: (visible?: boolean) => void;
+}
+export type DropdownItemFC = ForwardRefExoticComponent<PropsWithoutRef<DropdownItemProps> & RefAttributes<DropdownItemRef>>;
+export declare const DropdownItem: DropdownItemFC;
+export default DropdownItem;

package/dist/dropdown/Item.js

@@ -0,0 +1,164 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, forwardRef, useImperativeHandle, useRef, } from 'react';
+import classNames from 'classnames';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { useBem, useControllableValue, useResize } from '../use';
+import { Popup } from '../popup';
+import { DropdownOption } from './Option';
+import { Icon } from '../icon';
+import { useEvent } from '../use';
+import { getRectByElement, isBoolean, isNullish } from '../utils';
+import List from '../list';
+import Pressable from '../pressable';
+import Ellipsis from '../ellipsis';
+import Modal from '../modal';
+import Halfline from '../halfline';
+const mapDirectionPlacement = {
+    down: 'slide-top',
+    up: 'slide-bottom',
+};
+export const DropdownItem = forwardRef((props, ref) => {
+    const { className, style, children, title, label, options = [], direction = 'down', disabled, value, defaultValue, onChange, visible, defaultVisible, onVisible, onVisibleChange, awayClosable = true, maskClosable = true, arrow, onClick, popupProps, separator, placeholder, _itemShow, ...restProps } = props;
+    const [bem] = useBem('dropdown');
+    const itemRef = useRef(null);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+    });
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const [popoverVisible, setPopoverVisible] = useState(innerVisible);
+    const [realVisible, setRealVisible] = useState(innerVisible);
+    const handleOptionClick = useEvent((option) => {
+        if (!isNullish(option.value) && option.value !== innerValue) {
+            setInnerValue(option.value);
+        }
+        setInnerVisible(false);
+    });
+    const handleItemClick = useEvent((event) => {
+        if (!disabled) {
+            onClick?.(event);
+            setInnerVisible(!innerVisible);
+        }
+    });
+    const handleRequestClose = useEvent(() => {
+        setInnerVisible(false);
+    });
+    const handleMaskClick = useEvent(() => {
+        if (maskClosable) {
+            setInnerVisible(false);
+        }
+    });
+    const handleAwayClick = useEvent(() => {
+        if (awayClosable) {
+            setInnerVisible(false);
+        }
+    });
+    const [popupInset, setPopupInset] = useState({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    });
+    const [awayInset, setAwayInset] = useState({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    });
+    const setPosition = useEvent(() => {
+        if (innerVisible) {
+            getRectByElement(itemRef.current).then((res) => {
+                const info = Taro.getSystemInfoSync();
+                const popupInset = {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                };
+                const awayInset = {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                };
+                if (direction === 'down') {
+                    popupInset.top = res.bottom;
+                    popupInset.bottom = 0;
+                    awayInset.top = 0;
+                    awayInset.bottom = info.windowHeight - res.bottom;
+                }
+                else {
+                    popupInset.top = 0;
+                    popupInset.bottom = info.windowHeight - res.top;
+                    awayInset.top = res.top;
+                    awayInset.bottom = 0;
+                }
+                setPopupInset(popupInset);
+                setAwayInset(awayInset);
+                setRealVisible(true);
+            });
+        }
+    });
+    useEffect(() => {
+        setPosition();
+        if (!innerVisible) {
+            setRealVisible(false);
+        }
+    }, [innerVisible, direction]);
+    useResize(() => {
+        setPosition();
+    }, 150);
+    const handleEnter = () => {
+        setPopoverVisible(true);
+        onVisibleChange?.(true);
+    };
+    const handleExited = () => {
+        setPopoverVisible(false);
+        onVisibleChange?.(false);
+    };
+    const toggle = useEvent((visible) => {
+        if (isBoolean(visible)) {
+            setInnerVisible(visible);
+        }
+        else {
+            setInnerVisible(!setInnerVisible);
+        }
+    });
+    useImperativeHandle(ref, () => ({
+        toggle,
+    }), []);
+    const renderLabel = () => {
+        return (!isNullish(label) && (_jsxs(Ellipsis, { className: classNames(bem.e('label'), bem.em('label', 'disabled', disabled)), children: [label, !isNullish(title) || !isNullish(innerValue) ? separator : null] })));
+    };
+    const renderTitle = () => {
+        return (!isNullish(title) && (_jsx(Ellipsis, { className: classNames(bem.e('title'), bem.em('title', 'disabled', disabled), bem.em('title', 'has-label', !!label)), children: title })));
+    };
+    const renderPlaceholder = () => {
+        return (!isNullish(placeholder) && (_jsx(View, { className: classNames(bem.e('placeholder'), bem.em('placeholder', 'has-label', !!label)), children: placeholder })));
+    };
+    const renderValue = () => {
+        return !isNullish(innerValue) ? (_jsx(Ellipsis, { className: classNames(bem.e('value'), bem.em('value', 'disabled', disabled), bem.em('value', 'has-label', !!label)), children: options.find((option) => option.value === innerValue)?.label })) : (renderPlaceholder());
+    };
+    const renderArrow = () => {
+        return (_jsx(View, { className: classNames(bem.e('arrow'), bem.em('arrow', direction)), children: arrow ? (arrow(realVisible, direction)) : (_jsx(Icon, { name: realVisible ? 'caret-up' : 'caret-down', className: classNames(bem.e('arrow-icon'), bem.em('arrow-icon', 'show', realVisible)) })) }));
+    };
+    const renderAway = () => {
+        return (_jsx(View, { style: awayInset, className: classNames(bem.e('away'), bem.em('away', 'show', realVisible)), onClick: handleAwayClick, catchMove: true }));
+    };
+    const renderPopover = () => {
+        return (_jsx(View, { className: classNames(bem.e('popover')), style: popupInset, children: _jsxs(Popup, { ...popupProps, effect: mapDirectionPlacement[direction], visible: realVisible, className: bem.e('popup'), contentClass: bem.e('content'), onEnter: handleEnter, onExited: handleExited, onMaskClick: handleMaskClick, catchMove: true, onlyPopup: true, onRequestClose: handleRequestClose, children: [children ?? (_jsx(List, { className: bem.e('options'), inlaid: true, children: options.map((option, index) => {
+                            const { value, ...restProps } = option;
+                            return (_createElement(DropdownOption, { ...restProps, key: index, active: value === innerValue, onClick: () => handleOptionClick(option) }));
+                        }) })), _jsx(Halfline, { direction: direction === 'up' ? 'bottom' : 'top' })] }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { disabled: disabled, children: ({ pressed }) => (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'show', realVisible), bem.em('item', 'some-show', _itemShow), bem.em('item', 'disabled', disabled), bem.em('item', 'pressed', pressed), className), style: style, ref: itemRef, onClick: handleItemClick, children: [renderLabel(), renderTitle(), renderValue(), renderArrow()] })) }), _jsxs(Modal, { visible: realVisible || innerVisible || popoverVisible, children: [renderPopover(), renderAway()] })] }));
+});
+export default DropdownItem;

package/dist/dropdown/Option.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface DropdownOptionProps extends Omit<BaseProps, 'children'> {
+    label?: ReactNode;
+    value?: number | string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export declare const DropdownOption: FC<DropdownOptionProps>;
+export default DropdownOption;

package/dist/dropdown/Option.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { List } from '../list';
+import { useBem } from '../use';
+import { Text } from '@tarojs/components';
+export const DropdownOption = (props) => {
+    const { className, style, label, active, onClick, ...restProps } = props;
+    const [bem] = useBem('dropdown');
+    return (_jsx(List.Item, { ...restProps, className: classNames(bem.e('option'), bem.em('option', 'active', active), className), style: style, title: _jsx(Text, { className: classNames(bem.e('option-label'), bem.em('option-label', 'active', active)), children: label }), linkable: true, arrow: _jsx(Icon, { name: "success", className: classNames(bem.e('option-icon'), bem.em('option-icon', 'active', active)) }), onClick: onClick }));
+};
+export default DropdownOption;

package/dist/dropdown/index.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { DropdownItem, DropdownItemProps } from './Item';
+import { DropdownOption } from './Option';
+import { BaseProps } from '../base';
+export * from './Item';
+export * from './Option';
+export interface DropdownProps extends Omit<BaseProps, 'children'> {
+    children?: ReactElement | ReactElement[];
+    direction?: DropdownItemProps['direction'];
+    disabled?: boolean;
+    awayClosable?: boolean;
+    maskClosable?: boolean;
+    arrow?: (visible: boolean) => ReactNode;
+}
+export interface DropdownFC extends FC<DropdownProps> {
+    Item: typeof DropdownItem;
+    Option: typeof DropdownOption;
+}
+export declare const Dropdown: DropdownFC;
+export default Dropdown;

package/dist/dropdown/index.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, useMemo, useState, useRef, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { DropdownItem } from './Item';
+import { DropdownOption } from './Option';
+import { pickNonNullish } from '../utils';
+import { useBem, useEvent } from '../use';
+export * from './Item';
+export * from './Option';
+export const Dropdown = (props) => {
+    const { className, style, children, direction, disabled, awayClosable, maskClosable, arrow, ...restProps } = props;
+    const [bem] = useBem('dropdown');
+    const [visibleList, setVisibleList] = useState([]);
+    const show = useMemo(() => {
+        return visibleList.some((item) => item);
+    }, [visibleList]);
+    const handleVisible = (visible, index) => {
+        setVisibleList((visibleList) => {
+            visibleList[index] = visible;
+            return [...visibleList];
+        });
+    };
+    const elementsRef = useRef([]);
+    const collectElements = useEvent((element, index) => {
+        elementsRef.current[index] = element;
+    });
+    const toggleItem = (activeIndex) => {
+        elementsRef.current.forEach((item, index) => {
+            if (activeIndex !== index) {
+                item.toggle(false);
+            }
+        });
+    };
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), bem.m('show', show), className), style: style, children: Children.toArray(children).map((element, index) => {
+            return cloneElement(element, {
+                ref: (el) => collectElements(el, index),
+                onVisibleChange(visible) {
+                    handleVisible(visible, index);
+                    element.props.onVisibleChange?.(visible);
+                },
+                onClick(event) {
+                    toggleItem(index);
+                    element.props.onClick?.(event);
+                },
+                _itemShow: show,
+                ...pickNonNullish({
+                    direction,
+                    disabled,
+                    awayClosable,
+                    maskClosable,
+                    arrow,
+                }, element.props),
+            });
+        }) }));
+};
+Dropdown.Item = DropdownItem;
+Dropdown.Option = DropdownOption;
+export default Dropdown;