sard 1.0.0-canary.0

package/dist/search/index.scss

@@ -0,0 +1,75 @@
+@import '../style/base.scss';
+// #variables
+$sar-search-padding-x: 12px !default;
+$sar-search-padding-y: 10px !default;
+$sar-search-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-search-input-bg-color: $sar-body-bg-color !default;
+$sar-search-input-disabled-bg-color: $sar-disabled-shallow-bg-color !default;
+$sar-search-icon-color: $sar-quaternary-color !default;
+
+// 暗黑模式
+$sar-search-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-search-input-dark-bg-color: $sar-dark-body-bg-color !default;
+$sar-search-input-disabled-dark-bg-color: $sar-dark-disabled-shallow-bg-color !default;
+$sar-search-icon-dark-color: $sar-dark-quaternary-color !default;
+// #endvariables
+
+@include bem(search) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: stretch;
+    padding: $sar-search-padding-y $sar-search-padding-x;
+    background-color: $sar-search-bg-color;
+  }
+
+  @include m(show-action) {
+    padding-right: 0;
+  }
+
+  @include e(input-wrapper) {
+    flex: 1;
+  }
+
+  @include e(input) {
+    background-color: $sar-search-input-bg-color;
+
+    @include m(round) {
+      border-radius: $sar-rounded-full;
+    }
+
+    @include m(disabled) {
+      background-color: $sar-search-input-disabled-bg-color;
+    }
+  }
+
+  @include e(button) {
+    height: auto;
+  }
+
+  @include e(icon) {
+    @include universal;
+    color: $sar-search-icon-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(search) {
+    @include b() {
+      background-color: $sar-search-dark-bg-color;
+    }
+
+    @include e(input) {
+      background-color: $sar-search-input-dark-bg-color;
+
+      @include m(disabled) {
+        background-color: $sar-search-input-disabled-dark-bg-color;
+      }
+    }
+
+    @include e(icon) {
+      color: $sar-search-icon-dark-color;
+    }
+  }
+}

package/dist/share-sheet/Item.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { IconProps } from '../icon';
+import { BaseProps } from '../base';
+export interface ShareSheetItemProps extends BaseProps {
+    name?: ReactNode;
+    label?: ReactNode;
+    color?: string;
+    background?: string;
+    icon?: IconProps | string;
+    disabled?: boolean;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const ShareSheetItem: FC<ShareSheetItemProps>;
+export default ShareSheetItem;

package/dist/share-sheet/Item.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import { Image, View } from '@tarojs/components';
+import { Icon } from '../icon';
+import { filterNullish, isFileUrl, isNumber, isString } from '../utils';
+import { useBem, useEvent } from '../use';
+import Pressable from '../pressable';
+export const ShareSheetItem = (props) => {
+    const { className, style, children, name, label, color, background, icon, disabled, onClick, ...restProps } = props;
+    const [bem] = useBem('share-sheet');
+    const isImg = useMemo(() => {
+        return isNumber(icon) || (isString(icon) && isFileUrl(icon));
+    }, [icon]);
+    const handleClick = useEvent((event) => {
+        if (!disabled) {
+            onClick?.(event);
+        }
+    });
+    return (_jsx(Pressable, { disabled: disabled, children: ({ pressed }) => (_jsx(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'disabled', disabled), bem.em('item', 'pressed', pressed), className), style: style, onClick: handleClick, children: children ?? (_jsxs(_Fragment, { children: [_jsx(View, { className: bem.e('icon-wrapper'), style: filterNullish({
+                            backgroundColor: background,
+                        }), children: isImg ? (_jsx(Image, { className: bem.e('img'), mode: "aspectFill", src: icon })) : (_jsx(Icon, { size: 24, ...icon, className: bem.e('icon'), style: filterNullish({
+                                color,
+                            }) })) }), name && _jsx(View, { className: bem.e('item-name'), children: name }), label && _jsx(View, { className: bem.e('item-label'), children: label })] })) })) }));
+};
+export default ShareSheetItem;

