sard 1.0.0-canary.0

package/dist/mesh/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useMemo, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { MeshItem } from './Item';
+import { filterNullish, pickNonNullish } from '../utils';
+import { useBem } from '../use';
+import Halfline from '../halfline';
+export const Mesh = (props) => {
+    const { children, className, style, columns = 4, outline = false, outlineVertical = false, gap, border = true, square, center = true, clickable, reverse, direction, ...restProps } = props;
+    const [bem] = useBem('mesh');
+    const canShowOutline = border && (!gap || gap <= 0);
+    const rows = useMemo(() => {
+        const total = Children.count(children);
+        const rows = Array(Math.ceil(total / columns))
+            .fill(0)
+            .map(() => []);
+        Children.forEach(children, (item, index) => {
+            const isRight = (index + 1) % columns === 0;
+            const isBottom = total - index <= (total % columns || columns);
+            const col = cloneElement(item, {
+                key: index,
+                ...pickNonNullish({
+                    gap,
+                    square,
+                    border,
+                    center,
+                    clickable,
+                    direction,
+                    reverse,
+                }, item.props),
+                _isRight: isRight,
+                _isBottom: isBottom,
+            });
+            const rowIndex = Math.floor(index / columns);
+            rows[rowIndex].push(col);
+        });
+        const lastRow = rows[rows.length - 1];
+        const lack = columns - lastRow.length;
+        if (lack > 0) {
+            Array(lack)
+                .fill(0)
+                .forEach((_, i) => {
+                lastRow.push(_jsx(View, { className: bem.e('substitute') }, i));
+            });
+        }
+        return rows.map((cols, i) => (_jsx(View, { className: bem.e('row'), style: filterNullish({
+                gap,
+            }), children: cols }, i)));
+    }, [
+        children,
+        columns,
+        gap,
+        square,
+        border,
+        center,
+        clickable,
+        direction,
+        reverse,
+    ]);
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: {
+            ...style,
+            ...filterNullish({
+                gap,
+            }),
+        }, children: [canShowOutline && outline && _jsx(Halfline, { direction: "around" }), canShowOutline && outlineVertical && !outline && (_jsxs(_Fragment, { children: [_jsx(Halfline, { direction: "top" }), _jsx(Halfline, { direction: "bottom" })] })), rows] }));
+};
+Mesh.Item = MeshItem;
+export default Mesh;

package/dist/mesh/index.scss

