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

package/dist/esm/form.taro-b06754e8.js

@@ -0,0 +1,182 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React, { useRef } from "react";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { C as CellGroup } from "./cellgroup.taro-a790d91b.js";
+import { a as FormItemContext, F as FormItem } from "./formitem.taro-b326809d.js";
+class FormStore {
+  constructor() {
+    __publicField(this, "store", {});
+    // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
+    __publicField(this, "fieldEntities", []);
+    // 所有的组件实例
+    // 成功和失败的回调
+    __publicField(this, "callbacks", {});
+    __publicField(this, "errList", []);
+    /**
+     * 注册组件实例
+     * @param field
+     */
+    __publicField(this, "registerField", (field) => {
+      this.fieldEntities.push(field);
+      return () => {
+        this.fieldEntities = this.fieldEntities.filter((item) => item != field);
+        delete this.store[field.props.name];
+      };
+    });
+    __publicField(this, "getFieldValue", (name) => {
+      return this.store[name];
+    });
+    /**
+     * 存储组件数据
+     * @param newStore { [name]: newValue }
+     */
+    __publicField(this, "setFieldsValue", (newStore) => {
+      this.store = {
+        ...this.store,
+        ...newStore
+      };
+      this.fieldEntities.forEach((enetity) => {
+        const { name } = enetity.props;
+        Object.keys(newStore).forEach((key) => {
+          if (key === name) {
+            enetity.onStoreChange();
+          }
+        });
+      });
+    });
+    /**
+     * 表单校验
+     * rules: { required: true, message: '' }
+     * descriptor: {
+     *    username: {
+     *      type: 'string',
+     *      required: true,
+     *      validator: (rule, value) => {
+     *        return /^[a-zA-Z0-9]+$/.test(value)
+     *      },
+     *    },
+     *  }
+     */
+    __publicField(this, "validate", () => {
+      const err = [];
+      this.errList.length = 0;
+      this.fieldEntities.forEach((entity) => {
+        const { name, rules = [] } = entity.props;
+        const descriptor = {};
+        if (rules.length) {
+          if (rules.length > 1) {
+            descriptor[name] = [];
+            rules.map((v) => {
+              descriptor[name].push(v);
+            });
+          } else {
+            descriptor[name] = rules[0];
+          }
+        }
+      });
+      return err;
+    });
+    __publicField(this, "setCallback", (callback) => {
+      this.callbacks = {
+        ...this.callbacks,
+        ...callback
+      };
+    });
+    __publicField(this, "submit", () => {
+      var _a, _b, _c, _d;
+      const err = this.validate();
+      if (err.length === 0) {
+        (_b = (_a = this.callbacks).onFinish) == null ? void 0 : _b.call(_a, this.store);
+      } else if (err.length > 0) {
+        (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, err);
+      }
+    });
+    __publicField(this, "resetFields", () => {
+    });
+    __publicField(this, "getForm", () => {
+      return {
+        setCallback: this.setCallback,
+        registerField: this.registerField,
+        getFieldValue: this.getFieldValue,
+        setFieldsValue: this.setFieldsValue,
+        submit: this.submit,
+        store: this.store,
+        errList: this.errList,
+        fieldEntities: this.fieldEntities
+      };
+    });
+    this.callbacks = {
+      onFinish: (value) => {
+      },
+      onFinishFailed: () => {
+      }
+    };
+  }
+}
+const useForm = (form) => {
+  const formRef = useRef();
+  if (!formRef.current) {
+    if (form) {
+      formRef.current = form;
+    } else {
+      const formStore = new FormStore();
+      formRef.current = formStore.getForm();
+    }
+  }
+  return [formRef.current];
+};
+const defaultProps = {
+  ...ComponentDefaults,
+  className: "",
+  style: void 0,
+  form: {},
+  labelPosition: "Right",
+  formGroupTitle: "",
+  onFinish: (obj) => {
+  },
+  onFinishFailed: (value) => {
+  },
+  starPositon: "Left"
+};
+const PositionInfo = {
+  Top: "form-layout-top",
+  Left: "form-layout-left",
+  Right: "form-layout-right"
+};
+const Form = (props) => {
+  const { children, onFinish, onFinishFailed, labelPosition, starPositon, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  console.log("46 dddd");
+  const [formInstance] = useForm();
+  formInstance.starPositon = starPositon;
+  const { setCallback, submit } = formInstance;
+  setCallback({
+    onFinish,
+    onFinishFailed
+  });
+  return React.createElement(
+    "form",
+    { className: `nut-form ${PositionInfo[labelPosition]} ${props.className}`, style: props.style, onSubmit: (e) => {
+      e.preventDefault();
+      submit();
+    } },
+    React.createElement(
+      CellGroup,
+      null,
+      React.createElement(FormItemContext.Provider, { value: formInstance }, children)
+    )
+  );
+};
+Form.defaultProps = defaultProps;
+Form.displayName = "NutForm";
+Form.Item = FormItem;
+export {
+  Form as F
+};

package/dist/esm/formitem.taro-b326809d.js

@@ -0,0 +1,108 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React, { createContext } from "react";
+import { C as Cell } from "./cell.taro-4e31d1fa.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const FormItemContext = createContext({});
+const defaultProps = {
+  ...ComponentDefaults,
+  name: "",
+  label: "",
+  className: "",
+  rules: [{ required: false, message: "" }],
+  disabled: false,
+  labelWidth: 90,
+  errorMessageAlign: "left",
+  showErrorLine: true,
+  showErrorMessage: true
+};
+class FormItem extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "cancelRegister");
+    // children添加value属性和onChange事件
+    __publicField(this, "getControlled", (children) => {
+      const { getFieldValue, setFieldsValue } = this.context;
+      const { name } = this.props;
+      const type = children.type.NAME;
+      return {
+        value: getFieldValue(name),
+        onChange: (event) => {
+          let newValue = event;
+          switch (type) {
+            case "checkbox":
+              newValue = event.target.value;
+              break;
+          }
+          setFieldsValue({ [name]: newValue });
+        }
+      };
+    });
+    __publicField(this, "onStoreChange", () => {
+      this.forceUpdate();
+    });
+    __publicField(this, "renderLayout", (childNode) => {
+      var _a, _b;
+      const { label, name, rules = [{ required: false, message: "" }], className, labelWidth, errorMessageAlign, showErrorLine, showErrorMessage } = {
+        ...defaultProps,
+        ...this.props
+      };
+      const item = ((_a = this.context.errList) == null ? void 0 : _a.length) > 0 && ((_b = this.context.errList) == null ? void 0 : _b.filter((item2) => {
+        return item2.field === name;
+      }));
+      const { starPositon } = this.context;
+      const renderStar = rules.length > 0 && rules[0].required && React.createElement("i", { className: "required" });
+      const renderLabel = starPositon === "Right" ? React.createElement(
+        React.Fragment,
+        null,
+        label,
+        renderStar
+      ) : React.createElement(
+        React.Fragment,
+        null,
+        renderStar,
+        label
+      );
+      return React.createElement(
+        Cell,
+        { className: `nut-form-item ${className}` },
+        label ? React.createElement("div", { className: "nut-cell__title nut-form-item__label", style: {
+          width: this.pxCheck(labelWidth)
+        } }, renderLabel) : null,
+        React.createElement(
+          "div",
+          { className: "nut-cell__value nut-form-item__body" },
+          React.createElement("div", { className: "nut-form-item__body__slots" }, childNode),
+          item.length > 0 && React.createElement("div", { className: "nut-form-item__body__tips", style: { textAlign: errorMessageAlign } }, item[0].message)
+        )
+      );
+    });
+    __publicField(this, "pxCheck", (value) => {
+      return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    });
+  }
+  componentDidMount() {
+    this.cancelRegister = this.context.registerField(this);
+  }
+  componentWillUnmount() {
+    if (this.cancelRegister) {
+      this.cancelRegister();
+    }
+  }
+  render() {
+    const { children } = this.props;
+    const c = Array.isArray(children) ? children[0] : children;
+    const returnChildNode = React.cloneElement(c, this.getControlled(c));
+    return this.renderLayout(returnChildNode);
+  }
+}
+__publicField(FormItem, "defaultProps", defaultProps);
+__publicField(FormItem, "contextType", FormItemContext);
+export {
+  FormItem as F,
+  FormItemContext as a
+};

