@nutui/nutui-react-taro 2.3.12 → 2.4.1-beta.0

package/dist/esm/countdown.taro-wopKr1Il.js

@@ -0,0 +1,204 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useRef, useImperativeHandle, useEffect } from "react";
+import { u as useConfig } from "./configprovider.taro-CyU_tvNJ.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { p as padZero } from "./pad-zero-B2OUQfh7.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { paused: false, startTime: Date.now(), endTime: Date.now(), remainingTime: 0, millisecond: false, format: "HH:mm:ss", autoStart: true, time: 0, destroy: false });
+const InternalCountDown = (props, ref) => {
+  useConfig();
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { paused, startTime, endTime, remainingTime, millisecond, format, autoStart, time, destroy, className, style, onEnd, onPaused, onRestart, onUpdate, children } = _a, rest = __rest(_a, ["paused", "startTime", "endTime", "remainingTime", "millisecond", "format", "autoStart", "time", "destroy", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"]);
+  const classPrefix = "nut-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 = Number(t) > 0 ? +t : t.toString().replace(/-/g, "/");
+    return new Date(t).getTime();
+  };
+  const initTime = () => {
+    if (remainingTime) {
+      stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+    } else {
+      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();
+        }
+      }
+    });
+  };
+  const formatRemainTime = (t, type) => {
+    const ts = t;
+    const rest2 = {
+      d: 0,
+      h: 0,
+      m: 0,
+      s: 0,
+      ms: 0
+    };
+    const SECOND = 1e3;
+    const MINUTE = 60 * SECOND;
+    const HOUR = 60 * MINUTE;
+    const DAY = 24 * HOUR;
+    if (ts > 0) {
+      rest2.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+      rest2.h = Math.floor(ts % DAY / HOUR);
+      rest2.m = Math.floor(ts % HOUR / MINUTE);
+      rest2.s = Math.floor(ts % MINUTE / SECOND);
+      rest2.ms = Math.floor(ts % SECOND);
+    }
+    return type === "custom" ? rest2 : parseFormat(Object.assign({}, rest2));
+  };
+  const parseFormat = (time2) => {
+    const { d } = time2;
+    let { h, m, s, ms } = time2;
+    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) * 1e3;
+    }
+    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 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, remainingTime]);
+  useEffect(() => {
+    if (autoStart) {
+      initTime();
+    } else {
+      stateRef.current.restTime = time;
+      setRestTime(time);
+    }
+    if (!stateRef.current.isIninted) {
+      stateRef.current.isIninted = true;
+    }
+    return componentWillUnmount;
+  }, []);
+  const componentWillUnmount = () => {
+    destroy && cancelAnimationFrame(stateRef.current.timer);
+  };
+  const renderTime = (() => {
+    return formatRemainTime(stateRef.current.restTime);
+  })();
+  return React__default.createElement("div", Object.assign({ className: `${classPrefix} ${className}`, style: Object.assign({}, style) }, rest), children || React__default.createElement("div", {
+    className: `${classPrefix}-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
+};

package/dist/esm/datepicker.taro-DqR52Ivo.js

@@ -0,0 +1,231 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useEffect } from "react";
+import { View } from "@tarojs/components";
+import { P as Picker } from "./picker.taro-Cmng9GW9.js";
+import { u as useConfig } from "./configprovider.taro-CyU_tvNJ.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { p as padZero } from "./pad-zero-B2OUQfh7.js";
+const isDate = (val) => {
+  return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+};
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, title: "", type: "date", showChinese: false, threeDimensional: true, minuteStep: 1, startDate: new Date(currentYear - 10, 0, 1), endDate: new Date(currentYear + 10, 11, 31) });
+const DatePicker = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { startDate, endDate, type, showChinese, minuteStep, visible, title, defaultValue, pickerProps = {}, formatter, onClose, onCancel, onConfirm, filter, onChange, threeDimensional, className, style } = _a, rest = __rest(_a, ["startDate", "endDate", "type", "showChinese", "minuteStep", "visible", "title", "defaultValue", "pickerProps", "formatter", "onClose", "onCancel", "onConfirm", "filter", "onChange", "threeDimensional", "className", "style"]);
+  const { locale } = useConfig();
+  const lang = locale.datepicker;
+  const zhCNType = {
+    day: lang.day,
+    year: lang.year,
+    month: lang.month,
+    hour: lang.hour,
+    minute: lang.min,
+    seconds: lang.seconds
+  };
+  const [pickerValue, setPickerValue] = useState([]);
+  const [pickerOptions, setPickerOptions] = useState([]);
+  const formatValue = (value) => {
+    if (!value || value && !isDate(value)) {
+      value = startDate;
+    }
+    return Math.min(Math.max(value.getTime(), startDate.getTime()), endDate.getTime());
+  };
+  const [selectedDate, setSelectedDate] = usePropsValue({
+    value: props.value && formatValue(props.value),
+    defaultValue: props.defaultValue && formatValue(props.defaultValue),
+    finalValue: 0
+  });
+  function getMonthEndDay(year, month) {
+    return new Date(year, month, 0).getDate();
+  }
+  const getBoundary = (type2, value) => {
+    const boundary = type2 === "min" ? startDate : endDate;
+    const year = boundary.getFullYear();
+    let month = 1;
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+    if (type2 === "max") {
+      month = 12;
+      date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+      hour = 23;
+      minute = 59;
+    }
+    const seconds = minute;
+    if (value.getFullYear() === year) {
+      month = boundary.getMonth() + 1;
+      if (value.getMonth() + 1 === month) {
+        date = boundary.getDate();
+        if (value.getDate() === date) {
+          hour = boundary.getHours();
+          if (value.getHours() === hour) {
+            minute = boundary.getMinutes();
+          }
+        }
+      }
+    }
+    return {
+      [`${type2}Year`]: year,
+      [`${type2}Month`]: month,
+      [`${type2}Date`]: date,
+      [`${type2}Hour`]: hour,
+      [`${type2}Minute`]: minute,
+      [`${type2}Seconds`]: seconds
+    };
+  };
+  const ranges = () => {
+    const selected = new Date(selectedDate);
+    if (!selected)
+      return [];
+    const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", selected);
+    const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", selected);
+    const result = [
+      {
+        type: "year",
+        range: [minYear, maxYear]
+      },
+      {
+        type: "month",
+        range: [minMonth, maxMonth]
+      },
+      {
+        type: "day",
+        range: [minDate, maxDate]
+      },
+      {
+        type: "hour",
+        range: [minHour, maxHour]
+      },
+      {
+        type: "minute",
+        range: [minMinute, maxMinute]
+      },
+      {
+        type: "seconds",
+        range: [minSeconds, maxSeconds]
+      }
+    ];
+    switch (type.toLocaleLowerCase()) {
+      case "date":
+        return result.slice(0, 3);
+      case "datetime":
+        return result.slice(0, 5);
+      case "time":
+        return result.slice(3, 6);
+      case "year-month":
+        return result.slice(0, 2);
+      case "hour-minutes":
+        return result.slice(3, 5);
+      case "month-day":
+        return result.slice(1, 3);
+      case "datehour":
+        return result.slice(0, 4);
+      default:
+        return result;
+    }
+  };
+  const handlePickerChange = (selectedOptions, selectedValue, index) => {
+    var _a2;
+    const rangeType = type.toLocaleLowerCase();
+    if (["date", "datetime", "datehour", "month-day", "year-month"].includes(rangeType)) {
+      const formatDate = [];
+      selectedValue.forEach((item) => {
+        formatDate.push(item);
+      });
+      if (rangeType === "month-day" && formatDate.length < 3) {
+        formatDate.unshift(new Date(defaultValue || startDate || endDate).getFullYear());
+      }
+      if (rangeType === "year-month" && formatDate.length < 3) {
+        formatDate.push(new Date(defaultValue || startDate || endDate).getDate());
+      }
+      const year = Number(formatDate[0]);
+      const month = Number(formatDate[1]) - 1;
+      const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+      let date = null;
+      if (rangeType === "date" || rangeType === "month-day" || rangeType === "year-month") {
+        date = new Date(year, month, day);
+      } else if (rangeType === "datetime") {
+        date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+      } else if (rangeType === "datehour") {
+        date = new Date(year, month, day, Number(formatDate[3]));
+      }
+      const isEqual = ((_a2 = new Date(selectedDate)) === null || _a2 === void 0 ? void 0 : _a2.getTime()) === (date === null || date === void 0 ? void 0 : date.getTime());
+      date && isDate(date) && !isEqual && setSelectedDate(formatValue(date));
+    }
+    props.onChange && props.onChange(selectedOptions, selectedValue, index);
+  };
+  const formatOption = (type2, value) => {
+    if (formatter) {
+      return formatter(type2, {
+        text: padZero(value, 2),
+        value: padZero(value, 2)
+      });
+    }
+    const padMin = padZero(value, 2);
+    const fatter = showChinese ? zhCNType[type2] : "";
+    return { text: padMin + fatter, value: padMin };
+  };
+  const generateColumn = (min, max, val, type2, columnIndex) => {
+    var _a2;
+    let cmin = min;
+    const arr = [];
+    let index = 0;
+    while (cmin <= max) {
+      arr.push(formatOption(type2, cmin));
+      if (type2 === "minute") {
+        cmin += minuteStep;
+      } else {
+        cmin++;
+      }
+      if (cmin <= Number(val)) {
+        index++;
+      }
+    }
+    pickerValue[columnIndex] = (_a2 = arr[index]) === null || _a2 === void 0 ? void 0 : _a2.value;
+    setPickerValue([...pickerValue]);
+    if (props.filter && props.filter(type2, arr)) {
+      return props.filter(type2, arr);
+    }
+    return arr;
+  };
+  const getDateIndex = (type2) => {
+    const date = new Date(selectedDate);
+    if (!selectedDate)
+      return 0;
+    if (type2 === "year") {
+      return date.getFullYear();
+    }
+    if (type2 === "month") {
+      return date.getMonth() + 1;
+    }
+    if (type2 === "day") {
+      return date.getDate();
+    }
+    if (type2 === "hour") {
+      return date.getHours();
+    }
+    if (type2 === "minute") {
+      return date.getMinutes();
+    }
+    if (type2 === "seconds") {
+      return date.getSeconds();
+    }
+    return 0;
+  };
+  const columns = () => {
+    const val = ranges().map((res, columnIndex) => {
+      return generateColumn(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+    });
+    return val || [];
+  };
+  useEffect(() => {
+    setPickerOptions(columns());
+  }, [selectedDate, startDate, endDate]);
+  return React__default.createElement(View, Object.assign({ className: `nut-datepicker ${className}`, style, catchMove: true }, rest), pickerOptions.length && React__default.createElement(Picker, Object.assign({}, pickerProps, { title, visible, options: pickerOptions, onClose, onCancel, value: pickerValue, onConfirm: (options, value) => onConfirm && onConfirm(options, value), onChange: (options, value, index) => handlePickerChange(options, value, index), threeDimensional })));
+};
+DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = "NutDatePicker";
+export {
+  DatePicker as D
+};

package/dist/esm/dialog.taro-C9e4DIZc.js

@@ -0,0 +1,162 @@
+import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState } from "react";
+import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
+import { View } from "@tarojs/components";
+import { Close } from "@nutui/icons-react-taro";
+import { B as Button } from "./button.taro-GziP0wPi.js";
+import { u as useConfig } from "./configprovider.taro-CyU_tvNJ.js";
+import { u as useLockScrollTaro, O as Overlay } from "./overlay.taro-BaBu-3-F.js";
+import { b as useParams, u as useCustomEvent, a as useCustomEventsPath, c as customEvents } from "./use-custom-event-DuP4onEm.js";
+const Content = (props) => {
+  const { visible, title, header, footer, close: close2, footerDirection, onClick, children } = props;
+  const classPrefix = "nut-dialog";
+  const renderHeader = () => {
+    return title ? React__default.createElement("div", { className: `${classPrefix}-header` }, title) : null;
+  };
+  const renderFooter = () => {
+    return footer ? React__default.createElement("div", { className: classNames(`${classPrefix}-footer`, {
+      [footerDirection]: footerDirection
+    }) }, footer) : null;
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+  };
+  return React__default.createElement(
+    "div",
+    { className: classNames(`${classPrefix}-outer`, props.className), style: props.style, onClick: (e) => handleClick(e) },
+    close2,
+    header,
+    React__default.createElement(
+      "div",
+      { className: classPrefix, style: { display: visible ? "flex" : "none" } },
+      renderHeader(),
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-content` },
+        React__default.createElement(React__default.Fragment, null, children)
+      ),
+      renderFooter()
+    )
+  );
+};
+Content.displayName = "NutContent";
+const defaultProps = {
+  title: "",
+  content: "",
+  header: "",
+  footer: "",
+  confirmText: "",
+  cancelText: "",
+  overlay: true,
+  closeOnOverlayClick: true,
+  hideConfirmButton: false,
+  hideCancelButton: false,
+  disableConfirmButton: false,
+  footerDirection: "horizontal",
+  lockScroll: true,
+  closeIconPosition: "top-right",
+  closeIcon: false,
+  beforeCancel: () => true,
+  beforeClose: () => true,
+  onOverlayClick: () => true
+};
+const BaseDialog = (props) => {
+  const classPrefix = "nut-dialog";
+  const { locale } = useConfig();
+  const [loading, setLoading] = useState(false);
+  const { params: { id, className, style, visible, footer, title, header, content, children, footerDirection, hideConfirmButton, hideCancelButton, lockScroll, disableConfirmButton, closeOnOverlayClick, onOverlayClick, confirmText, cancelText, overlay, closeIconPosition, closeIcon, onClose, onCancel, onConfirm, beforeCancel, beforeClose }, setParams } = useParams(Object.assign(Object.assign({}, defaultProps), props));
+  useCustomEvent(id, ({ status, options }) => {
+    if (status) {
+      setParams(Object.assign(Object.assign({}, options), { visible: true }));
+    } else {
+      setParams(Object.assign(Object.assign({}, options), { visible: false }));
+    }
+  });
+  const refObject = useLockScrollTaro(!!(visible && lockScroll));
+  const renderFooter = () => {
+    if (footer === null)
+      return "";
+    const handleCancel = (e) => {
+      e.stopPropagation();
+      if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel()))
+        return;
+      if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose()))
+        return;
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleOk = (e) => __awaiter(void 0, void 0, void 0, function* () {
+      e.stopPropagation();
+      setLoading(true);
+      try {
+        yield onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(e);
+        setLoading(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      } catch (_a) {
+        setLoading(false);
+      }
+    });
+    return footer || React__default.createElement(
+      React__default.Fragment,
+      null,
+      !hideCancelButton && React__default.createElement(Button, { type: "default", className: `${classPrefix}-footer-cancel`, onClick: (e) => handleCancel(e) }, cancelText || locale.cancel),
+      !hideConfirmButton && React__default.createElement(Button, { type: "primary", className: classNames(`${classPrefix}-footer-ok`, {
+        disabled: disableConfirmButton
+      }), disabled: disableConfirmButton, onClick: (e) => handleOk(e), loading }, confirmText || locale.confirm)
+    );
+  };
+  const renderCloseIcon = () => {
+    if (!closeIcon)
+      return null;
+    const handleCancel = () => {
+      if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel()))
+        return;
+      if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose()))
+        return;
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const closeClasses = classNames({
+      [`${classPrefix}-close`]: true,
+      [`${classPrefix}-close-${closeIconPosition}`]: true
+    });
+    return React__default.createElement(View, { className: closeClasses, onClick: handleCancel }, React__default.isValidElement(closeIcon) ? closeIcon : React__default.createElement(Close, null));
+  };
+  const onHandleClickOverlay = (e) => {
+    if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
+      const closed = onOverlayClick && onOverlayClick();
+      closed && (onClose === null || onClose === void 0 ? void 0 : onClose());
+      closed && (onCancel === null || onCancel === void 0 ? void 0 : onCancel());
+    }
+  };
+  return React__default.createElement(
+    View,
+    { style: { display: visible ? "block" : "none" }, ref: refObject, catchMove: lockScroll },
+    React__default.createElement(
+      React__default.Fragment,
+      null,
+      overlay ? React__default.createElement(Overlay, { visible, closeOnOverlayClick, lockScroll, onClick: onHandleClickOverlay, className: classNames("nut-dialog-overlay") }) : null,
+      React__default.createElement(
+        CSSTransition,
+        { in: visible, timeout: 300, classNames: "fadeDialog", unmountOnExit: true, appear: true },
+        React__default.createElement(Content, { className, style, title, header, close: renderCloseIcon(), footer: renderFooter(), footerDirection, visible }, content || children)
+      )
+    )
+  );
+};
+function open(selector, options) {
+  const path = useCustomEventsPath(selector);
+  customEvents.trigger(path, { status: true, options });
+}
+function close(selector) {
+  const path = useCustomEventsPath(selector);
+  customEvents.trigger(path, { status: false });
+}
+BaseDialog.defaultProps = defaultProps;
+BaseDialog.displayName = "NutDialog";
+BaseDialog.open = open;
+BaseDialog.close = close;
+export {
+  BaseDialog as B
+};