@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/Price.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["price", "needSymbol", "symbol", "decimalDigits", "thousands", "position", "size", "className"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["price", "symbol", "digits", "thousands", "position", "size", "line", "className", "style"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,24 +23,22 @@ function _objectSpread(target) {
   return target;
 }
 import React__default from "react";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   price: 0,
-  needSymbol: true,
   symbol: "¥",
-  decimalDigits: 2,
+  digits: 2,
   thousands: false,
   position: "before",
   size: "large",
-  className: ""
-};
+  line: false
+});
 var Price = function Price2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), price = _defaultProps$props.price, needSymbol = _defaultProps$props.needSymbol, symbol = _defaultProps$props.symbol, decimalDigits = _defaultProps$props.decimalDigits, thousands = _defaultProps$props.thousands, position = _defaultProps$props.position, size = _defaultProps$props.size, className = _defaultProps$props.className, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("price");
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), price = _defaultProps$props.price, symbol = _defaultProps$props.symbol, digits = _defaultProps$props.digits, thousands = _defaultProps$props.thousands, position = _defaultProps$props.position, size = _defaultProps$props.size, line = _defaultProps$props.line, className = _defaultProps$props.className, style = _defaultProps$props.style, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-price";
   var showSymbol = function showSymbol2() {
     return {
-      __html: needSymbol ? symbol : ""
+      __html: symbol || ""
     };
   };
   var checkPoint = function checkPoint2(price2) {
@@ -51,7 +49,7 @@ var Price = function Price2(props) {
       num = 0;
     }
     if (checkPoint(num)) {
-      num = Number(num).toFixed(decimalDigits);
+      num = Number(num).toFixed(digits);
       num = typeof num.split(".") === "string" ? num.split(".") : num.split(".")[0];
     } else {
       num = num.toString();
@@ -66,30 +64,31 @@ var Price = function Price2(props) {
       decimalNum = 0;
     }
     if (checkPoint(decimalNum)) {
-      decimalNum = Number(decimalNum).toFixed(decimalDigits);
+      decimalNum = Number(decimalNum).toFixed(digits);
       decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1] || 0;
     } else {
       decimalNum = 0;
     }
     var result = "0.".concat(decimalNum);
-    var resultFixed = Number(result).toFixed(decimalDigits);
+    var resultFixed = Number(result).toFixed(digits);
     return String(resultFixed).substring(2, resultFixed.length);
   };
   var renderSymbol = function renderSymbol2() {
     return React__default.createElement("div", {
-      className: "".concat(b("symbol"), " ").concat(b("symbol-".concat(size))),
+      className: "".concat(classPrefix, "__symbol ").concat(classPrefix, "__symbol-").concat(size),
       dangerouslySetInnerHTML: showSymbol()
     });
   };
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className)
-  }, rest), needSymbol && position === "before" ? renderSymbol() : null, React__default.createElement("div", {
-    className: "".concat(b("integer"), " ").concat(b("integer-".concat(size)))
-  }, formatThousands(price)), decimalDigits !== 0 ? React__default.createElement("div", {
-    className: "".concat(b("decimal"), " ").concat(b("decimal-".concat(size)))
+    className: "".concat(classPrefix, " ").concat(className, " ").concat(line ? "".concat(classPrefix, "--line") : ""),
+    style
+  }, rest), symbol && position === "before" ? renderSymbol() : null, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__integer ").concat(classPrefix, "__integer-").concat(size)
+  }, formatThousands(price)), digits !== 0 ? React__default.createElement("div", {
+    className: "".concat(classPrefix, "__decimal ").concat(classPrefix, "__decimal-").concat(size)
   }, ".") : null, React__default.createElement("div", {
-    className: "".concat(b("decimal"), " ").concat(b("decimal-".concat(size)))
-  }, formatDecimal(price)), needSymbol && position === "after" ? renderSymbol() : null);
+    className: "".concat(classPrefix, "__decimal ").concat(classPrefix, "__decimal-").concat(size)
+  }, formatDecimal(price)), symbol && position === "after" ? renderSymbol() : null);
 };
 Price.defaultProps = defaultProps;
 Price.displayName = "NutPrice";

package/dist/esm/Progress.js

