sard 1.0.0-canary.0

package/dist/icon/fontLoader.rn.js

@@ -0,0 +1,52 @@
+import { isLoading, loadAsync } from 'expo-font';
+import { internalFamily, } from './common';
+import iconfont from './font/iconfont.json';
+import { useForceRender } from '../use';
+import { useRef } from 'react';
+const mapFamilyGlyph = {};
+export function parseGlyphs(glyphs) {
+    const map = {};
+    glyphs.glyphs.forEach((item) => {
+        map[item.font_class] = item.unicode_decimal;
+    });
+    return map;
+}
+const loadPromises = {};
+export function loadFont(mapFamily) {
+    return Promise.all(Object.keys(mapFamily).map((family) => {
+        return new Promise((resolve, reject) => {
+            const { glyphs, font } = mapFamily[family];
+            loadPromises[family] = loadAsync({
+                [family]: font,
+            })
+                .then(resolve)
+                .catch(reject);
+            mapFamilyGlyph[family] = glyphs;
+        });
+    }));
+}
+function loadInternalFont() {
+    loadFont({
+        [internalFamily]: {
+            glyphs: parseGlyphs(iconfont),
+            font: require('./font/iconfont.ttf'),
+        },
+    });
+}
+loadInternalFont();
+export function useFonts(family, name = '') {
+    const forceRender = useForceRender();
+    const isListening = useRef(false);
+    if (isLoading(family) && !isListening.current) {
+        isListening.current = true;
+        loadPromises[family].then(() => {
+            forceRender();
+        });
+        return '';
+    }
+    const unicode = mapFamilyGlyph[family]?.[name];
+    if (!unicode) {
+        return '';
+    }
+    return String.fromCharCode(unicode);
+}

package/dist/icon/index.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType, FC } from 'react';
+import { ITouchEvent, ImageProps, TextProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+import { loadFont, parseGlyphs } from './fontLoader';
+export interface IconProps extends BaseProps {
+    name?: string;
+    family?: string;
+    prefix?: string;
+    size?: number;
+    color?: string;
+    imageMode?: ImageProps['mode'];
+    imageClass?: string;
+    onClick?: (event: ITouchEvent) => void;
+    _element?: ComponentType<TextProps>;
+}
+export interface IconFC extends FC<IconProps> {
+    loadFont: typeof loadFont;
+    parseGlyphs: typeof parseGlyphs;
+}
+export declare const Icon: IconFC;
+export default Icon;

package/dist/icon/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Image, Text, } from '@tarojs/components';
+import classNames from 'classnames';
+import { addPxInWeb, filterNullish, isFileUrl, isNumber, isRN } from '../utils';
+import { useBem } from '../use';
+import { useFonts, loadFont, parseGlyphs } from './fontLoader';
+import { internalFamily } from './common';
+const internalPrefix = 'sari';
+export const Icon = (props) => {
+    const { className, style, name = '', family = internalFamily, prefix, size, color, imageMode = 'aspectFill', imageClass, _element, ...restProps } = props;
+    const [bem] = useBem('icon');
+    const isImg = useMemo(() => {
+        // number表示react-native import导入的图片的对象的引入下标
+        return isNumber(name) || isFileUrl(String(name));
+    }, [name]);
+    const char = useFonts(family, name);
+    let mergedPrefix = prefix;
+    if (family === internalFamily) {
+        mergedPrefix = internalPrefix;
+    }
+    // 允许传递 Animated.Text 以便添加动画效果
+    const RootElement = _element ?? Text;
+    return (_jsx(RootElement, { ...restProps, className: classNames(bem.b(), {
+            [`${mergedPrefix || family}-${name}`]: !isRN && name && !isImg,
+        }, className), style: {
+            ...style,
+            fontFamily: family,
+            ...filterNullish({
+                fontSize: size,
+                lineHeight: size ? addPxInWeb(size * 1.25) : size,
+                color,
+            }),
+        }, children: isImg ? (_jsx(Image, { className: classNames(bem.e('image'), imageClass), src: name, mode: imageMode, style: filterNullish({
+                width: size,
+                height: size,
+            }) })) : (char) }));
+};
+Icon.loadFont = loadFont;
+Icon.parseGlyphs = parseGlyphs;
+export default Icon;

package/dist/icon/index.scss

