@nutui/nutui-react-taro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/esm/datepicker.taro-3f718964.js

@@ -0,0 +1,260 @@
+import React, { useState, useRef, useEffect } from "react";
+import { View } from "@tarojs/components";
+import { P as Picker } from "./picker.taro-a5603921.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const defaultProps = {
+  modelValue: null,
+  visible: false,
+  title: "",
+  type: "date",
+  isShowChinese: false,
+  threeDimensional: true,
+  minuteStep: 1,
+  minDate: new Date(currentYear - 10, 0, 1),
+  maxDate: new Date(currentYear + 10, 11, 31)
+};
+const DatePicker = (props) => {
+  const { minDate, maxDate, type, isShowChinese, minuteStep, modelValue, visible, title, formatter, onCloseDatePicker, onConfirmDatePicker, filter, onChange, threeDimensional, className, style, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const { locale } = useConfig();
+  const [show, setShow] = useState(false);
+  const [currentDate, setCurrentDate] = useState(modelValue);
+  const [defaultValue, setDefaultValue] = useState([]);
+  const [options, setListData] = useState([]);
+  const pickerRef = useRef(null);
+  const isDate = (val) => {
+    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+  };
+  const datepickerLang = locale.datepicker;
+  const zhCNType = {
+    day: datepickerLang.day,
+    year: datepickerLang.year,
+    month: datepickerLang.month,
+    hour: datepickerLang.hour,
+    minute: datepickerLang.min,
+    seconds: datepickerLang.seconds
+  };
+  const formatValue = (value) => {
+    let cvalue = value;
+    if (!cvalue || cvalue && !isDate(cvalue)) {
+      cvalue = minDate;
+    }
+    let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
+    timestmp = Math.min(timestmp, maxDate.getTime());
+    return new Date(timestmp);
+  };
+  function getMonthEndDay(year, month) {
+    return new Date(year, month, 0).getDate();
+  }
+  const getBoundary = (type2, value) => {
+    const boundary = type2 === "min" ? minDate : maxDate;
+    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 = (date) => {
+    const curDate = date || currentDate;
+    if (!curDate)
+      return [];
+    const { maxYear, maxDate: maxDate2, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
+    const { minYear, minDate: minDate2, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
+    let result = [
+      {
+        type: "year",
+        range: [minYear, maxYear]
+      },
+      {
+        type: "month",
+        range: [minMonth, maxMonth]
+      },
+      {
+        type: "day",
+        range: [minDate2, maxDate2]
+      },
+      {
+        type: "hour",
+        range: [minHour, maxHour]
+      },
+      {
+        type: "minute",
+        range: [minMinute, maxMinute]
+      },
+      {
+        type: "seconds",
+        range: [minSeconds, maxSeconds]
+      }
+    ];
+    switch (type.toLocaleLowerCase()) {
+      case "date":
+        result = result.slice(0, 3);
+        break;
+      case "datetime":
+        result = result.slice(0, 5);
+        break;
+      case "time":
+        result = result.slice(3, 6);
+        break;
+      case "year-month":
+        result = result.slice(0, 2);
+        break;
+      case "hour-minutes":
+        result = result.slice(3, 5);
+        break;
+      case "month-day":
+        result = result.slice(1, 3);
+        break;
+      case "datehour":
+        result = result.slice(0, 4);
+        break;
+    }
+    return result;
+  };
+  const updateChooseValueCustmer = (cacheValueData, selectedValue, index) => {
+    if (["date", "datetime", "datehour", "month-day", "year-month"].includes(type.toLocaleLowerCase())) {
+      const formatDate = [];
+      selectedValue.forEach((item) => {
+        formatDate.push(item);
+      });
+      if (type.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
+        formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+      }
+      if (type.toLocaleLowerCase() === "year-month" && formatDate.length < 3) {
+        formatDate.push(new Date(modelValue || minDate || maxDate).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 (type.toLocaleLowerCase() === "date" || type.toLocaleLowerCase() === "month-day" || type.toLocaleLowerCase() === "year-month") {
+        date = new Date(year, month, day);
+      } else if (type.toLocaleLowerCase() === "datetime") {
+        date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+      } else if (type.toLocaleLowerCase() === "datehour") {
+        date = new Date(year, month, day, Number(formatDate[3]));
+      }
+      const isEqual = (currentDate == null ? void 0 : currentDate.getTime()) === (date == null ? void 0 : date.getTime());
+      date && isDate(date) && !isEqual && setCurrentDate(formatValue(date));
+    }
+    props.onChange && props.onChange(cacheValueData, selectedValue, index);
+  };
+  const padZero = (num, targetLength = 2) => {
+    let str = `${num}`;
+    while (str.length < targetLength) {
+      str = `0${str}`;
+    }
+    return str;
+  };
+  const formatterOption = (type2, value) => {
+    let fOption = null;
+    if (formatter) {
+      fOption = formatter(type2, {
+        text: padZero(value, 2),
+        value: padZero(value, 2)
+      });
+    } else {
+      const padMin = padZero(value, 2);
+      const fatter = isShowChinese ? zhCNType[type2] : "";
+      fOption = { text: padMin + fatter, value: padMin };
+    }
+    return fOption;
+  };
+  const generateValue = (min, max, val, type2, columnIndex) => {
+    let cmin = min;
+    const arr = [];
+    let index = 0;
+    while (cmin <= max) {
+      arr.push(formatterOption(type2, cmin));
+      if (type2 === "minute") {
+        cmin += minuteStep;
+      } else {
+        cmin++;
+      }
+      if (cmin <= val) {
+        index++;
+      }
+    }
+    defaultValue[columnIndex] = arr[index].value;
+    setDefaultValue([...defaultValue]);
+    if (props.filter && props.filter(type2, arr)) {
+      return props.filter(type2, arr);
+    }
+    return arr;
+  };
+  const getDateIndex = (type2) => {
+    if (!currentDate)
+      return 0;
+    let d = 0;
+    if (type2 === "year") {
+      d = currentDate.getFullYear();
+    } else if (type2 === "month") {
+      d = currentDate.getMonth() + 1;
+    } else if (type2 === "day") {
+      d = currentDate.getDate();
+    } else if (type2 === "hour") {
+      d = currentDate.getHours();
+    } else if (type2 === "minute") {
+      d = currentDate.getMinutes();
+    } else if (type2 === "seconds") {
+      d = currentDate.getSeconds();
+    }
+    return d;
+  };
+  const columns = (date) => {
+    const val = ranges(date).map((res, columnIndex) => {
+      return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+    });
+    return val || [];
+  };
+  useEffect(() => {
+    setCurrentDate(formatValue(modelValue));
+  }, []);
+  useEffect(() => {
+    setCurrentDate(formatValue(modelValue));
+  }, [modelValue]);
+  useEffect(() => {
+    setShow(visible);
+  }, [visible]);
+  useEffect(() => {
+    if (currentDate) {
+      setListData(columns());
+    }
+  }, [currentDate]);
+  return React.createElement(View, { className: `nut-datepicker ${className || ""}`, style, catchMove: true, ...rest }, options.length > 0 && React.createElement(Picker, { title, visible: show, options, onClose: onCloseDatePicker, defaultValue, onConfirm: (options2, values) => onConfirmDatePicker && onConfirmDatePicker(options2, values), onChange: (list, value, index) => updateChooseValueCustmer(list, value, index), threeDimensional, ref: pickerRef }));
+};
+DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = "NutDatePicker";
+export {
+  DatePicker as D
+};

package/dist/esm/dialog.taro-290eb9a6.js

@@ -0,0 +1,128 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { B as Button } from "./button.taro-01eae688.js";
+import { CSSTransition } from "react-transition-group";
+import { d as defaultOverlayProps, O as Overlay } from "./overlay.taro-75012bd3.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const Content = (props) => {
+  const { visible, title, footer, footerDirection, onClick, children } = props;
+  const classPrefix = "nut-dialog";
+  const renderHeader = () => {
+    return title ? React.createElement("div", { className: `${classPrefix}__header` }, title) : null;
+  };
+  const renderFooter = () => {
+    return footer ? React.createElement("div", { className: classNames(`${classPrefix}__footer`, {
+      [footerDirection]: footerDirection
+    }) }, footer) : null;
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+  };
+  return React.createElement(
+    "div",
+    { className: `${classPrefix}__outer`, onClick: (e) => handleClick(e) },
+    React.createElement(
+      "div",
+      { className: classPrefix, style: { display: visible ? "flex" : "none" } },
+      renderHeader(),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__content` },
+        React.createElement(React.Fragment, null, children)
+      ),
+      renderFooter()
+    )
+  );
+};
+Content.displayName = "NutContent";
+const defaultDialogProps = {
+  ...ComponentDefaults,
+  overlay: true,
+  overlayStyle: {},
+  overlayClassName: "",
+  onCancel: () => {
+  },
+  onClose: () => {
+  },
+  onOverlayClick: (e) => true,
+  ...defaultOverlayProps
+};
+const DialogWrap = (props) => {
+  const { visible, overlay, overlayStyle, overlayClassName, closeOnOverlayClick, lockScroll, onClose, onCancel, onOverlayClick } = props;
+  const onHandleClickOverlay = (e) => {
+    console.log("onClose?.()", closeOnOverlayClick);
+    if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
+      const closed = onOverlayClick && onOverlayClick(e);
+      closed && (onClose == null ? void 0 : onClose());
+      closed && (onCancel == null ? void 0 : onCancel());
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    overlay ? React.createElement(Overlay, { style: overlayStyle, className: overlayClassName, visible: true, closeOnOverlayClick, lockScroll, onClick: onHandleClickOverlay }) : null,
+    React.createElement(
+      CSSTransition,
+      { in: visible, timeout: 300, classNames: "fadeDialog", unmountOnExit: true, appear: true },
+      React.createElement(Content, { ...props, visible })
+    )
+  );
+};
+DialogWrap.defaultProps = defaultDialogProps;
+DialogWrap.displayName = "NutDialogWrap";
+const defaultProps = {
+  confirmText: "",
+  cancelText: "",
+  overlay: true,
+  closeOnOverlayClick: true,
+  hideConfirmButton: false,
+  hideCancelButton: false,
+  disableConfirmButton: false,
+  footerDirection: "horizontal",
+  lockScroll: true,
+  beforeCancel: () => true,
+  beforeClose: () => true
+};
+const BaseDialog = forwardRef((props, ref) => {
+  const { locale } = useConfig();
+  const { visible, footer, hideConfirmButton, hideCancelButton, lockScroll, disableConfirmButton, closeOnOverlayClick, confirmText, cancelText, onClose, onCancel, onConfirm, beforeCancel, beforeClose, ...restProps } = props;
+  const classPrefix = "nut-dialog";
+  const renderFooter = () => {
+    if (footer === null)
+      return "";
+    const handleCancel = (e) => {
+      e.stopPropagation();
+      if (!(beforeCancel == null ? void 0 : beforeCancel()))
+        return;
+      if (!(beforeClose == null ? void 0 : beforeClose()))
+        return;
+      onClose == null ? void 0 : onClose();
+      onCancel == null ? void 0 : onCancel();
+    };
+    const handleOk = (e) => {
+      e.stopPropagation();
+      onClose == null ? void 0 : onClose();
+      onConfirm == null ? void 0 : onConfirm(e);
+    };
+    return footer || React.createElement(
+      React.Fragment,
+      null,
+      !hideCancelButton && React.createElement(Button, { size: "small", fill: "outline", type: "primary", className: `${classPrefix}__footer-cancel`, onClick: (e) => handleCancel(e) }, cancelText || locale.cancel),
+      !hideConfirmButton && React.createElement(Button, { size: "small", type: "primary", className: classNames(`${classPrefix}__footer-ok`, {
+        disabled: disableConfirmButton
+      }), disabled: disableConfirmButton, onClick: (e) => handleOk(e) }, confirmText || locale.confirm)
+    );
+  };
+  return React.createElement(
+    View,
+    { style: { display: visible ? "block" : "none" }, catchMove: lockScroll },
+    React.createElement(DialogWrap, { ...props, visible, lockScroll, footer: renderFooter(), onClose, onCancel })
+  );
+});
+BaseDialog.defaultProps = defaultProps;
+BaseDialog.displayName = "NutDialog";
+export {
+  BaseDialog as B
+};

package/dist/esm/divider.taro-0cb5f894.js

@@ -0,0 +1,31 @@
+import React from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  contentPosition: "center",
+  direction: "horizontal"
+};
+const classPrefix = `nut-divider`;
+const Divider = (props) => {
+  const { children, contentPosition, style, className, direction, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classes = direction === "horizontal" ? classNames({
+    [`${classPrefix}`]: true,
+    [`${classPrefix}__center`]: children,
+    [`${classPrefix}__left`]: contentPosition === "left",
+    [`${classPrefix}__right`]: contentPosition === "right",
+    [`${classPrefix}__hairline`]: true
+  }) : classNames({
+    [`${classPrefix}`]: true,
+    [`${classPrefix}__vertical`]: direction === "vertical"
+  });
+  return React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
+};
+Divider.defaultProps = defaultProps;
+Divider.displayName = "NutDivider";
+export {
+  Divider as D
+};

package/dist/esm/drag.taro-48e1ff38.js

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useEffect } from "react";
+import { getSystemInfoSync, createSelectorQuery } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  attract: false,
+  direction: void 0,
+  boundary: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  className: "myDrag"
+};
+const Drag = (props) => {
+  const { attract, direction, boundary, children, className, style, ...reset } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-drag";
+  const [boundaryState, setBoundaryState] = useState(boundary);
+  const myDrag = useRef(null);
+  const dragRef = useRef(null);
+  const [currstyle, setCurrStyle] = useState({});
+  const timer = useRef(0);
+  const axisCache = useRef({ x: 0, y: 0 });
+  const transformCache = useRef({ x: 0, y: 0 });
+  const translateX = useRef(0);
+  const translateY = useRef(0);
+  const middleLine = useRef(0);
+  const getInfo = () => {
+    const el = myDrag.current;
+    if (el) {
+      const { top, left, bottom, right } = boundary;
+      const { screenWidth, windowHeight } = getSystemInfoSync();
+      createSelectorQuery().select(`.${className}`).boundingClientRect((rec) => {
+        setBoundaryState({
+          top: -rec.top + top,
+          left: -rec.left + left,
+          bottom: windowHeight - rec.height - rec.top - bottom,
+          right: screenWidth - rec.width - rec.left - right
+        });
+        middleLine.current = screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2;
+      }).exec();
+    }
+  };
+  const touchStart = (e) => {
+    e.currentTarget;
+    const touches = e.touches[0];
+    axisCache.current = { x: touches.clientX, y: touches.clientY };
+    transformCache.current = { x: translateX.current, y: translateY.current };
+  };
+  const touchMove = (e) => {
+    if (e.touches.length === 1 && dragRef.current) {
+      const touch = e.touches[0];
+      const x = touch.clientX - axisCache.current.x;
+      const y = touch.clientY - axisCache.current.y;
+      translateX.current = x + transformCache.current.x;
+      translateY.current = y + transformCache.current.y;
+      if (translateX.current < boundaryState.left) {
+        translateX.current = boundaryState.left;
+      } else if (translateX.current > boundaryState.right) {
+        translateX.current = boundaryState.right;
+      }
+      if (translateY.current < boundaryState.top) {
+        translateY.current = boundaryState.top;
+      } else if (translateY.current > boundaryState.bottom) {
+        translateY.current = boundaryState.bottom;
+      }
+      const transform = `translate3d(${props.direction !== "y" ? translateX.current : 0}px, ${props.direction !== "x" ? translateY.current : 0}px, 0px)`;
+      setCurrStyle({ transform });
+    }
+  };
+  const touchEnd = (e) => {
+    if (props.direction !== "y" && props.attract && dragRef.current) {
+      if (translateX.current < middleLine.current) {
+        translateX.current = boundaryState.left;
+      } else {
+        translateX.current = boundaryState.right;
+      }
+      const transform = `translate3d(${translateX.current}px, ${props.direction !== "x" ? translateY.current : 0}px, 0px)`;
+      setCurrStyle({ transform });
+    }
+  };
+  useEffect(() => {
+    timer.current = window.setTimeout(() => {
+      getInfo();
+    }, 300);
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
+  return React.createElement(
+    "div",
+    { style, className: `${classPrefix} ${className}`, ...reset, ref: myDrag },
+    React.createElement("div", {
+      onTouchStart: (event) => touchStart(event),
+      ref: dragRef,
+      onTouchMove: touchMove,
+      onTouchEnd: touchEnd,
+      // eslint-disable-next-line react/no-unknown-property
+      style: currstyle
+    }, children)
+  );
+};
+Drag.defaultProps = defaultProps;
+Drag.displayName = "NutDrag";
+export {
+  Drag as D
+};