sard 1.0.0-canary.0

package/dist/tag/index.scss

@@ -0,0 +1,93 @@
+@import '../style/base.scss';
+// #variables
+$sar-tag-sizes: (
+  small: (
+    padding: 0 2px,
+    font-size: $sar-text-xs,
+    line-height: 14px,
+    border-radius: $sar-rounded-xs,
+  ),
+  medium: (
+    padding: 0 4px,
+    font-size: $sar-text-sm,
+    line-height: 18px,
+    border-radius: $sar-rounded-sm,
+  ),
+  large: (
+    padding: 0 6px,
+    font-size: $sar-text-base,
+    line-height: 22px,
+    border-radius: $sar-rounded,
+  ),
+);
+
+$sar-tag-close-margin-left: 4px !default;
+// #endvariables
+
+@include bem(tag) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-self: center;
+    border: 1px solid transparent;
+    color: $sar-white;
+  }
+
+  @each $theme, $value in $sar-theme-colors {
+    $color: nth($value, 1);
+
+    @include m($theme) {
+      background-color: $color;
+    }
+
+    @include m(#{$theme}-plain) {
+      color: $color;
+      border-color: $color;
+      background-color: transparent;
+    }
+  }
+
+  // 尺寸
+  @each $size, $value in $sar-tag-sizes {
+    @include m($size) {
+      padding: map-get($value, padding);
+      font-size: map-get($value, font-size);
+      line-height: map-get($value, line-height);
+      border-radius: map-get($value, border-radius);
+    }
+  }
+
+  // 圆角
+  @include m(round) {
+    border-radius: $sar-rounded-full;
+  }
+
+  // 标记
+  @include m(mark) {
+    border-top-right-radius: $sar-rounded-full;
+    border-bottom-right-radius: $sar-rounded-full;
+  }
+
+  // 可关闭的
+  @include e(close) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    margin-left: $sar-tag-close-margin-left;
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    color: $sar-white;
+
+    @each $theme, $value in $sar-theme-colors {
+      $color: nth($value, 1);
+
+      @include m(#{$theme}-plain) {
+        color: $color;
+      }
+    }
+  }
+}

package/dist/template/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface TemplateProps extends BaseProps {
+}
+export declare const Template: FC<TemplateProps>;
+export default Template;

package/dist/template/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { useBem } from '../use';
+export const Template = (props) => {
+    const { className, style, children, ...restProps } = props;
+    const [bem] = useBem('template');
+    return (_jsx(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: children }));
+};
+export default Template;

package/dist/template/index.scss

@@ -0,0 +1,16 @@
+@import '../style/base.scss';
+
+// #variables
+// #endvariables
+
+// @include bem(template) {
+//   @include b() {
+//     @include m() {
+//     }
+//   }
+
+//   @include e() {
+//     @include m() {
+//     }
+//   }
+// }

package/dist/toast/Agent.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ToastProps, ToastRef } from './Toast';
+import { AgentProps, MapIdAgent } from '../utils/imperative';
+export declare const mapIdAgent: MapIdAgent<ToastProps, ToastRef>;
+export declare const ToastAgent: (agentProps: AgentProps<ToastProps>) => import("react").CElement<any, import("react").Component<any, any, any>>;
+export default ToastAgent;

package/dist/toast/Agent.js

@@ -0,0 +1,7 @@
+import { Toast } from './Toast';
+import { useAgent } from '../utils/imperative';
+export const mapIdAgent = {};
+export const ToastAgent = (agentProps) => {
+    return useAgent(Toast, agentProps, mapIdAgent, 'toast');
+};
+export default ToastAgent;

package/dist/toast/Toast.d.ts

@@ -0,0 +1,24 @@
+import { ForwardRefExoticComponent, ReactNode, PropsWithoutRef, RefAttributes } from 'react';
+import { LoadingProps } from '../loading';
+import { PopupProps } from '../popup';
+import { IconProps } from '../icon';
+export interface ToastProps extends PopupProps {
+    type?: 'text' | 'loading' | 'success' | 'fail' | 'custom';
+    title?: ReactNode;
+    icon?: ReactNode;
+    iconProps?: IconProps;
+    loadingProps?: LoadingProps;
+    duration?: number;
+    onTimeout?: (visible: false) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisible?: (visible: boolean) => void;
+    placement?: 'top' | 'bottom';
+}
+export interface ToastRef {
+    cancelHide: () => void;
+    hideLater: () => void;
+}
+export type ToastFC = ForwardRefExoticComponent<PropsWithoutRef<ToastProps> & RefAttributes<ToastRef>>;
+export declare const Toast: ToastFC;
+export default Toast;