@@ -1,6 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "style", "isShowPercentage", "percentage", "fillColor", "strokeColor", "strokeWidth", "size", "textColor", "textWidth", "showText", "textInside", "textBackground", "textType", "status", "icon", "children"];
+var _excluded = ["className", "style", "percent", "background", "color", "strokeWidth", "showText", "animated", "children", "lazy", "delay"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -22,95 +23,101 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default from "react";
+import React__default, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
-import { Checked } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
-  isShowPercentage: true,
-  percentage: 0,
-  fillColor: "#f3f3f3",
-  strokeColor: "linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)",
-  strokeWidth: "",
-  textColor: "",
-  textWidth: "",
-  showText: true,
-  textInside: false,
-  textBackground: "linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)",
-  textType: "text",
-  status: false,
-  icon: null,
-  children: void 0
+  percent: 0,
+  showText: false,
+  animated: false,
+  lazy: false,
+  delay: 0
 });
 var Progress = function Progress2(props) {
-  var _classNames, _classNames2, _classNames4;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, isShowPercentage = _defaultProps$props.isShowPercentage, percentage = _defaultProps$props.percentage, fillColor = _defaultProps$props.fillColor, strokeColor = _defaultProps$props.strokeColor, strokeWidth = _defaultProps$props.strokeWidth, size = _defaultProps$props.size, textColor = _defaultProps$props.textColor, textWidth = _defaultProps$props.textWidth, showText = _defaultProps$props.showText, textInside = _defaultProps$props.textInside, textBackground = _defaultProps$props.textBackground, textType = _defaultProps$props.textType, status = _defaultProps$props.status, icon = _defaultProps$props.icon, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("progress");
-  var classes = classNames(b(""));
-  var classesOuter = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(""), "-outer"), true), _defineProperty(_classNames, "".concat(b(""), "-").concat(size || "base"), true), _classNames));
-  var classesInner = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b(""), "-inner"), true), _defineProperty(_classNames2, "".concat(b(""), "-active"), status), _classNames2));
-  var classesText = classNames(_defineProperty({}, "".concat(b(""), "-text"), true));
-  var classesInsideText = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(b(""), "-text"), true), _defineProperty(_classNames4, "".concat(b(""), "-insidetext"), true), _classNames4));
-  var classesTextInner = classNames(_defineProperty({}, "".concat(b(""), "-text__inner"), true));
+  var _classNames;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, percent = _defaultProps$props.percent, background = _defaultProps$props.background, color = _defaultProps$props.color, strokeWidth = _defaultProps$props.strokeWidth, showText = _defaultProps$props.showText, animated = _defaultProps$props.animated, children = _defaultProps$props.children, lazy = _defaultProps$props.lazy, delay = _defaultProps$props.delay, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-progress";
+  var classesInner = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "-inner"), true), _defineProperty(_classNames, "".concat(classPrefix, "-active"), animated), _classNames));
   var stylesOuter = {
     height: "".concat(strokeWidth, "px"),
-    // eslint-disable-next-line no-nested-ternary
-    background: "".concat(fillColor)
+    background
   };
+  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), displayPercent = _useState2[0], setDispalyPercent = _useState2[1];
   var stylesInner = {
-    width: "".concat(percentage, "%"),
-    // eslint-disable-next-line no-nested-ternary
-    background: "".concat(strokeColor)
+    width: "".concat(displayPercent, "%"),
+    background: color
   };
-  var stylesInsideText = {
-    width: "".concat(textWidth, "px"),
-    left: "".concat(percentage, "%"),
-    background: textBackground || strokeColor
+  useEffect(function() {
+    setDispalyPercent(percent);
+  }, [percent]);
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), intersecting = _useState4[0], setIntersecting = _useState4[1];
+  var progressRef = useRef(null);
+  var observer = useRef(null);
+  var initObserver = function initObserver2() {
+    var options = {
+      threshold: [0],
+      rootMargin: "0px"
+    };
+    observer.current = new IntersectionObserver(function(entires, self) {
+      entires.forEach(function(item) {
+        if (item.isIntersecting) {
+          setIntersecting(true);
+        } else {
+          setIntersecting(false);
+        }
+      });
+    }, options);
+    observer.current.observe(progressRef.current);
   };