@@ -0,0 +1,23 @@
+@import '../style/base.scss';
+@import './font/iconfont.scss';
+
+// #variables
+$sar-icon-image-size: $sar-text-base !default;
+// #endvariables
+
+@include bem(icon) {
+  @include b() {
+    font-family: sard-icons;
+    @include ifweb {
+      vertical-align: middle;
+    }
+  }
+
+  @include e(image) {
+    @include universal;
+    width: $sar-icon-image-size;
+    height: $sar-icon-image-size;
+    justify-content: center;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface IndexBarItemProps extends BaseProps {
+    title?: ReactNode;
+    anchorClass?: string;
+    anchorStyle?: CSSProperties;
+}
+export declare const IndexBarItem: import("react").ForwardRefExoticComponent<IndexBarItemProps & import("react").RefAttributes<any>>;
+export default IndexBarItem;

package/dist/index-bar/Item.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+export const IndexBarItem = forwardRef((props, ref) => {
+    const { className, style, children, title, anchorClass, anchorStyle, ...restProps } = props;
+    const [bem] = useBem('index-bar');
+    return (_jsxs(View, { ...restProps, ref: ref, className: classNames(bem.e('item'), className), style: style, children: [_jsx(View, { className: classNames(bem.e('item-anchor'), anchorClass), style: anchorStyle, children: title }), _jsx(View, { className: bem.e('item-content'), children: children })] }));
+});
+export default IndexBarItem;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BaseProps } from '../base';
+export interface IndexBarNavProps extends BaseProps {
+    items: (string | number)[];
+    panStart: () => void;
+    panEnd: () => void;
+    onChange: (key: string | number) => void;
+}
+export interface NavRef {
+    switchTo: (key: number | string) => void;
+}
+export declare const IndexBarNav: import("react").ForwardRefExoticComponent<IndexBarNavProps & import("react").RefAttributes<NavRef>>;
+export default IndexBarNav;

package/dist/index-bar/Nav.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { CustomWrapper, View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem, useEvent, useSelectorId, useThrottle } from '../use';
+import PanGestureDetector from '../pan-gesture-detector';
+import { usePan } from '../pan-gesture-detector/usePan';
+import { getRectByElement, minmax } from '../utils';
+import CSSTransition from '../transition/CSSTransition';
+export const IndexBarNav = forwardRef((props, ref) => {
+    const { items, panStart, panEnd, onChange } = props;
+    const [bem] = useBem('index-bar');
+    const contextId = useSelectorId();
+    const [activeKey, setActiveKey] = useState(items[0]);
+    const navRef = useRef();
+    const downNavHeight = useRef(0);
+    const downNavTop = useRef(0);
+    const scrollByOffset = (offsetY) => {
+        const index = minmax(Math.floor((offsetY / downNavHeight.current) * items.length), 0, items.length - 1);
+        const key = items[index];
+        if (key !== activeKey) {
+            setActiveKey(key);
+            onChange(key);
+        }
+    };
+    const panThrottleHandler = useThrottle((offsetY) => {
+        scrollByOffset(offsetY);
+    }, 100, {
+        leading: false,
+    });
+    const handlers = usePan({
+        async start(event) {
+            panStart();
+            setHintVisible(true);
+            const rect = await getRectByElement(navRef.current, contextId);
+            downNavHeight.current = rect.height || 0;
+            downNavTop.current = rect.top;
+            scrollByOffset(event.y0 - rect.top);
+        },
+        move(event) {
+            panThrottleHandler(event.moveY - downNavTop.current);
+        },
+        end() {
+            panEnd();
+            setHintVisible(false);
+        },
+    });
+    // hint >>>
+    const [hintVisible, setHintVisible] = useState(false);
+    const [hintRealVisible, setHintRealVisible] = useState(false);
+    const [hintTop, setHintTop] = useState('0%');
+    const getTipsTop = (index) => {
+        return ((index + 0.5) / items.length) * 100 + '%';
+    };
+    useEffect(() => {
+        if (activeKey) {
+            const index = items.indexOf(activeKey);
+            setHintTop(getTipsTop(index));
+        }
+    }, [activeKey]);
+    // <<< hint
+    const switchTo = useEvent((key) => {
+        setActiveKey(key);
+    });
+    useImperativeHandle(ref, () => ({
+        switchTo,
+    }), []);
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(View, { className: bem.e('nav-container'), children: _jsx(View, { className: bem.e('nav-wrapper'), children: _jsx(PanGestureDetector, { handlers: handlers, children: _jsxs(View, { className: bem.e('nav'), ref: navRef, children: [items.map((item) => {
+                                return (_jsx(View, { className: classNames(bem.e('nav-item'), bem.em('nav-item', 'active', item === activeKey)), children: item }, item));
+                            }), _jsx(CSSTransition, { in: hintVisible, timeout: 300, effect: "fade", onEnter: () => setHintRealVisible(true), onExited: () => setHintRealVisible(false), className: bem.e('hint'), style: {
+                                    top: hintTop,
+                                    display: hintVisible || hintRealVisible ? 'flex' : 'none',
+                                }, children: _jsx(View, { className: bem.e('hint-text'), children: activeKey }) })] }) }) }) }) }));
+});
+export default IndexBarNav;

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

