sard 1.0.0-canary.0

package/dist/picker/index.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useImperativeHandle, useRef, } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent, useUpdateEffect } from '../use';
+import { arrayEqual, isAndroid, isIOS, isNullish, nestedToMulti, toArray, } from '../utils';
+import { PickerView, PickerViewColumn } from './PickerView';
+import Popout from '../popout';
+export * from './PickerView';
+const getValueOrLabelByOption = (option, valueOrLabelKey) => {
+    const isPrimitive = option !== null && typeof option !== 'object';
+    return (isPrimitive ? option : option[valueOrLabelKey]);
+};
+const getValuesByOptions = (options, valueKey) => {
+    return options.map((option) => getValueOrLabelByOption(option, valueKey));
+};
+const getColumnsType = (columns, optionKeys) => {
+    const firstColumn = columns[0];
+    if (Array.isArray(firstColumn)) {
+        return 'multi';
+    }
+    if (firstColumn &&
+        typeof firstColumn === 'object' &&
+        Array.isArray(firstColumn[optionKeys.children])) {
+        return 'cascader';
+    }
+    return 'single';
+};
+const getIndexesByValue = (value, columns, optionKeys) => {
+    const type = getColumnsType(columns, optionKeys);
+    function recurse(columns, i = 0) {
+        let index = columns.findIndex((option) => option[optionKeys.value] === value[i]);
+        if (index === -1) {
+            index = 0;
+        }
+        const option = columns[index];
+        const nextColumn = option?.[optionKeys.children];
+        if (Array.isArray(nextColumn)) {
+            return [index, ...recurse(nextColumn, ++i)];
+        }
+        return [index];
+    }
+    if (type === 'cascader') {
+        return recurse(columns);
+    }
+    if (type === 'single') {
+        columns = [columns];
+    }
+    return columns.map((column, index) => {
+        const optionIndex = column.findIndex((option) => getValueOrLabelByOption(option, optionKeys.value) === value[index]);
+        return Math.max(optionIndex, 0);
+    });
+};
+const getOptionsByIndexes = (indexes, columns, optionKeys) => {
+    function recurse(columns, i = 0) {
+        const index = Math.min(indexes[i], columns.length - 1);
+        const option = columns[index];
+        const nextColumn = option?.[optionKeys.children];
+        if (Array.isArray(nextColumn)) {
+            return [option, ...recurse(nextColumn, ++i)];
+        }
+        return [option];
+    }
+    switch (getColumnsType(columns, optionKeys)) {
+        case 'single':
+            return [columns[indexes[0]]];
+        case 'multi':
+            return columns.map((column, i) => column[indexes[i]]);
+        case 'cascader':
+            return recurse(columns);
+    }
+};
+function getCascaderValidIndexes(indexes, columns, optionKeys) {
+    function recurse(columns, i = 0) {
+        let index = Math.min(indexes[i], columns.length - 1);
+        const option = columns[index];
+        if (!option) {
+            index = 0;
+        }
+        const nextColumn = option?.[optionKeys.children];
+        if (Array.isArray(nextColumn)) {
+            return [index, ...recurse(nextColumn, ++i)];
+        }
+        return [index];
+    }
+    return recurse(columns);
+}
+function getMaySingleValueByOptions(options, optionKeys, columns) {
+    const values = getValuesByOptions(options, optionKeys.value);
+    getColumnsType(columns, optionKeys);
+    return getColumnsType(columns, optionKeys) === 'single' ? values[0] : values;
+}
+const defaultOptionKeys = {
+    label: 'label',
+    value: 'value',
+    children: 'children',
+};
+function defaultOutletFormatter(labels) {
+    return labels.join('/');
+}
+function outletFormatter(props, value) {
+    if (isNullish(value) || (Array.isArray(value) && value.length === 0)) {
+        return '';
+    }
+    const optionKeys = Object.assign({}, defaultOptionKeys, props.optionKeys);
+    const indexes = getIndexesByValue(toArray(value), props.columns || [], optionKeys);
+    const options = getOptionsByIndexes(indexes, props.columns || [], optionKeys);
+    const labels = options.map((option) => getValueOrLabelByOption(option, optionKeys.label));
+    const formatter = props.outletFormatter ?? Picker.defaultOutletFormatter;
+    return formatter(labels);
+}
+export const Picker = forwardRef((props, ref) => {
+    const { className, columns = [], value, defaultValue, optionKeys, immediateChange = true, onChange, withPopout, popoutProps, outletFormatter, ...restProps } = props;
+    void outletFormatter;
+    const [bem] = useBem('picker');
+    const fieldKeys = Object.assign({}, defaultOptionKeys, optionKeys);
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: () => {
+            return [];
+        },
+    });
+    const memoFinalColumns = useRef();
+    const finalColumns = useMemo(() => {
+        if (memoFinalColumns.current && (!innerValue || innerValue.length === 0)) {
+            return memoFinalColumns.current;
+        }
+        switch (getColumnsType(columns, fieldKeys)) {
+            case 'single':
+                return [columns];
+            case 'multi':
+                return columns;
+            case 'cascader':
+                return nestedToMulti(columns, toArray(innerValue), fieldKeys);
+        }
+    }, [columns, innerValue]);
+    memoFinalColumns.current = finalColumns;
+    const [columnIndexes, setColumnIndexes] = useState(() => {
+        return getIndexesByValue(toArray(innerValue), columns, fieldKeys);
+    });
+    useUpdateEffect(() => {
+        if (!isNullish(value)) {
+            const indexes = getIndexesByValue(toArray(value), columns, fieldKeys);
+            if (!arrayEqual(indexes, columnIndexes)) {
+                setColumnIndexes(indexes);
+            }
+        }
+    }, [value]);
+    const handleChange = useEvent((event) => {
+        let indexes = event.detail.value;
+        const columnType = getColumnsType(columns, fieldKeys);
+        if (columnType === 'cascader') {
+            // 多列联动
+            // bug: immediateChange 设为真时，
+            //  后面列未滚动完，前面的列开始滚动,这时设置picker-view的value值时后面的列不会滚动到指定位置；
+            //  如果后面的旧列比新列数据多，且滚动到底部了，会显示空白效果，因为往上滚动了。
+            //  解决：在 handlePickEnd 回调中纠正数据。
+            {
+                let startIndex = -1;
+                const nextIndexes = [];
+                for (let i = 0; i < columnIndexes.length; i++) {
+                    if (startIndex < 0 && columnIndexes[i] !== indexes[i]) {
+                        startIndex = i;
+                    }
+                    nextIndexes.push(startIndex > -1 && i > startIndex ? 0 : indexes[i]);
+                }
+                indexes = nextIndexes;
+            }
+            // 多列同时滚动时下标可能会超过当前列的长度，这里要做一个限制
+            {
+                const validIndexes = getCascaderValidIndexes(indexes, columns, fieldKeys);
+                if (!arrayEqual(indexes, validIndexes)) {
+                    indexes = validIndexes;
+                }
+            }
+        }
+        const selectedOptions = getOptionsByIndexes(indexes, columns, fieldKeys);
+        if (!arrayEqual(indexes, columnIndexes)) {
+            setColumnIndexes(indexes);
+        }
+        setInnerValue(getMaySingleValueByOptions(selectedOptions, fieldKeys, columns), selectedOptions, indexes);
+    });
+    const handlePickEnd = () => {
+        if (immediateChange && getColumnsType(columns, fieldKeys) === 'cascader') {
+            setColumnIndexes((indexes) => indexes.slice());
+        }
+    };
+    const getValueForcibly = useEvent(() => {
+        const options = getOptionsByIndexes(columnIndexes, columns, fieldKeys);
+        return getMaySingleValueByOptions(options, fieldKeys, columns);
+    });
+    useImperativeHandle(ref, () => ({
+        getValueForcibly,
+    }), []);
+    const renderElement = () => {
+        return (_jsx(CustomWrapper, { children: _jsx(View, { children: _jsx(PickerView, { ...restProps, className: classNames(bem.b(), className), indicatorClass: bem.e('indicator'), maskClass: bem.e('mask'), ...(isAndroid
+                        ? {
+                            // tips: 官方文档对RN无效，以下设置可作用于安卓
+                            // https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/picker-view/PickerView.tsx
+                            indicatorStyle: { height: 48, lineHeight: 48 },
+                            itemStyle: { height: 48, lineHeight: 48, fontSize: 16 },
+                        }
+                        : isIOS
+                            ? {
+                                itemStyle: { fontSize: 16, height: 240 },
+                            }
+                            : null), value: columnIndexes, immediateChange: immediateChange, onChange: handleChange, onPickEnd: handlePickEnd, children: finalColumns.map((column, columnIndex) => {
+                        return (_jsx(PickerViewColumn, { children: column.map((option, optionIndex) => {
+                                const isObject = option instanceof Object;
+                                return (_jsx(View, { className: bem.e('item'), children: isObject ? option[fieldKeys.label] : option }, optionIndex));
+                            }) }, columnIndex));
+                    }) }) }) }));
+    };
+    if (withPopout) {
+        return _jsx(Popout, { ...popoutProps, children: renderElement() });
+    }
+    return renderElement();
+});
+Picker.alwaysHasValue = true;
+Picker.outletFormatter = outletFormatter;
+Picker.defaultOutletFormatter = defaultOutletFormatter;
+export default Picker;