@@ -0,0 +1,131 @@
+@import '../style/base.scss';
+// #variables
+$sar-mesh-bg-color: $sar-emphasis-bg-color !default;
+$sar-mesh-active-bg-color: $sar-active-bg-color !default;
+$sar-mesh-item-padding-x: 8px !default;
+$sar-mesh-item-padding-y: 16px !default;
+
+$sar-item-text-gap: 8px !default;
+$sar-item-text-font-size: $sar-text-sm !default;
+$sar-item-text-line-height: $sar-item-text-font-size * $sar-leading-tight !default;
+
+// 暗黑模式
+$sar-mesh-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-mesh-dark-active-bg-color: $sar-dark-active-bg-color !default;
+// #endvariables
+
+@include bem(mesh) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(row) {
+    @include universal;
+    flex-direction: row;
+  }
+
+  @include e(item) {
+    @include universal;
+    flex: 1;
+    background-color: $sar-mesh-bg-color;
+  }
+
+  @include e(substitute) {
+    @include universal;
+    flex: 1;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  @include e(item-wrapper) {
+    @include universal;
+    height: 0;
+    padding-bottom: 100%;
+  }
+
+  @include e(item-content) {
+    @include universal;
+    flex: 1;
+    padding-top: $sar-mesh-item-padding-y;
+    padding-right: $sar-mesh-item-padding-x;
+    padding-bottom: $sar-mesh-item-padding-y;
+    padding-left: $sar-mesh-item-padding-x;
+
+    @include m(square) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  @include e(item-icon) {
+    @include universal;
+  }
+
+  @include e(item-text) {
+    @include universal;
+    font-size: $sar-item-text-font-size;
+    line-height: $sar-item-text-line-height;
+
+    @include m(vertical) {
+      margin-top: $sar-item-text-gap;
+    }
+
+    @include m(vertical-reverse) {
+      margin-bottom: $sar-item-text-gap;
+    }
+
+    @include m(horizontal) {
+      margin-left: $sar-item-text-gap;
+    }
+
+    @include m(horizontal-reverse) {
+      margin-right: $sar-item-text-gap;
+    }
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+
+  @include m(vertical-reverse) {
+    flex-direction: column-reverse;
+  }
+
+  @include m(horizontal) {
+    flex-direction: row;
+  }
+
+  @include m(horizontal-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  @include m(center) {
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include m(clickable) {
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include m(pressed) {
+    background-color: $sar-mesh-active-bg-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(mesh) {
+    @include e(item) {
+      background-color: $sar-mesh-dark-bg-color;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-mesh-dark-active-bg-color;
+    }
+  }
+}

package/dist/mesh/type.d.ts

@@ -0,0 +1,9 @@
+export interface MeshCommonProps {
+    gap?: number;
+    border?: boolean;
+    square?: boolean;
+    center?: boolean;
+    clickable?: boolean;
+    reverse?: boolean;
+    direction?: 'horizontal' | 'vertical';
+}

package/dist/mesh/type.js

@@ -0,0 +1 @@
+export {};

package/dist/modal/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface ModalProps extends BaseProps {
+    visible?: boolean;
+    onRequestClose?: () => void;
+}
+export declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/modal/index.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const Modal = (props) => {
+    const { children, visible } = props;
+    if (!visible) {
+        return null;
+    }
+    return _jsx(_Fragment, { children: children });
+};
+export default Modal;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface ModalProps extends BaseProps {
+    visible?: boolean;
+    onRequestClose?: () => void;
+}
+export declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/modal/index.rn.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as RNModal } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+export const Modal = (props) => {
+    const { children, visible, onRequestClose } = props;
+    return (_jsx(RNModal, { visible: visible, statusBarTranslucent: false, presentationStyle: "overFullScreen", transparent: true, animationType: "none", hardwareAccelerated: true, onRequestClose: onRequestClose, children: _jsx(GestureHandlerRootView, { style: { flex: 1 }, children: children }) }));
+};
+export default Modal;

package/dist/navbar/Item.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface NavbarItemProps extends BaseProps {
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const NavbarItem: FC<NavbarItemProps>;
+export default NavbarItem;

package/dist/navbar/Item.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Text, View } from '@tarojs/components';
+import { useBem } from '../use';
+import Pressable from '../pressable';
+export const NavbarItem = (props) => {
+    const { className, style, children, onClick, ...restProps } = props;
+    const [bem] = useBem('navbar');
+    return (_jsx(Pressable, { children: ({ pressed }) => (_jsx(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'pressed', pressed), className), style: style, onClick: onClick, children: _jsx(Text, { className: bem.e('item-text'), children: children }) })) }));
+};
+export default NavbarItem;

package/dist/navbar/index.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { NavbarItem } from './Item';
+import { BaseProps } from '../base';
+export * from './Item';
+export interface NavbarProps extends BaseProps {
+    title?: ReactNode;
+    left?: ReactNode;
+    right?: ReactNode;
+    flow?: boolean;
+}
+export interface NavbarFC extends FC<NavbarProps> {
+    Item: typeof NavbarItem;
+}
+export declare const Navbar: NavbarFC;
+export default Navbar;

package/dist/navbar/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { NavbarItem } from './Item';
+import { useBem } from '../use';
+import Halfline from '../halfline';
+import Ellipsis from '../ellipsis';
+import { isNullish } from '../utils';
+export * from './Item';
+export const Navbar = (props) => {
+    const { className, style, children, title, left, right, flow, ...restProps } = props;
+    const [bem] = useBem('navbar');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [left && (_jsx(View, { className: classNames(bem.e('left'), bem.em('left', 'flow', flow)), children: left })), _jsx(View, { className: classNames(bem.e('content'), bem.em('content', 'custom', !isNullish(children))), children: children ?? (_jsx(Ellipsis, { className: classNames(bem.e('title'), bem.em('title', 'flow', flow)), children: title })) }), right && (_jsx(View, { className: classNames(bem.e('right'), bem.em('right', 'flow', flow)), children: right })), _jsx(Halfline, { direction: "bottom" })] }));
+};
+Navbar.Item = NavbarItem;
+export default Navbar;

package/dist/navbar/index.scss