package/dist/share-sheet/Row.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+import { ShareSheetItemProps } from './Item';
+export interface ShareSheetRowProps extends BaseProps {
+    itemList?: ShareSheetItemProps[];
+    _onItemClick?: (itemProps: ShareSheetItemProps) => void;
+    _later?: boolean;
+}
+export declare const ShareSheetRow: FC<ShareSheetRowProps>;
+export default ShareSheetRow;

package/dist/share-sheet/Row.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Children, cloneElement } from 'react';
+import classNames from 'classnames';
+import { ScrollView, View } from '@tarojs/components';
+import { ShareSheetItem } from './Item';
+import { useBem } from '../use';
+import Halfline from '../halfline';
+export const ShareSheetRow = (props) => {
+    const { className, style, children, itemList, _onItemClick, _later, ...restProps } = props;
+    const [bem] = useBem('share-sheet');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.e('row'), className), style: style, children: [_jsx(ScrollView, { scrollX: true, showScrollbar: false, children: _jsx(View, { className: bem.e('row-content'), children: itemList
+                        ? itemList.map((itemProps, index) => (_createElement(ShareSheetItem, { ...itemProps, key: index, onClick: (event) => {
+                                _onItemClick?.(itemProps);
+                                itemProps.onClick?.(event);
+                            } })))
+                        : Children.map(children, (element) => {
+                            return cloneElement(element, {
+                                onClick: (event) => {
+                                    _onItemClick?.(element.props);
+                                    element.props.onClick?.(event);
+                                },
+                            });
+                        }) }) }), _later && _jsx(Halfline, { direction: "top" })] }));
+};
+export default ShareSheetRow;

package/dist/share-sheet/index.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, FC } from 'react';
+import { PopupProps } from '../popup';
+import { ShareSheetItem, ShareSheetItemProps } from './Item';
+import { ShareSheetRow } from './Row';
+import { BaseProps } from '../base';
+export * from './Item';
+export type ShareSheetItemList = ShareSheetItemProps[] | ShareSheetItemProps[][];
+export interface ShareSheetProps extends BaseProps, PopupProps {
+    itemList?: ShareSheetItemList;
+    title?: ReactNode;
+    description?: ReactNode;
+    cancel?: ReactNode;
+    onSelect?: (itemProps: ShareSheetItemProps) => void | Promise<any>;
+    onCancel?: () => void | Promise<any>;
+    onClose?: () => void | Promise<any>;
+    maskClosable?: boolean;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+}
+export interface ShareSheetFC extends FC<ShareSheetProps> {
+    Row: typeof ShareSheetRow;
+    Item: typeof ShareSheetItem;
+}
+export declare const ShareSheet: ShareSheetFC;
+export default ShareSheet;

