sard 1.0.0-canary.0

package/dist/rate/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useControllableValue, useEvent, useSelectorId, useBem } from '../use';
+import { Icon } from '../icon';
+import { addPxInWeb, filterNullish, getRectByElement, isRN } from '../utils';
+import { usePan } from '../pan-gesture-detector/usePan';
+import PanGestureDetector from '../pan-gesture-detector';
+export const Rate = (props) => {
+    const { className, style, value, defaultValue, allowHalf, clearable, count = 5, size = 20, gap = 10, icon, iconProps, voidIcon, voidIconProps, color, voidColor, readOnly, disabled, onChange, ...restProps } = props;
+    const [bem] = useBem('rate');
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: 0,
+    });
+    const [tempValue, setTempValue] = useState(innerValue);
+    const rateStartLeft = useRef(0);
+    const contextId = useSelectorId();
+    const rateRef = useRef();
+    const handleClick = useEvent(async (event, index) => {
+        if (readOnly || disabled) {
+            return;
+        }
+        let nextValue;
+        if (allowHalf) {
+            const { left: rateLeft } = await getRectByElement(rateRef.current, contextId);
+            let clientX;
+            if (isRN) {
+                clientX = event.changedTouches[0].pageX;
+            }
+            else {
+                clientX = event.touches ? event.touches[0].clientX : event.clientX;
+            }
+            const offsetX = clientX - rateLeft;
+            const itemOffsetLeft = index * (size + gap);
+            const isHalf = offsetX - itemOffsetLeft <= size / 2;
+            nextValue = index + (isHalf ? 0.5 : 1);
+        }
+        else {
+            nextValue = index + 1;
+        }
+        if (clearable && nextValue === innerValue) {
+            nextValue = 0;
+        }
+        setTempValue(nextValue);
+        setInnerValue(nextValue);
+    });
+    const handlers = usePan({
+        start() {
+            if (readOnly || disabled) {
+                return;
+            }
+            getRectByElement(rateRef.current, contextId).then((res) => {
+                rateStartLeft.current = res.left;
+            });
+        },
+        move(event) {
+            if (readOnly || disabled) {
+                return;
+            }
+            if (event.axis === 'vertical') {
+                return;
+            }
+            const offsetX = event.moveX - rateStartLeft.current;
+            if (offsetX < 0) {
+                setTempValue(0);
+                return;
+            }
+            for (let i = count - 1; i >= 0; i--) {
+                const left = i * (gap + size);
+                if (offsetX >= left) {
+                    const index = i + (allowHalf && offsetX <= left + size / 2 ? 0.5 : 1);
+                    setTempValue(index);
+                    return;
+                }
+            }
+        },
+        end() {
+            if (readOnly || disabled) {
+                return;
+            }
+            setInnerValue(tempValue);
+        },
+    });
+    useEffect(() => {
+        setTempValue(innerValue);
+    }, [innerValue]);
+    const lineHeight = addPxInWeb(size ? size * 1.15 : size);
+    const fontSize = size;
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(PanGestureDetector, { handlers: handlers, children: _jsx(View, { ...restProps, ref: rateRef, className: classNames(bem.b(), bem.m('disabled', disabled), bem.m('readonly', readOnly), className), style: {
+                    ...style,
+                    ...filterNullish({
+                        gap,
+                    }),
+                }, children: Array(count)
+                    .fill(0)
+                    .map((_, index) => {
+                    const itemValue = index + 1;
+                    const diff = index + 1 - tempValue;
+                    const width = (diff <= 0 ? 1 : diff > 1 ? 0 : tempValue % 1) * 100 + '%';
+                    return (_jsxs(View, { className: classNames(bem.e('item'), bem.em('item', 'readonly', readOnly), bem.em('item', 'disabled', disabled)), onClick: (event) => handleClick(event, index), children: [_jsx(View, { className: bem.e('star-void'), style: {
+                                    fontSize,
+                                    lineHeight,
+                                    ...filterNullish({ color: voidColor }),
+                                }, children: voidIcon ?? (_jsx(Icon, { name: "star", color: disabled ? undefined : voidColor, ...voidIconProps, className: bem.e('star-void-icon'), style: { fontSize, lineHeight } })) }), _jsx(View, { className: classNames(bem.e('star'), bem.em('star', 'disabled', disabled)), style: {
+                                    width,
+                                    fontSize,
+                                    lineHeight,
+                                    ...filterNullish({ color }),
+                                }, children: icon ?? (_jsx(Icon, { name: "star-fill", color: disabled ? undefined : color, ...iconProps, className: classNames(bem.e('star-icon'), bem.em('star-icon', 'disabled', disabled)), style: { fontSize, lineHeight } })) })] }, itemValue));
+                }) }) }) }));
+};
+export default Rate;

