@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/pagination.taro-63607c3b.js

@@ -0,0 +1,94 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  defaultValue: 1,
+  mode: "multi",
+  prev: null,
+  next: null,
+  total: 50,
+  pageSize: 10,
+  itemSize: 5,
+  ellipse: false
+};
+const Pagination = (props) => {
+  const { locale } = useConfig();
+  const { value, mode, prev, next, total, pageSize, itemSize, onChange, ellipse, itemRender, defaultValue, className, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-pagination";
+  const [currentPage, setCurrentPage] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 1,
+    onChange
+  });
+  const pageCount = useMemo(() => {
+    const num = Math.ceil(total / pageSize);
+    return Number.isNaN(num) ? 1 : Math.max(1, num);
+  }, [total, pageSize]);
+  const pages = useMemo(() => {
+    const items = [];
+    let startPage = 1;
+    let endPage = pageCount;
+    const partialShow = pageCount > itemSize;
+    if (partialShow) {
+      startPage = Math.max(currentPage - Math.floor(itemSize / 2), 1);
+      endPage = startPage + itemSize - 1;
+      if (endPage > pageCount) {
+        endPage = pageCount;
+        startPage = endPage - itemSize + 1;
+      }
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      items.push({ number: i, text: i });
+    }
+    if (partialShow && itemSize > 0 && ellipse) {
+      if (startPage > 1) {
+        items.unshift({ number: startPage - 1, text: "..." });
+      }
+      if (endPage < pageCount) {
+        items.push({ number: endPage + 1, text: "..." });
+      }
+    }
+    return items;
+  }, [currentPage, itemSize, pageCount]);
+  const handleSelectPage = (curPage) => {
+    if (curPage > pageCount || curPage < 1)
+      return;
+    setCurrentPage(curPage);
+  };
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className), ...rest },
+    React.createElement("div", { className: classNames(`${classPrefix}__prev`, mode === "multi" ? "" : "simple-border", currentPage === 1 ? "disabled" : ""), onClick: (e) => handleSelectPage(currentPage - 1) }, prev || locale.pagination.prev),
+    mode === "multi" && React.createElement("div", { className: `${classPrefix}__contain` }, pages.map((item, index) => {
+      return React.createElement("div", { key: `${index}pagination`, className: classNames(`${classPrefix}__item`, {
+        active: item.number === currentPage
+      }), onClick: (e) => {
+        item.number !== currentPage && handleSelectPage(item.number);
+      } }, itemRender ? itemRender(item) : item.text);
+    })),
+    mode === "simple" && React.createElement(
+      "div",
+      { className: `${classPrefix}__contain` },
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__simple` },
+        currentPage,
+        "/",
+        pageCount
+      )
+    ),
+    React.createElement("div", { className: classNames(`${classPrefix}__next`, currentPage >= pageCount ? "disabled" : ""), onClick: (e) => handleSelectPage(currentPage + 1) }, next || locale.pagination.next)
+  );
+};
+Pagination.defaultProps = defaultProps;
+Pagination.displayName = "NutPagination";
+export {
+  Pagination as P
+};

package/dist/esm/picker.taro-0570ec32.js

@@ -0,0 +1,481 @@
+import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import classNames from "classnames";
+import Taro from "@tarojs/taro";
+import { View, PickerView, PickerViewColumn } from "@tarojs/components";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+let passiveSupported = false;
+if (canUseDom) {
+  try {
+    const opts = Object.defineProperty({}, "passive", {
+      get() {
+        passiveSupported = true;
+      }
+    });
+    window.addEventListener("test-passive-supported", null, opts);
+  } catch (e) {
+    console.log(e);
+  }
+}
+const InternalPickerPanel = (props, ref) => {
+  const { keyIndex = 0, defaultValue, options = [], threeDimensional = true, duration = 1e3, itemShow = false, chooseItem } = props;
+  const touch = useTouch();
+  const DEFAULT_DURATION = 200;
+  const INERTIA_TIME = 300;
+  const INERTIA_DISTANCE = 15;
+  const [currIndex, setCurrIndex] = useState(1);
+  const lineSpacing = useRef(36);
+  const [touchTime, setTouchTime] = useState(0);
+  const [touchDeg, setTouchDeg] = useState("0deg");
+  const rotation = 20;
+  const moving = useRef(false);
+  let timer;
+  const listRef = useRef(null);
+  const rollerRef = useRef(null);
+  const PickerPanelRef = useRef(null);
+  const [startTime, setStartTime] = useState(0);
+  const [startY, setStartY] = useState(0);
+  const transformY = useRef(0);
+  const [scrollDistance, setScrollDistance] = useState(0);
+  const isHidden = (index) => {
+    if (index >= currIndex + 8 || index <= currIndex - 8) {
+      return true;
+    }
+    return false;
+  };
+  const setTransform = (translateY = 0, type, time = DEFAULT_DURATION, deg) => {
+    let nTime = time;
+    if (type !== "end") {
+      nTime = 0;
+    }
+    setTouchTime(nTime);
+    setTouchDeg(deg);
+    setScrollDistance(translateY);
+  };
+  const setMove = (move, type, time) => {
+    let updateMove = move + transformY.current;
+    if (type === "end") {
+      if (updateMove > 0) {
+        updateMove = 0;
+      }
+      if (updateMove < -(options.length - 1) * lineSpacing.current) {
+        updateMove = -(options.length - 1) * lineSpacing.current;
+      }
+      const endMove = Math.round(updateMove / lineSpacing.current) * lineSpacing.current;
+      const deg = `${(Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation}deg`;
+      setTransform(endMove, type, time, deg);
+      setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);
+    } else {
+      let deg = 0;
+      const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation;
+      const maxDeg = (options.length + 1) * rotation;
+      const minDeg = 0;
+      deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+      if (minDeg < deg && deg < maxDeg) {
+        setTransform(updateMove, "", void 0, `${deg}deg`);
+        setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing.current)) + 1);
+      }
+    }
+  };
+  const setChooseValue = (move) => {
+    chooseItem && chooseItem(options == null ? void 0 : options[Math.round(-move / lineSpacing.current)], keyIndex);
+  };
+  const touchStart = (event) => {
+    touch.start(event);
+    setStartY(touch.deltaY);
+    setStartTime(Date.now());
+    transformY.current = scrollDistance;
+  };
+  const touchMove = (event) => {
+    touch.move(event);
+    if (touch.isVertical) {
+      moving.current = true;
+      preventDefault(event, true);
+    }
+    const move = touch.deltaY - startY;
+    setMove(move);
+  };
+  const touchEnd = (event) => {
+    if (!moving.current)
+      return;
+    const move = touch.deltaY - startY;
+    const moveTime = Date.now() - startTime;
+    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+      const distance = momentum(move, moveTime);
+      setMove(distance, "end", +duration);
+    } else {
+      setMove(move, "end");
+    }
+    setTimeout(() => {
+      touch.reset();
+    }, 0);
+  };
+  const momentum = (distance, duration2) => {
+    let nDistance = distance;
+    const speed = Math.abs(nDistance / duration2);
+    nDistance = speed / 3e-3 * (nDistance < 0 ? -1 : 1);
+    return nDistance;
+  };
+  const modifyStatus = (type, val) => {
+    const value = val || defaultValue;
+    let index = -1;
+    if (value) {
+      options.some((item, idx) => {
+        if (item.value === value) {
+          index = idx;
+          return true;
+        }
+        return false;
+      });
+    } else {
+      options.forEach((item, i) => {
+        if (item.value === defaultValue) {
+          index = i;
+        }
+      });
+    }
+    setCurrIndex(index === -1 ? 1 : index + 1);
+    const move = index === -1 ? 0 : index * lineSpacing.current;
+    type && setChooseValue(-move);
+    setMove(-move);
+  };
+  const stopMomentum = () => {
+    moving.current = false;
+    setTouchTime(0);
+    setChooseValue(scrollDistance);
+  };
+  const preventDefault = (event, isStopPropagation) => {
+    if (!passiveSupported && (typeof event.cancelable !== "boolean" || event.cancelable)) {
+      event.preventDefault();
+    }
+    if (isStopPropagation) {
+      event.stopPropagation();
+    }
+  };
+  const getReference = async () => {
+    const refe = await getRectByTaro(listRef == null ? void 0 : listRef.current);
+    lineSpacing.current = refe.height ? refe.height : 36;
+    modifyStatus(true);
+  };
+  const touchRollerStyle = () => {
+    return {
+      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+      transform: `rotate3d(1, 0, 0, ${touchDeg})`
+    };
+  };
+  const touchTileStyle = () => {
+    return {
+      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+      transform: `translate3d(0, ${scrollDistance}px, 0)`
+    };
+  };
+  useEffect(() => {
+    setScrollDistance(0);
+    transformY.current = 0;
+    modifyStatus(false);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [options]);
+  useEffect(() => {
+    if (itemShow) {
+      setTimeout(() => {
+        getReference();
+      }, 200);
+    }
+  }, [itemShow]);
+  useImperativeHandle(ref, () => ({
+    stopMomentum,
+    moving: moving.current
+  }));
+  return React.createElement(
+    "div",
+    { className: "nut-picker-list", ref: PickerPanelRef, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+    React.createElement(
+      "div",
+      { className: "nut-picker-roller", ref: rollerRef, style: threeDimensional ? touchRollerStyle() : touchTileStyle(), onTransitionEnd: stopMomentum },
+      threeDimensional && options.map((item, index) => {
+        return React.createElement(
+          "div",
+          { className: `nut-picker-roller-item ${isHidden(index + 1) && "nut-picker-roller-item-hidden"}`, style: {
+            transform: `rotate3d(1, 0, 0, ${-rotation * (index + 1)}deg) translate3d(0px, 0px, 104px)`,
+            height: `${lineSpacing.current}px`,
+            lineHeight: `${lineSpacing.current}px`
+          }, key: item.value ? item.value : index },
+          React.createElement(React.Fragment, null, item.text ? item.text : item)
+        );
+      }),
+      !threeDimensional && options.map((item, index) => {
+        return React.createElement(
+          "div",
+          { className: "nut-picker-roller-item-title", key: item.value ? item.value : index, style: {
+            height: `${lineSpacing.current}px`,
+            lineHeight: `${lineSpacing.current}px`
+          } },
+          React.createElement(React.Fragment, null, item.text ? item.text : item)
+        );
+      })
+    ),
+    React.createElement("div", { className: "nut-picker-mask" }),
+    React.createElement("div", { className: "nut-picker-indicator", ref: listRef })
+  );
+};
+const PickerPanel = React.forwardRef(InternalPickerPanel);
+const PickerPanel$1 = PickerPanel;
+function useRefs() {
+  const refs = React.useRef([]);
+  const setRefs = React.useCallback((index) => (el) => {
+    if (el)
+      refs.current[index] = el;
+  }, []);
+  const reset = React.useCallback(() => {
+    refs.current = [];
+  }, []);
+  return [refs.current, setRefs, reset];
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  visible: false,
+  title: "",
+  options: [],
+  value: [],
+  defaultValue: [],
+  threeDimensional: true,
+  duration: 1e3
+};
+const InternalPicker = (props, ref) => {
+  const { locale } = useConfig();
+  const { visible, title, options = [], defaultValue = [], className, style, threeDimensional, duration, onConfirm, onClose, afterClose, onChange, ...rest } = { ...defaultProps, ...props };
+  const classPrefix = "nut-picker";
+  const classes = classNames(classPrefix, className);
+  const [selectedValue, setSelectedValue] = usePropsValue({
+    value: props.value,
+    defaultValue: [...defaultValue],
+    finalValue: [...defaultValue],
+    onChange: (val) => {
+      var _a;
+      (_a = props.onConfirm) == null ? void 0 : _a.call(props, setSelectedOptions(), val);
+    }
+  });
+  const [currentValue, setCurrentValue] = useState([]);
+  const [columnIndex, setColumnIndex] = useState(0);
+  const pickerRef = useRef(null);
+  const [refs, setRefs] = useRefs();
+  const [columnsList, setColumnsList] = useState([]);
+  const isConfirmEvent = useRef(false);
+  const formatCascade = (columns, values) => {
+    const formatted = [];
+    let columnOptions = {
+      text: "",
+      value: "",
+      children: columns
+    };
+    let columnIndex2 = 0;
+    while (columnOptions && columnOptions.children) {
+      const options2 = columnOptions.children;
+      const value = values[columnIndex2];
+      let index = options2.findIndex((columnItem) => columnItem.value === value);
+      if (index === -1)
+        index = 0;
+      columnOptions = columnOptions.children[index];
+      columnIndex2++;
+      formatted.push(options2);
+    }
+    return formatted;
+  };
+  const columnsType = () => {
+    const firstColumn = options[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
+        return "multiple";
+      }
+      if ("children" in firstColumn) {
+        return "cascade";
+      }
+    }
+    return "single";
+  };
+  const normalListData = () => {
+    const type = columnsType();
+    switch (type) {
+      case "multiple":
+        return options;
+      case "cascade":
+        return formatCascade(options, selectedValue);
+      default:
+        return [options];
+    }
+  };
+  const init = () => {
+    const normalData = normalListData();
+    setColumnsList(normalData);
+    const data = [];
+    normalData.length > 0 && normalData.map((item) => {
+      item[0] && data.push(item[0].value);
+      return item;
+    });
+    if (!defaultValue.length && selectedValue.length === 0) {
+      setSelectedValue([...data]);
+    }
+  };
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    init();
+  }, [options, visible]);
+  const setSelectedOptions = () => {
+    const options2 = [];
+    let currOptions = [];
+    columnsList.forEach((columnOptions, index) => {
+      currOptions = columnOptions.filter((item) => item.value === selectedValue[index]);
+      if (currOptions[0]) {
+        options2.push(currOptions[0]);
+      } else {
+        columnOptions[0] && options2.push(columnOptions[0]);
+      }
+    });
+    return options2;
+  };
+  const defaultValuesConvert = () => {
+    const defaultIndexs = [];
+    if (selectedValue.length > 0) {
+      selectedValue.forEach((value, index) => {
+        var _a;
+        for (let i = 0; i < ((_a = columnsList == null ? void 0 : columnsList[index]) == null ? void 0 : _a.length); i++) {
+          if (columnsList[index][i].value === value) {
+            defaultIndexs.push(i);
+            break;
+          }
+        }
+      });
+    } else if (columnsList && columnsList.length > 0) {
+      columnsList.forEach((item) => {
+        defaultIndexs.push(0);
+        item.length > 0 && selectedValue.push(item[0].value);
+      });
+    }
+    return defaultIndexs;
+  };
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
+    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
+    if (isConfirmEvent.current) {
+      isConfirmEvent.current = false;
+      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+    }
+  }, [selectedValue, columnsList, visible]);
+  const chooseItem = (columnOptions, columnIndex2) => {
+    var _a, _b;
+    if (columnOptions && Object.keys(columnOptions).length) {
+      if (selectedValue[columnIndex2] !== columnOptions.value) {
+        if (columnsType() === "cascade") {
+          selectedValue[columnIndex2] = columnOptions.value || "";
+          setSelectedValue([...selectedValue]);
+          while ((_a = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _a[0]) {
+            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
+            setSelectedValue([...selectedValue]);
+            columnIndex2++;
+            columnOptions = columnOptions.children[0];
+          }
+          if ((_b = columnOptions == null ? void 0 : columnOptions.children) == null ? void 0 : _b.length) {
+            selectedValue[columnIndex2 + 1] = "";
+            setSelectedValue([...selectedValue]);
+          }
+          setColumnsList(normalListData());
+        } else {
+          setSelectedValue((data) => {
+            const cdata = [...data];
+            cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
+            return cdata;
+          });
+        }
+        setColumnIndex(columnIndex2);
+      }
+    }
+  };
+  const confirm = () => {
+    let movings = false;
+    refs.forEach((ref2) => {
+      if (ref2.moving)
+        movings = true;
+      ref2.stopMomentum();
+    });
+    if (movings) {
+      isConfirmEvent.current = true;
+    } else {
+      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      closePicker();
+    }
+    setTimeout(() => {
+      isConfirmEvent.current = false;
+    }, 0);
+  };
+  const closePicker = () => {
+    onClose && onClose(setSelectedOptions(), selectedValue);
+    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+  };
+  const renderTitleBar = () => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}__control` },
+      React.createElement("span", { className: `${classPrefix}__cancel-btn`, onClick: () => closePicker() }, locale.cancel),
+      React.createElement("div", { className: `${classPrefix}__title` }, title || ""),
+      React.createElement("span", { className: `${classPrefix}__confirm-btn`, onClick: confirm }, locale.confirm)
+    );
+  };
+  const [pickingStatus, setPickingStatus] = useState(false);
+  const pickerStart = () => {
+    setPickingStatus(true);
+  };
+  const pickerEnd = () => {
+    setPickingStatus(false);
+  };
+  const pickerChange = (data) => {
+    const prevDefaultValue = currentValue;
+    let changeIndex = 0;
+    const list = data.detail.value;
+    for (let i = 0, len = list.length; i < len; i++) {
+      if (prevDefaultValue[i] !== list[i]) {
+        changeIndex = i;
+        break;
+      }
+    }
+    chooseItem(columnsList[changeIndex][data.detail.value[changeIndex]], changeIndex);
+  };
+  return React.createElement(
+    Popup,
+    { visible, position: "bottom", onClose: () => {
+      closePicker();
+    } },
+    React.createElement(
+      View,
+      { className: classes, style, ...rest, catchMove: true },
+      renderTitleBar(),
+      React.createElement("div", { className: `${classPrefix}__panel`, ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
+        return React.createElement(PickerPanel$1, { ref: setRefs(index), defaultValue: selectedValue == null ? void 0 : selectedValue[index], options: item, threeDimensional, chooseItem: (value, index2) => chooseItem(value, index2), duration, key: index, keyIndex: index, itemShow: visible });
+      }) : React.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "nut-picker-view-panel" }, columnsList == null ? void 0 : columnsList.map((columnOptions, index) => {
+        return React.createElement(PickerViewColumn, { key: `col${index}` }, columnOptions.map((item, index2) => {
+          return React.createElement(
+            View,
+            { key: item.value || index2, className: "nut-picker-roller-item-title" },
+            React.createElement(React.Fragment, null, item.text || item)
+          );
+        }));
+      })))
+    )
+  );
+};
+const Picker = React.forwardRef(InternalPicker);
+const Picker$1 = Picker;
+export {
+  Picker$1 as P
+};