sard 1.0.0-canary.0

package/dist/cascader/index.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, ScrollView, Text, View } from '@tarojs/components';
+import { Tabs } from '../tabs';
+import Icon from '../icon';
+import useTranslate from '../locale/useTranslate';
+import { useBem, useControllableValue } from '../use';
+import { isFunction, isNullish, isRN } from '../utils';
+import Pressable from '../pressable';
+import Popout from '../popout';
+import { Animated, Easing } from '../animated';
+import Loading from '../loading';
+import CSSTransition from '../transition/CSSTransition';
+const defaultFieldNames = {
+    label: 'label',
+    value: 'value',
+    disabled: 'disabled',
+    children: 'children',
+};
+function getSelectedOptionsByValue(options, value, fieldNames) {
+    for (const option of options) {
+        if (option[fieldNames.value] === value) {
+            return [option];
+        }
+        if (Array.isArray(option[fieldNames.children])) {
+            const selectedOptions = getSelectedOptionsByValue(option[fieldNames.children], value, fieldNames);
+            if (selectedOptions) {
+                return [option, ...selectedOptions];
+            }
+        }
+    }
+}
+function defaultOutletFormatter(labels) {
+    return labels.join('/');
+}
+function outletFormatter(props, value) {
+    if (isNullish(value)) {
+        return '';
+    }
+    const fieldNames = Object.assign({}, defaultFieldNames, props.fieldNames);
+    const selectedOptions = getSelectedOptionsByValue(props.options || [], value, fieldNames);
+    if (!selectedOptions) {
+        return '';
+    }
+    const labels = selectedOptions.map((option) => option[fieldNames.label]);
+    const formatter = props.outletFormatter ?? Cascader.defaultOutletFormatter;
+    return formatter(labels);
+}
+const defaultOptions = [];
+export const Cascader = (props) => {
+    const { t } = useTranslate('cascader');
+    const { className, style, value, defaultValue, onChange, options = defaultOptions, fieldNames = {}, placeholder = t('pleaseSelect'), onSelect, labelRender, optionTop, optionBottom, withPopout, popoutProps, outletFormatter, ...restProps } = props;
+    void outletFormatter;
+    const [bem] = useBem('cascader');
+    const fieldkeys = useMemo(() => Object.assign({}, defaultFieldNames, fieldNames), [fieldNames]);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+    });
+    const tempValue = useRef(innerValue);
+    const [tabsActiveKey, setTabsActiveKey] = useState(0);
+    const handleTabsChange = (index) => {
+        setTabsActiveKey(index);
+    };
+    const [tabs, setTabs] = useState([]);
+    const updateTabs = () => {
+        let nextTabs;
+        if (tempValue.current === undefined) {
+            nextTabs = [
+                {
+                    options,
+                    selected: null,
+                },
+            ];
+        }
+        else {
+            const selectedOptions = getSelectedOptionsByValue(options, tempValue.current, fieldkeys);
+            if (selectedOptions) {
+                let nextOptions = options;
+                nextTabs = selectedOptions.map((option) => {
+                    const tab = {
+                        options: nextOptions,
+                        selected: option,
+                    };
+                    nextOptions = option.children;
+                    return tab;
+                });
+                if (nextOptions) {
+                    nextTabs.push({
+                        options: nextOptions,
+                        selected: null,
+                    });
+                }
+            }
+        }
+        if (nextTabs) {
+            setTabs(nextTabs);
+            setTabsActiveKey(nextTabs.length - 1);
+        }
+    };
+    const isLastOption = (option) => {
+        return !Array.isArray(option[fieldkeys.children]);
+    };
+    const handleOptionClick = (option, tabIndex) => {
+        let nextTabs = tabs.slice();
+        nextTabs[tabIndex].selected = option;
+        const selectBack = tabIndex < nextTabs.length - 1;
+        if (selectBack) {
+            nextTabs = nextTabs.slice(0, tabIndex + 1);
+        }
+        if (!isLastOption(option)) {
+            const nextTab = {
+                options: option[fieldkeys.children],
+                selected: null,
+            };
+            nextTabs.push(nextTab);
+            setTabsActiveKey(nextTabs.length - 1);
+        }
+        else {
+            // finish
+            setTabsActiveKey(tabIndex);
+            setInnerValue(option[fieldkeys.value], nextTabs.map((tab) => tab.selected));
+        }
+        tempValue.current = option[fieldkeys.value];
+        setTabs(nextTabs);
+        onSelect?.(option, tabIndex);
+    };
+    useEffect(() => {
+        updateTabs();
+    }, [options]);
+    useEffect(() => {
+        if (value !== undefined) {
+            if (tabs.some((tab) => tab.selected?.[fieldkeys.value] === value)) {
+                return;
+            }
+        }
+        tempValue.current = value;
+        updateTabs();
+    }, [value]);
+    const renderOption = (option, selectedOption, tabIndex) => {
+        const value = option[fieldkeys.value];
+        const selected = selectedOption && selectedOption[fieldkeys.value] === value;
+        return (_jsx(Pressable, { disabled: option[fieldkeys.disabled], children: ({ pressed }) => (_jsxs(View, { className: classNames(bem.e('option'), bem.em('option', 'selected', selected), bem.em('option', 'disabled', option[fieldkeys.disabled]), bem.em('option', 'pressed', pressed)), style: style, onClick: () => {
+                    if (!option.disabled && (!selected || !isLastOption(option))) {
+                        handleOptionClick(option, tabIndex);
+                    }
+                }, children: [_jsx(Text, { className: classNames(bem.e('option-label'), bem.em('option-label', 'selected', selected)), children: labelRender
+                            ? labelRender(option, selected)
+                            : option[fieldkeys.label] }), _jsx(Icon, { name: "success", className: classNames(bem.e('option-icon'), bem.em('option-icon', 'selected', selected)) })] })) }, value));
+    };
+    const renderOptions = (options, selectedOption, tabIndex) => {
+        return (_jsxs(View, { className: bem.e('options'), children: [_jsx(ScrollView, { scrollY: true, showScrollbar: false, className: bem.e('scroll'), children: options.map((option) => {
+                        return renderOption(option, selectedOption, tabIndex);
+                    }) }), _jsx(CSSTransition, { in: options.length === 0, effect: "fade", timeout: 300, appear: true, mountOnEnter: true, unmountOnExit: true, className: bem.e('loading-wrapper'), children: _jsx(Loading, { size: 24, className: bem.e('loading') }) })] }));
+    };
+    const renderTabs = () => {
+        return (_jsx(Tabs, { scrollable: true, ...restProps, activeKey: String(tabsActiveKey), onChange: handleTabsChange, className: classNames(bem.b(), className), children: tabs.map((tab, tabIndex) => {
+                const { selected } = tab;
+                const tabLabel = selected ? selected[fieldkeys.label] : placeholder;
+                return _jsx(Tabs.Tab, { children: tabLabel }, tabIndex);
+            }) }));
+    };
+    // Animated >>>
+    const layoutWidth = useRef(0);
+    const firstOnLayout = useRef(false);
+    const anim = useMemo(() => new Animated.Value(-layoutWidth.current * Number(tabsActiveKey)), []);
+    const animateTranslateX = () => {
+        Animated.timing(anim, {
+            toValue: -layoutWidth.current * Number(tabsActiveKey),
+            duration: 300,
+            easing: Easing.inOut(Easing.quad),
+            useNativeDriver: true,
+        }).start();
+    };
+    useEffect(() => {
+        isRN && animateTranslateX();
+    }, [tabsActiveKey]);
+    // <<< Animated
+    const renderPanes = () => {
+        return (_jsx(View, { className: classNames(bem.e('container')), children: _jsx(Animated.View, { className: classNames(bem.e('wrapper')), style: {
+                    ...(isRN
+                        ? { transform: [{ translateX: anim }] }
+                        : {
+                            transform: `translateX(${-Number(tabsActiveKey) * 100}%)`,
+                        }),
+                }, ...(isRN
+                    ? {
+                        onLayout: (event) => {
+                            const width = event.nativeEvent.layout.width;
+                            if (!firstOnLayout.current) {
+                                anim.setValue(-width * Number(tabsActiveKey));
+                                firstOnLayout.current = true;
+                            }
+                            layoutWidth.current = width;
+                        },
+                    }
+                    : null), children: tabs.map((tab, tabIndex) => {
+                    const { options, selected } = tab;
+                    return (_jsxs(View, { className: classNames(bem.e('pane')), children: [isFunction(optionTop) ? optionTop(tabIndex) : optionTop, renderOptions(options, selected, tabIndex), isFunction(optionBottom)
+                                ? optionBottom(tabIndex)
+                                : optionBottom] }, tabIndex));
+                }) }) }));
+    };
+    const renderElement = () => {
+        return (_jsxs(CustomWrapper, { children: [renderTabs(), renderPanes()] }));
+    };
+    if (withPopout) {
+        return _jsx(Popout, { ...popoutProps, children: renderElement() });
+    }
+    return renderElement();
+};
+Cascader.outletFormatter = outletFormatter;
+Cascader.defaultOutletFormatter = defaultOutletFormatter;
+export default Cascader;