package/dist/share-sheet/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, cloneElement, Children, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent } from '../use';
+import { Popup } from '../popup';
+import { ShareSheetItem } from './Item';
+import { ShareSheetRow } from './Row';
+import { isFunction, isNullish, noop } from '../utils';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+import SafeArea from '../safe-area';
+export * from './Item';
+export const ShareSheet = ((props) => {
+    const { className, style, children, itemList, title, description, cancel, onSelect, onCancel, onClose, maskClosable = true, onMaskClick, visible, defaultVisible, onVisible, ...restProps } = props;
+    const [bem] = useBem('share-sheet');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const perhapsClose = (callback) => {
+        if (isFunction(callback)) {
+            const result = callback();
+            if (result instanceof Promise) {
+                return result
+                    .then(() => {
+                    setInnerVisible?.(false);
+                })
+                    .catch(noop);
+            }
+        }
+        setInnerVisible?.(false);
+    };
+    const handleItemClick = useEvent((itemProps) => {
+        perhapsClose(() => {
+            return onSelect?.(itemProps);
+        });
+    });
+    const handleRequestClose = useEvent(() => {
+        setInnerVisible(false);
+    });
+    const handleMaskClick = useEvent((event) => {
+        onMaskClick?.(event);
+        if (maskClosable) {
+            perhapsClose(onClose);
+        }
+    });
+    const handleCancelClick = useEvent(() => {
+        perhapsClose(onCancel);
+    });
+    const rowList = useMemo(() => {
+        if (itemList) {
+            if (itemList.length && !Array.isArray(itemList[0])) {
+                return [itemList];
+            }
+            return itemList;
+        }
+    }, [itemList]);
+    return (_jsxs(Popup, { ...restProps, visible: innerVisible, effect: "slide-bottom", className: bem.e('popup'), style: style, contentClass: classNames(bem.b(), className), onMaskClick: handleMaskClick, onRequestClose: handleRequestClose, children: [(!isNullish(title) || !isNullish(description)) && (_jsxs(View, { className: bem.e('header'), children: [!isNullish(title) && _jsx(View, { className: bem.e('title'), children: title }), !isNullish(description) && (_jsx(View, { className: classNames(bem.e('description'), bem.em('description', 'titled', !isNullish(title))), children: description })), _jsx(Halfline, { direction: "bottom" })] })), _jsx(View, { className: bem.e('body'), children: rowList
+                    ? rowList.map((itemList, index) => (_jsx(ShareSheetRow, { itemList: itemList, className: classNames(bem.em('row', 'headless-first', isNullish(title) && isNullish(description) && index === 0)), _onItemClick: (itemProps) => {
+                            handleItemClick(itemProps);
+                        }, _later: index > 0 }, index)))
+                    : Children.map(children, (element, index) => {
+                        return cloneElement(element, {
+                            _later: index > 0,
+                            _onItemClick: (itemProps) => {
+                                handleItemClick(itemProps);
+                            },
+                        });
+                    }) }), !isNullish(cancel) && (_jsxs(_Fragment, { children: [_jsx(View, { className: bem.e('gap') }), _jsx(Pressable, { children: ({ pressed }) => (_jsx(View, { className: classNames(bem.e('cancel'), bem.em('cancel', 'pressed', pressed)), onClick: handleCancelClick, children: cancel })) })] })), _jsx(SafeArea, { direction: "bottom" })] }));
+});
+ShareSheet.Row = ShareSheetRow;
+ShareSheet.Item = ShareSheetItem;
+export default ShareSheet;

package/dist/share-sheet/index.scss

