@nutui/nutui-react-taro 1.5.2-beta.0 → 1.5.2-beta.1

package/dist/esm/timeselect.taro-a07036f4.js

@@ -0,0 +1,133 @@
+import React__default, { useState, useEffect } from 'react';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { T as TimePannel } from './timepannel.taro-d6e40180.js';
+import { T as TimeDetail } from './timedetail.taro-5b2f2269.js';
+import { c as cn } from './bem-350c1702.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+
+const defaultProps = {
+    className: '',
+    style: {},
+    visible: false,
+    height: '20%',
+    multiple: false,
+    currentKey: 0,
+    currentTime: [],
+    title: '取件时间',
+    dates: [],
+    times: [],
+};
+const TimeSelect = (props) => {
+    useConfig();
+    const { visible, className, height, title, currentKey, currentTime, dates, times, multiple, select, pannelChange, timeChange, onSelect, onPannelChange, onTimeChange, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [activeKey, setActiveKey] = useState(currentKey);
+    const [activeTime, setActiveTime] = useState(currentTime.length
+        ? currentTime
+        : [
+            {
+                key: currentKey,
+                list: [],
+            },
+        ]);
+    const [popVisible, setPopVisible] = useState(visible);
+    const popStyle = {
+        width: '100%',
+        height,
+    };
+    const b = cn('timeselect');
+    // popup 的关闭回调, 执行 select 函数更改外部 visible
+    const closeFun = () => {
+        if (onSelect) {
+            onSelect(activeTime);
+        }
+        else if (select) {
+            select(activeTime);
+        }
+    };
+    // 选择配送时间回调
+    const handleSelectTime = (time) => {
+        let curTimeData = {};
+        let curIndex = -1;
+        for (let i = 0; i < activeTime.length; i++) {
+            if (String(activeTime[i].key) === String(activeKey)) {
+                curTimeData = activeTime[i];
+                curIndex = i;
+                break;
+            }
+        }
+        const curTimeIndex = curTimeData.list.findIndex((item) => String(item) === String(time));
+        if (curTimeIndex === -1) {
+            curTimeData.list.push(time);
+        }
+        else {
+            curTimeData.list.splice(curTimeIndex, 1);
+        }
+        const resultTimeData = [...activeTime];
+        resultTimeData.splice(curIndex, 1, curTimeData);
+        setActiveTime(resultTimeData);
+        if (onTimeChange) {
+            onTimeChange(time, resultTimeData);
+        }
+        else if (timeChange) {
+            timeChange(time, resultTimeData);
+        }
+    };
+    // 选择日期的回调
+    const handleChange = (pannelKey) => {
+        const resultTimeData = [...activeTime];
+        if (String(pannelKey) !== String(activeKey)) {
+            setActiveKey?.(pannelKey);
+            if (multiple) {
+                const curTimeDataIndex = activeTime.findIndex((item) => String(item.key) === String(pannelKey));
+                if (curTimeDataIndex === -1) {
+                    resultTimeData.push({
+                        key: pannelKey,
+                        list: [],
+                    });
+                    setActiveTime(resultTimeData);
+                }
+            }
+            else {
+                setActiveTime([
+                    {
+                        key: pannelKey,
+                        list: [],
+                    },
+                ]);
+            }
+        }
+        if (onPannelChange) {
+            onPannelChange(pannelKey, resultTimeData);
+        }
+        else if (pannelChange) {
+            pannelChange(pannelKey, resultTimeData);
+        }
+    };
+    // 选中的日期增加 active 类名
+    const getTimePannelClass = (dataItem) => {
+        if (String(dataItem['pannel-key']) === String(activeKey)) {
+            return 'nut-timepannel-active';
+        }
+        return '';
+    };
+    // 根据外部传入 visible 进行组件的显隐展示
+    useEffect(() => {
+        setPopVisible(visible);
+    }, [visible]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Popup, { closeable: true, round: true, visible: popVisible, position: "bottom", style: popStyle, onClose: () => {
+                closeFun();
+            } },
+            React__default.createElement("div", { className: `${b()} ${className || ''}` },
+                React__default.createElement("div", { className: "nut-timeselect__title" }, title),
+                React__default.createElement("div", { className: "nut-timeselect__content" },
+                    React__default.createElement("div", { className: "nut-timeselect__content-left" }, dates.map((dataItem, index) => (React__default.createElement(TimePannel, { date: dataItem.date, className: getTimePannelClass(dataItem), key: String(dataItem['pannel-key'] || index), curKey: String(dataItem['pannel-key'] || index), change: handleChange })))),
+                    React__default.createElement(TimeDetail, { times: times, currentKey: String(activeKey), currentTime: activeTime, select: handleSelectTime }))))));
+};
+TimeSelect.defaultProps = defaultProps;
+TimeSelect.displayName = 'NutTimeSelect';
+
+export { TimeSelect as T };

package/dist/esm/toast.taro-d6c14811.js