package/dist/rate/index.scss

@@ -0,0 +1,99 @@
+@import '../style/base.scss';
+// #variables
+$sar-rate-star-void-color: $sar-quaternary-color !default;
+$sar-rate-star-color: $sar-warning !default;
+
+// 暗黑模式
+$sar-rate-star-void-dark-color: $sar-dark-quaternary-color !default;
+$sar-rate-star-dark-color: $sar-warning !default;
+// #endvariables
+
+@include bem(rate) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    @include ifweb {
+      touch-action: pan-y;
+
+      @include m(readonly, disabled) {
+        touch-action: auto;
+      }
+    }
+  }
+
+  @include e(item) {
+    @include universal;
+
+    @include ifweb {
+      cursor: pointer;
+
+      @include m(readonly) {
+        cursor: default;
+      }
+
+      @include m(disabled) {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(star-void) {
+    @include universal;
+    color: $sar-rate-star-void-color;
+  }
+
+  @include e(star-void-icon) {
+    color: $sar-rate-star-void-color;
+  }
+
+  @include e(star) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    align-items: flex-start;
+    width: 0;
+    overflow: hidden;
+    color: $sar-rate-star-color;
+
+    @include m(disabled) {
+      color: $sar-disabled-deep-bg-color;
+    }
+  }
+
+  @include e(star-icon) {
+    color: $sar-rate-star-color;
+
+    @include m(disabled) {
+      color: $sar-disabled-deep-bg-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(rate) {
+    @include e(star-void) {
+      color: $sar-rate-star-void-color;
+    }
+
+    @include e(star-void-icon) {
+      color: $sar-rate-star-void-color;
+    }
+
+    @include e(star) {
+      color: $sar-rate-star-color;
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-deep-bg-color;
+      }
+    }
+
+    @include e(star-icon) {
+      color: $sar-rate-star-color;
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-deep-bg-color;
+      }
+    }
+  }
+}

package/dist/result/index.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+export interface ResultProps extends BaseProps {
+    status?: 'success' | 'info' | 'warning' | 'error' | 'question';
+    icon?: ReactNode;
+    iconProps?: IconProps;
+    title?: ReactNode;
+    description?: ReactNode;
+}
+export declare const Result: FC<ResultProps>;
+export default Result;

package/dist/result/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { isNullish } from '../utils';
+import { useBem } from '../use';
+const mapStatusIcon = {
+    success: 'check-circle-fill',
+    info: 'info-circle-fill',
+    warning: 'warning-fill',
+    error: 'x-octagon-fill',
+    question: 'question-circle-fill',
+};
+export const Result = (props) => {
+    const { className, style, children, status = 'info', icon, iconProps, title, description, ...restProps } = props;
+    const [bem] = useBem('result');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [icon ?? (_jsx(Icon, { name: mapStatusIcon[status], ...iconProps, className: classNames(bem.e('icon'), bem.em('icon', status)) })), !isNullish(title) && _jsx(View, { className: bem.e('title'), children: title }), !isNullish(description) && (_jsx(View, { className: bem.e('description'), children: description })), !isNullish(children) && (_jsx(View, { className: bem.e('extra'), children: children }))] }));
+};
+export default Result;

package/dist/result/index.scss

