@nutui/nutui-react-taro 1.4.4 → 1.4.5

package/dist/esm/collapseitem-ce1849d2.js

@@ -1,147 +1,83 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "title", "isOpen", "onToggle", "name", "disabled", "icon", "rotate", "subTitle", "titleIcon", "titleIconColor", "titleIconPosition", "titleIconSize", "iconSize", "iconColor", "childnull", "iconClassPrefix", "iconFontClassName"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default, { useState, useCallback, useEffect } from 'react';
 import { c as cn } from './bem-893ad28d.js';
 import { I as Icon } from './icon-8dc4de10.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: '',
-  name: '',
-  isOpen: false,
-  icon: '',
-  iconSize: '',
-  iconColor: '',
-  disabled: false,
-  rotate: 180,
-  subTitle: '',
-  titleIcon: '',
-  titleIconColor: '',
-  titleIconPosition: '',
-  titleIconSize: '',
-  childnull: true
-});
-var CollapseItem = function CollapseItem(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    children = _defaultProps$props.children,
-    title = _defaultProps$props.title,
-    isOpen = _defaultProps$props.isOpen,
-    onToggle = _defaultProps$props.onToggle,
-    name = _defaultProps$props.name,
-    disabled = _defaultProps$props.disabled,
-    icon = _defaultProps$props.icon,
-    rotate = _defaultProps$props.rotate,
-    subTitle = _defaultProps$props.subTitle,
-    titleIcon = _defaultProps$props.titleIcon,
-    titleIconColor = _defaultProps$props.titleIconColor,
-    titleIconPosition = _defaultProps$props.titleIconPosition,
-    titleIconSize = _defaultProps$props.titleIconSize,
-    iconSize = _defaultProps$props.iconSize,
-    iconColor = _defaultProps$props.iconColor,
-    childnull = _defaultProps$props.childnull,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    domHeight = _useState2[0],
-    setDomHeight = _useState2[1]; // 保存content的高度
-  var _useState3 = useState('auto'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currHeight = _useState4[0],
-    setCurrHeight = _useState4[1]; // 设置content的高度
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    update = _useState6[0],
-    setUpdate = _useState6[1];
-  var _useState7 = useState({
-      transform: 'translateY(-50%)'
-    }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    iconStyle = _useState8[0],
-    setIconStyle = _useState8[1];
-  var colBem = cn('collapse-item');
-  var measuredRef = useCallback(function (node) {
-    if (node !== null) {
-      setDomHeight(node.getBoundingClientRect().height);
-    }
-  }, [update]);
-  useEffect(function () {
-    // 一开始content都有高度，在这里根据isOpen，改变其高度
-    setTimeout(function () {
-      if (domHeight !== -1) {
-        isOpen ? setCurrHeight("".concat(domHeight, "px")) : setCurrHeight('0px');
-      }
-      var newIconStyle = isOpen ? {
-        transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
-      } : {
-        transform: 'translateY(-50%)'
-      };
-      setIconStyle(newIconStyle);
-    }, 10);
-  }, [isOpen, domHeight, rotate]);
-  useEffect(function () {
-    if (!isOpen) {
-      setCurrHeight('0px');
-    } else {
-      setCurrHeight('auto');
-    }
-    setUpdate(!update);
-  }, [children, isOpen]);
-  return React__default.createElement("div", _objectSpread({
-    className: colBem()
-  }, rest), React__default.createElement("div", {
-    className: colBem('header', {
-      disabled: disabled
-    }),
-    onClick: function onClick() {
-      if (disabled) return;
-      onToggle && onToggle(isOpen, name);
-    }
-  }, React__default.createElement("div", {
-    className: colBem('title')
-  }, titleIcon && titleIconPosition === 'left' && React__default.createElement("b", {
-    className: colBem('title-icon-left')
-  }, React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    name: titleIcon,
-    size: titleIconSize,
-    color: disabled ? '#C2C2C2' : titleIconColor
-  })), title, titleIcon && titleIconPosition === 'right' && React__default.createElement("b", {
-    className: colBem('title-icon-right')
-  }, React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    name: titleIcon,
-    size: titleIconSize,
-    color: disabled ? '#C2C2C2' : titleIconColor
-  }))), React__default.createElement("div", {
-    className: colBem('sub-title')
-  }, subTitle), React__default.createElement("div", {
-    className: colBem('icon-box')
-  }, React__default.createElement("div", {
-    className: colBem('icon'),
-    style: iconStyle
-  }, React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    name: icon,
-    size: iconSize,
-    color: disabled ? '#C2C2C2' : iconColor
-  })))), childnull && React__default.createElement("div", {
-    className: colBem('content'),
-    style: {
-      height: currHeight
-    },
-    ref: measuredRef
-  }, React__default.createElement("div", {
-    className: colBem('content-text')
-  }, children)));
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    name: '',
+    isOpen: false,
+    icon: '',
+    iconSize: '',
+    iconColor: '',
+    disabled: false,
+    rotate: 180,
+    subTitle: '',
+    titleIcon: '',
+    titleIconColor: '',
+    titleIconPosition: '',
+    titleIconSize: '',
+    childnull: true,
+};
+const CollapseItem = (props) => {
+    const { children, title, isOpen, onToggle, name, disabled, icon, rotate, subTitle, titleIcon, titleIconColor, titleIconPosition, titleIconSize, iconSize, iconColor, childnull, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [domHeight, setDomHeight] = useState(-1); // 保存content的高度
+    const [currHeight, setCurrHeight] = useState('auto'); // 设置content的高度
+    const [update, setUpdate] = useState(false);
+    const [iconStyle, setIconStyle] = useState({
+        transform: 'translateY(-50%)',
+    });
+    const colBem = cn('collapse-item');
+    const measuredRef = useCallback((node) => {
+        if (node !== null) {
+            setDomHeight(node.getBoundingClientRect().height);
+        }
+    }, [update]);
+    useEffect(() => {
+        // 一开始content都有高度，在这里根据isOpen，改变其高度
+        setTimeout(() => {
+            if (domHeight !== -1) {
+                isOpen ? setCurrHeight(`${domHeight}px`) : setCurrHeight('0px');
+            }
+            const newIconStyle = isOpen
+                ? { transform: `translateY(-50%) rotate(${rotate}deg)` }
+                : { transform: 'translateY(-50%)' };
+            setIconStyle(newIconStyle);
+        }, 10);
+    }, [isOpen, domHeight, rotate]);
+    useEffect(() => {
+        if (!isOpen) {
+            setCurrHeight('0px');
+        }
+        else {
+            setCurrHeight('auto');
+        }
+        setUpdate(!update);
+    }, [children, isOpen]);
+    return (React__default.createElement("div", { className: colBem(), ...rest },
+        React__default.createElement("div", { className: colBem('header', { disabled }), onClick: () => {
+                if (disabled)
+                    return;
+                onToggle && onToggle(isOpen, name);
+            } },
+            React__default.createElement("div", { className: colBem('title') },
+                titleIcon && titleIconPosition === 'left' && (React__default.createElement("b", { className: colBem('title-icon-left') },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titleIcon, size: titleIconSize, color: disabled ? '#C2C2C2' : titleIconColor }))),
+                title,
+                titleIcon && titleIconPosition === 'right' && (React__default.createElement("b", { className: colBem('title-icon-right') },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titleIcon, size: titleIconSize, color: disabled ? '#C2C2C2' : titleIconColor })))),
+            React__default.createElement("div", { className: colBem('sub-title') }, subTitle),
+            React__default.createElement("div", { className: colBem('icon-box') },
+                React__default.createElement("div", { className: colBem('icon'), style: iconStyle },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: icon, size: iconSize, color: disabled ? '#C2C2C2' : iconColor })))),
+        childnull && (React__default.createElement("div", { className: colBem('content'), style: { height: currHeight }, ref: measuredRef },
+            React__default.createElement("div", { className: colBem('content-text') }, children)))));
 };
 CollapseItem.defaultProps = defaultProps;
 CollapseItem.displayName = 'NutCollapseItem';
