sard 1.0.0-canary.0

package/dist/popout-input/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useMemo, useRef, } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent, useWatchStateSync, } from '../use';
+import { Input } from '../input';
+import Icon from '../icon';
+import { isEmptyValue, isNullish } from '../utils';
+import Pressable from '../pressable';
+export const PopoutInput = (props) => {
+    const { className, style, value, defaultValue, onChange, trigger = 'onChange', valuePropName = 'value', inputProps, disabled, readOnly, visible, defaultVisible, onVisible, title, children, ...restProps } = props;
+    const [bem] = useBem('popout-input');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+    });
+    const [tempValue, setTempValue] = useWatchStateSync(innerValue);
+    const alwaysHasValue = children?.type?.alwaysHasValue;
+    const targetRef = useRef();
+    const handleConfirm = useEvent(() => {
+        let currentTempValue = tempValue;
+        if (isNullish(tempValue) && alwaysHasValue) {
+            const value = targetRef.current.getValueForcibly();
+            currentTempValue = value;
+        }
+        setInnerValue(currentTempValue);
+    });
+    const confirmDisabled = useMemo(() => {
+        return isEmptyValue(tempValue);
+    }, [tempValue]);
+    const handlerClear = useEvent(() => {
+        setInnerValue(undefined);
+    });
+    const renderInput = ({ outletValue, disabled, readOnly, setVisible }) => {
+        return (_jsx(Pressable, { disabled: disabled || readOnly, children: ({ pressed }) => {
+                return (_jsx(View, { className: classNames(bem.b(), bem.m('disabled', disabled), bem.m('pressed', pressed)), onClick: (event) => {
+                        if (!disabled && !readOnly) {
+                            setVisible(true);
+                        }
+                        inputProps?.onClick?.(event);
+                    }, children: _jsx(Input, { inlaid: true, readOnly: readOnly, disabled: disabled, append: _jsx(Icon, { className: bem.e('arrow'), name: "caret-right" }), ...inputProps, addon: _jsx(View, { className: bem.e('seal') }), value: isNullish(outletValue) ? '' : String(outletValue), onClear: (event) => {
+                            handlerClear();
+                            inputProps?.onClear?.(event);
+                        }, style: inputProps?.style, className: inputProps?.className }) }));
+            } }));
+    };
+    const renderPopout = () => {
+        if (!isValidElement(children)) {
+            return null;
+        }
+        const targetProps = {
+            [valuePropName]: tempValue,
+            [trigger]: (value, ...restArgs) => {
+                setTempValue(value);
+                children.props?.[trigger]?.(value, ...restArgs);
+            },
+            withPopout: true,
+            popoutProps: {
+                ...children.props.popoutProps,
+                title,
+                visible: innerVisible,
+                onVisible: setInnerVisible,
+                confirmProps: {
+                    disabled: !alwaysHasValue && confirmDisabled,
+                },
+                onConfirm: handleConfirm,
+            },
+        };
+        if (alwaysHasValue) {
+            targetProps.ref = targetRef;
+        }
+        return cloneElement(children, targetProps);
+    };
+    const outletValue = useMemo(() => {
+        return children?.type?.outletFormatter?.(children.props, innerValue) || '';
+    }, [innerValue]);
+    return (_jsx(CustomWrapper, { children: _jsxs(View, { ...restProps, className: className, style: style, children: [renderInput({
+                    outletValue,
+                    disabled,
+                    readOnly,
+                    setVisible: setInnerVisible,
+                }), renderPopout()] }) }));
+};
+export default PopoutInput;

package/dist/popout-input/index.scss