@@ -0,0 +1,88 @@
+@import '../style/base.scss';
+// #variables
+$sar-result-icon-font-size: 48px !default;
+
+$sar-result-success-color: $sar-success !default;
+$sar-result-info-color: $sar-info !default;
+$sar-result-warning-color: $sar-warning !default;
+$sar-result-error-color: $sar-danger !default;
+$sar-result-question-color: $sar-primary !default;
+
+$sar-result-title-margin-top: 16px !default;
+$sar-result-title-font-size: $sar-text-xl !default;
+
+$sar-result-description-margin-top: 4px !default;
+$sar-result-description-font-size: $sar-text-base !default;
+$sar-result-description-color: $sar-tertiary-color !default;
+
+$sar-result-extra-margin-top: 16px !default;
+
+// 暗黑模式
+$sar-result-description-dark-color: $sar-dark-tertiary-color !default;
+// #endvariables
+
+@include bem(result) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  @include e(icon) {
+    @include universal;
+    font-size: $sar-result-icon-font-size;
+    line-height: $sar-result-icon-font-size * $sar-leading-none;
+    text-align: center;
+
+    @include m(success) {
+      color: $sar-result-success-color;
+    }
+
+    @include m(info) {
+      color: $sar-result-info-color;
+    }
+
+    @include m(warning) {
+      color: $sar-result-warning-color;
+    }
+
+    @include m(error) {
+      color: $sar-result-error-color;
+    }
+
+    @include m(question) {
+      color: $sar-result-question-color;
+    }
+  }
+
+  @include e(title) {
+    @include universal;
+    margin-top: $sar-result-title-margin-top;
+    font-size: $sar-result-title-font-size;
+
+    text-align: center;
+  }
+
+  @include e(description) {
+    @include universal;
+    margin-top: $sar-result-description-margin-top;
+    font-size: $sar-result-description-font-size;
+    color: $sar-result-description-color;
+    text-align: center;
+  }
+
+  @include e(extra) {
+    @include universal;
+    margin-top: $sar-result-extra-margin-top;
+  }
+}
+
+@include theme(dark) {
+  @include bem(result) {
+    @include e(description) {
+      @include universal;
+      color: $sar-result-description-dark-color;
+    }
+  }
+}

package/dist/safe-area/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface SafeAreaProps extends BaseProps {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+}
+export declare const SafeArea: FC<SafeAreaProps>;
+export default SafeArea;

package/dist/safe-area/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { isRN, systemInfo } from '../utils';
+export const SafeArea = (props) => {
+    const { className, style, direction = 'bottom', } = props;
+    const safeAreaMargin = useMemo(() => {
+        // H5和小程序通过css环境变量设置
+        if (!isRN) {
+            return;
+        }
+        const { safeArea: { top = 0, right = 0, bottom = 0, left = 0 } = {}, windowWidth, windowHeight, } = systemInfo;
+        return {
+            top,
+            right: windowWidth - right,
+            bottom: windowHeight - bottom,
+            left,
+        };
+    }, []);
+    const sizeStyle = useMemo(() => {
+        return safeAreaMargin
+            ? {
+                [direction === 'top' || direction === 'bottom' ? 'height' : 'width']: safeAreaMargin[direction],
+            }
+            : null;
+    }, [direction]);
+    const [bem] = useBem('safe-area');
+    return (_jsx(View, { className: classNames(bem.b(), bem.m(direction), className), style: {
+            ...style,
+            ...sizeStyle,
+        } }));
+};
+export default SafeArea;

package/dist/safe-area/index.scss

@@ -0,0 +1,24 @@
+@import '../style/base.scss';
+// #variables
+// #endvariables
+
+@include bem(safe-area) {
+  @include b() {
+    pointer-events: none;
+
+    @include ifweb {
+      @include m(top) {
+        height: env(safe-area-inset-top);
+      }
+      @include m(right) {
+        width: env(safe-area-inset-right);
+      }
+      @include m(bottom) {
+        height: env(safe-area-inset-bottom);
+      }
+      @include m(left) {
+        width: env(safe-area-inset-left);
+      }
+    }
+  }
+}

