@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/Progress.js

@@ -1,64 +1,39 @@
-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", "percent", "background", "color", "strokeWidth", "showText", "animated", "children", "lazy", "delay"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  percent: 0,
-  showText: false,
-  animated: false,
-  lazy: false,
-  delay: 0
-});
-var Progress = function Progress2(props) {
-  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(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-inner"), true), "".concat(classPrefix, "-active"), animated));
-  var stylesOuter = {
-    height: "".concat(strokeWidth, "px"),
+import { a as useRtl } from "./configprovider2.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { percent: 0, showText: false, animated: false, lazy: false, delay: 0 });
+const Progress = (props) => {
+  const rtl = useRtl();
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, style, percent, background, color, strokeWidth, showText, animated, children, lazy, delay } = _a, rest = __rest(_a, ["className", "style", "percent", "background", "color", "strokeWidth", "showText", "animated", "children", "lazy", "delay"]);
+  const classPrefix = "nut-progress";
+  const classesInner = classNames({
+    [`${classPrefix}-inner`]: true,
+    [`${classPrefix}-active`]: animated
+  });
+  const stylesOuter = {
+    height: `${strokeWidth}px`,
     background
   };
-  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), displayPercent = _useState2[0], setDispalyPercent = _useState2[1];
-  var stylesInner = {
-    width: "".concat(displayPercent, "%"),
+  const [displayPercent, setDispalyPercent] = useState(0);
+  const stylesInner = {
+    width: `${displayPercent}%`,
     background: color
   };
-  useEffect(function() {
+  useEffect(() => {
     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 = {
+  const [intersecting, setIntersecting] = useState(false);
+  const progressRef = useRef(null);
+  const observer = useRef(null);
+  const initObserver = () => {
+    const options = {
       threshold: [0],
       rootMargin: "0px"
     };
-    observer.current = new IntersectionObserver(function(entires, self) {
-      entires.forEach(function(item) {
+    observer.current = new IntersectionObserver((entires, self) => {
+      entires.forEach((item) => {
         if (item.isIntersecting) {
           setIntersecting(true);
         } else {
@@ -68,12 +43,12 @@ var Progress = function Progress2(props) {
     }, options);
     observer.current.observe(progressRef.current);
   };
-  var resetObserver = function resetObserver2() {
+  const resetObserver = () => {
     observer.current.disconnect && observer.current.disconnect();
   };
-  useEffect(function() {
+  useEffect(() => {
     if (lazy) {
-      setTimeout(function() {
+      setTimeout(() => {
         if (intersecting) {
           setDispalyPercent(percent);
         } else {
@@ -82,41 +57,36 @@ var Progress = function Progress2(props) {
       }, delay);
     }
   }, [intersecting]);
-  useEffect(function() {
+  useEffect(() => {
     lazy && initObserver();
-    var timer = null;
+    let timer = null;
     if (delay) {
       setDispalyPercent(0);
-      timer = setTimeout(function() {
+      timer = setTimeout(() => {
         setDispalyPercent(percent);
       }, delay);
     }
-    return function() {
+    return () => {
       lazy && resetObserver();
       timer && clearTimeout(timer);
     };
   }, []);
-  return React__default.createElement("div", _objectSpread({
-    ref: progressRef,
-    className: classNames(classPrefix, className),
-    style
-  }, rest), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-outer"),
-    style: stylesOuter
-  }, React__default.createElement("div", {
-    className: classesInner,
-    style: stylesInner
-  }, showText && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-text"),
-    style: {
-      left: "".concat(displayPercent, "%")
-    }
-  }, children || React__default.createElement("div", {
-    className: "".concat(classPrefix, "-text-inner"),
-    style: {
-      background: color
-    }
-  }, percent, "%")))));
+  return React__default.createElement(
+    "div",
+    Object.assign({ ref: progressRef, className: classNames(classPrefix, className), style }, rest),
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-outer`, style: stylesOuter },
+      React__default.createElement("div", { className: classesInner, style: stylesInner }, showText && React__default.createElement("div", { className: `${classPrefix}-text`, style: rtl ? { right: `${displayPercent}%` } : { left: `${displayPercent}%` } }, children || React__default.createElement(
+        "div",
+        { className: `${classPrefix}-text-inner`, style: {
+          background: color
+        } },
+        percent,
+        "%"
+      )))
+    )
+  );
 };
 Progress.defaultProps = defaultProps;
 Progress.displayName = "NutProgress";

package/dist/esm/PullToRefresh.js

@@ -1,28 +1,4 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { a as __awaiter } from "./tslib.es6.js";
 import React__default, { useState, useRef, useEffect } from "react";
 import { useDrag } from "@use-gesture/react";
 import { useSpring, animated } from "@react-spring/web";
@@ -32,7 +8,7 @@ import { g as getScrollParent } from "./get-scroll-parent.js";
 import { p as passiveSupported } from "./supports-passive.js";
 import { C as ComponentDefaults } from "./typings.js";
 function bound(position, min, max) {
-  var ret = position;
+  let ret = position;
   if (min !== void 0) {
     ret = Math.max(position, min);
   }
@@ -44,8 +20,7 @@ function bound(position, min, max) {
 function rubberband(distance, dimension, constant) {
   return distance * dimension * constant / (dimension + constant * distance);
 }
-function rubberbandIfOutOfBounds(position, min, max, dimension) {
-  var constant = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 0.15;
+function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
   if (constant === 0)
     return bound(position, min, max);
   if (position < min)
@@ -54,172 +29,89 @@ function rubberbandIfOutOfBounds(position, min, max, dimension) {
     return +rubberband(position - max, dimension, constant) + max;
   return position;
 }
-var sleep = function sleep2(time) {
-  return new Promise(function(resolve) {
-    return setTimeout(resolve, time);
-  });
-};
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  pullingText: "",
-  canReleaseText: "",
-  refreshingText: "",
-  completeText: "",
-  completeDelay: 500,
-  disabled: false,
-  headHeight: 50,
-  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), {
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { pullingText: "", canReleaseText: "", refreshingText: "", completeText: "", completeDelay: 500, disabled: false, headHeight: 50, threshold: 60, onRefresh: () => {
+} });
+const PullToRefresh = (p) => {
+  const classPrefix = "nut-pulltorefresh";
+  const { locale } = useConfig();
+  const props = Object.assign(Object.assign(Object.assign({}, defaultProps), p), {
     pullingText: p.pullingText || locale.pullToRefresh.pullingText,
     canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
     refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
     completeText: p.completeText || locale.pullToRefresh.completeText
   });
-  var headHeight = props.headHeight;
-  var threshold = props.threshold;
-  var _useState = useState("pulling"), _useState2 = _slicedToArray(_useState, 2), status = _useState2[0], setStatus = _useState2[1];
-  var _useSpring = useSpring(function() {
-    return {
-      from: {
-        height: 0
-      },
-      config: {
-        tension: 300,
-        friction: 30,
-        clamp: true
-      }
-    };
-  }), _useSpring2 = _slicedToArray(_useSpring, 2), springStyles = _useSpring2[0], api = _useSpring2[1];
-  var elementRef = useRef(null);
-  var pullingRef = useRef(false);
-  useEffect(function() {
-    var _elementRef$current;
-    (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.addEventListener("touchmove", function() {
+  const headHeight = props.headHeight;
+  const threshold = props.threshold;
+  const [status, setStatus] = useState("pulling");
+  const [springStyles, api] = useSpring(() => ({
+    from: { height: 0 },
+    config: {
+      tension: 300,
+      friction: 30,
+      clamp: true
+    }
+  }));
+  const elementRef = useRef(null);
+  const pullingRef = useRef(false);
+  useEffect(() => {
+    var _a;
+    (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("touchmove", () => {
     });
   }, []);
   function doRefresh() {
-    return _doRefresh.apply(this, arguments);
-  }
-  function _doRefresh() {
-    _doRefresh = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee3() {
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1)
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              api.start({
-                height: headHeight
-              });
-              setStatus("refreshing");
-              _context3.prev = 2;
-              _context3.next = 5;
-              return props.onRefresh();
-            case 5:
-              setStatus("complete");
-              _context3.next = 12;
-              break;
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](2);
-              api.start({
-                to: function() {
-                  var _to = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee(next) {
-                    return _regeneratorRuntime.wrap(function _callee$(_context) {
-                      while (1)
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            _context.next = 2;
-                            return next({
-                              height: 0
-                            });
-                          case 2:
-                            setStatus("pulling");
-                          case 3:
-                          case "end":
-                            return _context.stop();
-                        }
-                    }, _callee);
-                  }));
-                  function to(_x) {
-                    return _to.apply(this, arguments);
-                  }
-                  return to;
-                }()
-              });
-              throw _context3.t0;
-            case 12:
-              if (!(props.completeDelay > 0)) {
-                _context3.next = 15;
-                break;
-              }
-              _context3.next = 15;
-              return sleep(props.completeDelay);
-            case 15:
-              api.start({
-                to: function() {
-                  var _to2 = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee2(next) {
-                    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                      while (1)
-                        switch (_context2.prev = _context2.next) {
-                          case 0:
-                            _context2.next = 2;
-                            return next({
-                              height: 0
-                            });
-                          case 2:
-                            setStatus("pulling");
-                          case 3:
-                          case "end":
-                            return _context2.stop();
-                        }
-                    }, _callee2);
-                  }));
-                  function to(_x2) {
-                    return _to2.apply(this, arguments);
-                  }
-                  return to;
-                }()
-              });
-            case 16:
-            case "end":
-              return _context3.stop();
-          }
-      }, _callee3, null, [[2, 8]]);
-    }));
-    return _doRefresh.apply(this, arguments);
+    return __awaiter(this, void 0, void 0, function* () {
+      api.start({ height: headHeight });
+      setStatus("refreshing");
+      try {
+        yield props.onRefresh();
+        setStatus("complete");
+      } catch (e) {
+        api.start({
+          to: (next) => __awaiter(this, void 0, void 0, function* () {
+            yield next({ height: 0 });
+            setStatus("pulling");
+          })
+        });
+        throw e;
+      }
+      if (props.completeDelay > 0) {
+        yield sleep(props.completeDelay);
+      }
+      api.start({
+        to: (next) => __awaiter(this, void 0, void 0, function* () {
+          yield next({ height: 0 });
+          setStatus("pulling");
+        })
+      });
+    });
   }
-  useDrag(function(state) {
+  useDrag((state) => {
     if (status === "refreshing" || status === "complete")
       return;
-    var event = state.event;
+    const { event } = state;
     if (state.last) {
       pullingRef.current = false;
       if (status === "canRelease") {
         doRefresh();
       } else {
-        api.start({
-          height: 0
-        });
+        api.start({ height: 0 });
       }
       return;
     }
     function getScrollTop(element) {
       return "scrollTop" in element ? element.scrollTop : element.scrollY;
     }
-    var _state$movement = _slicedToArray(state.movement, 2), y = _state$movement[1];
+    const [, y] = state.movement;
     if (state.first && y > 0) {
-      var target = state.event.target;
+      const target = state.event.target;
       if (!target || !(target instanceof Element))
         return;
-      var scrollParent = getScrollParent(target);
+      let scrollParent = getScrollParent(target);
       while (true) {
         if (!scrollParent)
           return;
-        var scrollTop = getScrollTop(scrollParent);
+        const scrollTop = getScrollTop(scrollParent);
         if (scrollTop > 0) {
           return;
         }
@@ -236,38 +128,39 @@ var PullToRefresh = function PullToRefresh2(p) {
       event.preventDefault();
     }
     event.stopPropagation();
-    var height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
-    api.start({
-      height
-    });
+    const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    api.start({ height });
     setStatus(height > threshold ? "canRelease" : "pulling");
   }, {
-    pointer: {
-      touch: true
-    },
+    pointer: { touch: true },
     axis: "y",
     target: elementRef,
     enabled: !props.disabled,
-    eventOptions: passiveSupported ? {
-      passive: false
-    } : false
+    eventOptions: passiveSupported ? { passive: false } : false
   });
-  var renderIcons = function renderIcons2(status2) {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("i", {
-      className: "".concat(classPrefix, "-head-content-icons")
-    }, (status2 === "pulling" || status2 === "complete") && React__default.createElement(Loading, null), (status2 === "canRelease" || status2 === "refreshing") && React__default.createElement(More, null)));
+  const renderIcons = (status2) => {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        "i",
+        { className: `${classPrefix}-head-content-icons` },
+        (status2 === "pulling" || status2 === "complete") && React__default.createElement(Loading, null),
+        (status2 === "canRelease" || status2 === "refreshing") && React__default.createElement(More, null)
+      )
+    );
   };
-  var renderStatusIcon = function renderStatusIcon2() {
+  const renderStatusIcon = () => {
+    var _a;
     if (props.renderIcon) {
-      var _props$renderIcon;
-      return (_props$renderIcon = props.renderIcon) === null || _props$renderIcon === void 0 ? void 0 : _props$renderIcon.call(props, status);
+      return (_a = props.renderIcon) === null || _a === void 0 ? void 0 : _a.call(props, status);
     }
     return renderIcons(status);
   };
-  var renderStatusText = function renderStatusText2() {
+  const renderStatusText = () => {
+    var _a;
     if (props.renderText) {
-      var _props$renderText;
-      return (_props$renderText = props.renderText) === null || _props$renderText === void 0 ? void 0 : _props$renderText.call(props, status);
+      return (_a = props.renderText) === null || _a === void 0 ? void 0 : _a.call(props, status);
     }
     if (status === "pulling")
       return props.pullingText;
@@ -279,21 +172,21 @@ var PullToRefresh = function PullToRefresh2(p) {
       return props.completeText;
     return "";
   };
-  return React__default.createElement(animated.div, {
-    ref: elementRef,
-    className: "".concat(classPrefix, " ").concat(props.className),
-    style: props.style
-  }, React__default.createElement(animated.div, {
-    style: springStyles,
-    className: "".concat(classPrefix, "-head")
-  }, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-head-content"),
-    style: {
-      height: headHeight
-    }
-  }, React__default.createElement("div", null, renderStatusIcon()), React__default.createElement("div", null, renderStatusText()))), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-content")
-  }, props.children));
+  return React__default.createElement(
+    animated.div,
+    { ref: elementRef, className: `${classPrefix} ${props.className}`, style: props.style },
+    React__default.createElement(
+      animated.div,
+      { style: springStyles, className: `${classPrefix}-head` },
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-head-content`, style: { height: headHeight } },
+        React__default.createElement("div", null, renderStatusIcon()),
+        React__default.createElement("div", null, renderStatusText())
+      )
+    ),
+    React__default.createElement("div", { className: `${classPrefix}-content` }, props.children)
+  );
 };
 PullToRefresh.defaultProps = defaultProps;
 PullToRefresh.displayName = "NutPullToRefresh";

package/dist/esm/RadioGroup.js

@@ -1,78 +1,48 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "value", "defaultValue", "onChange", "shape", "labelPosition", "direction", "options", "disabled"], _excluded2 = ["label", "value", "disabled", "onChange"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { useCallback } from "react";
 import classNames from "classnames";
 import { R as Radio, a as RadioContext } from "./radio2.js";
 import { u as usePropsValue } from "./use-props-value.js";
-var defaultProps = {
+const defaultProps = {
   labelPosition: "right",
-  onChange: function onChange(value) {
+  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, className = _defaultProps$props.className, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, onChange2 = _defaultProps$props.onChange, shape = _defaultProps$props.shape, labelPosition = _defaultProps$props.labelPosition, direction = _defaultProps$props.direction, options = _defaultProps$props.options, disabled = _defaultProps$props.disabled, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _usePropsValue = usePropsValue({
+const classPrefix = "nut-radiogroup";
+const RadioGroup = React__default.forwardRef((props, ref) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, value, defaultValue, onChange, shape, labelPosition, direction, options, disabled } = _a, rest = __rest(_a, ["children", "className", "value", "defaultValue", "onChange", "shape", "labelPosition", "direction", "options", "disabled"]);
+  const [val2State, setVal2State] = 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, 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: disabled2,
-        onChange: onChange22,
-        labelPosition,
-        checked: value2 === val2State
-      }));
+    onChange
+  });
+  const renderOptionsChildren = useCallback(() => {
+    return options === null || options === void 0 ? void 0 : options.map((_a2) => {
+      var { label, value: value2, disabled: disabled2, onChange: onChange2 } = _a2, rest2 = __rest(_a2, ["label", "value", "disabled", "onChange"]);
+      return React__default.createElement(Radio, Object.assign({}, rest2, { key: value2 === null || value2 === void 0 ? void 0 : value2.toString(), children: label, value: value2, disabled: disabled2, onChange: onChange2, labelPosition, checked: value2 === val2State }));
     });
   }, [options]);
-  return React__default.createElement(RadioContext.Provider, {
-    value: {
+  return React__default.createElement(
+    RadioContext.Provider,
+    { value: {
       labelPosition: labelPosition || "right",
       disabled,
       shape,
       value: val2State,
-      check: function check(value2) {
+      check: (value2) => {
         setVal2State(value2);
       },
-      uncheck: function uncheck() {
+      uncheck: () => {
         setVal2State("");
       }
-    }
-  }, React__default.createElement("div", _objectSpread({
-    className: classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-").concat(props.direction), props.direction), className)
-  }, rest), options !== null && options !== void 0 && options.length ? renderOptionsChildren() : children));
+    } },
+    React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
+      [`${classPrefix}-${props.direction}`]: props.direction
+    }, className) }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children)
+  );
 });
 RadioGroup.defaultProps = defaultProps;
 RadioGroup.displayName = "NutRadioGroup";