package/dist/cascader/index.scss

@@ -0,0 +1,130 @@
+@import '../style/base.scss';
+// #variables
+$sar-cascader-selected-color: $sar-primary !default;
+
+$sar-cascader-options-height: 320px !default;
+
+$sar-cascader-option-padding-y: 8px !default;
+$sar-cascader-option-padding-x: 16px !default;
+$sar-cascader-option-font-size: $sar-text-base !default;
+$sar-cascader-option-line-height: 24px !default;
+$sar-cascader-option-active-bg-color: $sar-active-bg-color !default;
+
+$sar-cascader-loading-bg-color: $sar-emphasis-bg-color !default;
+$sar-cascader-loading-color: $sar-tertiary-color !default;
+
+// 暗黑模式
+$sar-cascader-option-active-dark-bg-color: $sar-dark-active-bg-color !default;
+$sar-cascader-loading-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-cascader-loading-dark-color: $sar-dark-tertiary-color !default;
+// #endvariables
+
+@include bem(cascader) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(container) {
+    @include universal;
+    overflow: hidden;
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    @include ifweb {
+      transition: transform $sar-duration;
+    }
+  }
+
+  @include e(pane) {
+    @include universal;
+    width: 100%;
+    flex: none;
+  }
+
+  @include e(options) {
+    @include universal;
+    flex-direction: row;
+    height: $sar-cascader-options-height;
+  }
+
+  @include e(scroll) {
+    height: 100%;
+  }
+
+  @include e(option) {
+    @include universal;
+    flex-direction: row;
+    padding: $sar-cascader-option-padding-y $sar-cascader-option-padding-x;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(disabled) {
+      @include disabled;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-cascader-option-active-bg-color;
+    }
+  }
+
+  @include e(option-label) {
+    font-size: $sar-cascader-option-font-size;
+    line-height: $sar-cascader-option-line-height;
+
+    @include m(selected) {
+      color: $sar-cascader-selected-color;
+      font-weight: $sar-font-bold;
+    }
+  }
+
+  @include e(option-icon) {
+    display: none;
+    margin-left: auto;
+
+    @include m(selected) {
+      display: flex;
+      color: $sar-cascader-selected-color;
+    }
+  }
+
+  @include e(loading-wrapper) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: $sar-cascader-loading-bg-color;
+  }
+
+  @include e(loading) {
+    color: $sar-cascader-loading-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(cascader) {
+    @include e(option) {
+      @include m(pressed) {
+        background-color: $sar-cascader-option-active-dark-bg-color;
+      }
+    }
+
+    @include e(loading-wrapper) {
+      background-color: $sar-cascader-loading-dark-bg-color;
+    }
+
+    @include e(loading) {
+      color: $sar-cascader-loading-dark-color;
+    }
+  }
+}