package/dist/scroll-view/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { BaseProps } from '../base';
+import { ScrollIntoViewOptions } from '../utils';
+export interface ScrollViewProps extends BaseProps {
+    contextId?: string;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    showScrollbar?: boolean;
+    onScroll?: (event: {
+        x: number;
+        y: number;
+    }) => void;
+    scrollLeft?: number;
+    scrollTop?: number;
+}
+export interface ScrollViewRef {
+    scrollTop: (top: number) => void;
+    scrollLeft: (left: number) => void;
+    setScrollEnabled: (scrollEnabled: boolean) => void;
+    getElement: () => any;
+    scrollIntoView: (selector: string, object?: ScrollIntoViewOptions) => void;
+}
+export declare const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react").RefAttributes<ScrollViewRef>>;
+export default ScrollView;

package/dist/scroll-view/index.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { ScrollView as TaroScrollView } from '@tarojs/components';
+import { getElementById, isH5 } from '../utils';
+import Taro from '@tarojs/taro';
+import { useEvent, useSelectorId } from '../use';
+export const ScrollView = forwardRef((props, ref) => {
+    const { className, style, children, contextId, scrollX, scrollY, showScrollbar, onScroll, scrollLeft, scrollTop, } = props;
+    const scrollViewId = useSelectorId();
+    const scrollViewRef = useRef();
+    const scrollViewCtx = useRef();
+    const scrollCoord = useRef({
+        x: 0,
+        y: 0,
+    });
+    useEffect(() => {
+        Taro.createSelectorQuery()
+            .in(getElementById(contextId)?.ctx)
+            .select(`#${scrollViewId}`)
+            .node((res) => {
+            scrollViewCtx.current = res.node;
+        })
+            .exec();
+    }, []);
+    const handleScroll = useEvent((event) => {
+        const x = event.detail.scrollLeft;
+        const y = event.detail.scrollTop;
+        scrollCoord.current = {
+            x,
+            y,
+        };
+        onScroll?.({
+            x,
+            y,
+        });
+    });
+    useImperativeHandle(ref, () => ({
+        scrollTop(top) {
+            scrollViewCtx.current?.scrollTo({
+                top,
+                animated: false,
+            });
+        },
+        scrollLeft(left) {
+            scrollViewCtx.current?.scrollTo({
+                left,
+                animated: false,
+            });
+        },
+        setScrollEnabled(scrollEnabled) {
+            if (scrollViewCtx.current) {
+                scrollViewCtx.current.scrollEnabled = scrollEnabled;
+                if (isH5 && scrollViewRef.current) {
+                    scrollViewRef.current.style.touchAction = scrollEnabled
+                        ? 'auto'
+                        : 'none';
+                }
+            }
+        },
+        getScrollCoord() {
+            return scrollCoord.current;
+        },
+        getElement() {
+            return scrollViewRef.current;
+        },
+        scrollIntoView(selector) {
+            scrollViewCtx.current?.scrollIntoView(selector);
+        },
+    }), []);
+    return (_jsx(TaroScrollView, { id: scrollViewId, ref: scrollViewRef, enhanced: true, enablePassive: "true", scrollWithAnimation: false, showScrollbar: showScrollbar, scrollX: scrollX, scrollY: scrollY, className: className, style: style, onScroll: handleScroll, scrollLeft: scrollLeft, scrollTop: scrollTop, children: children }));
+});
+export default ScrollView;

