@nutui/nutui-react-taro 2.0.0-alpha.9 → 2.0.0-beta.2

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

@@ -0,0 +1,139 @@
+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 Context = createContext({});
+function isForwardRefComponent(component) {
+  return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
+  React.forwardRef(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    () => {
+    }
+  ).$$typeof === component.type.$$typeof;
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  required: false,
+  name: "",
+  label: "",
+  rules: [{ required: false, message: "" }],
+  errorMessageAlign: "left"
+};
+class FormItem extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "cancelRegister");
+    __publicField(this, "componentRef");
+    // children添加value属性和onChange事件
+    __publicField(this, "getControlled", (children) => {
+      var _a;
+      const { setFieldsValue, getFieldValue } = this.context;
+      const { name } = this.props;
+      if ((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.defaultValue) {
+        console.warn("通过 initialValue 设置初始值");
+      }
+      const controlled = {
+        ...children.props,
+        [this.props.valuePropName || "value"]: getFieldValue(name) || this.props.initialValue,
+        [this.props.trigger || "onChange"]: (...args) => {
+          const originOnChange = children.props[this.props.trigger || "onChange"];
+          if (originOnChange) {
+            originOnChange(...args);
+          }
+          let [next] = args;
+          if (this.props.getValueFromEvent) {
+            next = this.props.getValueFromEvent(...args);
+          }
+          setFieldsValue({ [name]: next });
+        }
+      };
+      if (isForwardRefComponent(children)) {
+        controlled.ref = (componentInstance) => {
+          const originRef = children.ref;
+          if (originRef) {
+            if (typeof originRef === "function") {
+              originRef(componentInstance);
+            }
+            if ("current" in originRef) {
+              originRef.current = componentInstance;
+            }
+          }
+          this.componentRef = componentInstance;
+        };
+      }
+      return controlled;
+    });
+    __publicField(this, "refresh", () => {
+      this.setState(({ resetCount }) => ({
+        resetCount: resetCount + 1
+      }));
+    });
+    __publicField(this, "onStoreChange", (type) => {
+      if (type === "reset") {
+        this.refresh();
+      } else {
+        this.forceUpdate();
+      }
+    });
+    __publicField(this, "renderLayout", (childNode) => {
+      var _a, _b;
+      const { label, name, required, className, style, errorMessageAlign } = {
+        ...defaultProps,
+        ...this.props
+      };
+      const item = ((_a = this.context.errors) == null ? void 0 : _a.length) > 0 && ((_b = this.context.errors) == null ? void 0 : _b.filter((item2) => {
+        return item2.field === name;
+      }));
+      const { starPosition } = this.context;
+      const renderStar = required && React.createElement("i", { className: "required" });
+      const renderLabel = React.createElement(
+        React.Fragment,
+        null,
+        starPosition === "left" ? renderStar : null,
+        label,
+        starPosition === "right" ? renderStar : null
+      );
+      return React.createElement(
+        Cell,
+        { className: `nut-form-item ${className}`, style, onClick: (e) => this.props.onClick && this.props.onClick(e, this.componentRef) },
+        label ? React.createElement("div", { className: "nut-cell__title nut-form-item__label" }, 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)
+        )
+      );
+    });
+    this.componentRef = React.createRef();
+    this.state = {
+      resetCount: 1
+    };
+  }
+  componentDidMount() {
+    this.cancelRegister = this.context.registerField(this);
+  }
+  componentWillUnmount() {
+    if (this.cancelRegister) {
+      this.cancelRegister();
+    }
+  }
+  render() {
+    const { children } = this.props;
+    const child = Array.isArray(children) ? children[0] : children;
+    const returnChildNode = React.cloneElement(child, this.getControlled(child));
+    return React.createElement(React.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
+  }
+}
+__publicField(FormItem, "defaultProps", defaultProps);
+__publicField(FormItem, "contextType", Context);
+export {
+  Context as C,
+  FormItem as F
+};

package/dist/esm/{grid.taro-fbbd8618.js → grid.taro-8a6bc264.js}

@@ -1,6 +1,6 @@
 import React from "react";
 import classNames from "classnames";