package/dist/esm/get-scroll-parent-8da04f2e.js

@@ -0,0 +1,24 @@
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
+const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
+function isElement(node) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+  let node = el;
+  while (node && node !== root && isElement(node)) {
+    if (node === document.body) {
+      return root;
+    }
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return root;
+}
+export {
+  getScrollParent as g
+};

package/dist/esm/grid.taro-fbbd8618.js

@@ -0,0 +1,52 @@
+import React from "react";
+import classNames from "classnames";
+import { a as GridContext, G as GridItem, p as pxCheck } from "./griditem.taro-b0c37077.js";
+const defaultProps = {
+  columns: 4,
+  gap: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: "vertical"
+};
+const Grid = (props) => {
+  const { children, columns, gap, center, square, reverse, direction, style, className, onClick, ...rest } = { ...defaultProps, ...props };
+  const childrenDom = React.Children.toArray(children);
+  const classPrefix = "nut-grid";
+  const rootClass = () => {
+    return classNames(className, classPrefix, {
+      [`${classPrefix}__border`]: !gap
+    });
+  };
+  const rootStyle = () => {
+    let styleSelf = {};
+    if (style) {
+      styleSelf = style;
+    }
+    if (gap) {
+      styleSelf.paddingLeft = pxCheck(gap);
+    }
+    return styleSelf;
+  };
+  return React.createElement(
+    "div",
+    { className: rootClass(), style: rootStyle(), ...rest },
+    React.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
+      return React.cloneElement(item, {
+        index: idex,
+        columns,
+        center,
+        gap,
+        square,
+        reverse,
+        direction
+      });
+    }))
+  );
+};
+Grid.defaultProps = defaultProps;
+Grid.displayName = "NutGrid";
+Grid.Item = GridItem;
+export {
+  Grid as G
+};

