sard 1.0.0-canary.0

package/dist/input/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { View, Input as TaroInput, Textarea, CustomWrapper, } from '@tarojs/components';
+import { useBem, useControllableValue, useSelectorId, useSetTimeout, } from '../use';
+import { Icon } from '../icon';
+import { filterNullish, isBoolean, isH5, isNullish, isString } from '../utils';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+const inputMinHeight = 24;
+const textareaMinHeight = 52;
+export const Input = (props) => {
+    const { style: { height, minHeight, maxHeight, color, textAlign, ...restStyle } = {}, className, value, defaultValue, onChange, disabled, readOnly, maxLength = 140, showCount, count = (currentCount, maxLength) => `${currentCount}${maxLength !== -1 && ' / ' + maxLength}`, autoHeight, borderless, inlaid, prepend, append, addon, clearable, showClearOnlyFocus, clear, onClear, onClick, onFocus, onBlur, focused, placeholder = '', placeholderClass, placeholderStyle, cursorSpacing = 10, type = 'text', confirmType, confirmHold, ...restProps } = props;
+    const [bem] = useBem('input');
+    const controlId = useSelectorId();
+    const [innerValue, setInnerValue] = useControllableValue({
+        value,
+        defaultValue,
+        trigger: onChange,
+        initialValue: '',
+    });
+    const [innerFocused, setInnerFocused] = useState(false);
+    const handleFocus = (event) => {
+        setInnerFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setInnerFocused(false);
+        onBlur?.(event);
+    };
+    const handleClear = (event) => {
+        event.stopPropagation?.();
+        setInnerValue('');
+        onClear?.('');
+    };
+    const handleTouchStart = (event) => {
+        event.stopPropagation?.();
+        if (showClearOnlyFocus) {
+            setClearVisible(true);
+            hideClearLater();
+        }
+    };
+    const handleChange = (event) => {
+        const text = event.detail.value;
+        setInnerValue(text);
+        return text;
+    };
+    const [clearVisible, setClearVisible] = useState(false);
+    const [hideClearLater] = useSetTimeout(() => {
+        setClearVisible(false);
+    }, 600);
+    useEffect(() => {
+        let style;
+        if (isH5 && placeholderStyle) {
+            style = document.createElement('style');
+            style.textContent = `#${controlId} input::-webkit-input-placeholder {${placeholderStyle}}`;
+            document.head.appendChild(style);
+        }
+        return () => {
+            if (style) {
+                document.head.removeChild(style);
+            }
+        };
+    }, [placeholderStyle]);
+    const finalMinHeight = minHeight ?? (type === 'textarea' ? textareaMinHeight : inputMinHeight);
+    const controlProps = {
+        ...restProps,
+        id: controlId,
+        autoComplete: 'off',
+        value: String(innerValue),
+        placeholder,
+        placeholderStyle,
+        placeholderClass: classNames(placeholderClass, bem.e('placeholder')),
+        password: type === 'password',
+        maxlength: maxLength,
+        disabled: disabled || readOnly,
+        autoHeight,
+        onInput: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        cursorSpacing,
+        style: filterNullish({
+            height: autoHeight ? 'auto' : height ?? finalMinHeight,
+            minHeight: finalMinHeight,
+            maxHeight,
+            color,
+            textAlign,
+        }),
+        // rn
+        height: height ?? finalMinHeight,
+        minHeight: finalMinHeight,
+        maxHeight,
+        color,
+        textAlign,
+    };
+    const controlClass = classNames(bem.e('control'), bem.em('control', 'is-textarea', type === 'textarea'), bem.em('control', 'readonly', readOnly), bem.em('control', 'disabled', disabled));
+    const inputProps = {
+        ...controlProps,
+        type: type === 'password' || type === 'textarea' ? 'text' : type,
+        confirmType: confirmType !== 'return' ? confirmType : undefined,
+        confirmHold: isBoolean(confirmHold) ? confirmHold : undefined,
+    };
+    const textareaProps = {
+        ...controlProps,
+        confirmType,
+        confirmHold: isString(confirmHold) ? confirmHold : undefined,
+    };
+    return (_jsx(CustomWrapper, { children: _jsxs(View, { style: {
+                borderWidth: !inlaid && !borderless ? Halfline.lineWidth : 0,
+                ...restStyle,
+            }, className: classNames(bem.b(), bem.m('inlaid', inlaid), bem.m('borderless', borderless), bem.m('disabled', disabled), bem.m('focused', focused || innerFocused), className), onClick: onClick, children: [_jsxs(View, { className: bem.e('content'), children: [!isNullish(prepend) && (_jsx(View, { className: bem.e('prepend'), children: prepend })), type === 'textarea' ? (_jsx(Textarea, { ...textareaProps, className: controlClass })) : (_jsx(TaroInput, { ...inputProps, className: controlClass })), clearable && innerValue && !disabled && !readOnly && (_jsx(Pressable, { onTouchStart: handleTouchStart, onTouchEnd: handleClear, children: () => {
+                                return (_jsx(View, { className: classNames(bem.e('clear'), bem.em('clear', 'hide', showClearOnlyFocus &&
+                                        !(focused || innerFocused || clearVisible))), children: clear || (_jsx(Icon, { name: "x-circle-fill", className: bem.e('clear-icon') })) }));
+                            } })), !isNullish(append) && (_jsx(View, { className: bem.e('append'), children: append })), addon] }), showCount && count && (_jsx(View, { className: classNames(bem.e('count'), bem.em('count', 'is-textarea', type === 'textarea')), children: count(String(innerValue).length, maxLength) }))] }) }));
+};
+export default Input;