package/dist/checkbox/Group.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { InternalCheckGroupProps } from '../use/useInternalSelect';
+export type CheckboxGroupProps = InternalCheckGroupProps<'multiple'>;
+export declare const CheckboxGroup: FC<CheckboxGroupProps>;
+export default CheckboxGroup;

package/dist/checkbox/Group.js

@@ -0,0 +1,5 @@
+import { useInternalCheckGroup, } from '../use/useInternalSelect';
+export const CheckboxGroup = (props) => {
+    return useInternalCheckGroup('multiple', props);
+};
+export default CheckboxGroup;

package/dist/checkbox/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CheckboxGroup } from './Group';
+import { InternalCheckProps } from '../use/useInternalSelect';
+export * from './Group';
+export type CheckboxProps = InternalCheckProps;
+export interface CheckboxFC extends FC<CheckboxProps> {
+    Group: typeof CheckboxGroup;
+}
+export declare const Checkbox: CheckboxFC;
+export default Checkbox;

package/dist/checkbox/index.js

@@ -0,0 +1,8 @@
+import { CheckboxGroup } from './Group';
+import { useInternalSelect } from '../use/useInternalSelect';
+export * from './Group';
+export const Checkbox = ((props) => {
+    return useInternalSelect('multiple', 'checkbox', props);
+});
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;