@@ -0,0 +1,128 @@
+@import '../style/base.scss';
+// #variables
+$sar-navbar-height: 44px !default;
+$sar-navbar-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-navbar-title-max-width: 60% !default;
+$sar-navbar-title-font-size: $sar-text-lg !default;
+$sar-navbar-title-color: $sar-emphasis-color !default;
+
+$sar-navbar-item-padding-x: 10px !default;
+$sar-navbar-item-font-size: $sar-text-base !default;
+$sar-navbar-item-color: $sar-primary !default;
+$sar-navbar-item-active-opacity: $sar-active-opacity !default;
+
+// 暗黑模式
+$sar-navbar-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-navbar-title-dark-color: $sar-dark-emphasis-color !default;
+// #endvariables
+
+@include bem(navbar) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    height: $sar-navbar-height;
+    align-items: center;
+    justify-content: center;
+    background-color: $sar-navbar-bg-color;
+  }
+
+  @include e(content) {
+    @include universal;
+    flex-direction: row;
+    height: 100%;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    @include m(custom) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  @include e(title) {
+    @include universal;
+    width: 100%;
+    max-width: $sar-navbar-title-max-width;
+    font-size: $sar-navbar-title-font-size;
+    font-weight: $sar-font-bold;
+    text-align: center;
+    color: $sar-navbar-title-color;
+
+    @include m(flow) {
+      max-width: 100%;
+      text-align: left;
+    }
+  }
+
+  @include e(left, right) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    flex-direction: row;
+    flex: none;
+    align-items: center;
+    height: 100%;
+
+    @include m(flow) {
+      position: relative;
+    }
+  }
+
+  @include e(left) {
+    left: 0;
+  }
+
+  @include e(right) {
+    right: 0;
+  }
+
+  @include e(item) {
+    @include universal;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $sar-navbar-item-padding-x;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-navbar-item-active-opacity;
+    }
+  }
+
+  @include e(item-text) {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: $sar-navbar-item-font-size;
+    color: $sar-navbar-item-color;
+  }
+
+  @include m(fixed) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+
+@include theme(dark) {
+  @include bem(navbar) {
+    @include b() {
+      background-color: $sar-navbar-dark-bg-color;
+    }
+
+    @include e(title) {
+      color: $sar-navbar-title-dark-color;
+    }
+  }
+}

package/dist/notice-bar/index.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+import { IconProps } from '../icon';
+export interface NoticeBarProps extends BaseProps {
+    color?: string;
+    background?: string;
+    hideLeftIcon?: boolean;
+    leftIcon?: ReactNode;
+    leftIconProps?: IconProps;
+    rightIcon?: ReactNode;
+    rightIconProps?: IconProps;
+    delay?: number;
+    speed?: number;
+    scrollable?: 'auto' | 'never' | 'always';
+    wrap?: boolean;
+    closable?: boolean;
+    onClose?: (event: ITouchEvent) => void;
+    linkable?: boolean;
+    onClick?: (event: ITouchEvent) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    vertical?: boolean;
+    threshold?: number;
+}
+export declare const NoticeBar: FC<NoticeBarProps>;
+export default NoticeBar;