package/dist/input/index.scss

@@ -0,0 +1,249 @@
+@import '../style/base.scss';
+// #variables
+$sar-input-padding-y: 5px !default;
+$sar-input-padding-borderless-y: 6px !default;
+$sar-input-padding-x: 12px !default;
+$sar-input-border-radius: $sar-rounded !default;
+$sar-input-border-color: $sar-border-color !default;
+$sar-input-transition-duration: $sar-duration !default;
+
+$sar-input-focused-border-color: $sar-primary !default;
+
+$sar-input-control-padding-y: 2px !default;
+$sar-input-control-padding-x: 2px !default;
+$sar-input-control-font-size: $sar-text-base !default;
+$sar-input-control-line-height: 24px !default;
+
+$sar-input-placeholder-color: $sar-deemphasis-color !default;
+
+$sar-input-prepend-gap-right: 8px !default;
+$sar-input-append-gap-left: 8px !default;
+
+$sar-input-clear-margin-right: -8px !default;
+$sar-input-clear-padding-x: 8px !default;
+$sar-input-clear-color: $sar-quaternary-color !default;
+
+$sar-input-count-font-size: $sar-text-sm !default;
+$sar-input-count-color: $sar-tertiary-color !default;
+
+// 暗黑模式
+$sar-input-border-dark-color: $sar-dark-border-color !default;
+$sar-input-placeholder-dark-color: $sar-dark-deemphasis-color !default;
+$sar-input-clear-dark-color: $sar-dark-quaternary-color !default;
+$sar-input-count-dark-color: $sar-dark-tertiary-color !default;
+// #endvariables
+
+@include bem(input) {
+  @include b() {
+    @include universal;
+    width: 100%;
+    padding: $sar-input-padding-y $sar-input-padding-x;
+    border: 1px solid $sar-input-border-color;
+    border-radius: $sar-input-border-radius;
+    font-family: inherit;
+    font-size: $sar-input-control-font-size;
+    line-height: $sar-input-control-line-height;
+    @include ifweb {
+      transition: $sar-input-transition-duration;
+    }
+
+    @include m(borderless) {
+      padding-top: $sar-input-padding-borderless-y;
+      padding-bottom: $sar-input-padding-borderless-y;
+      border-width: 0;
+    }
+
+    @include m(inlaid) {
+      padding: 0;
+      border-width: 0;
+    }
+
+    @include m(focused) {
+      border-color: $sar-input-focused-border-color;
+    }
+
+    @include m(disabled) {
+      background-color: $sar-disabled-shallow-bg-color;
+    }
+  }
+
+  // 兼容H5文本域文本溢出问题
+  @include ifweb {
+    taro-textarea-core {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  @include e(content) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  @include e(control) {
+    @include universal;
+    z-index: 0;
+    flex: 1;
+    align-self: center;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0 $sar-input-control-padding-x;
+    border-width: 0;
+
+    @include ifweb {
+      &,
+      .weui-input,
+      .taro-input,
+      .taro-textarea {
+        resize: none;
+        font-family: inherit;
+        font-size: inherit;
+        font-style: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        color: inherit;
+        text-align: inherit;
+        text-indent: inherit;
+        text-transform: inherit;
+        text-emphasis: inherit;
+        text-rendering: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+        background-color: transparent;
+
+        &::-webkit-input-placeholder {
+          line-height: inherit;
+          color: $sar-input-placeholder-color;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+      }
+
+      .weui-input {
+        &:disabled {
+          // 覆盖 iphone的opacity: 0.4
+          opacity: 1;
+        }
+        min-height: 100%;
+      }
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+    }
+
+    @include m(is-textarea) {
+      padding-top: $sar-input-control-padding-y;
+      padding-bottom: $sar-input-control-padding-y;
+      line-height: $sar-input-control-font-size * $sar-leading-tight;
+    }
+
+    @include m(readonly) {
+      pointer-events: none;
+    }
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+    }
+  }
+
+  @include e(placeholder) {
+    color: $sar-input-placeholder-color;
+  }
+
+  @include e(prepend, append) {
+    @include universal;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+  }
+
+  @include e(prepend) {
+    margin-right: $sar-input-prepend-gap-right;
+  }
+
+  @include e(append) {
+    margin-left: $sar-input-append-gap-left;
+  }
+
+  @include e(clear) {
+    @include universal;
+    z-index: 2;
+    flex: none;
+    width: auto;
+    align-self: stretch;
+    justify-content: center;
+    align-items: center;
+    margin-right: $sar-input-clear-margin-right;
+    padding: 0 $sar-input-clear-padding-x;
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(hide) {
+      display: none;
+    }
+  }
+
+  @include e(clear-icon) {
+    color: $sar-input-clear-color;
+  }
+
+  @include e(count) {
+    @include universal;
+    align-items: flex-end;
+    font-size: $sar-input-count-font-size;
+    line-height: $sar-input-count-font-size * $sar-leading-tight;
+    color: $sar-input-count-color;
+  }
+}
+
+@include theme(dark) {
+  @include bem(input) {
+    @include b() {
+      border-color: $sar-input-border-dark-color;
+
+      @include m(focused) {
+        border-color: $sar-input-focused-border-color;
+      }
+
+      @include m(disabled) {
+        background-color: $sar-dark-disabled-shallow-bg-color;
+      }
+    }
+
+    @include e(control) {
+      &,
+      .weui-input,
+      .taro-input,
+      .taro-textarea {
+        &::-webkit-input-placeholder {
+          color: $sar-input-placeholder-dark-color;
+        }
+      }
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+
+    @include e(placeholder) {
+      color: $sar-input-placeholder-dark-color;
+    }
+
+    @include e(clear-icon) {
+      color: $sar-input-clear-dark-color;
+    }
+
+    @include e(count) {
+      color: $sar-input-count-dark-color;
+    }
+  }
+}

package/dist/linear-gradient/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BaseProps } from '../base';
+export interface LinearGradientPoint {
+    x: number;
+    y: number;
+}
+export interface LinearGradientProps extends BaseProps {
+    colors?: string[];
+    start?: LinearGradientPoint;
+    end?: LinearGradientPoint;
+    locations?: number[];
+}
+export declare const LinearGradient: FC<LinearGradientProps>;
+export default LinearGradient;

package/dist/linear-gradient/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import { getAngle360, isNullish } from '../utils';
+export const LinearGradient = (props) => {
+    const { className, style, children, colors = [], start = {
+        x: 0.5,
+        y: 0,
+    }, end = {
+        x: 0.5,
+        y: 1,
+    }, locations = [], ...restProps } = props;
+    const getAngle = () => {
+        return getAngle360(start, end);
+    };
+    const getColors = () => {
+        return colors
+            .map((color, index) => {
+            const location = locations[index];
+            return isNullish(location)
+                ? color
+                : [color, location * 100 + '%'].join(' ');
+        })
+            .join(',');
+    };
+    return (_jsx(View, { ...restProps, className: className, style: {
+            ...style,
+            backgroundImage: `linear-gradient(${getAngle()}deg, ${getColors()})`,
+        }, children: children }));
+};
+export default LinearGradient;

package/dist/linear-gradient/index.rn.d.ts

@@ -0,0 +1,3 @@
+import { LinearGradient } from 'expo-linear-gradient';
+export { LinearGradient };
+export default LinearGradient;

package/dist/linear-gradient/index.rn.js

@@ -0,0 +1,3 @@
+import { LinearGradient } from 'expo-linear-gradient';
+export { LinearGradient };
+export default LinearGradient;

package/dist/list/Item.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface ListItemProps extends BaseProps {
+    title?: ReactNode;
+    label?: ReactNode;
+    value?: ReactNode;
+    footer?: ReactNode;
+    linkable?: boolean;
+    clickable?: boolean;
+    arrowDirection?: 'up' | 'right' | 'down';
+    arrow?: ReactNode;
+    icon?: ReactNode;
+    inset?: boolean;
+    bodyStyle?: CSSProperties;
+    bodyClass?: string;
+    footerStyle?: CSSProperties;
+    footerClass?: string;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const ListItem: FC<ListItemProps>;
+export default ListItem;

package/dist/list/Item.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+import { isNullish, pickContextNullish } from '../utils';
+import { OrderContext } from './OrderContext';
+import { ListContext } from './ListContext';
+import Icon from '../icon';
+import Halfline from '../halfline';
+import Pressable from '../pressable';
+export const ListItem = (props) => {
+    const { className, style, children, title, label, value, footer, linkable, clickable, arrowDirection = 'right', arrow, icon, inset, bodyStyle, bodyClass, footerStyle, footerClass, onClick, ...restProps } = props;
+    const [bem] = useBem('list');
+    const { index, count, card } = useContext(OrderContext);
+    const listContext = useContext(ListContext);
+    const contextProps = pickContextNullish({
+        inset,
+        bodyStyle,
+        bodyClass,
+        footerStyle,
+        footerClass,
+    }, listContext);
+    return (_jsx(Pressable, { disabled: !clickable && (clickable === false || !linkable), children: ({ pressed }) => (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'first', index === 0), bem.em('item', 'first-card', index === 0 && card), bem.em('item', 'last', index === count - 1), bem.em('item', 'last-card', index === count - 1 && card), bem.em('item', 'pressed', pressed), bem.em('item', 'clickable', clickable || (clickable !== false && linkable)), className), style: style, onClick: onClick, children: [!isNullish(icon) && (_jsxs(View, { className: classNames(bem.e('item-header'), bem.em('item-header', 'inset-later', contextProps.inset && index > 0)), children: [_jsx(View, { className: bem.e('icon'), children: icon }), contextProps.inset && index > 0 && _jsx(Halfline, { direction: "top" })] })), _jsxs(View, { className: classNames(bem.e('item-content'), bem.em('item-content', 'custom', !!children), bem.em('item-content', 'later', index > 0)), children: [index > 0 && _jsx(Halfline, { direction: "top" }), children ?? (_jsxs(_Fragment, { children: [_jsxs(View, { className: classNames(bem.e('item-body'), contextProps.bodyClass), style: contextProps.bodyStyle, children: [!isNullish(title) && (_jsx(View, { className: classNames(bem.e('item-title')), children: title })), !isNullish(label) && (_jsx(View, { className: bem.e('item-label'), children: label }))] }), _jsx(View, { className: classNames(bem.e('item-footer'), bem.em('item-footer', 'custom', !isNullish(footer)), contextProps.footerClass), style: contextProps.footerStyle, children: footer ?? (_jsxs(_Fragment, { children: [!isNullish(value) && (_jsx(View, { className: bem.e('item-value'), children: value })), linkable && (_jsx(View, { className: bem.e('item-arrow'), children: arrow ?? (_jsx(Icon, { name: arrowDirection, className: bem.e('item-arrow-icon') })) }))] })) })] }))] })] })) }));
+};
+export default ListItem;

