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

package/dist/esm/elevator.taro-df8fde9d.js

@@ -0,0 +1,206 @@
+import React, { createContext, useRef, useState, useEffect } from "react";
+import Taro, { nextTick, createSelectorQuery } from "@tarojs/taro";
+import { ScrollView } from "@tarojs/components";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const elevatorContext = createContext({});
+const defaultProps = {
+  ...ComponentDefaults,
+  height: "200px",
+  floorKey: "title",
+  list: [],
+  sticky: false,
+  spaceHeight: 23,
+  titleHeight: 35,
+  showKeys: true,
+  className: "weapp-elevator"
+};
+const Elevator = (props) => {
+  const { height, floorKey, list, sticky, spaceHeight, titleHeight, showKeys, className, style, onClickItem, onClickIndex, children, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-elevator";
+  const listview = useRef(null);
+  const initData = {
+    anchorIndex: 0,
+    listHeight: [],
+    listGroup: [],
+    scrollY: 0
+  };
+  const touchState = useRef({
+    y1: 0,
+    y2: 0
+  });
+  const [currentData, setCurrentData] = useState({});
+  const [currentKey, setCurrentKey] = useState("");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [codeIndex, setCodeIndex] = useState(0);
+  const [scrollStart, setScrollStart] = useState(false);
+  const state = useRef(initData);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollY, setScrollY] = useState(0);
+  const resetScrollState = () => {
+    setScrollStart(false);
+  };
+  const getData = (el) => {
+    if (!el.dataset.index) {
+      return "0";
+    }
+    return el.dataset.index;
+  };
+  const calculateHeight = () => {
+    let height2 = 0;
+    state.current.listHeight.push(height2);
+    for (let i = 0; i < state.current.listGroup.length; i++) {
+      const query = createSelectorQuery();
+      query.selectAll(`.${className} .nut-elevator__item__${i}`).boundingClientRect();
+      query.exec((res) => {
+        if (res[0][0])
+          height2 += res[0][0].height;
+        state.current.listHeight.push(height2);
+      });
+    }
+  };
+  const scrollTo = (index) => {
+    if (!index && index !== 0) {
+      return;
+    }
+    if (!state.current.listHeight.length) {
+      calculateHeight();
+    }
+    let cacheIndex = index;
+    if (index < 0) {
+      cacheIndex = 0;
+    }
+    if (index > state.current.listHeight.length - 2) {
+      cacheIndex = state.current.listHeight.length - 2;
+    }
+    setCodeIndex(cacheIndex);
+    const scrollTop2 = state.current.listHeight[cacheIndex];
+    setScrollTop(scrollTop2);
+    if (sticky && scrollY !== scrollTop2) {
+      setScrollY(Math.floor(scrollTop2) > 0 ? 1 : 0);
+    }
+  };
+  const touchMove = (e) => {
+    const firstTouch = e.touches[0];
+    touchState.current.y2 = firstTouch.pageY;
+    const delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
+    const cacheIndex = state.current.anchorIndex + Math.floor(delta);
+    setCodeIndex(cacheIndex);
+    scrollTo(cacheIndex);
+  };
+  const touchEnd = () => {
+    resetScrollState();
+  };
+  const touchStart = (e) => {
+    setScrollStart(true);
+    const index = Number(getData(e.target));
+    const firstTouch = e.touches[0];
+    touchState.current.y1 = firstTouch.pageY;
+    state.current.anchorIndex = +index;
+    setCodeIndex((codeIndex2) => {
+      return codeIndex2 + index;
+    });
+    scrollTo(index);
+  };
+  const handleClickItem = (key, item) => {
+    onClickItem && onClickItem(key, item);
+    setCurrentData(item);
+    setCurrentKey(key);
+  };
+  const handleClickIndex = (key) => {
+    onClickIndex && onClickIndex(key);
+  };
+  const setListGroup = () => {
+    if (listview.current) {
+      createSelectorQuery().selectAll(`.${className} .nut-elevator__list__item`).node((el) => {
+        state.current.listGroup = [...Object.keys(el)];
+        calculateHeight();
+      }).exec();
+    }
+  };
+  const listViewScroll = (e) => {
+    const { listHeight } = state.current;
+    if (!listHeight.length) {
+      calculateHeight();
+    }
+    const target = e.target;
+    const { scrollTop: scrollTop2 } = target;
+    state.current.scrollY = Math.floor(scrollTop2);
+    Taro.getEnv() === "WEB" && setScrollTop(scrollTop2);
+    if (sticky && scrollTop2 !== scrollY) {
+      setScrollY(Math.floor(scrollTop2) > 0 ? 1 : 0);
+    }
+    for (let i = 0; i < listHeight.length - 1; i++) {
+      const height1 = listHeight[i];
+      const height2 = listHeight[i + 1];
+      if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
+        setCurrentIndex(i);
+        return;
+      }
+    }
+  };
+  useEffect(() => {
+    if (listview.current) {
+      nextTick(() => {
+        setListGroup();
+      });
+    }
+  }, [listview]);
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${className}`, style, ...rest },
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__list`, style: { height: Number.isNaN(+height) ? height : `${height}px` } },
+      React.createElement(ScrollView, { scrollTop, scrollY: true, scrollWithAnimation: true, scrollAnchoring: true, className: `${classPrefix}__list__inner`, type: "list", ref: listview, onScroll: listViewScroll }, list.map((item, idx) => {
+        return React.createElement(
+          "div",
+          { className: `${classPrefix}__list__item nut-elevator__item__${idx}`, key: idx },
+          React.createElement("div", { className: `${classPrefix}__list__item__code` }, item[floorKey]),
+          React.createElement(React.Fragment, null, item.list.map((subitem) => {
+            return React.createElement("div", { className: classNames({
+              [`${classPrefix}__list__item__name`]: true,
+              [`${classPrefix}__list__item__name--highcolor`]: currentData.id === subitem.id && currentKey === item[floorKey]
+            }), key: subitem.id, onClick: () => handleClickItem(item[floorKey], subitem) }, children ? React.createElement(
+              React.Fragment,
+              null,
+              React.createElement(elevatorContext.Provider, { value: subitem }, children)
+            ) : subitem.name);
+          }))
+        );
+      }))
+    ),
+    showKeys ? React.createElement(
+      React.Fragment,
+      null,
+      list.length && scrollStart ? React.createElement("div", { className: classNames({
+        [`${classPrefix}__code--current`]: true,
+        [`${classPrefix}__code--current--current`]: true
+      }) }, list[codeIndex][floorKey]) : null,
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__bars` },
+        React.createElement("div", { className: `${classPrefix}__bars__inner`, onTouchStart: (event) => touchStart(event), onTouchMove: (event) => touchMove(event), onTouchEnd: touchEnd, style: { touchAction: "pan-y" } }, list.map((item, index) => {
+          return React.createElement("div", { className: classNames({
+            [`${classPrefix}__bars__inner__item`]: true,
+            [`${classPrefix}__bars__inner__item--active`]: item[floorKey] === list[currentIndex][floorKey]
+          }), "data-index": index, key: index, onClick: () => handleClickIndex(item[floorKey]) }, item[floorKey]);
+        }))
+      )
+    ) : null,
+    sticky && scrollY > 0 ? React.createElement(
+      "div",
+      { className: `${classPrefix}__list__fixed` },
+      React.createElement("span", { className: `${classPrefix}__list__fixed__title` }, list[currentIndex][floorKey])
+    ) : null
+  );
+};
+Elevator.defaultProps = defaultProps;
+Elevator.displayName = "NutElevator";
+Elevator.Context = elevatorContext;
+export {
+  Elevator as E
+};

package/dist/esm/ellipsis.taro-f9688dd7.js

@@ -0,0 +1,242 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useReady, nextTick, createSelectorQuery } from "@tarojs/taro";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import classNames from "classnames";
+const defaultProps = {
+  ...ComponentDefaults,
+  content: "",
+  direction: "end",
+  rows: 1,
+  expandText: "",
+  collapseText: "",
+  symbol: "...",
+  lineHeight: "20"
+};
+const classPrefix = `nut-ellipsis`;
+const Ellipsis = (props) => {
+  var _a, _b, _c, _d;
+  const { children, content, direction, rows, className, expandText, collapseText, symbol, lineHeight, onClick, onChange, ...rest } = { ...defaultProps, ...props };
+  let maxHeight = 0;
+  const [exceeded, setExceeded] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const ellipsis = useRef({
+    leading: "",
+    tailing: ""
+  });
+  const root = useRef(null);
+  const rootContain = useRef(null);
+  const symbolContain = useRef(null);
+  const [contentCopy, setContentCopy] = useState(content);
+  let lineH = 0;
+  let originHeight = 0;
+  const refRandomId = Math.random().toString(36).slice(-8);
+  const widthRef = useRef("auto");
+  let widthBase = [14, 10, 7, 8.4, 10];
+  let symbolTextWidth = widthBase[0] * 0.7921;
+  const chineseReg = /^[\u4e00-\u9fa5]+$/;
+  const digitReg = /^[0-9]+$/;
+  const letterUpperReg = /^[A-Z]+$/;
+  const letterLowerReg = /^[a-z]+$/;
+  const classes = classNames(classPrefix, className);
+  const init = () => {
+    setExceeded(false);
+    setExpanded(false);
+    setContentCopy(content);
+    nextTick(() => {
+      getSymbolInfo();
+      getReference();
+    });
+  };
+  useReady(() => init());
+  useEffect(() => init(), [content]);
+  const getSymbolInfo = async () => {
+    const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
+    symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
+  };
+  const symbolText = () => {
+    if (direction === "end" || direction === "middle") {
+      return `${symbol}${expandText}`;
+    }
+    return `${symbol}${expandText}${symbol}`;
+  };
+  const getReference = async () => {
+    const element = root.current;
+    const query = createSelectorQuery();
+    query.select(`#${element.id}`) && query.select(`#${element.id}`).fields({
+      computedStyle: [
+        "width",
+        "height",
+        "lineHeight",
+        "paddingTop",
+        "paddingBottom",
+        "fontSize"
+      ]
+    }, (res) => {
+      if (!res)
+        return;
+      lineH = pxToNumber(res.lineHeight === "normal" ? lineHeight : res.lineHeight);
+      maxHeight = Math.floor(lineH * (Number(rows) + 0.5) + pxToNumber(res.paddingTop) + pxToNumber(res.paddingBottom));
+      originHeight = pxToNumber(res.height);
+      widthRef.current = res.width;
+      const bsize = pxToNumber(res.fontSize);
+      widthBase = [
+        bsize,
+        bsize * 0.72,
+        bsize * 0.53,
+        bsize * 0.4,
+        bsize * 0.75
+      ];
+      calcEllipse();
+    }).exec();
+  };
+  const calcEllipse = async () => {
+    const refe = await getRectByTaro(rootContain.current);
+    if (refe.height <= maxHeight) {
+      setExceeded(false);
+    } else {
+      const rowNum = Math.floor(content.length / (originHeight / lineH - 1));
+      if (direction === "middle") {
+        const end = content.length;
+        ellipsis.current.leading = tailorContent(0, rowNum * (Number(rows) + 0.5), "end");
+        ellipsis.current.tailing = tailorContent(content.length - rowNum * (Number(rows) + 0.5), end, "start");
+      } else if (direction === "end") {
+        const end = rowNum * (Number(rows) + 0.5);
+        ellipsis.current.leading = tailorContent(0, end);
+      } else {
+        const start = content.length - rowNum * (Number(rows) + 0.5) - 5;
+        ellipsis.current.tailing = tailorContent(start, content.length);
+      }
+      assignContent();
+      setTimeout(() => {
+        verifyEllipsis();
+      }, 100);
+    }
+  };
+  const verifyEllipsis = async () => {
+    var _a2, _b2, _c2, _d2, _e, _f;
+    const refe = await getRectByTaro(rootContain.current);
+    if (refe && refe.height && refe.height > maxHeight) {
+      if (direction === "end") {
+        ellipsis.current.leading = (_c2 = (_a2 = ellipsis.current) == null ? void 0 : _a2.leading) == null ? void 0 : _c2.slice(0, ((_b2 = ellipsis.current) == null ? void 0 : _b2.leading.length) - 1);
+      } else {
+        ellipsis.current.tailing = (_f = (_d2 = ellipsis.current) == null ? void 0 : _d2.tailing) == null ? void 0 : _f.slice(1, (_e = ellipsis.current) == null ? void 0 : _e.tailing.length);
+      }
+      assignContent();
+      setTimeout(() => {
+        verifyEllipsis();
+      }, 100);
+    }
+  };
+  const assignContent = () => {
+    var _a2, _b2, _c2, _d2;
+    const newContent = `${((_a2 = ellipsis.current) == null ? void 0 : _a2.leading) || ""}${((_b2 = ellipsis.current) == null ? void 0 : _b2.leading) ? symbol : ""}${expandText || ""}${((_c2 = ellipsis.current) == null ? void 0 : _c2.tailing) ? symbol : ""}${((_d2 = ellipsis.current) == null ? void 0 : _d2.tailing) || ""}`;
+    setContentCopy(newContent);
+  };
+  const tailorContent = (left, right, type = "") => {
+    const threeDotWidth = symbolTextWidth;
+    const direc = direction === "middle" && type ? type : direction;
+    setExceeded(true);
+    let widthPart = -1;
+    const start = left;
+    const end = right;
+    let cutoff = 0;
+    let marking = 0;
+    if (direc === "end") {
+      marking = start;
+      cutoff = end;
+    } else {
+      marking = end;
+      cutoff = start;
+    }
+    const contentWidth = pxToNumber(widthRef.current) * Number(rows) - threeDotWidth;
+    const contentPartWidth = direction === "middle" ? contentWidth / 2 : contentWidth;
+    while (widthPart < contentPartWidth) {
+      const zi = content[marking];
+      if (chineseReg.test(zi)) {
+        widthPart = Number(widthPart + widthBase[0]);
+      } else if (letterUpperReg.test(zi)) {
+        widthPart = Number(widthPart + widthBase[1]);
+      } else if (letterLowerReg.test(zi)) {
+        widthPart = Number(widthPart + widthBase[2]);
+      } else if (digitReg.test(zi)) {
+        widthPart = Number(widthPart + widthBase[3]);
+      } else {
+        widthPart = Number(widthPart + widthBase[4]);
+      }
+      cutoff = marking;
+      direc === "end" ? marking++ : marking--;
+    }
+    if (direc === "end") {
+      return content.slice(0, cutoff);
+    }
+    return content.slice(cutoff, end);
+  };
+  const pxToNumber = (value) => {
+    if (!value)
+      return 0;
+    const match = value.match(/^\d*(\.\d*)?/);
+    return match ? Number(match[0]) : 0;
+  };
+  const clickHandle = (type) => {
+    if (type === 1) {
+      setExpanded(true);
+      onChange && onChange("expand");
+    } else {
+      setExpanded(false);
+      onChange && onChange("collapse");
+    }
+  };
+  const handleClick = () => {
+    onClick && onClick();
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "div",
+      { className: classes, onClick: handleClick, ref: root, id: `root${refRandomId}`, ...rest },
+      React.createElement(
+        "div",
+        null,
+        !exceeded ? React.createElement("div", { className: "nut-ellipsis-wordbreak" }, content) : null,
+        exceeded && !expanded ? React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(
+            "div",
+            { className: "nut-ellipsis-wordbreak" },
+            (_a = ellipsis.current) == null ? void 0 : _a.leading,
+            ((_b = ellipsis.current) == null ? void 0 : _b.leading) && symbol,
+            expandText ? React.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
+              e.stopPropagation();
+              clickHandle(1);
+            } }, expandText) : null,
+            ((_c = ellipsis.current) == null ? void 0 : _c.tailing) && symbol,
+            (_d = ellipsis.current) == null ? void 0 : _d.tailing
+          )
+        ) : null,
+        exceeded && expanded ? React.createElement(
+          React.Fragment,
+          null,
+          content,
+          expandText ? React.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
+            e.stopPropagation();
+            clickHandle(2);
+          } }, collapseText) : null
+        ) : null
+      )
+    ),
+    React.createElement(
+      "div",
+      { className: "nut-ellipsis-copy", ref: rootContain, id: `rootContain${refRandomId}`, style: { width: `${widthRef}` } },
+      React.createElement("div", null, contentCopy)
+    ),
+    React.createElement("div", { className: "nut-ellipsis-copy", ref: symbolContain, id: `symbolContain${refRandomId}`, style: { display: "inline" } }, symbolText())
+  );
+};
+Ellipsis.defaultProps = defaultProps;
+Ellipsis.displayName = "NutEllipsis";
+export {
+  Ellipsis as E
+};