@@ -0,0 +1,19 @@
+import { CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { IndexBarItem } from './Item';
+import { BaseProps } from '../base';
+export * from './Item';
+export interface IndexBarProps extends BaseProps {
+    defaultActiveKey?: number | string;
+    onChange?: (key: number | string) => void;
+    anchorClass?: string;
+    anchorStyle?: CSSProperties;
+    threshold?: number;
+}
+export interface IndexBarRef {
+    scrollTo: (key: number | string) => void;
+}
+export interface IndexBarFC extends ForwardRefExoticComponent<PropsWithoutRef<IndexBarProps> & RefAttributes<IndexBarRef>> {
+    Item: typeof IndexBarItem;
+}
+export declare const IndexBar: IndexBarFC;
+export default IndexBar;

package/dist/index-bar/index.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useCallback, } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { IndexBarItem } from './Item';
+import { useIndexableMap, useSetTimeout, useEvent, useBem, useThrottle, useSelectorId, } from '../use';
+import { matchScrollVisible, getRectByElement, isRN } from '../utils';
+import IndexBarNav from './Nav';
+import ScrollView from '../scroll-view';
+export * from './Item';
+export const IndexBar = forwardRef((props, ref) => {
+    const { className, style, children, defaultActiveKey, onChange, anchorClass, anchorStyle, threshold = 150, ...restProps } = props;
+    const [bem] = useBem('index-bar');
+    const keyList = useMemo(() => {
+        return (Children.map(children, (element, index) => {
+            return element.key ?? index;
+        }) || []);
+    }, [children]);
+    // scroll >>>
+    const activeKey = useRef(defaultActiveKey ?? keyList[0]);
+    const contextId = useSelectorId();
+    const indexBarRef = useRef(null);
+    const scrollViewRef = useRef(null);
+    const scrollTop = useRef(0);
+    const setScrollTop = useCallback((top) => {
+        scrollTop.current = top;
+        scrollViewRef.current?.scrollTop(top);
+    }, []);
+    const scrollThrottleHandler = useThrottle(async () => {
+        if (lockScroll.current) {
+            return;
+        }
+        matchScrollVisible(getCurrentItemsRect(), (index) => {
+            const key = keyList[index];
+            if (activeKey.current !== key) {
+                activeKey.current = key;
+                navRef.current?.switchTo(key);
+                onChange?.(key);
+            }
+        }, {
+            isRect: true,
+        });
+    }, threshold, {
+        leading: false,
+    });
+    const handleScroll = useEvent((event) => {
+        scrollTop.current = event.y;
+        scrollThrottleHandler();
+    });
+    const lockScroll = useRef(false);
+    const [unlockLater, cancelUnlock] = useSetTimeout(() => {
+        lockScroll.current = false;
+    }, 300);
+    const itemMap = useIndexableMap([]);
+    const scrollTo = useEvent(async (key) => {
+        const itemRect = initItemsRect.current[itemMap.getIndexByKey(key)];
+        if (itemRect) {
+            unlockLater();
+            lockScroll.current = true;
+            activeKey.current = key;
+            setScrollTop(itemRect.top);
+            navRef.current?.switchTo(key);
+        }
+    });
+    const initItemsRect = useRef([]);
+    const getInitItemsRect = async () => {
+        const indexBarRectTop = (await getRectByElement(indexBarRef.current, contextId)).top;
+        const elements = itemMap.data.map((item) => item[1][0]);
+        const rects = [];
+        for (let i = 0, l = elements.length; i < l; i++) {
+            const rect = await getRectByElement(elements[i], contextId);
+            rects.push({
+                ...rect,
+                top: rect.top - indexBarRectTop,
+                bottom: rect.bottom - indexBarRectTop,
+            });
+        }
+        return rects;
+    };
+    const getCurrentItemsRect = () => {
+        return initItemsRect.current.map((item) => {
+            return {
+                ...item,
+                top: item.top - scrollTop.current,
+                bottom: item.bottom - scrollTop.current,
+            };
+        });
+    };
+    const [getRectsLater, cancelGetRects] = useSetTimeout(async () => {
+        initItemsRect.current = await getInitItemsRect();
+        scrollTo(activeKey.current);
+    }, 50);
+    useEffect(() => {
+        setScrollTop(0);
+        if (!isRN) {
+            getRectsLater();
+        }
+        return cancelGetRects;
+    }, [children]);
+    useImperativeHandle(ref, () => ({
+        scrollTo,
+    }), []);
+    // <<< scroll
+    // >>> nav
+    const navRef = useRef(null);
+    const handlePanStart = useEvent(() => {
+        cancelUnlock();
+        lockScroll.current = true;
+    });
+    const handlePanEnd = useEvent(() => {
+        unlockLater();
+    });
+    const handleNavChange = useEvent((key) => {
+        scrollTo(key);
+        onChange?.(key);
+    });
+    // <<< nav
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, ref: indexBarRef, children: [_jsx(ScrollView, { contextId: contextId, ref: scrollViewRef, scrollY: true, onScroll: handleScroll, className: bem.e('scroll-view'), children: Children.map(children, (item, index) => {
+                        const key = item.key ?? index;
+                        return cloneElement(item, {
+                            key,
+                            anchorClass: classNames(anchorClass, item.props.anchorClass),
+                            anchorStyle: { ...anchorStyle, ...item.props.anchorStyle },
+                            ref: (element) => {
+                                itemMap.set(key, [element, item.props.title]);
+                            },
+                            ...(isRN
+                                ? {
+                                    onLayout: (event) => {
+                                        const layout = event.nativeEvent.layout;
+                                        initItemsRect.current[index] = {
+                                            top: layout.y,
+                                            bottom: layout.y + layout.height,
+                                        };
+                                    },
+                                }
+                                : null),
+                        });
+                    }) }), _jsx(IndexBarNav, { ref: navRef, items: keyList, panStart: handlePanStart, panEnd: handlePanEnd, onChange: handleNavChange })] }) }));
+});
+IndexBar.Item = IndexBarItem;
+export default IndexBar;