package/dist/list/ListContext.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface ListContextValue {
+    inset?: boolean;
+    bodyStyle?: CSSProperties;
+    bodyClass?: string;
+    footerStyle?: CSSProperties;
+    footerClass?: string;
+}
+export declare const ListContext: import("react").Context<ListContextValue>;

package/dist/list/ListContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ListContext = createContext({});

package/dist/list/OrderContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface OrderContextValue {
+    index: number;
+    count: number;
+    card: boolean;
+}
+export declare const OrderContext: import("react").Context<OrderContextValue>;
+export {};

package/dist/list/OrderContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export const OrderContext = createContext({
+    index: 0,
+    count: 0,
+    card: false,
+});

package/dist/list/index.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { BaseProps } from '../base';
+import { ListItem } from './Item';
+export interface ListProps extends BaseProps {
+    title?: ReactNode;
+    label?: ReactNode;
+    inlaid?: boolean;
+    card?: boolean;
+    inset?: boolean;
+    bodyStyle?: CSSProperties;
+    bodyClass?: string;
+    footerStyle?: CSSProperties;
+    footerClass?: string;
+}
+export interface ListFC extends FC<ListProps> {
+    Item: typeof ListItem;
+}
+export declare const List: ListFC;
+export default List;

package/dist/list/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useMemo, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { isNullish } from '../utils';
+import { useBem } from '../use';
+import { ListItem } from './Item';
+import { ListContext } from './ListContext';
+import { OrderContext } from './OrderContext';
+import Halfline from '../halfline';
+export const List = (props) => {
+    const { className, style, children, title, label, inlaid, card = false, inset, bodyStyle, bodyClass, footerStyle, footerClass, ...restProps } = props;
+    const [bem] = useBem('list');
+    const listContextValue = useMemo(() => {
+        return {
+            inset,
+            bodyStyle,
+            bodyClass,
+            footerStyle,
+            footerClass,
+        };
+    }, [inset, bodyStyle, bodyClass, footerStyle, footerClass]);
+    const count = Children.count(children);
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m('card', card), className), style: style, children: [!isNullish(title) && (_jsx(View, { className: bem.e('header'), children: _jsx(View, { className: bem.e('title'), children: title }) })), _jsxs(View, { className: classNames(bem.e('body'), bem.em('body', 'card', card)), children: [!inlaid && !card && _jsx(Halfline, { direction: "top" }), _jsx(ListContext.Provider, { value: listContextValue, children: Children.map(children, (element, index) => {
+                            return (_jsx(OrderContext.Provider, { value: { index, count, card }, children: cloneElement(element) }));
+                        }) }), !inlaid && !card && _jsx(Halfline, { direction: "bottom" })] }), !isNullish(label) && (_jsx(View, { className: bem.e('footer'), children: _jsx(View, { className: bem.e('label'), children: label }) }))] }));
+};
+List.Item = ListItem;
+export default List;