@@ -0,0 +1,230 @@
+@import '../style/base.scss';
+// #variables
+$sar-share-sheet-z-index: 1100 !default;
+
+$sar-share-sheet-border-radius: $sar-rounded-xl !default;
+$sar-share-sheet-bg-color: $sar-emphasis-bg-color !default;
+
+$sar-share-sheet-header-padding: 16px !default;
+
+$sar-share-sheet-title-font-size: $sar-text-lg !default;
+
+$sar-share-sheet-description-margin-top: 8px !default;
+$sar-share-sheet-description-font-size: $sar-text-base !default;
+$sar-share-sheet-description-color: $sar-tertiary-color !default;
+
+$sar-share-sheet-row-padding-y: 16px !default;
+$sar-share-sheet-row-padding-x: 8px !default;
+
+$sar-share-sheet-item-active-opacity: $sar-active-opacity !default;
+
+$sar-share-sheet-icon-wrapper-size: 48px !default;
+$sar-share-sheet-icon-wrapper-margin-x: 16px !default;
+$sar-share-sheet-icon-wrapper-border-radius: $sar-rounded-full !default;
+
+$sar-share-sheet-icon-font-size: 24px !default;
+$sar-share-sheet-icon-color: $sar-tertiary-color !default;
+$sar-share-sheet-icon-bg-color: $sar-secondary-bg-color !default;
+
+$sar-share-sheet-name-margin-top: 8px !default;
+$sar-share-sheet-name-padding-x: 4px !default;
+$sar-share-sheet-name-font-size: $sar-text-base !default;
+$sar-share-sheet-name-color: $sar-tertiary-color !default;
+
+$sar-share-sheet-label-margin-top: 0 !default;
+$sar-share-sheet-label-padding-x: 4px !default;
+$sar-share-sheet-label-font-size: $sar-text-sm !default;
+$sar-share-sheet-label-color: $sar-tertiary-color !default;
+
+$sar-share-sheet-gap-bg-color: $sar-gray-100 !default;
+$sar-share-sheet-gap-height: 8px !default;
+
+$sar-share-sheet-cancel-min-height: 48px !default;
+$sar-share-sheet-cancel-padding: 8px 16px !default;
+$sar-share-sheet-cancel-font-size: $sar-text-lg !default;
+$sar-share-sheet-cancel-active-bg-color: $sar-active-bg-color !default;
+
+// 暗黑模式
+$sar-share-sheet-dark-bg-color: $sar-dark-emphasis-bg-color !default;
+$sar-share-sheet-description-dark-color: $sar-dark-tertiary-color !default;
+$sar-share-sheet-icon-dark-color: $sar-dark-tertiary-color !default;
+$sar-share-sheet-icon-dark-bg-color: $sar-dark-secondary-bg-color !default;
+$sar-share-sheet-name-dark-color: $sar-dark-tertiary-color !default;
+$sar-share-sheet-label-dark-color: $sar-dark-tertiary-color !default;
+$sar-share-sheet-gap-dark-bg-color: $sar-gray-900 !default;
+$sar-share-sheet-cancel-active-dark-bg-color: $sar-dark-active-bg-color !default;
+// #endvariables
+
+@include bem(share-sheet) {
+  @include b() {
+    border-top-left-radius: $sar-share-sheet-border-radius;
+    border-top-right-radius: $sar-share-sheet-border-radius;
+    background-color: $sar-share-sheet-bg-color;
+    @include ifweb {
+      touch-action: pan-x;
+    }
+  }
+
+  @include e(popup) {
+    z-index: $sar-share-sheet-z-index;
+  }
+
+  @include e(header) {
+    @include universal;
+    padding: $sar-share-sheet-header-padding;
+  }
+
+  @include e(title) {
+    @include universal;
+    font-size: $sar-share-sheet-title-font-size;
+    font-weight: $sar-font-bold;
+    text-align: center;
+  }
+
+  @include e(description) {
+    @include universal;
+    font-size: $sar-share-sheet-description-font-size;
+    text-align: center;
+    color: $sar-share-sheet-description-color;
+
+    @include m(titled) {
+      margin-top: $sar-share-sheet-description-margin-top;
+    }
+  }
+
+  @include e(row) {
+    @include universal;
+  }
+
+  @include e(row-content) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: $sar-share-sheet-row-padding-y $sar-share-sheet-row-padding-x;
+
+    @include m(headless-first) {
+      border-top-left-radius: $sar-share-sheet-border-radius;
+      border-top-right-radius: $sar-share-sheet-border-radius;
+    }
+  }
+
+  @include e(item) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(pressed) {
+      opacity: $sar-share-sheet-item-active-opacity;
+    }
+
+    @include m(disabled) {
+      @include disabled;
+    }
+  }
+
+  @include e(icon-wrapper) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: $sar-share-sheet-icon-wrapper-size;
+    height: $sar-share-sheet-icon-wrapper-size;
+    margin: 0 $sar-share-sheet-icon-wrapper-margin-x;
+    border-radius: $sar-share-sheet-icon-wrapper-border-radius;
+    background-color: $sar-share-sheet-icon-bg-color;
+  }
+
+  @include e(icon) {
+    font-size: $sar-share-sheet-icon-font-size;
+    color: $sar-share-sheet-icon-color;
+  }
+
+  @include e(img) {
+    @include universal;
+    width: 100%;
+    height: 100%;
+    border-radius: $sar-share-sheet-icon-wrapper-border-radius;
+  }
+
+  @include e(item-name) {
+    @include universal;
+    margin-top: $sar-share-sheet-name-margin-top;
+    padding: 0 $sar-share-sheet-name-padding-x;
+    font-size: $sar-share-sheet-name-font-size;
+    color: $sar-share-sheet-name-color;
+  }
+
+  @include e(item-label) {
+    @include universal;
+    margin-top: $sar-share-sheet-label-margin-top;
+    padding: 0 $sar-share-sheet-label-padding-x;
+    font-size: $sar-share-sheet-label-font-size;
+    color: $sar-share-sheet-label-color;
+  }
+
+  @include e(gap) {
+    @include universal;
+    height: $sar-share-sheet-gap-height;
+    background-color: $sar-share-sheet-gap-bg-color;
+  }
+
+  @include e(cancel) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    min-height: $sar-share-sheet-cancel-min-height;
+    padding: $sar-share-sheet-cancel-padding;
+    font-size: $sar-share-sheet-cancel-font-size;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(pressed) {
+      background-color: $sar-share-sheet-cancel-active-bg-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(share-sheet) {
+    @include b() {
+      background-color: $sar-share-sheet-dark-bg-color;
+    }
+
+    @include e(description) {
+      color: $sar-share-sheet-description-dark-color;
+    }
+
+    @include e(icon-wrapper) {
+      background-color: $sar-share-sheet-icon-dark-bg-color;
+    }
+
+    @include e(icon) {
+      color: $sar-share-sheet-icon-dark-color;
+    }
+
+    @include e(item-name) {
+      color: $sar-share-sheet-name-dark-color;
+    }
+
+    @include e(item-label) {
+      color: $sar-share-sheet-label-dark-color;
+    }
+
+    @include e(gap) {
+      background-color: $sar-share-sheet-gap-dark-bg-color;
+    }
+
+    @include e(cancel) {
+      @include m(pressed) {
+        background-color: $sar-share-sheet-cancel-active-dark-bg-color;
+      }
+    }
+  }
+}