package/dist/scroll-view/index.rn.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../base';
+export interface ScrollViewProps extends Omit<BaseProps, 'style'> {
+    style?: StyleProp<ViewStyle>;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    showScrollbar?: boolean;
+    onScroll?: (event: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export interface ScrollViewRef {
+    scrollTop: (top: number) => void;
+    scrollLeft: (left: number) => void;
+    setScrollEnabled: (scrollEnabled: boolean) => void;
+    getElement: () => any;
+}
+export declare const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react").RefAttributes<ScrollViewRef>>;
+export default ScrollView;

package/dist/scroll-view/index.rn.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { ScrollView as RNScrollView } from 'react-native';
+import { useEvent } from '../use';
+export const ScrollView = forwardRef((props, ref) => {
+    const { style, children, scrollX, showScrollbar, onScroll } = props;
+    const scrollViewRef = useRef(null);
+    const scrollCoord = useRef({
+        x: 0,
+        y: 0,
+    });
+    const handleScroll = useEvent((event) => {
+        const x = event.nativeEvent.contentOffset.x;
+        const y = event.nativeEvent.contentOffset.y;
+        scrollCoord.current = {
+            x,
+            y,
+        };
+        onScroll?.({
+            x,
+            y,
+        });
+    });
+    useImperativeHandle(ref, () => ({
+        scrollTop(y) {
+            scrollViewRef.current?.scrollTo({
+                y,
+                animated: false,
+            });
+        },
+        scrollLeft(x) {
+            scrollViewRef.current?.scrollTo({
+                x,
+                animated: false,
+            });
+        },
+        setScrollEnabled(scrollEnabled) {
+            scrollViewRef.current?.setNativeProps({
+                scrollEnabled,
+            });
+        },
+        getScrollCoord() {
+            return scrollCoord.current;
+        },
+        getElement() {
+            return scrollViewRef.current;
+        },
+    }), []);
+    return (_jsx(RNScrollView, { ref: scrollViewRef, horizontal: scrollX, contentContainerStyle: { flexGrow: 1 }, scrollEventThrottle: 16, showsHorizontalScrollIndicator: showScrollbar, showsVerticalScrollIndicator: showScrollbar, style: style, onScroll: handleScroll, children: children }));
+});
+export default ScrollView;

package/dist/search/index.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface SearchProps extends BaseProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    shape?: 'round' | 'square';
+    background?: string;
+    inputBackground?: string;
+    inputColor?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    align?: 'left' | 'center' | 'right';
+    cancel?: ReactNode;
+    onCancel?: () => void;
+    search?: ReactNode;
+    onSearch?: (value: string) => void;
+    prepend?: ReactNode;
+    append?: ReactNode;
+    inputPrepend?: ReactNode;
+    inputAppend?: ReactNode;
+    inputStyle?: CSSProperties;
+}
+export declare const Search: FC<SearchProps>;
+export default Search;

package/dist/search/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useControllableValue } from '../use';
+import Input from '../input';
+import Icon from '../icon';
+import Button from '../button';
+import { filterNullish, isNullish } from '../utils';
+export const Search = (props) => {
+    const { className, style, value, defaultValue, onChange, placeholder, shape = 'square', background, inputBackground, inputColor, readOnly, disabled, align, cancel, onCancel, search, onSearch, prepend, append, inputPrepend, inputAppend, ...restProps } = props;
+    const [bem] = useBem('search');
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+    });
+    const handleConfirm = () => {
+        onSearch?.(innerValue);
+    };
+    const handleCancel = () => {
+        setInnerValue('');
+        onCancel?.();
+    };
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('show-action', !isNullish(cancel) || !isNullish(search)), className), style: {
+            ...style,
+            ...filterNullish({
+                backgroundColor: background,
+            }),
+        }, children: [prepend, _jsx(View, { className: bem.e('input-wrapper'), children: _jsx(Input, { value: innerValue, onChange: setInnerValue, clearable: true, confirmType: "search", showClearOnlyFocus: true, readOnly: readOnly, disabled: disabled, placeholder: placeholder, prepend: inputPrepend ?? _jsx(Icon, { name: "search", className: bem.e('icon') }), append: inputAppend, borderless: true, className: classNames(bem.e('input'), bem.em('input', shape), bem.em('input', 'disabled', disabled)), style: filterNullish({
+                        textAlign: align,
+                        color: inputColor,
+                        backgroundColor: inputBackground,
+                    }), onConfirm: handleConfirm }) }), !isNullish(cancel) && (_jsx(Button, { type: "pale-text", className: bem.e('button'), onClick: handleCancel, children: cancel })), !isNullish(search) && (_jsx(Button, { type: "pale-text", className: bem.e('button'), onClick: handleConfirm, children: search })), append] }));
+};
+export default Search;