-  var stylesInsideIcon = {
-    width: "".concat(textWidth, "px"),
-    left: "".concat(percentage, "%")
-  };
-  var stylesText = {
-    width: "".concat(textWidth, "px")
+  var resetObserver = function resetObserver2() {
+    observer.current.disconnect && observer.current.disconnect();
   };
+  useEffect(function() {
+    if (lazy) {
+      setTimeout(function() {
+        if (intersecting) {
+          setDispalyPercent(percent);
+        } else {
+          setDispalyPercent(0);
+        }
+      }, delay);
+    }
+  }, [intersecting]);
+  useEffect(function() {
+    lazy && initObserver();
+    var timer = null;
+    if (delay) {
+      setDispalyPercent(0);
+      timer = setTimeout(function() {
+        setDispalyPercent(percent);
+      }, delay);
+    }
+    return function() {
+      lazy && resetObserver();
+      timer && clearTimeout(timer);
+    };
+  }, []);
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
+    ref: progressRef,
+    className: classNames(classPrefix, className),
     style
   }, rest), React__default.createElement("div", {
-    className: classesOuter,
+    className: "".concat(classPrefix, "-outer"),
     style: stylesOuter
   }, React__default.createElement("div", {
     className: classesInner,
     style: stylesInner
-  }, showText && textInside && React__default.createElement(React__default.Fragment, null, children ? React__default.createElement("div", {
-    className: classesInsideText,
-    style: stylesInsideIcon
-  }, children) : React__default.createElement("div", {
-    className: classesInsideText,
-    style: stylesInsideText
-  }, React__default.createElement("span", {
-    className: classesTextInner,
+  }, showText && React__default.createElement("div", {
+    className: "".concat(classPrefix, "-text"),
     style: {
-      color: textColor
+      left: "".concat(displayPercent, "%")
     }
-  }, percentage, isShowPercentage ? "%" : ""))))), showText && !textInside && React__default.createElement("div", {
-    className: classesText,
-    style: stylesText
-  }, textType === "text" && React__default.createElement("span", {
-    className: classesTextInner,
+  }, children || React__default.createElement("div", {
+    className: "".concat(classPrefix, "-text__inner"),
     style: {
-      color: textColor
+      background: color
     }
-  }, percentage, isShowPercentage ? "%" : ""), textType === "icon" && React__default.createElement(React__default.Fragment, null, icon || React__default.createElement(Checked, {
-    width: 16,
-    height: 16,
-    color: "#439422"
-  }))));
+  }, percent, "%")))));
 };
 Progress.defaultProps = defaultProps;
 Progress.displayName = "NutProgress";

package/dist/esm/PullToRefresh.js

@@ -28,6 +28,7 @@ import { useDrag } from "@use-gesture/react";
 import { useSpring, animated } from "@react-spring/web";
 import { useConfig } from "./ConfigProvider.js";
 import { c as canUseDom, g as getScrollParent } from "./get-scroll-parent.js";
+import { C as ComponentDefaults } from "./typings.js";
 function bound(position, min, max) {
   var ret = position;
   if (min !== void 0) {
@@ -69,9 +70,7 @@ if (canUseDom) {
     console.log(e);
   }
 }
-var defaultProps = {
-  className: "",
-  style: {},
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   pullingText: "",
   canReleaseText: "",
   refreshingText: "",
@@ -82,8 +81,9 @@ var defaultProps = {
   threshold: 60,
   onRefresh: function onRefresh() {
   }
-};
+});
 var PullToRefresh = function PullToRefresh2(p) {
+  var classPrefix = "nut-pulltorefresh";
   var _useConfig = useConfig(), locale = _useConfig.locale;
   var props = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), p), {
     pullingText: p.pullingText || locale.pullToRefresh.pullingText,
@@ -280,18 +280,18 @@ var PullToRefresh = function PullToRefresh2(p) {
   };
   return React__default.createElement(animated.div, {
     ref: elementRef,
-    className: "nut-pulltorefresh ".concat(props.className),
+    className: "".concat(classPrefix, " ").concat(props.className),
     style: props.style
   }, React__default.createElement(animated.div, {
     style: springStyles,
-    className: "nut-pulltorefresh-head"
+    className: "".concat(classPrefix, "-head")
   }, React__default.createElement("div", {
-    className: "nut-pulltorefresh-head-content",
+    className: "".concat(classPrefix, "-head-content"),
     style: {
       height: headHeight
     }
   }, renderStatusText())), React__default.createElement("div", {
-    className: "nut-pulltorefresh-content"
+    className: "".concat(classPrefix, "-content")
   }, props.children));
 };
 PullToRefresh.defaultProps = defaultProps;

package/dist/esm/Radio.js

@@ -1,8 +1,10 @@
 import { R as Radio } from "./radio2.js";
 import "react";
 import "@nutui/icons-react";
+import "classnames";
 import "./RadioGroup.js";
 import "./typings.js";
+import "./use-props-value.js";
 export {
   Radio as default
 };