package/dist/toast/Toast.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, forwardRef, useImperativeHandle, } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Loading } from '../loading';
+import { Popup } from '../popup';
+import { Icon } from '../icon';
+import { useBem, useControllableValue, useSetTimeout } from '../use';
+export const Toast = forwardRef((props, ref) => {
+    const { className, style, contentClass, contentStyle, mask = false, type = 'text', title, icon, iconProps, loadingProps, duration = 1500, onTimeout, visible, defaultVisible, onVisible, placement, ...restProps } = props;
+    const [bem] = useBem('toast');
+    const [innerVisible, setInnerVisible] = useControllableValue({
+        value: visible,
+        defaultValue: defaultVisible,
+        trigger: onVisible,
+        initialValue: false,
+    });
+    const [hideLater, cancelHide] = useSetTimeout(() => {
+        onTimeout?.(false);
+        setInnerVisible?.(false);
+    }, duration, {
+        canDelay: () => type !== 'loading' && duration !== 0,
+    });
+    useEffect(() => {
+        if (innerVisible) {
+            hideLater();
+        }
+        else {
+            cancelHide();
+        }
+    }, [innerVisible]);
+    useEffect(() => {
+        hideLater();
+    }, [duration, type]);
+    useImperativeHandle(ref, () => ({
+        hideLater,
+        cancelHide,
+    }), []);
+    const isText = type === 'text' && !icon && !iconProps;
+    return (_jsxs(Popup, { ...restProps, visible: innerVisible, mask: mask, effect: "fade", className: classNames(bem.e('popup'), bem.m(placement, placement), className), style: style, contentClass: classNames(bem.b(), bem.m('is-text', isText), bem.m('not-text', !isText), contentClass), contentStyle: contentStyle, onlyPopup: true, children: [(type !== 'text' || icon || iconProps) && (_jsx(View, { className: bem.e('icon-wrapper'), children: icon ||
+                    (type === 'loading' ? (_jsx(Loading, { size: 36, ...loadingProps, className: bem.e('loading') })) : (_jsx(Icon, { name: type, ...iconProps, className: bem.e('icon'), imageClass: bem.e('icon-image'), imageMode: "aspectFill" }))) })), _jsx(View, { className: bem.e('title'), children: title })] }));
+});
+export default Toast;

package/dist/toast/imperative.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ToastProps } from './Toast';
+export interface ToastOptions extends ToastProps {
+    id?: string;
+}
+export interface ToastShow {
+    (options: ToastOptions): void;
+    (title: ReactNode, options?: ToastOptions): void;
+}
+export interface ToastInternalShow {
+    (optionsOrTitle: ReactNode | ToastOptions, options?: ToastOptions, internalType?: ToastOptions['type']): void;
+}
+export declare const show: ToastShow;
+export declare const success: ToastShow;
+export declare const fail: ToastShow;
+export declare const loading: ToastShow;
+export declare const hide: (id?: string) => void;
+export declare const hideAll: () => void;

package/dist/toast/imperative.js

@@ -0,0 +1,35 @@
+import { mapIdAgent } from './Agent';
+import { isNotReactNode } from '../utils';
+const internalShow = (optionsOrTitle, options = {}, internalType) => {
+    if (isNotReactNode(optionsOrTitle)) {
+        options = optionsOrTitle;
+    }
+    else {
+        options.title = optionsOrTitle;
+    }
+    options.type = internalType;
+    const { id = 'toast' } = options;
+    const ref = mapIdAgent[id];
+    if (ref) {
+        ref.current?.hideLater();
+        ref.current?.show(options);
+    }
+};
+export const show = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, 'text');
+};
+export const success = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, 'success');
+};
+export const fail = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, 'fail');
+};
+export const loading = (optionsOrTitle, options) => {
+    internalShow(optionsOrTitle, options, 'loading');
+};
+export const hide = (id = 'toast') => {
+    mapIdAgent[id]?.current?.hide();
+};
+export const hideAll = () => {
+    Object.keys(mapIdAgent).forEach((key) => mapIdAgent[key]?.current?.hide());
+};

package/dist/toast/index.d.ts

@@ -0,0 +1,15 @@
+import type { ToastFC as ToastOriginFC, ToastProps, ToastRef } from './Toast';
+import { show, success, fail, loading, hide, hideAll } from './imperative';
+import { ToastAgent } from './Agent';
+interface ToastFC extends ToastOriginFC {
+    show: typeof show;
+    success: typeof success;
+    fail: typeof fail;
+    loading: typeof loading;
+    hide: typeof hide;
+    hideAll: typeof hideAll;
+    Agent: typeof ToastAgent;
+}
+declare const Toast: ToastFC;
+export { Toast, ToastProps, ToastRef };
+export default Toast;

package/dist/toast/index.js

@@ -0,0 +1,13 @@
+import { Toast as ToastOrigin } from './Toast';
+import { show, success, fail, loading, hide, hideAll } from './imperative';
+import { ToastAgent } from './Agent';
+const Toast = ToastOrigin;
+Toast.show = show;
+Toast.success = success;
+Toast.fail = fail;
+Toast.loading = loading;
+Toast.hide = hide;
+Toast.hideAll = hideAll;
+Toast.Agent = ToastAgent;
+export { Toast };
+export default Toast;

package/dist/toast/index.scss