+
 export { CollapseItem as C };

package/dist/esm/configprovider-5eea4f5d.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import 'lodash.kebabcase';
+import { z as zhCN } from './zh-CN-dfc384d0.js';
+
+const defaultConfigRef = {
+    current: {
+        locale: zhCN,
+    },
+};
+const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+};
+// 创建一个 Context 对象
+const ConfigContext = createContext(null);
+const useConfig = () => {
+    return useContext(ConfigContext) ?? getDefaultConfig();
+};
+
+export { useConfig as u };

package/dist/esm/configprovider.taro-26882dd2.js

@@ -0,0 +1,42 @@
+import React__default, { createContext, useContext, useMemo } from 'react';
+import kebabCase from 'lodash.kebabcase';
+import { z as zhCN } from './zh-CN-dfc384d0.js';
+
+const defaultProps = {
+    locale: zhCN,
+};
+const defaultConfigRef = {
+    current: {
+        locale: zhCN,
+    },
+};
+const getDefaultConfig = () => {
+    return defaultConfigRef.current;
+};
+// 创建一个 Context 对象
+const ConfigContext = createContext(null);
+const useConfig = () => {
+    return useContext(ConfigContext) ?? getDefaultConfig();
+};
+function convertThemeVarsToCSSVars(themeVars) {
+    const cssVars = {};
+    Object.keys(themeVars).forEach((key) => {
+        cssVars[`--${kebabCase(key)}`] = themeVars[key];
+    });
+    return cssVars;
+}
+const ConfigProvider = (props) => {
+    const { children, ...config } = { ...defaultProps, ...props };
+    const parentConfig = useConfig();
+    const theme = config.theme || {};
+    const style = useMemo(() => convertThemeVarsToCSSVars(theme), [theme]);
+    return (React__default.createElement(ConfigContext.Provider, { value: {
+            ...parentConfig,
+            ...config,
+        } },
+        React__default.createElement("div", { style: style }, children)));
+};
+ConfigProvider.defaultProps = defaultProps;
+ConfigProvider.displayName = 'NutConfigProvider';
+
+export { ConfigProvider as C, useConfig as u };

