@nutui/nutui-react 1.4.13 → 1.4.14-beta.0

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v1.4.13 Wed Mar 29 2023 15:59:34 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.4.14-beta.0 Thu Apr 06 2023 15:51:39 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -10204,7 +10204,7 @@ Please add \`${key}Action\` when creating your handler.`);
      * @return {String}
      */
     getWhatDay(year, month, day) {
-      const date2 = /* @__PURE__ */ new Date(`${year}/${month}/${day}`);
+      const date2 = new Date(`${year}/${month}/${day}`);
       const index = date2.getDay();
       const dayNames = [
         "星期日",
@@ -10222,7 +10222,7 @@ Please add \`${key}Action\` when creating your handler.`);
      * @return {Number}
      */
     getMonthPreDay(year, month) {
-      const date2 = /* @__PURE__ */ new Date(`${year}/${month}/01`);
+      const date2 = new Date(`${year}/${month}/01`);
       let day = date2.getDay();
       if (day == 0) {
         day = 7;
@@ -10279,7 +10279,7 @@ Please add \`${key}Action\` when creating your handler.`);
      */
     getDay(i) {
       i = i || 0;
-      let date2 = /* @__PURE__ */ new Date();
+      let date2 = new Date();
       const diff = i * (1e3 * 60 * 60 * 24);
       date2 = new Date(date2.getTime() + diff);
       return this.date2Str(date2);
@@ -10469,7 +10469,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const isCurrDay = (month, day) => {
       const date2 = `${month.curData[0]}-${month.curData[1]}-${day}`;
-      return Utils.isEqual(date2, Utils.date2Str(/* @__PURE__ */ new Date()));
+      return Utils.isEqual(date2, Utils.date2Str(new Date()));
     };
     const confirm2 = () => {
       const { type: type22 } = props;
@@ -10805,8 +10805,8 @@ Please add \`${key}Action\` when creating your handler.`);
           }
         });
       } else {
-        const currentYear2 = (/* @__PURE__ */ new Date()).getFullYear();
-        const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
+        const currentYear2 = new Date().getFullYear();
+        const currentMonth = new Date().getMonth() + 1;
         const currentYearMonthIndex = state.monthsData.findIndex((item) => {
           return +item.curData[0] === currentYear2 && +item.curData[1] === currentMonth;
         });
@@ -11906,7 +11906,6 @@ Please add \`${key}Action\` when creating your handler.`);
     const rotation = 20;
     const moving = React.useRef(false);
     let timer;
-    React.useRef(null);
     const rollerRef = React.useRef(null);
     const pickerSlotRef = React.useRef(null);
     const [startTime, setStartTime] = React.useState(0);
@@ -12313,7 +12312,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const Picker = React.forwardRef(InternalPicker);
   const Picker$1 = Picker;
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const currentYear = new Date().getFullYear();
   const defaultProps$X = {
     modelValue: null,
     visible: false,
@@ -14189,7 +14188,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (maxlength && val.length > Number(maxlength)) {
         val = val.slice(0, Number(maxlength));
       }
-      updateValue(getModelValue(), "onBlur");
+      updateValue(val, "onBlur");
       onBlur && onBlur(val, event);
     };
     const handleClickInput = (event) => {
@@ -14400,6 +14399,7 @@ Please add \`${key}Action\` when creating your handler.`);
       isAsync,
       className,
       style,
+      formatter,
       add,
       reduce,
       change,