package/dist/esm/empty.taro-ca792f57.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultStatus = {
+  empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
+  error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
+  network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+};
+const defaultProps = {
+  ...ComponentDefaults,
+  description: "",
+  imageSize: "",
+  status: "empty"
+};
+const classPrefix = `nut-empty`;
+const Empty = (props) => {
+  const { locale } = useConfig();
+  defaultProps.description = locale.noData || defaultProps.description;
+  const { image, imageSize, description, children, className, status, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [imgStyle, setImgStyle] = useState({});
+  const imageUrl = image || defaultStatus[status];
+  const imageNode = typeof imageUrl === "string" ? React.createElement("img", { className: "img", src: imageUrl, alt: "empty" }) : imageUrl;
+  useEffect(() => {
+    setImgStyle(() => {
+      if (!imageSize) {
+        return {};
+      }
+      if (typeof imageSize === "number") {
+        return {
+          width: `${imageSize}px`,
+          height: `${imageSize}px`
+        };
+      }
+      return {
+        width: imageSize,
+        height: imageSize
+      };
+    });
+  }, [imageSize]);
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${className}`, ...rest },
+    React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("div", { className: `${classPrefix}__image`, style: imgStyle }, imageNode),
+      typeof description === "string" ? React.createElement("div", { className: `${classPrefix}__description` }, description) : description,
+      children
+    )
+  );
+};
+Empty.defaultProps = defaultProps;
+Empty.displayName = "NutEmpty";
+export {
+  Empty as E
+};

package/dist/esm/fixednav.taro-28e5f776.js

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+import { Left } from "@nutui/icons-react-taro";
+import { O as Overlay } from "./overlay.taro-75012bd3.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  activeText: "",
+  inactiveText: "",
+  type: "right",
+  position: {
+    top: "auto",
+    bottom: "auto"
+  }
+};
+const FixedNav = (props) => {
+  const { locale } = useConfig();
+  const { className, overlay, visible, list, activeText, inactiveText, position, onChange, onSelect, type, children, style, content, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-fixednav";
+  const classes = classNames({
+    active: visible
+  }, type, className, classPrefix);
+  const handleClick = (item, event) => {
+    onSelect(event, item);
+  };
+  const onUpdateValue = (value = !visible) => {
+    onChange(value);
+  };
+  return React.createElement(
+    "div",
+    { className: classes, style: {
+      ...position,
+      ...style
+    }, ...rest },
+    overlay && React.createElement(Overlay, { visible, zIndex: 200, onClick: () => onUpdateValue(false) }),
+    React.createElement("div", { className: "list" }, children || React.createElement("div", { className: `${classPrefix}__list` }, list.map((item, index) => {
+      return React.createElement(
+        "div",
+        { className: `${classPrefix}__list-item`, onClick: (event) => handleClick(item, event), key: item.id || index },
+        React.createElement("img", { src: item.icon, alt: "" }),
+        React.createElement("div", { className: `${classPrefix}__list-text` }, item.text),
+        item.num && React.createElement("div", { className: "b" }, item.num)
+      );
+    }))),
+    React.createElement("div", { className: `${classPrefix}__btn`, onClick: () => onUpdateValue() }, content || React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(Left, { color: "#fff" }),
+      React.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)
+    ))
+  );
+};
+FixedNav.defaultProps = defaultProps;
+FixedNav.displayName = "NutFixedNav";
+export {
+  FixedNav as F
+};