package/dist/esm/griditem.taro-b0c37077.js

@@ -0,0 +1,85 @@
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const gridContext = {
+  onClick: (item, index) => {
+  }
+};
+const GridContext = React.createContext(gridContext);
+const pxCheck = (value) => {
+  return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+};
+const defaultProps = {
+  text: "",
+  columns: 4,
+  gap: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: "vertical"
+};
+const GridItem = (props) => {
+  useConfig();
+  const { children, style, columns, index, gap, square, text, center, reverse, direction, className, onClick, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-grid-item";
+  const classes = classNames(classPrefix, className);
+  const context = useContext(GridContext);
+  const rootStyle = () => {
+    const styles = {
+      flexBasis: `${100 / +columns}%`,
+      ...style
+    };
+    if (square) {
+      styles.paddingTop = `${100 / +columns}%`;
+    } else if (gap) {
+      styles.paddingRight = pxCheck(gap);
+      if (index >= Number(columns)) {
+        styles.marginTop = pxCheck(gap);
+      }
+    }
+    return styles;
+  };
+  const contentClass = () => {
+    return classNames(`${classPrefix}__content`, {
+      [`${classPrefix}__content--border`]: true,
+      [`${classPrefix}__content--surround`]: gap,
+      [`${classPrefix}__content--center`]: center,
+      [`${classPrefix}__content--square`]: square,
+      [`${classPrefix}__content--reverse`]: reverse,
+      [`${classPrefix}__content--${direction}`]: !!direction
+    });
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+    context.onClick && context.onClick({
+      text,
+      index,
+      columns,
+      gap,
+      center,
+      square,
+      reverse,
+      direction
+    }, index);
+  };
+  return React.createElement(
+    "div",
+    { className: classes, style: rootStyle(), ...rest, onClick: handleClick },
+    React.createElement(
+      "div",
+      { className: contentClass() },
+      children && React.createElement(React.Fragment, null, children),
+      text && React.createElement("div", { className: `${classPrefix}__text` }, text)
+    )
+  );
+};
+GridItem.defaultProps = defaultProps;
+GridItem.displayName = "NutGridItem";
+export {
+  GridItem as G,
+  GridContext as a,
+  pxCheck as p
+};

package/dist/esm/image.taro-767aa000.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import { Image as Image$1, ImageError } from "@nutui/icons-react-taro";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+const defaultProps = {
+  fit: "fill",
+  position: "center",
+  alt: "",
+  width: "center",
+  height: "",
+  round: false,
+  showError: true,
+  showLoading: true
+};
+const Image = (props) => {
+  useConfig();
+  const { children, className, style, src, fit, position, alt, width, height, round, radius, showError, showLoading, slotError, slotLoding, onClick, onLoad, onError } = { ...defaultProps, ...props };
+  const [loading, setLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+  useEffect(() => {
+    if (src) {
+      setIsError(false);
+      setLoading(true);
+    }
+  }, [src]);
+  const load = () => {
+    setLoading(false);
+    onLoad && onLoad();
+  };
+  const error = () => {
+    setIsError(true);
+    setLoading(false);
+    onError && onError();
+  };
+  const pxCheck = (value) => {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+  };
+  const stylebox = {
+    height: height ? pxCheck(height) : "",
+    width: width ? pxCheck(width) : "",
+    overflow: radius !== void 0 && radius !== null ? "hidden" : "",
+    borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
+  };
+  const styles = {
+    objectFit: fit,
+    objectPosition: position,
+    ...style
+  };
+  const imageClick = (event) => {
+    onClick && onClick(event);
+  };
+  return React.createElement(
+    "div",
+    { className: `nut-image ${round ? "nut-image-round" : ""}`, style: stylebox, onClick: (e) => {
+      imageClick(e);
+    } },
+    React.createElement("img", { className: "nut-img", style: styles, src, alt, onLoad: load, onError: error }),
+    showLoading && loading ? React.createElement("div", { className: "nut-img-loading" }, slotLoding || children || React.createElement(Image$1, null)) : null,
+    showError && isError && !loading ? React.createElement("div", { className: "nut-img-error" }, slotError || children || React.createElement(ImageError, null)) : null
+  );
+};
+Image.defaultProps = defaultProps;
+Image.displayName = "NutImage";
+export {
+  Image as I
+};

package/dist/esm/imagepreview.taro-8832dc01.js

@@ -0,0 +1,163 @@
+import React, { useRef, useState, useEffect } from "react";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { S as Swiper } from "./swiper.taro-74cf9306.js";
+import { S as SwiperItem } from "./swiperitem-80df464a.js";
+const defaultProps = {
+  images: [],
+  videos: [],
+  show: false,
+  autoplay: 3e3,
+  initNo: 1,
+  contentClose: false,
+  paginationVisible: false,
+  paginationColor: "#fff",
+  onClose: () => {
+  }
+};
+const ImagePreview = (props) => {
+  const { images, videos, show, initNo, paginationColor, paginationVisible, autoplay, contentClose, onClose } = props;
+  const nutImagePreview = useRef(null);
+  const [showPop, setShowPop] = useState(false);
+  const [active, setActive] = useState(1);
+  const [maxNo, setMaxNo] = useState(1);
+  const [store, setStore] = useState({
+    scale: 1,
+    moveable: false
+  });
+  const [lastTouchEndTime, setLastTouchEndTime] = useState(0);
+  const onTouchStart = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
+    const curTouchTime = (/* @__PURE__ */ new Date()).getTime();
+    if (curTouchTime - lastTouchEndTime < 300) {
+      const store12 = store;
+      if (store12.scale > 1) {
+        store12.scale = 1;
+      } else if (store12.scale === 1) {
+        store12.scale = 2;
+      }
+      scaleNow();
+    }
+    const store1 = store;
+    store1.moveable = true;
+    if (events2) {
+      store1.oriDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+    }
+    store1.originScale = store1.scale || 1;
+  };
+  const onTouchMove = (event) => {
+    const touches = event.touches;
+    const events = touches[0];
+    const events2 = touches[1];
+    if (!store.moveable) {
+      return;
+    }
+    const store1 = store;
+    if (events2) {
+      const curDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+      const curScale = curDistance / store1.oriDistance;
+      store1.scale = store1.originScale * curScale;
+      if (store1.scale > 3) {
+        store1.scale = 3;
+      }
+      scaleNow();
+    }
+  };
+  const onTouchEnd = () => {
+    setLastTouchEndTime((/* @__PURE__ */ new Date()).getTime());
+    const store1 = store;
+    store1.moveable = false;
+    if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+      store1.scale = 1;
+      scaleNow();
+    }
+  };
+  const init = () => {
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+  };
+  useEffect(() => {
+    if (show !== void 0) {
+      setShowPop(show);
+      init();
+    }
+  }, [show]);
+  useEffect(() => {
+    if (initNo !== void 0) {
+      setActive(initNo);
+    }
+    if (show !== void 0) {
+      setShowPop(show);
+    }
+    if (images && videos) {
+      setMaxNo(images.length + videos.length);
+    }
+  }, []);
+  const scaleNow = () => {
+    if (nutImagePreview.current) {
+      nutImagePreview.current.style.transform = `scale(${store.scale})`;
+    }
+  };
+  const onCloseInner = () => {
+    setShowPop(false);
+    setActive(1);
+    scaleNow();
+    onClose && onClose();
+    setStore({
+      ...store,
+      scale: 1
+    });
+  };
+  const getDistance = (first, second) => {
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+  const slideChangeEnd = (page) => {
+    setActive(page + 1);
+  };
+  const closeOnImg = () => {
+    if (contentClose) {
+      onCloseInner();
+    }
+  };
+  return React.createElement(
+    Popup,
+    { visible: showPop, className: "custom-pop", style: { width: "100%" }, onClick: onCloseInner },
+    React.createElement(
+      "div",
+      { className: "nut-imagepreview", ref: nutImagePreview, onClick: closeOnImg, onTouchStart },
+      React.createElement(Swiper, { autoPlay: autoplay, className: "nut-imagepreview-swiper", loop: true, isPreventDefault: false, style: { display: showPop ? "block" : "none" }, direction: "horizontal", onChange: slideChangeEnd, initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1), paginationColor, paginationVisible }, images && images.length > 0 ? images.map((item, index) => {
+        return React.createElement(
+          SwiperItem,
+          { key: index },
+          React.createElement("img", { src: item.src, alt: "", className: "nut-imagepreview-img" })
+        );
+      }) : [])
+    ),
+    React.createElement(
+      "div",
+      { className: "nut-imagepreview-index" },
+      active,
+      "/",
+      (images ? images.length : 0) + (videos ? videos.length : 0)
+    )
+  );
+};
+ImagePreview.defaultProps = defaultProps;
+ImagePreview.displayName = "NutImagePreview";
+export {
+  ImagePreview as I
+};

package/dist/esm/index-e3184f19.js

@@ -0,0 +1,9 @@
+const isObject = (val) => val !== null && typeof val === "object";
+const isFunction = (val) => typeof val === "function";
+const isPromise = (val) => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+};
+export {
+  isObject as a,
+  isPromise as i
+};