@@ -14420,9 +14420,15 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const [inputValue, setInputValue] = React.useState(modelValue);
+    const inputRef = React.useRef("");
     React.useEffect(() => {
-      setInputValue(modelValue);
-    }, [modelValue]);
+      if (formatter) {
+        inputRef.current = formatter(modelValue);
+        setInputValue(formatter(modelValue));
+      } else {
+        setInputValue(modelValue);
+      }
+    }, [modelValue, formatter]);
     const b2 = cn("inputnumber");
     const classes = classNames(
       {
@@ -14436,12 +14442,20 @@ Please add \`${key}Action\` when creating your handler.`);
       ...style
     };
     const addAllow = (value = inputValue) => {
+      if (formatter) {
+        const numValue = String(value).replace(/[^0-9|\.]/gi, "");
+        return Number(numValue) < Number(max) && !disabled;
+      }
       if (value || typeof value === "number") {
         return value < Number(max) && !disabled;
       }
       return false;
     };
     const reduceAllow = (value = inputValue) => {
+      if (formatter) {
+        const numValue = String(value).replace(/[^0-9|\.]/gi, "");
+        return Number(numValue) > Number(min) && !disabled;
+      }
       if (value || typeof value === "number") {
         return value > Number(min) && !disabled;
       }
@@ -14462,11 +14476,11 @@ Please add \`${key}Action\` when creating your handler.`);
       change && change(outputValue, e);
       if (!isAsync) {
         if (Number(outputValue) < Number(min)) {
-          setInputValue(Number(min));
+          formatter ? setInputValue(formatter(Number(min))) : setInputValue(Number(min));
         } else if (Number(outputValue) > Number(max)) {
-          setInputValue(Number(max));
+          formatter ? setInputValue(formatter(Number(max))) : setInputValue(Number(max));
         } else {
-          setInputValue(outputValue);
+          formatter ? setInputValue(formatter(outputValue)) : setInputValue(outputValue);
         }
       }
     };
@@ -14474,8 +14488,15 @@ Please add \`${key}Action\` when creating your handler.`);
       onReduce && onReduce(e);
       reduce && reduce(e);
       if (reduceAllow()) {
-        const outputValue = Number(inputValue) - Number(step);
-        emitChange(outputValue, e);
+        if (formatter) {
+          const numValue = String(inputValue).replace(/[^0-9|\.]/gi, "");
+          const outputValue = Number(numValue) - Number(step);
+          inputRef.current = formatter(outputValue);
+          emitChange(outputValue, e);
+        } else {
+          const outputValue = Number(inputValue) - Number(step);
+          emitChange(outputValue, e);
+        }
       } else {
         onOverlimit && onOverlimit(e);
         overlimit && overlimit(e);
@@ -14485,8 +14506,15 @@ Please add \`${key}Action\` when creating your handler.`);
       onAdd && onAdd(e);
       add && add(e);
       if (addAllow()) {
-        const outputValue = Number(inputValue) + Number(step);
-        emitChange(outputValue, e);
+        if (formatter) {
+          const numValue = String(inputValue).replace(/[^0-9|\.]/gi, "");
+          const outputValue = Number(numValue) + Number(step);
+          inputRef.current = formatter(outputValue);
+          emitChange(outputValue, e);
+        } else {
+          const outputValue = Number(inputValue) + Number(step);
+          emitChange(outputValue, e);
+        }
       } else {
         onOverlimit && onOverlimit(e);
         overlimit && overlimit(e);
@@ -14504,6 +14532,41 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       }
     };
+    const changeFormatValue = (e) => {
+      const input = e.target.value;
+      const numReg = new RegExp("^[0-9]*$");
+      const numValue = input.replace(/[^0-9|\.]/gi, "");
+      if (formatter) {
+        if (!numReg.test(input[0]) && numValue) {
+          setInputValue(formatter(numValue));
+        } else if (!numReg.test(input[0]) && !numValue) {
+          setInputValue(input);
+        } else if (numReg.test(input[0])) {
+          console.log("inputRef.current", inputRef.current);
+          console.log("formatter(numValue)", formatter(numValue));
+          if (formatter(numValue) === inputRef.current) {
+            setInputValue(numValue);
+          } else {
+            setInputValue(formatter(numValue));
+            inputRef.current = formatter(numValue);
+          }
+        }
+      }
+    };
+    const burFormatValue = (e) => {
+      const input = e.target.value;
+      const numReg = new RegExp("^[0-9]*$");
+      const numValue = input.replace(/[^0-9|\.]/gi, "");
+      if (formatter) {
+        if (formatter(numValue) === input) {
+          emitChange(numValue, e);
+          return;
+        }
+        if (!numReg.test(input) || !input) {
+          setInputValue(formatter(""));
+        }
+      }
+    };
     const focusValue = (e) => {
       if (disabled)
         return;
@@ -14538,7 +14601,21 @@ Please add \`${key}Action\` when creating your handler.`);
         name: "minus",
         onClick: reduceNumber
       }