package/dist/checkbox/index.scss

@@ -0,0 +1,78 @@
+@import '../style/base.scss';
+// #variables
+$sar-checkbox-icon-font-size: 20px !default;
+$sar-checkbox-icon-color: $sar-quaternary-color !default;
+$sar-checkbox-icon-checked-color: $sar-primary !default;
+$sar-checkbox-icon-transition-duration: $sar-duration !default;
+
+$sar-checkbox-label-margin-left: 8px !default;
+
+$sar-checkbox-margin-left: 20px !default;
+$sar-checkbox-margin-top: 10px !default;
+
+// 暗黑模式
+$sar-checkbox-icon-dark-color: $sar-dark-quaternary-color !default;
+$sar-checkbox-icon-checked-dark-color: $sar-primary !default;
+// #endvariables
+
+@include bem(checkbox) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    align-self: flex-start;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include e(icon) {
+    @include universal;
+    font-size: $sar-checkbox-icon-font-size;
+    color: $sar-checkbox-icon-color;
+    @include ifweb {
+      transition: color $sar-checkbox-icon-transition-duration;
+    }
+
+    @include m(checked) {
+      color: $sar-checkbox-icon-checked-color;
+    }
+
+    @include m(disabled) {
+      color: $sar-disabled-deep-bg-color;
+    }
+  }
+
+  @include e(label) {
+    @include universal;
+    flex-direction: row;
+    margin-left: $sar-checkbox-label-margin-left;
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(checkbox) {
+    @include e(icon) {
+      color: $sar-checkbox-icon-dark-color;
+
+      @include m(checked) {
+        color: $sar-checkbox-icon-checked-dark-color;
+      }
+
+      @include m(disabled) {
+        color: $sar-disabled-deep-bg-color;
+      }
+    }
+
+    @include e(label) {
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+  }
+}

package/dist/collapse/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface CollapseProps extends BaseProps {
+    visible?: boolean;
+    duration?: number;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+}
+export declare const Collapse: FC<CollapseProps>;
+export default Collapse;

package/dist/collapse/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { Transition } from '../transition/index';
+import { useBem, useEvent, useSelectorId, useSetTimeout } from '../use';
+import { filterNullish, getRectByElement } from '../utils';
+export const Collapse = (props) => {
+    const { className, style, children, visible, duration = 500, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps } = props;
+    const [bem] = useBem('collapse');
+    const collapseRef = useRef(null);
+    const contextId = useSelectorId();
+    const [show, setShow] = useState(visible);
+    const [collapsing, setCollapsing] = useState(false);
+    const [height, setHeight] = useState();
+    const [setHeightLater] = useSetTimeout((height) => {
+        setHeight(height);
+    }, 100);
+    const handleEnter = useEvent(() => {
+        getRectByElement(collapseRef.current, contextId).then((res) => {
+            setHeight(0);
+            setShow(true);
+            setCollapsing(true);
+            setHeightLater(res.height);
+        });
+        onEnter?.();
+    });
+    const handleEntering = useEvent(() => {
+        onEntering?.();
+    });
+    const handleEntered = useEvent(() => {
+        setHeight(undefined);
+        setCollapsing(false);
+        onEntered?.();
+    });
+    const handleExit = useEvent(() => {
+        getRectByElement(collapseRef.current, contextId).then((res) => {
+            setHeight(res.height);
+            setCollapsing(true);
+            setHeightLater(0);
+        });
+        onExit?.();
+    });
+    const handleExiting = useEvent(() => {
+        onExiting?.();
+    });
+    const handleExited = useEvent(() => {
+        setHeight(undefined);
+        setCollapsing(false);
+        setShow(false);
+        onExited?.();
+    });
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(Transition, { ...restProps, timeout: duration, in: visible, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, children: _jsx(View, { className: classNames(bem.b(), bem.m('show', show), bem.m('collapsing', collapsing), className), style: {
+                    ...style,
+                    ...filterNullish({
+                        height,
+                    }),
+                    transitionDuration: duration + 'ms',
+                }, children: _jsx(View, { className: bem.e('content'), ref: collapseRef, children: children }) }) }) }));
+};
+export default Collapse;