@@ -0,0 +1,53 @@
+@import '../style/base.scss';
+// #variables
+$sar-popout-input-arrow-font-size: $sar-text-base !default;
+$sar-popout-input-arrow-color: $sar-border-color !default;
+$sar-popout-input-active-opacity: $sar-active-opacity !default;
+
+// 暗黑模式
+$sar-popout-input-arrow-dark-color: $sar-dark-border-color !default;
+// #endvariables
+
+@include bem(popout-input) {
+  @include b() {
+    @include universal;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-popout-input-active-opacity;
+    }
+
+    @include m(disabled) {
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(seal) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  @include e(arrow) {
+    @include universal;
+    font-size: $sar-popout-input-arrow-font-size;
+    color: $sar-popout-input-arrow-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(popout-input) {
+    @include e(arrow) {
+      color: $sar-popout-input-arrow-dark-color;
+    }
+  }
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactElement, CSSProperties } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { MenuOption } from '../menu';
+import { Placement } from './utils';
+import { BaseProps } from '../base';
+import { PopupProps } from '../popup';
+export type { Placement as PopoverPlacement, MenuOption as PopoverOption };
+export interface PopoverProps extends BaseProps, PopupProps {
+    options?: MenuOption[];
+    reference?: ReactElement;
+    refGap?: number;
+    viewportGap?: number;
+    placement?: Placement;
+    direction?: 'vertical' | 'horizontal';
+    theme?: 'dark' | 'light';
+    zIndex?: number;
+    onSelect?: (option: MenuOption) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    duration?: number;
+    mask?: boolean;
+    transparent?: boolean;
+    maskClass?: string;
+    maskStyle?: CSSProperties;
+    onMaskClick?: (event: ITouchEvent) => void;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+}
+export declare const Popover: FC<PopoverProps>;
+export default Popover;

package/dist/popover/index.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, cloneElement, useLayoutEffect, useRef, useMemo, useEffect, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { Menu } from '../menu';
+import { useBem, useControllableValue, useEvent, useSetTimeout } from '../use';
+import { getRectByElement, isNumber, isRN } from '../utils';
+import { getPopoverPosition } from './utils';
+import Popup from '../popup';
+import { Animated } from '../animated';
+import { getTimeouts } from '../transition';
+function mayAddPixel(value) {
+    return isNumber(value) ? value + 'px' : value;
+}
+const zoomAnim = (timeouts) => {
+    const opacityValue = new Animated.Value(0);
+    const scaleValue = new Animated.Value(0.5);
+    return {
+        enter() {
+            opacityValue.setValue(0);
+            scaleValue.setValue(0.4);
+            Animated.parallel([
+                Animated.timing(opacityValue, {
+                    toValue: 1,
+                    duration: timeouts.enter,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(scaleValue, {
+                    toValue: 1,
+                    duration: timeouts.enter,
+                    useNativeDriver: true,
+                }),
+            ], {
+                stopTogether: false,
+            }).start();
+        },
+        exit() {
+            Animated.parallel([
+                Animated.timing(opacityValue, {
+                    toValue: 0,
+                    duration: timeouts.exit,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(scaleValue, {
+                    toValue: 0.4,
+                    duration: timeouts.exit,
+                    useNativeDriver: true,
+                }),
+            ], {
+                stopTogether: false,
+            }).start(({ finished }) => {
+                if (finished) {
+                    scaleValue.setValue(1);
+                }
+            });
+        },
+        style: {
+            opacity: opacityValue,
+            scale: scaleValue,
+        },
+    };
+};
+export const Popover = (props) => {
+    const { className, style, children, contentClass, contentStyle, options = [], reference, refGap = 10, viewportGap = 10, placement = 'bottom', direction = 'vertical', theme = 'light', zIndex, onSelect, visible, defaultVisible, onVisible, duration = 250, mask = true, transparent = true, maskClass, maskStyle, onMaskClick, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps } = props;
+    const [bem] = useBem('popover');
+    const referenceRef = useRef();
+    const contentRef = useRef();
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    // visible -> realVisible -> !visible -> !realVisible
+    const [realVisible, setRealVisible] = useState(false);
+    const handleRequestClose = useEvent(() => {
+        setInnerVisible(false);
+    });
+    const handleMaskClick = useEvent((event) => {
+        setInnerVisible(false);
+        onMaskClick?.(event);
+    });
+    const [popperRect, setPopperRect] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const [arrowPosition, setArrowPosition] = useState({ top: 0, left: 0 });
+    const getAndSetPosition = async () => {
+        const referenceRect = await getRectByElement(referenceRef.current);
+        const contentRect = await getRectByElement(contentRef.current);
+        if (referenceRect) {
+            const [popperPosition, arrowPosition] = getPopoverPosition(referenceRect, contentRect, {
+                refGap,
+                viewportGap,
+                placement,
+            });
+            setPopperRect({
+                ...popperPosition,
+                width: contentRect.width,
+                height: contentRect.height,
+            });
+            setArrowPosition(arrowPosition);
+            setRealVisible(true);
+            onEntering?.();
+            showLater();
+        }
+    };
+    const [hideLater, cancelHide] = useSetTimeout(() => {
+        setRealVisible(false);
+        onExited?.();
+    }, duration, {
+        tailing: true,
+    });
+    const [showLater, cancelShow] = useSetTimeout(() => {
+        onEntered?.();
+    }, duration, {
+        tailing: true,
+    });
+    useLayoutEffect(() => {
+        if (innerVisible) {
+            cancelHide();
+            onEnter?.();
+            getAndSetPosition();
+        }
+        else {
+            cancelShow();
+            onExit?.();
+            anim.exit();
+            hideLater();
+            onExiting?.();
+        }
+    }, [innerVisible]);
+    const handleSelect = (option) => {
+        setInnerVisible(false);
+        onSelect?.(option);
+    };
+    // Animated >>>
+    const anim = useMemo(() => zoomAnim(getTimeouts(duration)), []);
+    useEffect(() => {
+        if (realVisible) {
+            anim.enter();
+        }
+    }, [realVisible]);
+    // <<< Animated
+    const getOriginX = () => {
+        return popperRect.width / 2 - arrowPosition.left;
+    };
+    const getOriginY = () => {
+        return popperRect.height / 2 - arrowPosition.top;
+    };
+    return (_jsxs(_Fragment, { children: [reference &&
+                cloneElement(reference, {
+                    ref: referenceRef,
+                    onClick(event) {
+                        setInnerVisible(true);
+                        reference.props.onClick?.(event);
+                    },
+                }), _jsxs(Popup, { visible: innerVisible || realVisible, timeout: duration, mask: mask, maskStyle: maskStyle, maskClass: maskClass, transparent: transparent, onMaskClick: handleMaskClick, onRequestClose: handleRequestClose, zIndex: zIndex, catchMove: true, ...restProps, className: classNames(bem.e('popup'), className), style: style, contentClass: classNames(bem.b(), bem.m(theme), bem.m('zoom-enter', realVisible), bem.m('zoom-exit', !innerVisible), contentClass), contentStyle: {
+                    top: popperRect.top,
+                    left: popperRect.left,
+                    ...contentStyle,
+                    display: innerVisible || realVisible ? 'flex' : 'none',
+                    opacity: realVisible ? 1 : 0,
+                    ...(isRN
+                        ? {
+                            opacity: anim.style.opacity,
+                            transform: [
+                                {
+                                    translateX: -getOriginX(),
+                                },
+                                {
+                                    translateY: -getOriginY(),
+                                },
+                                {
+                                    scale: anim.style.scale,
+                                },
+                                {
+                                    translateX: getOriginX(),
+                                },
+                                {
+                                    translateY: getOriginY(),
+                                },
+                            ],
+                        }
+                        : {
+                            transformOrigin: `${mayAddPixel(arrowPosition.left)} ${mayAddPixel(arrowPosition.top)}`,
+                            animationDuration: duration + 'ms',
+                        }),
+                }, children: [_jsx(View, { className: classNames(bem.e('content'), bem.em('content', direction)), ref: contentRef, children: children ?? (_jsx(Menu, { options: options, direction: direction, theme: theme, onSelect: handleSelect })) }), _jsx(View, { className: classNames(bem.e('arrow'), bem.m(theme)), style: arrowPosition })] })] }));
+};
+export default Popover;

package/dist/popover/index.scss

@@ -0,0 +1,94 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-popover-bg-color: $sar-emphasis-bg-color !default;
+$sar-popover-box-shadow: $sar-shadow-lg !default;
+$sar-popover-min-width: 120px !default;
+$sar-popover-border-radius: $sar-rounded !default;
+
+$sar-popover-dark-bg-color: $sar-gray-800 !default;
+$sar-popover-dark-color: $sar-white !default;
+
+$sar-popover-arrow-size: 10px !default;
+// #endvariables
+
+@include bem(popover) {
+  @include b() {
+    @include universal;
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    overflow: visible;
+    border-radius: $sar-popover-border-radius;
+    background-color: $sar-popover-bg-color;
+    box-shadow: $sar-popover-box-shadow;
+    @include ifweb {
+      touch-action: none;
+    }
+  }
+
+  @include e(content) {
+    @include universal;
+    z-index: 1;
+    min-width: $sar-popover-min-width;
+  }
+
+  @include e(arrow) {
+    @include universal;
+    position: absolute;
+    width: $sar-popover-arrow-size;
+    height: $sar-popover-arrow-size;
+    margin-left: math.div(-$sar-popover-arrow-size, 2);
+    margin-top: math.div(-$sar-popover-arrow-size, 2);
+    transform: rotate(45deg);
+  }
+
+  @include m(light) {
+    background-color: $sar-popover-bg-color;
+  }
+
+  @include m(dark) {
+    color: $sar-popover-dark-color;
+    background-color: $sar-popover-dark-bg-color;
+  }
+
+  // zoom
+  @include ifweb {
+    @include m(zoom-enter) {
+      animation: #{bem-ns(popover_zoom-enter)} $sar-duration-fast both;
+    }
+    @keyframes #{bem-ns(popover_zoom-enter)} {
+      from {
+        opacity: 0;
+        transform: scale(0.4);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @include m(zoom-exit) {
+      animation: #{bem-ns(popover_zoom-exit)} $sar-duration-fast both;
+    }
+    @keyframes #{bem-ns(popover_zoom-exit)} {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.4);
+      }
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(popover) {
+    @include m(light) {
+      background-color: $sar-popover-dark-bg-color;
+    }
+  }
+}

package/dist/popover/utils.d.ts

@@ -0,0 +1,23 @@
+export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface Rect {
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type Direction = 'top' | 'right' | 'bottom' | 'left';
+export type Side = 'start' | 'center' | 'end';
+export type Axis = 'top' | 'left';
+export declare function getPopoverPosition(refRect: Rect, popperRect: Rect, { refGap, placement, viewportGap, }: {
+    refGap: number;
+    placement: Placement;
+    viewportGap: number;
+}): readonly [{
+    top: number;
+    left: number;
+}, {
+    top: number;
+    left: number;
+}];

package/dist/popover/utils.js

@@ -0,0 +1,124 @@
+import Taro from '@tarojs/taro';
+import { minmax } from '../utils';
+const directions = ['top', 'right', 'bottom', 'left'];
+function getReverseDirection(direction) {
+    const index = directions.indexOf(direction);
+    return directions[index + 2] ?? directions[index - 2];
+}
+function getAxis(direction) {
+    return ['top', 'bottom'].includes(direction) ? 'left' : 'top';
+}
+function getCrossAxis(axis) {
+    return axis === 'top' ? 'left' : 'top';
+}
+function getSizeNameByAxis(axis) {
+    return axis === 'top' ? 'height' : 'width';
+}
+function getArrowCrossOffset(direction, rect) {
+    const strategies = {
+        top() {
+            return rect.height;
+        },
+        right() {
+            return 0;
+        },
+        bottom() {
+            return 0;
+        },
+        left() {
+            return rect.width;
+        },
+    };
+    return strategies[direction]();
+}
+export function getPopoverPosition(refRect, popperRect, { refGap, placement, viewportGap, }) {
+    const breadth = popperRect.width + refGap;
+    const thickness = popperRect.height + refGap;
+    const systemInfo = Taro.getSystemInfoSync();
+    const windowWidth = systemInfo.windowWidth;
+    const windowHeight = systemInfo.windowHeight;
+    const gapBoundaries = {
+        top: refRect.top - thickness - viewportGap,
+        right: windowWidth - refRect.right - breadth - viewportGap,
+        bottom: windowHeight - refRect.bottom - thickness - viewportGap,
+        left: refRect.left - breadth - viewportGap,
+    };
+    // 确定方位
+    let [direction, side] = placement.split('-');
+    // 适当反转
+    if (gapBoundaries[direction] < 0) {
+        direction = getReverseDirection(direction);
+        if (gapBoundaries[direction] < 0) {
+            direction = getReverseDirection(direction);
+        }
+    }
+    // 确定端点
+    side = side || 'center';
+    // 确定轴
+    const axis = getAxis(direction);
+    const crossAxis = getCrossAxis(axis);
+    // 确定尺寸
+    const sizeName = getSizeNameByAxis(axis);
+    const windowSize = axis === 'top' ? windowHeight : windowWidth;
+    const popperStyle = {
+        top: 0,
+        left: 0,
+    };
+    function getSideOffset() {
+        const strategies = {
+            start() {
+                return refRect[axis];
+            },
+            center() {
+                return refRect[axis] - (popperRect[sizeName] - refRect[sizeName]) / 2;
+            },
+            end() {
+                return refRect[axis] - (popperRect[sizeName] - refRect[sizeName]);
+            },
+        };
+        const offset = strategies[side]();
+        return minmax(offset, viewportGap, windowSize - popperRect[sizeName] - viewportGap);
+    }
+    function getDirectionOffset() {
+        const strategies = {
+            top() {
+                return refRect.top - refGap - popperRect.height;
+            },
+            right() {
+                return refRect.right + refGap;
+            },
+            bottom() {
+                return refRect.bottom + refGap;
+            },
+            left() {
+                return refRect.left - refGap - popperRect.width;
+            },
+        };
+        return strategies[direction]();
+    }
+    popperStyle[crossAxis] = getDirectionOffset();
+    popperStyle[axis] = getSideOffset();
+    const finalPopperRect = {
+        top: popperStyle.top,
+        left: popperStyle.left,
+        bottom: popperStyle.top + popperRect.height,
+        right: popperStyle.left + popperRect.width,
+    };
+    const arrowStyle = {
+        top: 0,
+        left: 0,
+    };
+    function getArrowOffset() {
+        const reverseDirection = getReverseDirection(axis);
+        let extra = refRect[axis] - finalPopperRect[axis];
+        if (extra < 0) {
+            extra = 0;
+        }
+        const intersection = Math.min(refRect[reverseDirection], finalPopperRect[reverseDirection]) -
+            Math.max(refRect[axis], finalPopperRect[axis]);
+        return extra + intersection / 2;
+    }
+    arrowStyle[axis] = getArrowOffset();
+    arrowStyle[crossAxis] = getArrowCrossOffset(direction, popperRect);
+    return [popperStyle, arrowStyle];
+}

package/dist/popup/index.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react';
+import { ITouchEvent, View } from '@tarojs/components';
+import { BaseProps } from '../base';
+import { TransitionTimeout } from '../transition';
+export interface PopupProps extends BaseProps {
+    visible?: boolean;
+    timeout?: TransitionTimeout;
+    effect?: 'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom' | 'fade';
+    contentClass?: string;
+    contentStyle?: CSSProperties;
+    zIndex?: number;
+    mask?: boolean;
+    transparent?: boolean;
+    maskClass?: string;
+    maskStyle?: CSSProperties;
+    onMaskClick?: (event: ITouchEvent) => void;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+    catchMove?: boolean;
+    onlyPopup?: boolean;
+    onRequestClose?: () => void;
+}
+export type PopupRef = typeof View;
+export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<import("react").ComponentType<import("@tarojs/components/types/View").ViewProps>>>;
+export default Popup;