package/dist/notice-bar/index.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Text, View } from '@tarojs/components';
+import Icon from '../icon';
+import { filterNullish, getRectByElement, isRN } from '../utils';
+import { useBem, useControllableValue, useEvent, useResize } from '../use';
+import { Animated, Easing } from '../animated';
+export const NoticeBar = (props) => {
+    const { className, style, children, color, background, hideLeftIcon, leftIcon, leftIconProps, rightIcon, rightIconProps, delay = 1000, speed = 50, scrollable = 'auto', wrap, closable, onClose, linkable, visible, defaultVisible, onVisible, threshold = 150, vertical, ...restProps } = props;
+    const [bem] = useBem('notice-bar');
+    const contentRef = useRef();
+    const wrapperRef = useRef();
+    const [shouldScroll, setShouldScroll] = useState(false);
+    const [wrapperData, setWrapperData] = useState({
+        first: 0,
+        later: 0,
+        contentWidth: 0,
+        wrapperWidth: 0,
+    });
+    const updateWrapperData = useEvent(async (getWidth) => {
+        if (scrollable === 'never') {
+            return setShouldScroll(false);
+        }
+        const { contentWidth, wrapperWidth } = await getWidth();
+        const shouldScroll = scrollable === 'always' || wrapperWidth > contentWidth;
+        if (shouldScroll) {
+            setWrapperData({
+                first: (wrapperWidth / speed) * 1000,
+                later: ((wrapperWidth + contentWidth) / speed) * 1000,
+                contentWidth,
+                wrapperWidth,
+            });
+        }
+        setShouldScroll(shouldScroll);
+    });
+    const getWidth = async () => {
+        const contentRect = await getRectByElement(contentRef.current);
+        const wrapperRect = await getRectByElement(wrapperRef.current);
+        const contentWidth = contentRect.width;
+        const wrapperWidth = wrapperRect.width;
+        return {
+            contentWidth,
+            wrapperWidth,
+        };
+    };
+    useEffect(() => {
+        !isRN && updateWrapperData(getWidth);
+    }, [scrollable, children]);
+    useResize(() => {
+        !isRN && updateWrapperData(getWidth);
+    }, threshold, {
+        leading: false,
+        trailing: true,
+    });
+    const [firstLap, setFirstLap] = useState(true);
+    const handleAnimationEnd = () => {
+        if (firstLap) {
+            setFirstLap(false);
+        }
+    };
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: true,
+    });
+    const handleRightIconClick = (event) => {
+        if (closable) {
+            setInnerVisible(false);
+            onClose?.(event);
+        }
+    };
+    // Animated >>>
+    const [contentWidth, setContentWidth] = useState(0);
+    const [wrapperWidth, setWrapperWidth] = useState(0);
+    useEffect(() => {
+        updateWrapperData(async () => ({
+            contentWidth,
+            wrapperWidth,
+        }));
+    }, [contentWidth, wrapperWidth]);
+    const animValue = useMemo(() => new Animated.Value(0), []);
+    useEffect(() => {
+        animValue.stopAnimation();
+        let anim;
+        if (shouldScroll) {
+            animValue.setValue(0);
+            anim = Animated.timing(animValue, {
+                delay,
+                toValue: -wrapperData.wrapperWidth,
+                duration: wrapperData.first,
+                easing: Easing.linear,
+                useNativeDriver: true,
+            }).start(function laterAnimate({ finished }) {
+                if (finished) {
+                    animValue.setValue(wrapperData.contentWidth);
+                    anim = Animated.timing(animValue, {
+                        toValue: -wrapperData.wrapperWidth,
+                        duration: wrapperData.later,
+                        easing: Easing.linear,
+                        useNativeDriver: true,
+                    }).start(laterAnimate);
+                }
+            });
+        }
+        return () => {
+            anim?.stop();
+        };
+    }, [shouldScroll, wrapperData]);
+    // <<< Animated
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('wrap', wrap), bem.m('linkable', linkable), className), style: {
+            ...style,
+            ...filterNullish({
+                color,
+                background,
+            }),
+            display: innerVisible ? 'flex' : 'none',
+        }, children: [!hideLeftIcon && (_jsx(Text, { className: bem.e('left-icon'), children: leftIcon ?? _jsx(Icon, { name: "volume-up", size: 20, ...leftIconProps }) })), _jsx(View, { className: bem.e('content'), ref: contentRef, onLayout: (event) => {
+                    setContentWidth(event.nativeEvent.layout.width);
+                }, children: _jsx(View, { className: classNames(bem.e('container'), bem.em('container', 'wrap', wrap || vertical)), children: _jsx(Animated.View, { ref: wrapperRef, className: classNames(bem.e('wrapper'), bem.em('wrapper', 'infinite', !firstLap), bem.em('wrapper', 'scrollable', shouldScroll)), style: {
+                            ...(isRN
+                                ? {
+                                    transform: [{ translateX: animValue }],
+                                }
+                                : {
+                                    transform: `translateX(${firstLap ? 0 : wrapperData.contentWidth}px)`,
+                                    animationDelay: `${firstLap ? delay : 0}ms`,
+                                    animationDuration: `${firstLap ? wrapperData.first : wrapperData.later}ms`,
+                                }),
+                        }, onAnimationEnd: handleAnimationEnd, onLayout: (event) => {
+                            setWrapperWidth(event.nativeEvent.layout.width);
+                        }, children: vertical ? (children) : (_jsx(Text, { className: classNames(bem.e('text')), children: children })) }) }) }), (closable || linkable) && (_jsx(Text, { className: bem.e('right-icon'), onClick: handleRightIconClick, children: rightIcon ?? (_jsx(Icon, { name: closable ? 'close' : linkable ? 'right' : '', size: 16, ...rightIconProps })) }))] }));
+};
+export default NoticeBar;