package/dist/esm/countdown.taro-9e40de9c.js

@@ -0,0 +1,225 @@
+import React__default, { useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+
+const defaultProps = {
+    paused: false,
+    startTime: Date.now(),
+    endTime: Date.now(),
+    millisecond: false,
+    format: 'HH:mm:ss',
+    autoStart: true,
+    time: 0,
+};
+const InternalCountDown = (props, ref) => {
+    useConfig();
+    const { paused, startTime, endTime, millisecond, format, autoStart, time, className, style, onEnd, onPaused, onRestart, onUpdate, children, ...rest } = { ...defaultProps, ...props };
+    const b = cn('countdown');
+    const [restTimeStamp, setRestTime] = useState(0);
+    const stateRef = useRef({
+        pauseTime: 0,
+        curr: 0,
+        isPaused: paused,
+        isIninted: false,
+        timer: 0,
+        restTime: 0,
+        counting: !paused && autoStart,
+        handleEndTime: Date.now(),
+        diffTime: 0, // 设置了 startTime 时，与 date.now() 的差异
+    });
+    // 时间戳转换 或 获取当前时间的时间戳
+    const getTimeStamp = (timeStr) => {
+        if (!timeStr)
+            return Date.now();
+        let t = timeStr;
+        t = t > 0 ? +t : t.toString().replace(/-/g, '/');
+        return new Date(t).getTime();
+    };
+    // 倒计时 interval
+    const initTime = () => {
+        stateRef.current.handleEndTime = endTime;
+        stateRef.current.diffTime = Date.now() - getTimeStamp(startTime); // 时间差
+        if (!stateRef.current.counting)
+            stateRef.current.counting = true;
+        tick();
+    };
+    const tick = () => {
+        stateRef.current.timer = requestAnimationFrame(() => {
+            if (stateRef.current.counting) {
+                const currentTime = Date.now() - stateRef.current.diffTime;
+                const remainTime = Math.max(stateRef.current.handleEndTime - currentTime, 0);
+                stateRef.current.restTime = remainTime;
+                setRestTime(remainTime);
+                if (!remainTime) {
+                    stateRef.current.counting = false;
+                    pause();
+                    onEnd && onEnd();
+                }
+                if (remainTime > 0) {
+                    tick();
+                }
+            }
+        });
+    };
+    // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+    const formatRemainTime = (t, type) => {
+        const ts = t;
+        const rest = {
+            d: 0,
+            h: 0,
+            m: 0,
+            s: 0,
+            ms: 0,
+        };
+        const SECOND = 1000;
+        const MINUTE = 60 * SECOND;
+        const HOUR = 60 * MINUTE;
+        const DAY = 24 * HOUR;
+        if (ts > 0) {
+            rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+            rest.h = Math.floor((ts % DAY) / HOUR);
+            rest.m = Math.floor((ts % HOUR) / MINUTE);
+            rest.s = Math.floor((ts % MINUTE) / SECOND);
+            rest.ms = Math.floor(ts % SECOND);
+        }
+        return type === 'custom' ? rest : parseFormat({ ...rest });
+    };
+    const parseFormat = (time) => {
+        const { d } = time;
+        let { h, m, s, ms } = time;
+        let formatCache = format;
+        if (formatCache.includes('DD')) {
+            formatCache = formatCache.replace('DD', padZero(d));
+        }
+        else {
+            h += Number(d) * 24;
+        }
+        if (formatCache.includes('HH')) {
+            formatCache = formatCache.replace('HH', padZero(h));
+        }
+        else {
+            m += Number(h) * 60;
+        }
+        if (formatCache.includes('mm')) {
+            formatCache = formatCache.replace('mm', padZero(m));
+        }
+        else {
+            s += Number(m) * 60;
+        }
+        if (formatCache.includes('ss')) {
+            formatCache = formatCache.replace('ss', padZero(s));
+        }
+        else {
+            ms += Number(s) * 1000;
+        }
+        if (formatCache.includes('S')) {
+            const msC = padZero(ms, 3).toString();
+            if (formatCache.includes('SSS')) {
+                formatCache = formatCache.replace('SSS', msC);
+            }
+            else if (formatCache.includes('SS')) {
+                formatCache = formatCache.replace('SS', msC.slice(0, 2));
+            }
+            else if (formatCache.includes('S')) {
+                formatCache = formatCache.replace('SS', msC.slice(0, 1));
+            }
+        }
+        return formatCache;
+    };
+    const padZero = (num, length = 2) => {
+        num += '';
+        while (num.length < length) {
+            num = `0${num}`;
+        }
+        return num.toString();
+    };
+    // 暂定
+    const pause = () => {
+        cancelAnimationFrame(stateRef.current.timer);
+        stateRef.current.counting = false;
+        onPaused && onPaused(stateRef.current.restTime);
+    };
+    useImperativeHandle(ref, () => ({
+        start: () => {
+            if (!stateRef.current.counting && !autoStart) {
+                stateRef.current.counting = true;
+                stateRef.current.handleEndTime =
+                    Date.now() + Number(stateRef.current.restTime);
+                tick();
+                onRestart && onRestart(stateRef.current.restTime);
+            }
+        },
+        pause: () => {
+            cancelAnimationFrame(stateRef.current.timer);
+            stateRef.current.counting = false;
+            onPaused && onPaused(stateRef.current.restTime);
+        },
+        reset: () => {
+            if (!autoStart) {
+                pause();
+                stateRef.current.restTime = time;
+                setRestTime(time);
+            }
+        },
+    }));
+    // 监听值变更
+    useEffect(() => {
+        const tranTime = formatRemainTime(stateRef.current.restTime, 'custom');
+        onUpdate && onUpdate(tranTime);
+    }, [restTimeStamp]);
+    // 监听暂停
+    useEffect(() => {
+        if (stateRef.current.isIninted) {
+            if (paused) {
+                if (stateRef.current.counting) {
+                    pause();
+                }
+            }
+            else {
+                if (!stateRef.current.counting) {
+                    stateRef.current.counting = true;
+                    stateRef.current.handleEndTime =
+                        Date.now() + Number(stateRef.current.restTime);
+                    tick();
+                }
+                onRestart && onRestart(stateRef.current.restTime);
+            }
+        }
+    }, [paused]);
+    // 监听开始结束时间变更
+    useEffect(() => {
+        if (stateRef.current.isIninted) {
+            initTime();
+        }
+    }, [endTime, startTime]);
+    // 初始化
+    useEffect(() => {
+        if (autoStart) {
+            initTime();
+        }
+        else {
+            stateRef.current.restTime = time;
+            setRestTime(time);
+        }
+        if (!stateRef.current.isIninted) {
+            stateRef.current.isIninted = true;
+        }
+        return componentWillUnmount;
+    }, []);
+    const componentWillUnmount = () => {
+        clearInterval(stateRef.current.timer);
+    };
+    const renderTime = (() => {
+        return formatRemainTime(stateRef.current.restTime);
+    })();
+    return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: { ...style }, ...rest }, children || (React__default.createElement("div", { className: b('block'), 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+            __html: `${renderTime}`,
+        } }))));
+};
+const CountDown = React__default.forwardRef(InternalCountDown);
+CountDown.defaultProps = defaultProps;
+CountDown.displayName = 'NutCountDown';
+
+export { CountDown as C };