-import { a as GridContext, G as GridItem, p as pxCheck } from "./griditem.taro-b0c37077.js";
+import { a as GridContext, G as GridItem, p as pxCheck } from "./griditem.taro-8fc37b25.js";
 const defaultProps = {
   columns: 4,
   gap: 0,

package/dist/esm/{griditem.taro-b0c37077.js → griditem.taro-8fc37b25.js}

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import classNames from "classnames";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 const gridContext = {
   onClick: (item, index) => {
   }

package/dist/esm/{image.taro-767aa000.js → image.taro-567edf0f.js}

@@ -1,6 +1,6 @@
 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";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 const defaultProps = {
   fit: "fill",
   position: "center",

package/dist/esm/{imagepreview.taro-2508d412.js → imagepreview.taro-fad0448a.js}

@@ -1,25 +1,43 @@
 import React, { useRef, useState, useEffect } from "react";
-import { P as Popup } from "./popup.taro-e756f3fc.js";
-import { S as Swiper } from "./swiper.taro-53a36427.js";
+import Taro from "@tarojs/taro";
+import { Video, Image } from "@tarojs/components";
+import { P as Popup } from "./popup.taro-1cd1f9d2.js";
+import { S as Swiper } from "./swiper.taro-4aeb8526.js";
 import { S as SwiperItem } from "./swiperitem.taro-ef7342e8.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 const defaultProps = {
+  ...ComponentDefaults,
   images: [],
   videos: [],
-  show: false,
+  visible: false,
   autoPlay: false,
-  initNo: 1,
-  contentClose: false,
-  paginationVisible: false,
-  paginationColor: "#fff",
+  defaultValue: 1,
+  closeOnContentClick: false,
+  indicator: false,
+  indicatorColor: "#fff",
+  showMenuByLongpress: false,
+  onChange: (value) => {
+  },
   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 { images, videos, visible, defaultValue, indicatorColor, indicator, autoPlay, closeOnContentClick, showMenuByLongpress, onClose } = props;
+  const classPrefix = "nut-imagepreview";
+  const ref = useRef(null);
+  const [innerNo, setInnerNo] = usePropsValue({
+    value: props.value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: (val) => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, val);
+    }
+  });
+  const [showPop, setShowPop] = useState(visible);
+  const [active, setActive] = useState(0);
+  const [maxNo] = useState((images == null ? void 0 : images.length) || 0 + ((videos == null ? void 0 : videos.length) || 0));
   const [store, setStore] = useState({
     scale: 1,
     moveable: false
@@ -85,33 +103,34 @@ const ImagePreview = (props) => {
       scaleNow();
     }
   };
+  useEffect(() => {
+    init();
+  }, []);
   const init = () => {
     document.addEventListener("touchmove", onTouchMove);
     document.addEventListener("touchend", onTouchEnd);
     document.addEventListener("touchcancel", onTouchEnd);
   };
   useEffect(() => {
-    if (show !== void 0) {
-      setShowPop(show);
-      init();
-    }
-  }, [show]);
+    setShowPop(visible);
+  }, [visible]);
   useEffect(() => {
-    if (initNo !== void 0) {
-      setActive(initNo);
-    }
-    if (show !== void 0) {
-      setShowPop(show);
-    }
-    if (images && videos) {
-      setMaxNo(images.length + videos.length);
-    }
-  }, []);
+    setInnerNo(defaultValue || 1);
+  }, [defaultValue]);
+  useEffect(() => {
+    setActive(innerNo);
+  }, [innerNo]);
   const scaleNow = () => {
-    if (nutImagePreview.current) {
-      nutImagePreview.current.style.transform = `scale(${store.scale})`;
+    if (ref.current) {
+      ref.current.style.transform = `scale(${store.scale})`;
     }
   };
+  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 onCloseInner = () => {
     setShowPop(false);
     setActive(1);
@@ -122,37 +141,33 @@ const ImagePreview = (props) => {
       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) {
+    if (closeOnContentClick) {
       onCloseInner();
     }
   };
   return React.createElement(
     Popup,
-    { visible: showPop, className: "custom-pop", style: { width: "100%" }, onClick: onCloseInner },
+    { visible: showPop, className: `${classPrefix}-pop`, style: { width: "100%" }, onClick: onCloseInner },
     React.createElement(
       "div",
-      { className: "nut-imagepreview", ref: nutImagePreview, onClick: closeOnImg, onTouchStart },
-      React.createElement(Swiper, { autoPlay, className: "nut-imagepreview-swiper", loop: true, style: {
+      { className: classPrefix, ref, onClick: closeOnImg, onTouchStart },
+      React.createElement(Swiper, { autoPlay, className: `${classPrefix}-swiper`, loop: true, height: "100%", style: {
         display: showPop ? "block" : "none",
-        "--nutui-indicator-color": paginationColor
-      }, direction: "horizontal", onChange: (e) => slideChangeEnd(e.detail.current), defaultValue: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1), indicator: paginationVisible }, images && images.length > 0 ? images.map((item, index) => {
+        "--nutui-indicator-color": indicatorColor
+      }, direction: "horizontal", onChange: (e) => slideChangeEnd(e.detail.current), defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1), indicator }, (videos && videos.length > 0 ? videos.map((item, index) => {
         return React.createElement(
           SwiperItem,
           { key: index },
-          React.createElement("img", { src: item.src, alt: "", className: "nut-imagepreview-img" })
+          React.createElement(Video, { src: item.source.src, controls: item.options.controls, autoplay: false, loop: false, muted: item.options.muted })
         );
-      }) : [])
+      }) : []).concat(images && images.length > 0 ? images.map((item, index) => {
+        return React.createElement(SwiperItem, { key: index }, Taro.getEnv() === "WEB" ? React.createElement("img", { src: item.src, alt: "" }) : React.createElement(Image, { src: item.src, mode: "aspectFit", showMenuByLongpress: true, style: { width: "100%", height: "100%" } }));
+      }) : []))
     ),
     React.createElement(
       "div",
-      { className: "nut-imagepreview-index" },
+      { className: `${classPrefix}-index` },
       active,
       "/",
       (images ? images.length : 0) + (videos ? videos.length : 0)

package/dist/esm/{infiniteloading.taro-f8f23ac6.js → infiniteloading.taro-59778aef.js}

@@ -2,24 +2,19 @@ import React, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { ScrollView } from "@tarojs/components";
 import { createSelectorQuery } from "@tarojs/taro";
-import { c as cn } from "./bem-cdccae08.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
   ...ComponentDefaults,
   hasMore: true,
-  upperThreshold: 40,
-  containerId: "",
-  isOpenRefresh: false,
-  pullIcon: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png",
-  pullText: "松开刷新",
-  loadIcon: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png",
-  loadingText: "加载中···",
-  loadMoreText: "哎呀，这里是底部了啦"
+  threshold: 40,
+  target: "",
+  pullRefresh: false
 };
-const Infiniteloading = (props) => {
+const classPrefix = `nut-infiniteloading`;
+const InfiniteLoading = (props) => {
   const { locale } = useConfig();
-  const { children, hasMore, upperThreshold, containerId, isOpenRefresh, pullIcon, pullText, loadIcon, loadingText, loadMoreText, className, onRefresh, onLoadMore, onScrollChange } = {
+  const { children, hasMore, threshold, target, pullRefresh, pullingText, loadingText, loadMoreText, className, onRefresh, onLoadMore, onScroll } = {
     ...defaultProps,
     ...props
   };
@@ -33,10 +28,9 @@ const Infiniteloading = (props) => {
   const y = useRef(0);
   const refreshMaxH = useRef(0);
   const distance = useRef(0);
-  const b = cn("infiniteloading");
-  const classes = classNames(className, b());
+  const classes = classNames(className, classPrefix);
   useEffect(() => {
-    refreshMaxH.current = upperThreshold;
+    refreshMaxH.current = threshold;
     setTimeout(() => {
       getScrollHeight();
     }, 200);
@@ -54,7 +48,7 @@ const Infiniteloading = (props) => {
     };
   };
   const getParentElement = (el) => {
-    return createSelectorQuery().select(containerId ? `#${containerId} #${el}` : `#${el}`);
+    return createSelectorQuery().select(target ? `#${target} #${el}` : `#${el}`);
   };
   const infiniteDone = () => {
     setIsInfiniting(false);
@@ -76,7 +70,7 @@ const Infiniteloading = (props) => {
       direction.current = "up";
     }
     scrollTop.current = e.detail.scrollTop;
-    onScrollChange && onScrollChange(e.detail.scrollTop);
+    onScroll && onScroll(e.detail.scrollTop);
   };
   const lower = () => {
     if (direction.current == "up" || !hasMore || isInfiniting) {
@@ -86,7 +80,7 @@ const Infiniteloading = (props) => {
     onLoadMore && onLoadMore(infiniteDone);
   };
   const touchStart = (event) => {
-    if (scrollTop.current == 0 && !isTouching.current && isOpenRefresh) {
+    if (scrollTop.current == 0 && !isTouching.current && pullRefresh) {
       y.current = event.touches[0].pageY;
       isTouching.current = true;
     }
@@ -120,24 +114,14 @@ const Infiniteloading = (props) => {
     React.createElement(
       "div",
       { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
-      React.createElement(
-        "div",
-        { className: "top-box" },
-        pullIcon && React.createElement(React.Fragment, null, pullIcon),
-        React.createElement("span", { className: "top-text" }, pullText || locale.infiniteloading.pullRefreshText)
-      )
+      React.createElement("div", { className: "top-box" }, pullingText || locale.infiniteloading.pullRefreshText)
     ),
     React.createElement("div", { className: "nut-infinite-container" }, children),
-    React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? React.createElement(
-      "div",
-      { className: "bottom-box" },
-      loadIcon && React.createElement(React.Fragment, null, loadIcon),
-      React.createElement("div", { className: "bottom-text" }, loadingText || locale.infiniteloading.loadText)
-    ) : !hasMore && React.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
+    React.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? React.createElement("div", { className: "bottom-box" }, loadingText || locale.infiniteloading.loadText) : !hasMore && React.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))
   );
 };
-Infiniteloading.defaultProps = defaultProps;
-Infiniteloading.displayName = "NutInfiniteloading";
+InfiniteLoading.defaultProps = defaultProps;
+InfiniteLoading.displayName = "NutInfiniteLoading";
 export {
-  Infiniteloading as I
+  InfiniteLoading as I
 };

package/dist/esm/{input.taro-27d686c9.js → input.taro-a4c8fecb.js}

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef, useState, useImperativeHandle, useCallback }
 import { View, Input as Input$1 } from "@tarojs/components";
 import { MaskClose } from "@nutui/icons-react-taro";
 import { getEnv, ENV_TYPE } from "@tarojs/taro";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 function trimExtraChar(value, char, regExp) {

package/dist/esm/{inputnumber.taro-6657d2c1.js → inputnumber.taro-c4c0cfb3.js}

@@ -8,7 +8,7 @@ const defaultProps = {
   disabled: false,
   min: 1,
   max: 9999,
-  readonly: false,
+  readOnly: false,
   allowEmpty: false,
   defaultValue: 0,
   step: 1,
@@ -17,7 +17,7 @@ const defaultProps = {
 };
 const classPrefix = `nut-inputnumber`;
 const InputNumber = (props) => {
-  const { children, disabled, min, max, readonly, value, defaultValue, allowEmpty, digits, step, async, className, style, formatter, onPlus, onMinus, onOverlimit, onBlur, onFocus, onChange, ...restProps } = {
+  const { children, disabled, min, max, readOnly, value, defaultValue, allowEmpty, digits, step, async, className, style, formatter, onPlus, onMinus, onOverlimit, onBlur, onFocus, onChange, ...restProps } = {
     ...defaultProps,
     ...props
   };
@@ -152,14 +152,14 @@ const InputNumber = (props) => {
   const focusValue = (e) => {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     onFocus && onFocus(e);
   };
   const burValue = (e) => {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     const input = e.target;
     let value2 = +input.value;
@@ -182,7 +182,7 @@ const InputNumber = (props) => {
       { className: "nut-input-minus" },
       React.createElement(Minus, { className: iconMinusClasses, onClick: reduceNumber })
     ),
-    React.createElement(React.Fragment, null, formatter ? React.createElement("input", { type: "text", min, max, disabled, readOnly: readonly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue }) : React.createElement("input", { type: "digit", min, max, disabled, readOnly: readonly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue })),
+    React.createElement(React.Fragment, null, formatter ? React.createElement("input", { className: "nut-number-input", type: "text", min, max, disabled, readOnly, value: _checked, onInput: changeFormatValue, onBlur: burFormatValue, onFocus: focusValue }) : React.createElement("input", { className: "nut-number-input", type: "digit", min, max, disabled, readOnly, value: _checked, onInput: changeValue, onBlur: burValue, onFocus: focusValue })),
     React.createElement(
       "div",
       { className: "nut-input-add" },

package/dist/esm/{menu.taro-cd0fef41.js → menu.taro-40d36e0a.js}

@@ -5,13 +5,13 @@ import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
   ...ComponentDefaults,
   activeColor: "",
-  closeOnClickOverlay: true,
+  closeOnOverlayClick: true,
   scrollFixed: false,
   lockScroll: true,
   icon: null
 };
 const Menu = (props) => {
-  const { className, icon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, ...rest } = {
+  const { className, icon, scrollFixed, lockScroll, closeOnOverlayClick, children, activeColor, ...rest } = {
     ...defaultProps,
     ...props
   };
@@ -54,7 +54,7 @@ const Menu = (props) => {
         index,
         activeColor,
         parent: {
-          closeOnClickOverlay,
+          closeOnOverlayClick,
           lockScroll,
           toggleMenuItem,
           updateTitle,

package/dist/esm/{menuitem.taro-6076bffa.js → menuitem.taro-7f8c12cf.js}

@@ -4,7 +4,7 @@ import { getSystemInfoSync } from "@tarojs/taro";
 import { CSSTransition } from "react-transition-group";
 import { Check } from "@nutui/icons-react-taro";
 import { O as Overlay } from "./overlay.taro-75012bd3.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
   ...ComponentDefaults,
@@ -69,29 +69,32 @@ const MenuItem = forwardRef((props, ref) => {
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { top: `${position.top + position.height}px` } : {
-      bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
-      top: "auto"
+    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: `${window.innerHeight}px`
     };
   };
   const placeholderStyle = () => {
     if (direction === "down") {
       return {
         height: `${position.top + position.height}px`,
-        top: 0,
+        top: "auto",
+        bottom: "-100%",
         ...isShow()
       };
     }
     return {
       height: `${getSystemInfoSync().windowHeight - position.top}px`,
-      bottom: `0px`,
-      top: "auto",
+      bottom: `auto`,
+      top: "0",
       ...isShow()
     };
   };
   return React.createElement(
-    React.Fragment,
-    null,
+    "div",
+    { className: "nut-menu-item-container", style: { position: "absolute", left: 0, right: 0 } },
     closeOnClickAway ? React.createElement("div", { className: `placeholder-element ${classNames({
       up: direction === "up"
     })}`, style: placeholderStyle(), onClick: () => parent.toggleMenuItem(index) }) : null,

package/dist/esm/{navbar.taro-5e1a0835.js → navbar.taro-f2d4215d.js}

@@ -12,7 +12,7 @@ const defaultProps = {
   zIndex: 10
 };
 const NavBar = (props) => {
-  const { right, left, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onClickBack } = {
+  const { right, left, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onBackClick } = {
     ...defaultProps,
     ...props
   };
@@ -28,7 +28,7 @@ const NavBar = (props) => {
     return React.createElement(
       "div",
       { className: `${classPrefix}__left` },
-      back && React.createElement("div", { className: `${classPrefix}__left__back`, onClick: (e) => onClickBack(e) }, back),
+      back && React.createElement("div", { className: `${classPrefix}__left__back`, onClick: (e) => onBackClick(e) }, back),
       left
     );
   };