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

package/dist/esm/tabs.taro-66164782.js

@@ -0,0 +1,146 @@
+import React, { useState, useRef, useEffect } from "react";
+import { View, ScrollView } from "@tarojs/components";
+import classNames from "classnames";
+import { JoySmile } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { T as TabPane } from "./tabpane.taro-f8d92ece.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+function useForceUpdate() {
+  const [, updateState] = React.useState();
+  return React.useCallback(() => updateState({}), []);
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  tabStyle: {},
+  activeColor: "",
+  direction: "horizontal",
+  activeType: "line",
+  duration: 300,
+  autoHeight: false
+};
+const classPrefix = "nut-tabs";
+const Tabs = (props) => {
+  const { activeColor, tabStyle, direction, activeType, duration, align, title, children, onClick, onChange, className, autoHeight, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: 0,
+    onChange
+  });
+  const [contentStyle, setContentStyle] = useState({});
+  const titleItemsRef = useRef([]);
+  const navRef = useRef(null);
+  const getTitles = () => {
+    const titles2 = [];
+    React.Children.forEach(children, (child, idx) => {
+      if (React.isValidElement(child)) {
+        const props2 = child == null ? void 0 : child.props;
+        if ((props2 == null ? void 0 : props2.title) || (props2 == null ? void 0 : props2.value)) {
+          titles2.push({
+            title: props2.title,
+            value: props2.value || idx,
+            disabled: props2.disabled
+          });
+        }
+      }
+    });
+    return titles2;
+  };
+  const titles = useRef(getTitles());
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    titles.current = getTitles();
+    let current = "";
+    titles.current.forEach((title2) => {
+      if (title2.value === value) {
+        current = value;
+      }
+    });
+    if (current !== "" && current !== value) {
+      setValue(current);
+    } else {
+      forceUpdate();
+    }
+  }, [children]);
+  const classes = classNames(classPrefix, `${classPrefix}--${direction}`, className);
+  const classesTitle = classNames(`${classPrefix}__titles`, {
+    [`${classPrefix}__titles--${activeType}`]: activeType,
+    [`${classPrefix}__titles--scrollable`]: true,
+    [`${classPrefix}__titles--${align}`]: align
+  });
+  const tabsActiveStyle = {
+    color: activeType === "smile" ? activeColor : "",
+    background: activeType === "line" ? activeColor : ""
+  };
+  const scrollIntoRef = useRef(0);
+  useEffect(() => {
+    const index = titles.current.findIndex((t) => t.value === value);
+    setContentStyle({
+      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transitionDuration: `${duration}ms`
+    });
+    const scrollToIndex = index - 2;
+    scrollIntoRef.current = scrollToIndex < 0 ? 0 : scrollToIndex;
+  }, [value]);
+  const tabChange = (item, index) => {
+    onClick && onClick(item.value);
+    if (item.disabled) {
+      return;
+    }
+    setValue(item.value);
+  };
+  return React.createElement(
+    View,
+    { className: classes, ...rest },
+    React.createElement(ScrollView, { enableFlex: true, scrollX: direction === "horizontal", scrollY: direction === "vertical", showScrollbar: false, scrollIntoViewAlignment: "center", scrollWithAnimation: true, scrollIntoView: `scrollIntoView${scrollIntoRef.current}`, className: classesTitle, style: { ...tabStyle }, ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
+      return React.createElement(
+        View,
+        { ref: (ref) => titleItemsRef.current.push(ref), id: `scrollIntoView${index}`, onClick: (e) => {
+          tabChange(item);
+        }, className: classNames(`${classPrefix}__titles-item`, {
+          [`nut-tabs__titles-item--active`]: !item.disabled && String(item.value) === String(value),
+          [`nut-tabs__titles-item--disabled`]: item.disabled,
+          [`nut-tabs__titles-item--${align}`]: align
+        }), key: item.value },
+        activeType === "line" && React.createElement(View, { className: `${classPrefix}__titles-item__line`, style: tabsActiveStyle }),
+        activeType === "smile" && React.createElement(
+          View,
+          { className: `${classPrefix}__titles-item__smile`, style: tabsActiveStyle },
+          React.createElement(JoySmile, { color: activeColor, width: 40, height: 20 })
+        ),
+        React.createElement(View, { className: classNames({
+          ellipsis: true
+        }, `${classPrefix}__titles-item__text`) }, item.title)
+      );
+    })),
+    React.createElement(
+      View,
+      { className: `${classPrefix}__content__wrap` },
+      React.createElement(View, { className: `${classPrefix}__content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+        let childProps = {
+          ...child.props,
+          active: value === child.props.value
+        };
+        if (String(value) !== String(child.props.value || idx) && autoHeight) {
+          childProps = {
+            ...childProps,
+            autoHeightClassName: "inactive"
+          };
+        }
+        return React.cloneElement(child, childProps);
+      }))
+    )
+  );
+};
+Tabs.defaultProps = defaultProps;
+Tabs.displayName = "NutTabs";
+Tabs.TabPane = TabPane;
+export {
+  Tabs as T
+};

package/dist/esm/tag.taro-1b4134a5.js

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from "react";
+import { Close } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "default",
+  color: "",
+  textColor: "",
+  plain: false,
+  round: false,
+  mark: false,
+  closeable: false,
+  closeIcon: null,
+  prefixCls: "nut-tag",
+  onClose: (e) => {
+  },
+  onClick: (e) => {
+  }
+};
+const Tag = (props) => {
+  const { className, style, color, plain, type, round, prefixCls, children, mark, closeable, closeIcon, textColor, onClick, onClose } = {
+    ...defaultProps,
+    ...props
+  };
+  const [btnName, setBtnName] = useState("");
+  const [isTagShow, setIsTagShow] = useState(true);
+  useEffect(() => {
+    setBtnName(classes());
+  }, [
+    type,
+    color,
+    textColor,
+    plain,
+    round,
+    mark,
+    closeable,
+    prefixCls,
+    onClick,
+    onClose,
+    className
+  ]);
+  const classes = () => {
+    const prefixCls2 = "nut-tag";
+    return classNames({
+      [prefixCls2]: true,
+      [`${prefixCls2}--${type}`]: type,
+      [`${prefixCls2}--plain`]: plain,
+      [`${prefixCls2}--round`]: round,
+      [`${prefixCls2}--mark`]: mark,
+      [`${prefixCls2}--close`]: closeable,
+      [`${className}`]: className
+    });
+  };
+  const handleClick = (e) => {
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+  const getStyle = () => {
+    const style2 = {};
+    if (textColor) {
+      style2.color = textColor;
+    } else if (color && plain) {
+      style2.color = color;
+    }
+    if (plain) {
+      style2.background = "#fff";
+      style2.borderColor = color;
+    } else if (color) {
+      style2.background = color;
+    }
+    return style2;
+  };
+  return React.createElement(React.Fragment, null, closeable ? isTagShow && React.createElement(
+    "div",
+    { className: btnName, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) },
+    children && React.createElement("span", { className: "nut-tag-text" }, children),
+    React.isValidElement(closeIcon) ? React.createElement("i", { className: "nut-tag-custom-icon", onClick: (e) => {
+      setIsTagShow(false);
+      props.onClose && props.onClose(e);
+    } }, closeIcon) : React.createElement(Close, { size: 12, onClick: (e) => {
+      setIsTagShow(false);
+      props.onClose && props.onClose(e);
+    } })
+  ) : React.createElement("div", { className: btnName, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) }, children && React.createElement("span", { className: "nut-tag-text" }, children)));
+};
+Tag.defaultProps = defaultProps;
+Tag.displayName = "NutTag";
+export {
+  Tag as T
+};

package/dist/esm/textarea.taro-c110565e.js

@@ -0,0 +1,102 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import Taro from "@tarojs/taro";
+import { Textarea } from "@tarojs/components";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  defaultValue: "",
+  showCount: false,
+  maxLength: 140,
+  placeholder: "",
+  readOnly: false,
+  disabled: false,
+  autoSize: false
+};
+const TextArea = (props) => {
+  const { locale } = useConfig();
+  const { className, value, defaultValue, showCount, maxLength, rows, placeholder, readOnly, disabled, autoSize, style, onChange, onBlur, onFocus, ...rest } = { ...defaultProps, ...props };
+  const classPrefix = "nut-textarea";
+  const compositionRef = useRef(false);
+  const format = (value2) => {
+    if (maxLength !== void 0 && value2.length > maxLength) {
+      return value2.substring(0, maxLength);
+    }
+    return value2;
+  };
+  const [inputValue, setInputValue] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: format(defaultValue),
+    onChange
+  });
+  const handleChange = (event) => {
+    var _a;
+    const text = (_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.value;
+    if (text) {
+      const value2 = compositionRef.current ? text : format(text);
+      setInputValue(value2);
+    } else {
+      setInputValue("");
+    }
+  };
+  const handleFocus = (event) => {
+    if (disabled)
+      return;
+    if (readOnly)
+      return;
+    onFocus && onFocus(event);
+  };
+  const handleBlur = (event) => {
+    if (disabled)
+      return;
+    if (readOnly)
+      return;
+    onBlur && onBlur(event);
+  };
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className, {
+      [`${classPrefix}__disabled`]: disabled
+    }) },
+    React.createElement(Textarea, {
+      nativeProps: {
+        style,
+        readOnly,
+        rows,
+        onCompositionStart: () => {
+          compositionRef.current = true;
+        },
+        onCompositionEnd: () => {
+          compositionRef.current = false;
+        }
+      },
+      className: `${classPrefix}__textarea`,
+      style: Taro.getEnv() === "WEB" ? void 0 : style,
+      disabled: Taro.getEnv() === "WEB" ? disabled : disabled || readOnly,
+      value: inputValue,
+      // @ts-ignore
+      onInput: (e) => handleChange(e),
+      onBlur: (e) => handleBlur(e),
+      onFocus: (e) => handleFocus(e),
+      autoHeight: autoSize,
+      maxlength: maxLength,
+      placeholder: placeholder || locale.placeholder,
+      ...rest
+    }),
+    showCount && React.createElement(
+      "div",
+      { className: `${classPrefix}__limit` },
+      inputValue.length,
+      "/",
+      maxLength < 0 ? 0 : maxLength
+    )
+  );
+};
+TextArea.defaultProps = defaultProps;
+TextArea.displayName = "NutTextArea";
+export {
+  TextArea as T
+};

package/dist/esm/timedetail.taro-8d2acbbf.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  className: "",
+  currentKey: 0,
+  currentTime: [],
+  times: [],
+  select: () => null
+};
+const TimeDetail = (props) => {
+  useConfig();
+  const { children, times, className, currentKey, currentTime, select } = {
+    ...defaultProps,
+    ...props
+  };
+  const b = cn("timedetail");
+  const [renderData, setRenderData] = useState([]);
+  useEffect(() => {
+    const currentData = times.find((timesItem) => String(timesItem.key) === String(currentKey));
+    const renderData2 = currentData ? currentData.list : [];
+    setRenderData(renderData2);
+  }, [times, currentKey]);
+  const handleTime = (time) => {
+    select(time);
+  };
+  const getDetailClass = (item) => {
+    let initClass = "nut-timedetail__item";
+    const curTimeData = currentTime.find((item2) => String(item2.key) === String(currentKey));
+    if (curTimeData && curTimeData.list && curTimeData.list.includes(item)) {
+      initClass += " nut-timedetail__item-active";
+    }
+    return initClass;
+  };
+  return React.createElement("div", { className: `${b()} ${className || ""}` }, renderData.map((item, index) => React.createElement("span", { className: getDetailClass(item), key: item, onClick: () => handleTime(item) }, item)));
+};
+TimeDetail.defaultProps = defaultProps;
+TimeDetail.displayName = "NutTimeDetail";
+export {
+  TimeDetail as T
+};

package/dist/esm/timepannel.taro-ee4c5dfa.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  className: "",
+  date: "",
+  curKey: 0
+};
+const TimePannel = (props) => {
+  useConfig();
+  const { children, className, date, curKey, change } = {
+    ...defaultProps,
+    ...props
+  };
+  const b = cn("timepannel");
+  return React.createElement("div", { className: `${b()} ${className || ""}`, onClick: () => change(curKey) }, date);
+};
+TimePannel.defaultProps = defaultProps;
+TimePannel.displayName = "NutTimePannel";
+export {
+  TimePannel as T
+};

package/dist/esm/timeselect.taro-069deedd.js

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from "react";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { T as TimePannel } from "./timepannel.taro-ee4c5dfa.js";
+import { T as TimeDetail } from "./timedetail.taro-8d2acbbf.js";
+import { c as cn } from "./bem-cdccae08.js";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  className: "",
+  style: {},
+  visible: false,
+  height: "20%",
+  multiple: false,
+  currentKey: 0,
+  currentTime: [],
+  title: "取件时间",
+  dates: [],
+  times: []
+};
+const TimeSelect = (props) => {
+  useConfig();
+  const { visible, className, height, title, currentKey, currentTime, dates, times, multiple, select, pannelChange, timeChange, onSelect, onPannelChange, onTimeChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const [activeKey, setActiveKey] = useState(currentKey);
+  const [activeTime, setActiveTime] = useState(currentTime.length ? currentTime : [
+    {
+      key: currentKey,
+      list: []
+    }
+  ]);
+  const [popVisible, setPopVisible] = useState(visible);
+  const popStyle = {
+    width: "100%",
+    height
+  };
+  const b = cn("timeselect");
+  const closeFun = () => {
+    if (onSelect) {
+      onSelect(activeTime);
+    } else if (select) {
+      select(activeTime);
+    }
+  };
+  const handleSelectTime = (time) => {
+    let curTimeData = {};
+    let curIndex = -1;
+    for (let i = 0; i < activeTime.length; i++) {
+      if (String(activeTime[i].key) === String(activeKey)) {
+        curTimeData = activeTime[i];
+        curIndex = i;
+        break;
+      }
+    }
+    const curTimeIndex = curTimeData.list.findIndex((item) => String(item) === String(time));
+    if (curTimeIndex === -1) {
+      curTimeData.list.push(time);
+    } else {
+      curTimeData.list.splice(curTimeIndex, 1);
+    }
+    const resultTimeData = [...activeTime];
+    resultTimeData.splice(curIndex, 1, curTimeData);
+    setActiveTime(resultTimeData);
+    if (onTimeChange) {
+      onTimeChange(time, resultTimeData);
+    } else if (timeChange) {
+      timeChange(time, resultTimeData);
+    }
+  };
+  const handleChange = (pannelKey) => {
+    const resultTimeData = [...activeTime];
+    if (String(pannelKey) !== String(activeKey)) {
+      setActiveKey == null ? void 0 : setActiveKey(pannelKey);
+      if (multiple) {
+        const curTimeDataIndex = activeTime.findIndex((item) => String(item.key) === String(pannelKey));
+        if (curTimeDataIndex === -1) {
+          resultTimeData.push({
+            key: pannelKey,
+            list: []
+          });
+          setActiveTime(resultTimeData);
+        }
+      } else {
+        setActiveTime([
+          {
+            key: pannelKey,
+            list: []
+          }
+        ]);
+      }
+    }
+    if (onPannelChange) {
+      onPannelChange(pannelKey, resultTimeData);
+    } else if (pannelChange) {
+      pannelChange(pannelKey, resultTimeData);
+    }
+  };
+  const getTimePannelClass = (dataItem) => {
+    if (String(dataItem["paneKey"]) === String(activeKey)) {
+      return "nut-timepannel-active";
+    }
+    return "";
+  };
+  useEffect(() => {
+    setPopVisible(visible);
+  }, [visible]);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Popup,
+      { closeable: true, round: true, visible: popVisible, position: "bottom", style: popStyle, onClose: () => {
+        closeFun();
+      } },
+      React.createElement(
+        "div",
+        { className: `${b()} ${className || ""}` },
+        React.createElement("div", { className: "nut-timeselect__title" }, title),
+        React.createElement(
+          "div",
+          { className: "nut-timeselect__content" },
+          React.createElement("div", { className: "nut-timeselect__content-left" }, dates.map((dataItem, index) => React.createElement(TimePannel, { date: dataItem.date, className: getTimePannelClass(dataItem), key: String(dataItem["paneKey"] || index), curKey: String(dataItem["paneKey"] || index), change: handleChange }))),
+          React.createElement(TimeDetail, { times, currentKey: String(activeKey), currentTime: activeTime, select: handleSelectTime })
+        )
+      )
+    )
+  );
+};
+TimeSelect.defaultProps = defaultProps;
+TimeSelect.displayName = "NutTimeSelect";
+export {
+  TimeSelect as T
+};

package/dist/esm/toast.taro-92c10e1d.js

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
+import { c as cn } from "./bem-cdccae08.js";
+const defaultProps = {
+  id: "",
+  style: {},
+  icon: null,
+  iconSize: "20",
+  msg: "",
+  bottom: "30px",
+  duration: 2,
+  center: true,
+  type: "text",
+  title: "",
+  customClass: "",
+  size: "base",
+  textAlignCenter: true,
+  bgColor: "rgba(0, 0, 0, .8)",
+  cover: false,
+  coverColor: "rgba(0, 0, 0, 0)",
+  closeOnClickOverlay: false,
+  visible: false,
+  onClose: () => {
+  }
+  // 未实现
+};
+const Toast = (props) => {
+  const { children, id, style, icon, iconSize, msg, bottom, duration, center, type, title, customClass, size, textAlignCenter, bgColor, cover, coverColor, closeOnClickOverlay, visible, onClose, ...rest } = { ...defaultProps, ...props };
+  let timer;
+  const [openState, SetOpenState] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      SetOpenState(true);
+      show();
+    } else {
+      hide();
+    }
+  }, [visible]);
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const hide = () => {
+    SetOpenState(false);
+    onClose();
+  };
+  const show = () => {
+    clearTimer();
+    if (duration) {
+      timer = window.setTimeout(() => {
+        hide();
+      }, duration * 1e3);
+    }
+  };
+  const clickCover = () => {
+    if (closeOnClickOverlay) {
+      hide();
+    }
+  };
+  const toastBem = cn("toast");
+  const hasIcon = () => {
+    if (type !== "text") {
+      return true;
+    }
+    return !!icon;
+  };
+  const iconName = () => {
+    if (icon) {
+      return icon;
+    }
+    return {
+      success: React.createElement(Success, { color: "#ffffff", width: iconSize, height: iconSize }),
+      fail: React.createElement(Failure, { color: "#ffffff", width: iconSize, height: iconSize }),
+      warn: React.createElement(Tips, { color: "#ffffff", width: iconSize, height: iconSize }),
+      loading: React.createElement(Loading, { color: "#ffffff", width: iconSize, height: iconSize })
+    }[type];
+  };
+  const classes = classNames({
+    "nut-toast-center": center,
+    "nut-toast-has-icon": icon,
+    "nut-toast-cover": cover,
+    "nut-toast-loading": type === "loading",
+    [`${customClass}`]: true,
+    [`nut-toast-${size}`]: true
+  });
+  return React.createElement(React.Fragment, null, openState ? React.createElement(
+    "div",
+    { className: `${toastBem()} ${classes}`, id, style: {
+      bottom: center ? "auto" : `${bottom}`,
+      backgroundColor: cover ? coverColor : "",
+      ...style
+    }, onClick: () => {
+      clickCover();
+    } },
+    React.createElement(
+      "div",
+      { className: toastBem("inner"), style: {
+        textAlign: textAlignCenter ? "center" : "left",
+        backgroundColor: bgColor
+      } },
+      hasIcon() ? React.createElement("p", { className: toastBem("icon-wrapper") }, iconName()) : null,
+      title ? React.createElement("div", { className: "nut-toast-title" }, title) : null,
+      React.createElement("span", { className: toastBem("text") }, msg)
+    )
+  ) : null);
+};
+Toast.defaultProps = defaultProps;
+Toast.displayName = "NutToast";
+export {
+  Toast as T
+};