package/dist/index-bar/index.scss

@@ -0,0 +1,153 @@
+@use 'sass:math';
+@import '../style/base.scss';
+// #variables
+$sar-index-bar-anchor-padding: 0 16px !default;
+$sar-index-bar-anchor-font-size: $sar-text-base !default;
+$sar-index-bar-anchor-line-height: 32px !default;
+$sar-index-bar-anchor-color: $sar-tertiary-color !default;
+$sar-index-bar-anchor-bg-color: $sar-body-bg-color !default;
+
+$sar-index-bar-nav-wrapper-right: 4px !default;
+
+$sar-index-bar-nav-padding: 4px !default;
+$sar-index-bar-nav-bg-color: $sar-body-bg-color !default;
+
+$sar-index-bar-nav-item-font-size: 12px !default;
+$sar-index-bar-nav-item-size: 20px !default;
+$sar-index-bar-nav-item-color: $sar-body-color !default;
+$sar-index-bar-nav-item-active-color: $sar-white !default;
+$sar-index-bar-nav-item-active-bg-color: $sar-primary !default;
+
+$sar-index-bar-hint-width: 50px !default;
+$sar-index-bar-hint-height: 50px !default;
+$sar-index-bar-hint-right: 36px !default;
+$sar-index-bar-hint-border-radius: 100px 100px 0 100px !default;
+$sar-index-bar-hint-bg-color: $sar-mask !default;
+
+$sar-index-bar-hint-text-font-size: 24px !default;
+$sar-index-bar-hint-text-color: $sar-white !default;
+
+// 暗黑模式
+$sar-index-bar-anchor-dark-color: $sar-dark-tertiary-color !default;
+$sar-index-bar-anchor-dark-bg-color: $sar-dark-body-bg-color !default;
+$sar-index-bar-nav-dark-bg-color: $sar-dark-body-bg-color !default;
+$sar-index-bar-nav-item-dark-color: $sar-dark-body-color !default;
+// #endvariables
+
+@include bem(index-bar) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(scroll-view) {
+    height: 100%;
+  }
+
+  @include e(nav-container) {
+    @include universal;
+    position: absolute;
+    right: $sar-index-bar-nav-wrapper-right;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    justify-content: center;
+    @include ifweb {
+      touch-action: none;
+    }
+  }
+
+  @include e(nav-wrapper) {
+    @include universal;
+    padding: $sar-index-bar-nav-padding;
+    background-color: $sar-index-bar-nav-bg-color;
+    border-radius: $sar-rounded-full;
+    @include ifweb {
+      touch-action: none;
+    }
+  }
+
+  @include e(nav) {
+    @include universal;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include e(nav-item) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: $sar-index-bar-nav-item-size;
+    height: $sar-index-bar-nav-item-size;
+    border-radius: $sar-rounded-full;
+    font-size: $sar-index-bar-nav-item-font-size;
+    color: $sar-index-bar-nav-item-color;
+
+    @include m(active) {
+      color: $sar-index-bar-nav-item-active-color;
+      background-color: $sar-index-bar-nav-item-active-bg-color;
+    }
+  }
+
+  @include e(hint) {
+    @include universal;
+    position: absolute;
+    width: $sar-index-bar-hint-width;
+    height: $sar-index-bar-hint-height;
+    right: $sar-index-bar-hint-right;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: math.div(-$sar-index-bar-hint-height, 2);
+    border-radius: $sar-index-bar-hint-border-radius;
+    background-color: $sar-index-bar-hint-bg-color;
+    transform: rotate(-45deg);
+    pointer-events: none;
+  }
+
+  @include e(hint-text) {
+    @include universal;
+    font-size: $sar-index-bar-hint-text-font-size;
+    line-height: $sar-index-bar-hint-text-font-size * $sar-leading-none;
+    font-weight: $sar-font-bold;
+    transform: rotate(45deg);
+    color: $sar-index-bar-hint-text-color;
+  }
+
+  @include e(item-anchor) {
+    @include universal;
+    @include sticky;
+    top: 0;
+    z-index: 1;
+    padding: $sar-index-bar-anchor-padding;
+    font-size: $sar-index-bar-anchor-font-size;
+    line-height: $sar-index-bar-anchor-line-height;
+    color: $sar-index-bar-anchor-color;
+    background-color: $sar-index-bar-anchor-bg-color;
+  }
+
+  @include e(item-content) {
+    @include universal;
+    z-index: 0;
+  }
+}
+
+@include theme(dark) {
+  @include bem(index-bar) {
+    @include e(item-anchor) {
+      color: $sar-index-bar-anchor-dark-color;
+      background-color: $sar-index-bar-anchor-dark-bg-color;
+    }
+
+    @include e(nav-wrapper) {
+      @include universal;
+      background-color: $sar-index-bar-nav-dark-bg-color;
+    }
+
+    @include e(nav-item) {
+      color: $sar-index-bar-nav-item-dark-color;
+    }
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils';
+export * from './use';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils';
+export * from './use';

package/dist/index.scss

@@ -0,0 +1 @@
+@import './components.scss';

package/dist/input/index.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { ITouchEvent, InputProps as TaroInputProps, TextareaProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+interface InputBaseProps extends BaseProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxLength?: number;
+    showCount?: boolean;
+    count?: (currentCount: number, maxLength: number) => ReactNode;
+    autoHeight?: boolean;
+    borderless?: boolean;
+    inlaid?: boolean;
+    prepend?: ReactNode;
+    append?: ReactNode;
+    addon?: ReactNode;
+    clearable?: boolean;
+    showClearOnlyFocus?: boolean;
+    clear?: ReactNode;
+    onClear?: (value: '') => void;
+    onClick?: (event: ITouchEvent) => void;
+    focused?: boolean;
+    placeholder?: string;
+}
+interface InputInputProps extends InputBaseProps, Omit<TaroInputProps, 'style' | 'type' | 'ref'> {
+    type?: TaroInputProps['type'] | 'password';
+    confirmType?: TaroInputProps['confirmType'];
+}
+interface InputTextareaProps extends InputBaseProps, Omit<TextareaProps, 'style' | 'ref'> {
+    type: 'textarea';
+    confirmType?: TextareaProps['confirmType'];
+}
+export type InputProps = InputInputProps | InputTextareaProps;
+export declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;