@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/Radio.js

@@ -1,130 +1,10 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "disabled", "checked", "shape", "textPosition", "value", "iconName", "iconActiveName", "iconSize", "onChange"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useContext, useEffect } from 'react';
-import Icon from './Icon.js';
-import { R as RadioContext } from './context-aa058329.js';
-import RadioGroup from './RadioGroup.js';
-var defaultProps = {
-  disabled: false,
-  checked: false,
-  shape: 'round',
-  value: '',
-  textPosition: 'right',
-  iconName: 'check-normal',
-  iconActiveName: 'check-checked',
-  iconSize: 18,
-  onChange: function onChange(e) {}
+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
 };
-
-var Radio = function Radio(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children;
-
-  var className = props.className,
-      disabled = props.disabled,
-      checked = props.checked,
-      shape = props.shape,
-      textPosition = props.textPosition,
-      value = props.value,
-      iconName = props.iconName,
-      iconActiveName = props.iconActiveName,
-      iconSize = props.iconSize,
-      onChange = props.onChange,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var componentName = 'nut-radio';
-
-  var _useState = useState(checked),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkedStatement = _useState2[0],
-      setCheckedStatement = _useState2[1];
-
-  var _useState3 = useState(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      valueStatement = _useState4[0],
-      setValueStatement = _useState4[1];
-
-  var _useState5 = useState(disabled),
-      _useState6 = _slicedToArray(_useState5, 2),
-      disabledStatement = _useState6[0],
-      setDisabledStatement = _useState6[1];
-
-  var context = useContext(RadioContext);
-  useEffect(function () {
-    setDisabledStatement(disabled);
-    setValueStatement(value);
-    setCheckedStatement(checked);
-  }, [disabled, value, checked]);
-
-  var renderLabel = function renderLabel() {
-    return React__default.createElement("div", {
-      className: "".concat(componentName, "__label ").concat(disabledStatement ? "".concat(componentName, "__label--disabled") : '')
-    }, children);
-  };
-
-  var renderButton = function renderButton() {
-    return React__default.createElement("div", {
-      className: "".concat(componentName, "__button ").concat(checkedStatement && "".concat(componentName, "__button--active"), " ").concat(disabledStatement ? "".concat(componentName, "__button--disabled") : '')
-    }, children);
-  };
-
-  var color = function color() {
-    if (disabledStatement) {
-      return 'nut-radio__icon--disable';
-    }
-
-    if (checkedStatement) {
-      return 'nut-radio__icon';
-    }
-
-    return 'nut-radio__icon--unchecked';
-  };
-
-  var renderIcon = function renderIcon() {
-    var iconName = props.iconName,
-        iconSize = props.iconSize,
-        iconActiveName = props.iconActiveName;
-    return React__default.createElement(Icon, {
-      name: checkedStatement ? iconActiveName : iconName,
-      size: iconSize,
-      className: color()
-    });
-  };
-
-  var renderRadioItem = function renderRadioItem() {
-    if (shape === 'button') {
-      return renderButton();
-    }
-
-    if (reverseState) {
-      return [renderLabel(), renderIcon()];
-    }
-
-    return [renderIcon(), renderLabel()];
-  };
-
-  var handleClick = function handleClick(e) {
-    if (disabledStatement || checkedStatement) return;
-    setCheckedStatement(!checkedStatement);
-    onChange && onChange(e);
-    context && context.onChange(valueStatement);
-  };
-
-  var reverseState = textPosition === 'left';
-  return React__default.createElement("div", _objectSpread({
-    className: "nut-radio ".concat(className),
-    onClick: handleClick
-  }, rest), renderRadioItem());
-};
-
-Radio.defaultProps = defaultProps;
-Radio.displayName = 'NutRadio';
-Radio.RadioGroup = RadioGroup;
-export { Radio as default };

package/dist/esm/RadioGroup/style/css.js

@@ -0,0 +1 @@
+import './style.css'

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

@@ -1,2 +1,2 @@
 
-require('../../../packages/radiogroup/radiogroup.scss')
+import '../../../packages/radiogroup/radiogroup.scss'

package/dist/esm/RadioGroup/style/style.css

@@ -0,0 +1 @@
+.nut-radiogroup .nut-radio{margin:var(--nutui-radiogroup-radio-margin, 0 20px 5px 0)}.nut-radiogroup .nut-radio__label{margin:var(--nutui-radiogroup-radio-label-margin, 0 5px 0 5px)}.nut-radiogroup .nut-radio__button{background-color:#f6f7f9}.nut-radiogroup--vertical .nut-radio.nut-radio--reverse{width:100%;justify-content:space-between}.nut-radiogroup--vertical .nut-radio__button{border:1px solid #f6f7f9}.nut-radiogroup--vertical .nut-radio__button--active{border-color:var(--nutui-radio-label-button-border-color, var(--nutui-brand-color, #fa2c19));background-color:var(--nutui-radio-label-button-background, rgba(250, 44, 25, .05))}.nut-radiogroup--horizontal .nut-radio{display:inline-flex}.nut-radiogroup--horizontal .nut-radio__button{border:1px solid var(--nutui-gray-6, #ffffff)}.nut-radiogroup--horizontal .nut-radio__button--active{border-color:var(--nutui-radio-label-button-border-color, var(--nutui-brand-color, #fa2c19));background-color:var(--nutui-radio-label-button-background, rgba(250, 44, 25, .05))}.nut-radiogroup .nut-radio__button--active.nut-radio__button--disabled{background:var(--nutui-radio-button-disabled-active-background, rgba(0, 0, 0, .15));color:var(--nutui-radio-button-disabled-active-color, rgba(0, 0, 0, .25));border:1px solid var(--nutui-radio-button-disabled-active-border-color, rgba(211, 211, 211, .15))}

package/dist/esm/RadioGroup.js

@@ -1,103 +1,83 @@
 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"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useEffect } from 'react';
-import { R as RadioContext } from './context-aa058329.js';
-import { c as cn } from './bem-893ad28d.js';
-import '@bem-react/classname';
-var defaultProps = {
-  value: null,
-  textPosition: 'right',
-  onChange: function onChange(value) {},
-  direction: 'vertical'
-};
-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,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      val2State = _useState2[0],
-      setVal2State = _useState2[1]; // useImperativeHandle(ref, () => ({
-  //   toggleAll(state: boolean) {
-  //     console.log(state)
-  //     if (state === false) {
-  //       setInnerValue([])
-  //     } else {
-  //       const childrenLabel: string[] = []
-  //       React.Children.map(children, (child) => {
-  //         const childProps = (child as any).props
-  //         childrenLabel.push(childProps.label || (child as any).children)
-  //       })
-  //       setInnerValue(childrenLabel)
-  //     }
-  //   },
-  // }))
-
-
-  useEffect(function () {
-    setVal2State(value);
-  }, [value]); // function handleChildChange(state: boolean, label: string) {
-  //   if (innerValue) {
-  //     let clippedValue = []
-  //     if (state) {
-  //       clippedValue = [...innerValue, label]
-  //     } else {
-  //       innerValue?.splice(innerValue?.indexOf(label), 1)
-  //       clippedValue = [...innerValue]
-  //     }
-  //     setInnerValue(clippedValue)
-  //     onChange && onChange(clippedValue)
-  //   }
-  // }
-
-  function validateChildChecked(child) {
-    if (val2State === null) return false;
-    return val2State === child.props.value;
+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) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
-
-  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: textPosition,
-        checked: childChecked // onChange: handleChildChange,
-
-      });
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
+  return target;
+}
+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";
+import "@nutui/icons-react";
+import "./RadioGroup.js";
+import "./typings.js";
+var defaultProps = {
+  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, 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, 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
+      }));
+    });
+  }, [options]);
   return React__default.createElement(RadioContext.Provider, {
     value: {
-      onChange: function onChange(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)
-  }, rest), 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';
-export { RadioGroup as default };
+RadioGroup.displayName = "NutRadioGroup";
+export {
+  RadioGroup as default
+};

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

@@ -0,0 +1 @@
+import './style.css'

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

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

package/dist/esm/Range/style/style.css

@@ -0,0 +1 @@
+.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-color, var(--nutui-gray-1, #1a1a1a));user-select:none}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0px;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0px;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translateY(-50%)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0px;left:30px;width:11px;height:11px;margin-left:0;border-radius:50%;background:var(--nutui-range-inactive-color, #fa958c)}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19))}.nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, #fa958c);border-radius:2px;cursor:pointer}.nut-range:before{position:absolute;top:-8px;right:0;bottom:-8px;left:0;content:""}.nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-brand-text-color, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-brand-color, #fa2c19));outline:none}.nut-range-button-wrapper,.nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-color, var(--nutui-gray-1, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-disabled .nut-range-button-wrapper,.nut-range-disabled .nut-range-button-wrapper-left,.nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translate(-50%)}.nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0px;border-radius:50%;background:var(--nutui-range-inactive-color, #fa958c)}.nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19))}