package/dist/esm/RadioGroup.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "value", "onChange", "textPosition", "direction", "options"], _excluded2 = ["label", "value", "disabled", "onChange"];
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "value", "defaultValue", "onChange", "labelPosition", "direction", "options", "disabled"], _excluded2 = ["label", "value", "disabled", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,78 +23,58 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect, useCallback } from "react";
+import React__default, { useCallback } from "react";
+import classNames from "classnames";
 import { R as Radio, a as RadioContext } from "./radio2.js";
-import { c as cn } from "./bem.js";
+import { u as usePropsValue } from "./use-props-value.js";
 import "@nutui/icons-react";
 import "./RadioGroup.js";
 import "./typings.js";
-import "@bem-react/classname";
 var defaultProps = {
-  value: null,
-  textPosition: "right",
+  labelPosition: "right",
   onChange: function onChange(value) {
   },
   direction: "vertical",
   options: []
 };
+var classPrefix = "nut-radiogroup";
 var RadioGroup = React__default.forwardRef(function(props, ref) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children;
-  cn("RadioGroup");
-  var className = props.className, value = props.value, _onChange = props.onChange, textPosition = props.textPosition, direction = props.direction, options = props.options, rest = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(value), _useState2 = _slicedToArray(_useState, 2), val2State = _useState2[0], setVal2State = _useState2[1];
-  useEffect(function() {
-    setVal2State(value);
-  }, [value]);
-  function validateChildChecked(child) {
-    if (val2State === null)
-      return false;
-    return val2State === child.props.value;
-  }
-  function validateChecked(value2) {
-    if (val2State === null)
-      return false;
-    return val2State === value2;
-  }
-  function cloneChildren() {
-    return React__default.Children.map(children, function(child, index) {
-      var childChecked = validateChildChecked(child);
-      if (child.type.displayName !== "NutRadio") {
-        return React__default.cloneElement(child);
-      }
-      return React__default.cloneElement(child, {
-        textPosition,
-        checked: childChecked
-        // onChange: handleChildChange,
-      });
-    });
-  }
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, onChange2 = _defaultProps$props.onChange, labelPosition = _defaultProps$props.labelPosition, direction = _defaultProps$props.direction, options = _defaultProps$props.options, disabled = _defaultProps$props.disabled, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    defaultValue: props.defaultValue,
+    value: props.value,
+    finalValue: "",
+    onChange: onChange2
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), val2State = _usePropsValue2[0], setVal2State = _usePropsValue2[1];
   var renderOptionsChildren = useCallback(function() {
     return options === null || options === void 0 ? void 0 : options.map(function(_ref) {
-      var label = _ref.label, value2 = _ref.value, disabled = _ref.disabled, onChange2 = _ref.onChange, rest2 = _objectWithoutProperties(_ref, _excluded2);
-      var childChecked = validateChecked(value2);
-      return React__default.createElement(Radio, _objectSpread(_objectSpread({
+      var label = _ref.label, value2 = _ref.value, disabled2 = _ref.disabled, onChange22 = _ref.onChange, rest2 = _objectWithoutProperties(_ref, _excluded2);
+      return React__default.createElement(Radio, _objectSpread(_objectSpread({}, rest2), {}, {
         key: value2 === null || value2 === void 0 ? void 0 : value2.toString(),
         children: label,
         value: value2,
-        disabled,
-        onChange: onChange2
-      }, rest2), {}, {
-        textPosition,
-        checked: childChecked
+        disabled: disabled2,
+        onChange: onChange22,
+        labelPosition,
+        checked: value2 === val2State
       }));
     });
-  }, [val2State, options]);
+  }, [options]);
   return React__default.createElement(RadioContext.Provider, {
     value: {
-      onChange: function onChange2(val) {
-        setVal2State(val);
-        _onChange && _onChange(val);
+      labelPosition: labelPosition || "right",
+      disabled,
+      value: val2State,
+      check: function check(value2) {
+        setVal2State(value2);
+      },
+      uncheck: function uncheck() {
+        setVal2State("");
       }
     }
   }, React__default.createElement("div", _objectSpread({
-    className: "nut-radiogroup nut-radiogroup--".concat(props.direction, " ").concat(className || "")
-  }, rest), options !== null && options !== void 0 && options.length ? renderOptionsChildren() : cloneChildren()));
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "--").concat(props.direction), props.direction))
+  }, rest), options !== null && options !== void 0 && options.length ? renderOptionsChildren() : children));
 });
 RadioGroup.defaultProps = defaultProps;
 RadioGroup.displayName = "NutRadioGroup";

package/dist/esm/Range/style/index.js

@@ -1,2 +1,2 @@
-import '../../Toast/style'
+
 import '../../../packages/range/range.scss'