-    )), /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement(React.Fragment, null, formatter ? /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        min,
+        max,
+        style: { width: pxCheck(inputWidth) },
+        disabled,
+        readOnly: readonly,
+        value: inputValue,
+        onInput: changeFormatValue,
+        onBlur: burFormatValue,
+        onFocus: focusValue
+      }
+    ) : /* @__PURE__ */ React.createElement(
       "input",
       {
         type: "number",
@@ -14552,7 +14629,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onBlur: burValue,
         onFocus: focusValue
       }
-    ), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement("div", { className: "nut-input-add" }, /* @__PURE__ */ React.createElement(
       Icon,
       {
         classPrefix: iconClassPrefix,
@@ -16517,7 +16594,7 @@ Please add \`${key}Action\` when creating your handler.`);
     constructor() {
       __publicField(this, "status", "ready");
       __publicField(this, "message", "准备中..");
-      __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
+      __publicField(this, "uid", new Date().getTime().toString());
       __publicField(this, "name");
       __publicField(this, "url");
       __publicField(this, "type");
@@ -17080,7 +17157,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const scrollAnimation = () => {
       let cid = requestAniFrame2()(function fn() {
-        const t = duration - Math.max(0, startTime - +/* @__PURE__ */ new Date() + duration / 2);
+        const t = duration - Math.max(0, startTime - +new Date() + duration / 2);
         const y = t * -scrollTop / duration + scrollTop;
         scroll(y);
         cid = requestAniFrame2()(fn);
@@ -17109,7 +17186,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     const goTop = (e) => {
       onClick && onClick(e);
-      const otime = +/* @__PURE__ */ new Date();
+      const otime = +new Date();
       startTime = otime;
       isAnimation && duration > 0 ? scrollAnimation() : scroll();
     };
@@ -17824,7 +17901,7 @@ Please add \`${key}Action\` when creating your handler.`);
   __publicField(Notification, "newInstance");
   Notification.newInstance = (properties, callback) => {
     const element = document.createElement("div");
-    const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
+    const id = properties.id ? properties.id : `${new Date().getTime()}`;
     element.id = id;
     properties.id = id;
     document.body.appendChild(element);
@@ -20300,7 +20377,7 @@ Please add \`${key}Action\` when creating your handler.`);
       const touches = event.touches;
       const events = touches[0];
       const events2 = touches[1];
-      const curTouchTime = (/* @__PURE__ */ new Date()).getTime();
+      const curTouchTime = new Date().getTime();
       if (curTouchTime - lastTouchEndTime < 300) {
         const store12 = store;
         if (store12.scale > 1) {
@@ -20354,7 +20431,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const onTouchEnd = () => {
-      setLastTouchEndTime((/* @__PURE__ */ new Date()).getTime());
+      setLastTouchEndTime(new Date().getTime());
       const store1 = store;
       store1.moveable = false;
       if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {

package/dist/packages/picker/picker.scss

@@ -88,45 +88,45 @@
   align-items: center;
   justify-content: space-between;
   padding: $picker-bar-button-padding;
+}
 
-  .nut-picker__cancel-btn {
-    color: $picker-cancel-color;
-    font-size: $picker-bar-cancel-font-size;
-  }
+.nut-picker__cancel-btn {
+  color: $picker-cancel-color;
+  font-size: $picker-bar-cancel-font-size;
+}
 
-  .nut-picker__confirm-btn {
-    color: $picker-ok-color;
-    font-size: $picker-bar-ok-font-size;
-  }
+.nut-picker__confirm-btn {
+  color: $picker-ok-color;
+  font-size: $picker-bar-ok-font-size;
+}
 
-  .nut-picker__title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-    color: $picker-bar-title-color;
-    font-size: $picker-bar-title-font-size;
-    font-weight: $picker-bar-title-font-weight;
-  }
+.nut-picker__title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  color: $picker-bar-title-color;
+  font-size: $picker-bar-title-font-size;
+  font-weight: $picker-bar-title-font-weight;
 }
 
 .nut-picker__panel {
   display: flex;
   position: relative;
+}
 
-  .nut-picker-indicator {
-    position: absolute;
-    top: 108px;
-    height: $picker-item-height;
-    width: 100%;
-    border: $picker-item-active-line-border;
-    border-left: 0;
-    border-right: 0;
-    color: $picker-item-text-color;
-    font-size: $picker-item-text-font-size;
-    z-index: 3;
-  }
+.nut-picker-indicator {
+  position: absolute;
+  top: 108px;
+  height: $picker-item-height;
+  width: 100%;
+  border: $picker-item-active-line-border;
+  border-left: 0;
+  border-right: 0;
+  color: $picker-item-text-color;
+  font-size: $picker-item-text-font-size;
+  z-index: 3;
 }
 
 .nut-picker-list {
@@ -135,83 +135,89 @@
   height: $picker-list-height;
   overflow: hidden;
   text-align: center;
+}
 
-  .nut-picker-list-panel {
-    transform-style: preserve-3d;
-  }
+.nut-picker-list-panel {
+  transform-style: preserve-3d;
+}
 
-  .nut-picker-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: $picker-mask-bg-img;
-    background-position: top, bottom;
-    background-size: 100% 108px;
-    background-repeat: no-repeat;
-    z-index: 3;
-  }
+.nut-picker-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: $picker-mask-bg-img;
+  background-position: top, bottom;
+  background-size: 100% 108px;
+  background-repeat: no-repeat;
+  z-index: 3;
+}
 
-  .nut-picker-content,
-  .nut-picker-roller {
-    position: absolute;
-    top: 108px;
-    width: 100%;
-    height: $picker-item-height;
-  }
+.picker-view-panel {
+  height: $picker-list-height;
+  flex-grow: 1;
+}
 
-  .nut-picker-content {
-    background: #fff;
-    z-index: 2;
-    overflow: hidden;
-  }
+.nut-picker-content,
+.nut-picker-roller {
+  position: absolute;
+  top: 108px;
+  width: 100%;
+  height: $picker-item-height;
+}
 
-  .nut-picker-item,
-  .nut-picker-roller-item {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    height: $picker-item-height;
-    line-height: $picker-item-height;
-    color: $picker-item-text-color;
-    font-size: $picker-item-text-font-size;
-    text-align: center;
-  }
+.nut-picker-content {
+  background: #fff;
+  z-index: 2;
+  overflow: hidden;
+}
 
-  .nut-picker-item {
-    font-size: 16px;
-    background: #fff;
-  }
+.nut-picker-item,
+.nut-picker-roller-item {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: $picker-item-height;
+  line-height: $picker-item-height;
+  color: $picker-item-text-color;
+  font-size: $picker-item-text-font-size;
+  text-align: center;
+}
 
-  .nut-picker-roller {
-    z-index: 1;
-    transform-style: preserve-3d;
+.nut-picker-item {
+  font-size: 16px;
+  background: #fff;
+}
 
-    .nut-picker-roller-item {
-      backface-visibility: hidden;
-      -moz-backface-visibility: hidden;
-      -webkit-backface-visibility: hidden;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      color: $gray1;
-    }
+.nut-picker-roller {
+  z-index: 1;
+  transform-style: preserve-3d;
+}
 
-    .nut-picker-roller-item-title {
-      display: block;
-      width: 100%;
-      height: 36px;
-      line-height: 36px;
-      color: $gray1;
-      font-size: $picker-bar-title-font-size;
-    }
+.nut-picker-roller-item {
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  color: $gray1;
+}
 
-    .nut-picker-roller-item-hidden {
-      visibility: hidden;
-      opacity: 0;
-    }
-  }
+.nut-picker-roller-item-title {
+  display: block;
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  color: $gray1;
+  font-size: $picker-bar-title-font-size;
+}
+
+.nut-picker-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
 }
 
 .nut-picker-placeholder {

package/dist/packages/swiper/swiper1.scss

@@ -0,0 +1,65 @@
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.nut-swiper__container {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.nut-swiper__track {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+}
+
+.nut-swiper__track > div {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.nut-swiper__track-vertical {
+  flex-direction: column;
+}
+
+.nut-swiper__pagination {
+  display: flex;
+  position: absolute;
+  left: 50%;
+  bottom: $swiper-pagination-bottom;
+  transform: translateX(-50%);
+  i {
+    width: $swiper-pagination-item-width;
+    height: $swiper-pagination-item-height;
+    margin-right: $swiper-pagination-item-margin-right;
+    border-radius: $swiper-pagination-item-border-radius;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.nut-swiper__pagination-vertical {
+  top: 50%;
+  left: 12px;
+  bottom: auto;
+  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  transform: translateY(-50%);
+  i {
+    margin-bottom: 5px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    &.active {
+      height: 18px;
+      border-radius: 5px;
+    }
+  }
+}