package/dist/collapse/index.rn.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface CollapseProps extends BaseProps {
+    visible?: boolean;
+    duration?: number;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+}
+export declare const Collapse: FC<CollapseProps>;
+export default Collapse;

package/dist/collapse/index.rn.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+import { Transition } from '../transition/index';
+import { useEvent } from '../use';
+export const Collapse = (props) => {
+    const { style, children, visible, duration = 500, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
+    const layoutHeight = useRef(0);
+    const [collapsing, setCollapsing] = useState(false);
+    const anim = useMemo(() => new Animated.Value(0), []);
+    const firstOnLayout = useRef(false);
+    const [contentStyle, setContentStyle] = useState({
+        position: visible ? 'relative' : 'absolute',
+    });
+    const collapseIn = () => {
+        Animated.timing(anim, {
+            toValue: layoutHeight.current,
+            duration,
+            useNativeDriver: false,
+        }).start();
+    };
+    const collapseOut = () => {
+        Animated.timing(anim, {
+            toValue: 0,
+            duration,
+            useNativeDriver: false,
+        }).start();
+    };
+    const handleEnter = useEvent(() => {
+        setContentStyle({
+            position: 'relative',
+        });
+        onEnter?.();
+    });
+    const handleEntering = useEvent(() => {
+        collapseIn();
+        setCollapsing(true);
+        onEntering?.();
+    });
+    const handleEntered = useEvent(() => {
+        setCollapsing(false);
+        onEntered?.();
+    });
+    const handleExit = useEvent(() => {
+        onExit?.();
+    });
+    const handleExiting = useEvent(() => {
+        collapseOut();
+        setCollapsing(true);
+        onExiting?.();
+    });
+    const handleExited = useEvent(() => {
+        setContentStyle({
+            position: 'absolute',
+        });
+        setCollapsing(false);
+        onExited?.();
+    });
+    return (_jsx(Transition, { timeout: duration, in: visible, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, children: _jsx(Animated.View, { style: {
+                ...style,
+                height: collapsing ? anim : visible ? undefined : 0,
+                position: 'relative',
+                overflow: collapsing || !visible ? 'hidden' : 'visible',
+            }, children: _jsx(View, { style: {
+                    width: '100%',
+                    ...contentStyle,
+                }, onLayout: (event) => {
+                    const height = event.nativeEvent.layout.height;
+                    if (!firstOnLayout.current) {
+                        anim.setValue(visible ? height : 0);
+                        firstOnLayout.current = true;
+                    }
+                    layoutHeight.current = height;
+                }, children: children }) }) }));
+};
+export default Collapse;

package/dist/collapse/index.scss

@@ -0,0 +1,31 @@
+@import '../style/base.scss';
+// #variables
+$sar-collapse-transition-duration: $sar-duration-slow !default;
+// #endvariables
+
+@include bem(collapse) {
+  @include b() {
+    @include universal;
+    position: absolute;
+    z-index: -10;
+    width: 100%;
+    overflow: hidden;
+    @include ifweb {
+      visibility: hidden;
+      transition: height $sar-collapse-transition-duration;
+    }
+  }
+
+  @include m(show) {
+    position: relative;
+    z-index: 0;
+    overflow: visible;
+    @include ifweb {
+      visibility: visible;
+    }
+  }
+
+  @include m(collapsing) {
+    overflow: hidden;
+  }
+}