@@ -0,0 +1,109 @@
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon-296a1bec.js';
+
+const defaultProps = {
+    id: '',
+    style: {},
+    icon: null,
+    iconSize: '20',
+    msg: '',
+    bottom: '30px',
+    duration: 2,
+    center: true,
+    type: 'text',
+    title: '',
+    customClass: '',
+    size: 'base',
+    textAlignCenter: true,
+    bgColor: 'rgba(0, 0, 0, .8)',
+    cover: false,
+    coverColor: 'rgba(0, 0, 0, 0)',
+    closeOnClickOverlay: false,
+    visible: false,
+    onClose: () => { }, // 未实现
+};
+// export default class Notification extends React.PureComponent<NotificationProps> {
+const Toast = (props) => {
+    const { children, id, style, icon, iconSize, msg, bottom, duration, center, type, title, customClass, size, textAlignCenter, bgColor, cover, coverColor, closeOnClickOverlay, visible, onClose, ...rest } = { ...defaultProps, ...props };
+    let timer;
+    const [openState, SetOpenState] = useState(false);
+    useEffect(() => {
+        if (visible) {
+            SetOpenState(true);
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible]);
+    const clearTimer = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+    const hide = () => {
+        SetOpenState(false);
+        onClose();
+    };
+    const show = () => {
+        clearTimer();
+        if (duration) {
+            timer = window.setTimeout(() => {
+                hide();
+            }, duration * 1000);
+        }
+    };
+    const clickCover = () => {
+        if (closeOnClickOverlay) {
+            hide();
+        }
+    };
+    const toastBem = cn('toast');
+    const hasIcon = () => {
+        if (type !== 'text') {
+            return true;
+        }
+        return !!icon;
+    };
+    const iconName = () => {
+        if (icon) {
+            return icon;
+        }
+        return {
+            success: 'success',
+            fail: 'failure',
+            warn: 'tips',
+            loading: 'loading',
+        }[type];
+    };
+    const classes = classNames({
+        'nut-toast-center': center,
+        'nut-toast-has-icon': icon,
+        'nut-toast-cover': cover,
+        'nut-toast-loading': type === 'loading',
+        [`${customClass}`]: true,
+        [`nut-toast-${size}`]: true,
+    });
+    return (React__default.createElement(React__default.Fragment, null, openState ? (React__default.createElement("div", { className: `${toastBem()} ${classes}`, id: id, style: {
+            bottom: center ? 'auto' : `${bottom}`,
+            backgroundColor: cover ? coverColor : '',
+            ...style,
+        }, onClick: () => {
+            clickCover();
+        } },
+        React__default.createElement("div", { className: toastBem('inner'), style: {
+                textAlign: textAlignCenter ? 'center' : 'left',
+                backgroundColor: bgColor,
+            } },
+            hasIcon() ? (React__default.createElement("p", { className: toastBem('icon-wrapper') },
+                React__default.createElement(Icon, { name: iconName(), color: "#ffffff", size: iconSize }))) : null,
+            title ? React__default.createElement("div", { className: "nut-toast-title" }, title) : null,
+            React__default.createElement("span", { className: toastBem('text') }, msg)))) : null));
+};
+Toast.defaultProps = defaultProps;
+Toast.displayName = 'NutToast';
+
+export { Toast as T };

package/dist/esm/trendarrow.taro-b8c5ccd9.js

@@ -0,0 +1,73 @@
+import React__default, { useRef } from 'react';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+
+const defaultProps = {
+    rate: 0,
+    digits: 2,
+    showSign: false,
+    showZero: false,
+    arrowLeft: false,
+    syncTextColor: true,
+    textColor: '#333',
+    riseColor: '#fa2c19',
+    dropColor: '#64b578',
+    iconSize: '12px',
+    upIconName: 'triangle-up',
+    downIconName: 'triangle-down',
+    className: '',
+};
+const TrendArrow = (props) => {
+    const { rate, digits, showSign, showZero, arrowLeft, syncTextColor, textColor, riseColor, dropColor, iconSize, upIconName, downIconName, className, children, ...rest } = { ...defaultProps, ...props };
+    const b = cn('trendarrow');
+    const handleClick = () => { };
+    const rateTrend = useRef(rate > 0);
+    const myFixed = (num, digit = 2) => {
+        if (Object.is(parseFloat(num), NaN)) {
+            return console.log(`传入的值：${num}不是一个数字`);
+        }
+        num = parseFloat(num);
+        // eslint-disable-next-line no-restricted-properties
+        const numPow = Math.pow(10, digit);
+        return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
+    };
+    const calcStyle = (() => {
+        const arrowColor = rateTrend.current ? riseColor : dropColor;
+        const textEquArrowColor = syncTextColor ? arrowColor : textColor;
+        const style = {
+            color: rate === 0 ? textColor : textEquArrowColor,
+        };
+        return style;
+    })();
+    const calcRate = (() => {
+        rateTrend.current = rate > 0;
+        const absRate = Math.abs(rate);
+        if (!showZero && rate === 0) {
+            return '--';
+        }
+        const resultRate = `${
+        // eslint-disable-next-line no-nested-ternary
+        showSign && rate !== 0 ? (rateTrend.current ? '+' : '-') : ''}${myFixed(Number(absRate), digits)}%`;
+        return resultRate;
+    })();
+    const calcIconProps = (() => {
+        const iconProps = {
+            name: rateTrend.current ? upIconName : downIconName,
+            color: rateTrend.current ? riseColor : dropColor,
+            size: iconSize,
+        };
+        return iconProps;
+    })();
+    const renderContent = (arrowLeft) => {
+        const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before';
+        return (React__default.createElement("span", { className: `${b(classNameSuffix)} ${b('rate')}`, style: calcStyle }, calcRate));
+    };
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest, onClick: handleClick },
+        !arrowLeft && renderContent(!arrowLeft),
+        children || (React__default.createElement(React__default.Fragment, null, Number(rate) !== 0 && (React__default.createElement(Icon, { size: calcIconProps.size, name: calcIconProps.name, color: calcIconProps.color })))),
+        arrowLeft && renderContent(!arrowLeft)));
+};
+TrendArrow.defaultProps = defaultProps;
+TrendArrow.displayName = 'NutTrendArrow';
+
+export { TrendArrow as T };

package/dist/esm/typings-b9828dba.js

@@ -0,0 +1,9 @@
+const ComponentDefaults = {
+    // className: '',
+    // style: {},
+    // children: undefined,
+    iconClassPrefix: 'nut-icon',
+    iconFontClassName: 'nutui-iconfont',
+};
+
+export { ComponentDefaults as C };