package/dist/skeleton/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SkeletonBlockProps } from './Block';
+export interface SkeletonAvatarProps extends SkeletonBlockProps {
+    size?: number | string;
+}
+export declare const SkeletonAvatar: FC<SkeletonAvatarProps>;
+export default SkeletonAvatar;

package/dist/skeleton/Avatar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { SkeletonBlock } from './Block';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const SkeletonAvatar = (props) => {
+    const { className, size, style, round, ...restProps } = props;
+    const [bem] = useBem('skeleton');
+    return (_jsx(SkeletonBlock, { ...restProps, round: round, className: classNames(bem.e('avatar'), className), style: {
+            ...style,
+            ...filterNullish({
+                width: size,
+                height: size,
+            }),
+        } }));
+};
+export default SkeletonAvatar;

package/dist/skeleton/Block.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface SkeletonBlockProps extends BaseProps {
+    animated?: boolean;
+    round?: boolean;
+}
+export declare const SkeletonBlock: FC<SkeletonBlockProps>;
+export default SkeletonBlock;

package/dist/skeleton/Block.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { useBem } from '../use';
+import { Animated } from '../animated';
+import { isRN } from '../utils';
+export const SkeletonBlock = (props) => {
+    const { className, style, animated, round, children, ...restProps } = props;
+    const [bem] = useBem('skeleton');
+    // Animated >>>
+    const anim = useMemo(() => new Animated.Value(1), []);
+    const startAnimate = () => {
+        const loopAnim = Animated.loop(Animated.sequence([
+            Animated.timing(anim, {
+                toValue: 0.5,
+                duration: 600,
+                useNativeDriver: true,
+            }),
+            Animated.timing(anim, {
+                toValue: 1,
+                duration: 600,
+                useNativeDriver: true,
+            }),
+        ]));
+        loopAnim.start();
+        return loopAnim;
+    };
+    useEffect(() => {
+        let loopAnim;
+        if (animated) {
+            loopAnim = startAnimate();
+        }
+        return () => {
+            loopAnim?.stop();
+            anim.stopAnimation();
+        };
+    }, [animated]);
+    // <<< Animated
+    return (_jsx(Animated.View, { ...restProps, className: classNames(bem.e('block'), bem.m('animated', animated), bem.m('round', round), className), style: {
+            ...style,
+            ...(isRN ? { opacity: anim } : null),
+        }, children: children }));
+};
+export default SkeletonBlock;