@@ -0,0 +1,96 @@
+@import '../style/base.scss';
+// #variables
+$sar-toast-z-index: 1180 !default;
+
+$sar-toast-top: 20% !default;
+$sar-toast-bottom: 20% !default;
+
+$sar-toast-font-size: $sar-text-base !default;
+$sar-toast-width: $sar-toast-font-size * 9 !default;
+$sar-toast-not-text-min-height: $sar-toast-width !default;
+$sar-toast-padding-x: $sar-toast-font-size !default;
+$sar-toast-padding-y: $sar-toast-font-size !default;
+$sar-toast-border-radius: $sar-rounded-lg !default;
+$sar-toast-color: $sar-white !default;
+$sar-toast-bg-color: $sar-mask-illegible !default;
+
+$sar-toast-text-max-width: 80% !default;
+$sar-toast-text-padding-y: 10px !default;
+
+$sar-toast-icon-margin-bottom: 8px !default;
+$sar-toast-icon-size: 36px !default;
+
+$sar-toast-title-font-size: $sar-toast-font-size !default;
+$sar-toast-title-line-height: $sar-toast-title-font-size * $sar-leading-normal !default;
+// #endvariables
+
+@include bem(toast) {
+  @include b() {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    padding: $sar-toast-padding-y $sar-toast-padding-x;
+    border-radius: $sar-toast-border-radius;
+    background-color: $sar-toast-bg-color;
+  }
+
+  @include e(popup) {
+    z-index: $sar-toast-z-index;
+  }
+
+  @include e(icon-wrapper) {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    width: $sar-toast-icon-size;
+    height: $sar-toast-icon-size;
+    margin-bottom: $sar-toast-icon-margin-bottom;
+    text-align: center;
+  }
+
+  @include e(icon) {
+    font-size: $sar-toast-icon-size;
+    color: $sar-toast-color;
+  }
+
+  @include e(loading) {
+    color: $sar-toast-color;
+  }
+
+  @include e(icon-image) {
+    width: $sar-toast-icon-size;
+    height: $sar-toast-icon-size;
+  }
+
+  @include e(title) {
+    @include universal;
+    font-size: $sar-toast-title-font-size;
+    line-height: $sar-toast-title-line-height;
+    text-align: center;
+    color: $sar-toast-color;
+  }
+
+  @include m(top) {
+    padding-top: $sar-toast-top;
+    justify-content: flex-start;
+  }
+
+  @include m(bottom) {
+    padding-bottom: $sar-toast-bottom;
+    justify-content: flex-end;
+  }
+
+  @include m(is-text) {
+    max-width: $sar-toast-text-max-width;
+    padding-top: $sar-toast-text-padding-y;
+    padding-bottom: $sar-toast-text-padding-y;
+    @include ifweb {
+      word-break: break-word;
+    }
+  }
+
+  @include m(not-text) {
+    width: $sar-toast-width;
+    min-height: $sar-toast-not-text-min-height;
+  }
+}

package/dist/transition/CSSTransition.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TransitionProps } from './index';
+export interface CSSTransitionProps extends TransitionProps {
+    effect?: 'fade' | 'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom';
+}
+export declare const CSSTransition: FC<CSSTransitionProps>;
+export default CSSTransition;

package/dist/transition/CSSTransition.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import { Transition } from './index';
+import { useBem } from '../use';
+import { View } from '@tarojs/components';
+import { isFunction } from '../utils';
+export const CSSTransition = (props) => {
+    const { children, className, style, in: _in, timeout = 300, onEnter, onEntering, onEntered, onExit, onExiting, onExited, effect, ...restProps } = props;
+    const [bem] = useBem('transition');
+    const prefix = bem.m(effect);
+    const [clsName, setClsName] = useState('');
+    const addClass = (...stages) => {
+        if (effect) {
+            setClsName(stages.map((stage) => prefix + '-' + stage).join(' '));
+        }
+    };
+    const handleEnter = () => {
+        addClass('enter');
+        onEnter?.();
+    };
+    const handleEntering = () => {
+        addClass('entering');
+        onEntering?.();
+    };
+    const handleEntered = () => {
+        addClass('entered');
+        onEntered?.();
+    };
+    const handleExit = () => {
+        addClass('exit');
+        onExit?.();
+    };
+    const handleExiting = () => {
+        addClass('exiting');
+        onExiting?.();
+    };
+    const handleExited = () => {
+        addClass('exited');
+        onExited?.();
+    };
+    return (_jsx(Transition, { ...restProps, in: _in, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, children: ({ status, timeouts }, props) => (_jsx(View, { ...props, style: {
+                ...style,
+                animationDuration: `${_in ? timeouts.enter : timeouts.exit}ms`,
+            }, className: classNames(clsName, className), children: isFunction(children)
+                ? children({ status, timeouts }, restProps)
+                : children })) }));
+};
+export default CSSTransition;

package/dist/transition/CSSTransition.rn.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TransitionProps } from './index';
+export interface CSSTransitionProps extends TransitionProps {
+    effect?: 'fade' | 'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom';
+}
+export declare const CSSTransition: FC<CSSTransitionProps>;
+export default CSSTransition;