package/dist/picker/index.scss

@@ -0,0 +1,138 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-picker-height: 240px !default;
+
+$sar-picker-item-height: 48px !default;
+$sar-picker-item-count: 5 !default;
+$sar-picker-item-font-size: $sar-text-lg !default;
+$sar-picker-item-color: $sar-body-color !default;
+
+$sar-picker-height: $sar-picker-item-height * $sar-picker-item-count !default;
+$sar-picker-half-height: math.div(
+  $sar-picker-height - $sar-picker-item-height,
+  2
+) !default;
+
+$sar-picker-indicator-border-color: $sar-border-color !default;
+
+$sar-picker-mask-bg-image: linear-gradient(
+    to bottom,
+    rgba($sar-emphasis-bg-color, 0.95),
+    rgba($sar-emphasis-bg-color, 0.6)
+  ),
+  linear-gradient(
+    to top,
+    rgba($sar-emphasis-bg-color, 0.95),
+    rgba($sar-emphasis-bg-color, 0.6)
+  ) !default;
+
+// 暗黑模式
+$sar-picker-item-dark-color: $sar-dark-body-color !default;
+$sar-picker-indicator-dark-border-color: $sar-dark-border-color !default;
+$sar-picker-mask-dark-bg-image: linear-gradient(
+    to bottom,
+    rgba($sar-dark-emphasis-bg-color, 0.95),
+    rgba($sar-dark-emphasis-bg-color, 0.6)
+  ),
+  linear-gradient(
+    to top,
+    rgba($sar-dark-emphasis-bg-color, 0.95),
+    rgba($sar-dark-emphasis-bg-color, 0.6)
+  ) !default;
+// #endvariables
+
+@include bem(picker) {
+  @include b() {
+    @include universal;
+    height: $sar-picker-height;
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    flex-direction: row;
+    overflow: hidden;
+    -webkit-user-drag: none;
+  }
+
+  @include e(column) {
+    @include universal;
+    flex: 1;
+    width: 0;
+    height: 100%;
+    touch-action: pan-x;
+  }
+
+  @include e(mask) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    flex: auto;
+    pointer-events: none;
+    background-image: $sar-picker-mask-bg-image;
+    background-position: top, bottom;
+    background-repeat: no-repeat;
+    background-size: 100% $sar-picker-half-height;
+  }
+
+  @include e(indicator) {
+    @include universal;
+    top: $sar-picker-half-height;
+    width: 100%;
+    height: $sar-picker-item-height;
+    flex: none;
+    align-items: center;
+    pointer-events: none;
+    &::before,
+    &::after {
+      border-color: $sar-picker-indicator-border-color;
+    }
+  }
+
+  @include e(item-group) {
+    @include universal;
+    width: 100%;
+    pointer-events: auto;
+    will-change: transform;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+  }
+
+  @include e(item) {
+    @include universal;
+    flex: none;
+    height: $sar-picker-item-height;
+    line-height: $sar-picker-item-height;
+    font-size: $sar-picker-item-font-size;
+    text-align: center;
+    color: $sar-picker-item-color;
+
+    display: block;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@include theme(dark) {
+  @include bem(picker) {
+    @include e(mask) {
+      background-image: $sar-picker-mask-dark-bg-image;
+    }
+
+    @include e(indicator) {
+      &::before,
+      &::after {
+        border-color: $sar-picker-indicator-dark-border-color;
+      }
+    }
+
+    @include e(item) {
+      color: $sar-picker-item-dark-color;
+    }
+  }
+}

package/dist/popout/index.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+import { PopupProps } from '../popup';
+import { ButtonProps } from '../button';
+export type PopoutCloseType = 'close' | 'cancel' | 'confirm';
+export interface PopoutProps extends PopupProps {
+    title?: ReactNode;
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: ButtonProps;
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: ButtonProps;
+    showClose?: boolean;
+    showFooter?: boolean;
+    type?: 'compact' | 'loose';
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    maskClosable?: boolean;
+    onClose?: () => void | Promise<any>;
+    onCancel?: () => void | Promise<any>;
+    onConfirm?: () => void | Promise<any>;
+}
+export declare const Popout: FC<PopoutProps>;
+export default Popout;

package/dist/popout/index.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { Popup } from '../popup';
+import { Button } from '../button';
+import { isFunction, isNullish, noop } from '../utils';
+import { useEvent, useControllableValue, useBem } from '../use';
+import useTranslate from '../locale/useTranslate';
+import Ellipsis from '../ellipsis';
+import SafeArea from '../safe-area';
+const CLOSE = 'close';
+const CANCEL = 'cancel';
+const CONFIRM = 'confirm';
+export const Popout = (props) => {
+    const { t } = useTranslate('popout');
+    const { className, style, children, contentClass, contentStyle, onMaskClick, title, showCancel = false, cancelText = t('cancel'), cancelProps, showConfirm = true, confirmText = t('confirm'), confirmProps, showClose = true, showFooter = true, type = 'loose', visible, defaultVisible, onVisible, maskClosable = true, onClose, onCancel, onConfirm, ...restProps } = props;
+    const [bem] = useBem('popout');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const [loading, setLoading] = useState({
+        cancel: false,
+        confirm: 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 = useEvent(() => {
+        perhapsClose(CLOSE, onClose);
+    });
+    const handleCancel = useEvent(() => {
+        perhapsClose(CANCEL, onCancel);
+    });
+    const handleConfirm = useEvent(() => {
+        perhapsClose(CONFIRM, onConfirm);
+    });
+    const renderCancelButton = (type, theme, round, placement) => {
+        return (_jsx(Button, { className: classNames(bem.e(`${placement}-cancel`), bem.e(`${placement}-button`)), type: type, theme: theme, round: round, loading: loading.cancel, ...cancelProps, onClick: handleCancel, children: cancelText }));
+    };
+    const renderConfirmButton = (type, round, placement) => {
+        return (_jsx(Button, { className: classNames(bem.e(`${placement}-confirm`), bem.e(`${placement}-button`)), type: type, theme: "primary", round: round, loading: loading.confirm, ...confirmProps, onClick: handleConfirm, children: confirmText }));
+    };
+    const renderHeader = () => {
+        return (_jsxs(View, { className: classNames(bem.e('header'), bem.em('header', type)), children: [type === 'compact' && (_jsx(View, { className: bem.e('button-wrap'), children: renderCancelButton('pale-text', 'secondary', false, 'header') })), !isNullish(title) && (_jsx(Ellipsis, { className: bem.e('title'), children: title })), type === 'compact' && (_jsx(View, { className: bem.e('button-wrap'), children: renderConfirmButton('pale-text', false, 'header') })), type === 'loose' && showClose && (_jsx(Button, { className: bem.e('close'), type: "pale-text", theme: "secondary", size: "large", onClick: handleClose, iconProps: {
+                        name: 'close',
+                    } }))] }));
+    };
+    const renderFooter = () => {
+        return (showFooter &&
+            type === 'loose' && (_jsxs(View, { className: bem.e('footer'), children: [showCancel && renderCancelButton('pale', 'primary', true, 'footer'), showConfirm && renderConfirmButton('default', true, 'footer')] })));
+    };
+    return (_jsxs(Popup, { ...restProps, effect: "slide-bottom", visible: innerVisible, className: classNames(bem.e('popup'), className), style: style, contentClass: classNames(bem.b(), contentClass), contentStyle: contentStyle, onMaskClick: handleMaskClick, onRequestClose: handleRequestClose, children: [renderHeader(), children, renderFooter(), _jsx(SafeArea, { direction: "bottom" })] }));
+};
+export default Popout;

package/dist/popout/index.scss

@@ -0,0 +1,136 @@
+@import '../style/base.scss';
+// #variables
+$sar-popout-z-index: 1100 !default;
+
+$sar-popout-border-top-radius: $sar-rounded-xl !default;
+$sar-popout-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-popout-close-padding: 16px !default;
+$sar-popout-close-font-size: $sar-text-lg !default;
+$sar-popout-close-color: $sar-secondary-color !default;
+
+$sar-popout-header-compact-height: 44px !default;
+$sar-popout-header-loose-height: 44px !default;
+$sar-popout-header-loose-padding-x: $sar-popout-close-padding * 2 +
+  $sar-popout-close-font-size !default;
+
+$sar-popout-title-max-width: 65% !default;
+$sar-popout-title-font-size: $sar-text-lg !default;
+$sar-popout-title-color: $sar-emphasis-color !default;
+
+$sar-popout-button-wrap-min-width: 80px !default;
+
+$sar-popout-footer-gap-y: 10px !default;
+$sar-popout-footer-gap-x: 16px !default;
+
+$sar-popout-button-gap: 16px !default;
+
+// 暗黑模式
+$sar-popout-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-popout-close-dark-color: $sar-dark-secondary-color !default;
+$sar-popout-title-dark-color: $sar-dark-emphasis-color !default;
+// #endvariables
+
+@include bem(popout) {
+  @include b() {
+    max-height: 100%;
+    border-top-left-radius: $sar-popout-border-top-radius;
+    border-top-right-radius: $sar-popout-border-top-radius;
+    background-color: $sar-popout-bg-color;
+  }
+
+  @include e(popup) {
+    z-index: $sar-popout-z-index;
+  }
+
+  @include e(header) {
+    @include universal;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    @include m(compact) {
+      height: $sar-popout-header-compact-height;
+    }
+
+    @include m(loose) {
+      height: $sar-popout-header-loose-height;
+      padding-left: $sar-popout-header-loose-padding-x;
+      padding-right: $sar-popout-header-loose-padding-x;
+    }
+  }
+
+  @include e(button-wrap) {
+    @include universal;
+    height: 100%;
+    min-width: $sar-popout-button-wrap-min-width;
+  }
+
+  @include e(header-button) {
+    height: 100%;
+  }
+
+  @include e(header-cancel) {
+    margin-right: auto;
+  }
+
+  @include e(header-confirm) {
+    margin-left: auto;
+  }
+
+  @include e(title) {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 0;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    font-size: $sar-popout-title-font-size;
+    font-weight: $sar-font-bold;
+    color: $sar-popout-title-color;
+  }
+
+  @include e(close) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    padding: 0 $sar-popout-close-padding;
+    border-width: 0;
+    font-size: $sar-popout-close-font-size;
+    color: $sar-popout-close-color;
+  }
+
+  @include e(footer) {
+    @include universal;
+    flex-direction: row;
+    gap: $sar-popout-button-gap;
+    align-items: center;
+    padding: $sar-popout-footer-gap-y $sar-popout-footer-gap-x;
+  }
+
+  @include e(footer-button) {
+    flex: 1 1 0;
+  }
+}
+
+@include theme(dark) {
+  @include bem(popout) {
+    @include b() {
+      background-color: $sar-popout-dark-bg-color;
+    }
+
+    @include e(title) {
+      color: $sar-popout-title-dark-color;
+    }
+
+    @include e(close) {
+      color: $sar-popout-close-dark-color;
+    }
+  }
+}

package/dist/popout-input/index.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { PopoutProps } from '../popout';
+import { InputProps } from '../input';
+import { BaseProps } from '../base';
+export interface PopoutInputProps extends BaseProps {
+    value?: any;
+    defaultValue?: any;
+    onChange?: (value: any) => void;
+    trigger?: string;
+    valuePropName?: string;
+    inputProps?: InputProps;
+    disabled?: boolean;
+    readOnly?: boolean;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    title?: ReactNode;
+    children?: ReactElement<{
+        withPopout?: boolean;
+        popoutProps?: PopoutProps;
+        [key: PropertyKey]: any;
+    }, {
+        (...args: any[]): any;
+        alwaysHasValue?: boolean;
+        outletFormatter?: (props: Record<string, any>, value: any) => string;
+    }>;
+}
+export declare const PopoutInput: FC<PopoutInputProps>;
+export default PopoutInput;