package/dist/skeleton/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SkeletonBlockProps } from './Block';
+export interface SkeletonParagraphProps extends SkeletonBlockProps {
+    rows?: number;
+}
+export declare const SkeletonParagraph: FC<SkeletonParagraphProps>;
+export default SkeletonParagraph;

package/dist/skeleton/Paragraph.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { SkeletonBlock } from './Block';
+import { useBem } from '../use';
+export const SkeletonParagraph = (props) => {
+    const { className, style, rows = 3, animated, round, ...restProps } = props;
+    const [bem] = useBem('skeleton');
+    return (_jsx(View, { ...restProps, className: classNames(bem.e('paragraph'), className), style: style, children: Array(rows)
+            .fill(0)
+            .map((_, index) => (_jsx(SkeletonBlock, { className: classNames(bem.e('row'), bem.em('row', 'later', index > 0), bem.em('row', 'last', index === rows - 1)), animated: animated, round: round }, index))) }));
+};
+export default SkeletonParagraph;

package/dist/skeleton/Title.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SkeletonBlockProps } from './Block';
+export interface SkeletonTitleProps extends SkeletonBlockProps {
+    width?: number | string;
+}
+export declare const SkeletonTitle: FC<SkeletonTitleProps>;
+export default SkeletonTitle;

package/dist/skeleton/Title.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { SkeletonBlock } from './Block';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const SkeletonTitle = (props) => {
+    const { className, style, width, ...restProps } = props;
+    const [bem] = useBem('skeleton');
+    return (_jsx(SkeletonBlock, { ...restProps, className: classNames(bem.e('title'), className), style: {
+            ...style,
+            ...filterNullish({
+                width,
+            }),
+        } }));
+};
+export default SkeletonTitle;

package/dist/skeleton/index.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { SkeletonBlock } from './Block';
+import { SkeletonAvatar } from './Avatar';
+import { SkeletonTitle } from './Title';
+import { SkeletonParagraph } from './Paragraph';
+import { BaseProps } from '../base';
+export * from './Block';
+export * from './Avatar';
+export * from './Title';
+export * from './Paragraph';
+export interface SkeletonProps extends BaseProps {
+    rows?: number;
+    title?: boolean;
+    avatar?: boolean;
+    avatarSize?: number | string;
+    avatarRound?: boolean;
+    round?: boolean;
+    loading?: boolean;
+    animated?: boolean;
+}
+export interface SkeletonFC extends FC<SkeletonProps> {
+    Block: typeof SkeletonBlock;
+    Avatar: typeof SkeletonAvatar;
+    Title: typeof SkeletonTitle;
+    Paragraph: typeof SkeletonParagraph;
+}
+export declare const Skeleton: SkeletonFC;
+export default Skeleton;

package/dist/skeleton/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { SkeletonBlock } from './Block';
+import { SkeletonAvatar } from './Avatar';
+import { SkeletonTitle } from './Title';
+import { SkeletonParagraph } from './Paragraph';
+import { useBem } from '../use';
+export * from './Block';
+export * from './Avatar';
+export * from './Title';
+export * from './Paragraph';
+export const Skeleton = (props) => {
+    const { className, style, children, rows = 3, title = false, avatar = false, avatarSize = 32, avatarRound = false, round = false, loading = true, animated = false, ...restProps } = props;
+    const [bem] = useBem('skeleton');
+    return (_jsx(_Fragment, { children: loading ? (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [avatar && (_jsx(SkeletonAvatar, { size: avatarSize, animated: animated, round: avatarRound, className: bem.em('avatar', 'in-skeleton') })), _jsxs(View, { className: bem.e('content'), children: [title && _jsx(SkeletonTitle, { animated: animated, round: round }), _jsx(SkeletonParagraph, { rows: rows, animated: animated, round: round, className: bem.em('paragraph', 'in-skeleton') })] })] })) : (children) }));
+};
+Skeleton.Block = SkeletonBlock;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Title = SkeletonTitle;
+Skeleton.Paragraph = SkeletonParagraph;
+export default Skeleton;