@nutui/nutui-react 0.1.0-beta.1

package/dist/esm/RadioGroup.js

@@ -0,0 +1,103 @@
+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;
+  }
+
+  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 React__default.createElement(RadioContext.Provider, {
+    value: {
+      onChange: function onChange(val) {
+        setVal2State(val);
+        _onChange && _onChange(val);
+      }
+    }
+  }, React__default.createElement("div", _objectSpread({
+    className: "nut-radiogroup nut-radiogroup--".concat(props.direction)
+  }, rest), cloneChildren()));
+});
+RadioGroup.defaultProps = defaultProps;
+RadioGroup.displayName = 'NutRadioGroup';
+export { RadioGroup as default };

package/dist/esm/Range.js

@@ -0,0 +1,451 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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, useRef, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { T as Toast } from './toast-420b65b7.js';
+import '@bem-react/classname';
+import 'react-dom';
+import './icon-63c0d58f.js';
+import 'classnames';
+var MIN_DISTANCE = 10;
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+
+  return '';
+}
+
+function useTouch() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      startX = _useState2[0],
+      SetStartX = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      startY = _useState4[0],
+      SetStartY = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      deltaX = _useState6[0],
+      SetDeltaX = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      deltaY = _useState8[0],
+      SetDeltaY = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      offsetX = _useState10[0],
+      SetOffsetX = _useState10[1];
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      offsetY = _useState12[0],
+      SetOffsetY = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      direction = _useState14[0],
+      SetDirection = _useState14[1];
+
+  var isVertical = function isVertical() {
+    return direction === 'vertical';
+  };
+
+  var isHorizontal = function isHorizontal() {
+    return direction === 'horizontal';
+  };
+
+  var reset = function reset() {
+    SetDeltaX(0);
+    SetDeltaY(0);
+    SetOffsetX(0);
+    SetOffsetY(0);
+    SetDirection('');
+  };
+
+  var start = function start(event) {
+    reset();
+    SetStartX(event.touches[0].clientX);
+    SetStartY(event.touches[0].clientY);
+  };
+
+  var move = function move(event) {
+    var touch = event.touches[0];
+    var dX = touch.clientX - startX;
+    var dY = touch.clientY - startY;
+    SetDeltaX(dX);
+    SetDeltaY(dY);
+    SetOffsetX(Math.abs(dX));
+    SetOffsetY(Math.abs(dY));
+
+    if (!direction) {
+      SetDirection(getDirection(Math.abs(dX), Math.abs(dY)));
+    }
+  };
+
+  return {
+    move: move,
+    start: start,
+    reset: reset,
+    startX: startX,
+    startY: startY,
+    deltaX: deltaX,
+    deltaY: deltaY,
+    offsetX: offsetX,
+    offsetY: offsetY,
+    direction: direction,
+    isVertical: isVertical,
+    isHorizontal: isHorizontal
+  };
+}
+/**
+  获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
+  width 宽度	number
+  height 高度	number
+  top	顶部与视图窗口左上角的距离	number
+  left	左侧与视图窗口左上角的距离	number
+  right	右侧与视图窗口左上角的距离	number
+  bottom	底部与视图窗口左上角的距离	number
+ */
+
+
+function isWindow(val) {
+  return val === window;
+}
+
+var useRect = function useRect(elementRef) {
+  var element = elementRef;
+
+  if (isWindow(element)) {
+    var width = element.innerWidth;
+    var height = element.innerHeight;
+    return {
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: height,
+      width: width,
+      height: height
+    };
+  }
+
+  if (element && element.getBoundingClientRect) {
+    return element.getBoundingClientRect();
+  }
+
+  return {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  };
+};
+
+var defaultProps = {
+  range: false,
+  hiddenRange: false,
+  hiddenTag: false,
+  min: 0,
+  max: 100,
+  step: 1,
+  modelValue: 0
+};
+var startValue;
+var currentValue;
+
+var Range = function Range(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      range = _defaultProps$props.range,
+      disabled = _defaultProps$props.disabled,
+      activeColor = _defaultProps$props.activeColor,
+      inactiveColor = _defaultProps$props.inactiveColor,
+      buttonColor = _defaultProps$props.buttonColor,
+      hiddenRange = _defaultProps$props.hiddenRange,
+      hiddenTag = _defaultProps$props.hiddenTag,
+      min = _defaultProps$props.min,
+      max = _defaultProps$props.max,
+      step = _defaultProps$props.step,
+      modelValue = _defaultProps$props.modelValue,
+      button = _defaultProps$props.button,
+      change = _defaultProps$props.change,
+      dragStart = _defaultProps$props.dragStart,
+      dragEnd = _defaultProps$props.dragEnd;
+
+  var _useState15 = useState(0),
+      _useState16 = _slicedToArray(_useState15, 2),
+      buttonIndex = _useState16[0],
+      SetButtonIndex = _useState16[1];
+
+  var _useState17 = useState(),
+      _useState18 = _slicedToArray(_useState17, 2),
+      initValue = _useState18[0],
+      SetInitValue = _useState18[1];
+
+  var _useState19 = useState('start'),
+      _useState20 = _slicedToArray(_useState19, 2),
+      dragStatus = _useState20[0],
+      SetDragStatus = _useState20[1];
+
+  var touch = useTouch();
+  var root = useRef(null);
+  var rangeBem = cn('range');
+  useEffect(function () {
+    if (modelValue) {
+      if (!range && (modelValue < min || modelValue > max)) {
+        SetInitValue(0);
+        Toast.text("".concat(modelValue, "\u4E0D\u5728\u8BE5\u533A\u95F4\u5185"));
+        return;
+      }
+
+      SetInitValue(modelValue);
+    }
+  }, [modelValue]);
+
+  var scope = function scope() {
+    return Number(max) - Number(min);
+  };
+
+  var wrapperStyle = function wrapperStyle() {
+    return {
+      background: inactiveColor
+    };
+  };
+
+  var buttonStyle = function buttonStyle() {
+    return {
+      borderColor: buttonColor
+    };
+  };
+
+  var isRange = function isRange(val) {
+    return !!range && Array.isArray(val);
+  };
+
+  var calcMainAxis = function calcMainAxis() {
+    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+
+    if (isRange(modelVal)) {
+      return "".concat((modelVal[1] - modelVal[0]) * 100 / scope(), "%");
+    }
+
+    return "".concat((modelVal - Number(min)) * 100 / scope(), "%");
+  };
+
+  var calcOffset = function calcOffset() {
+    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+
+    if (isRange(modelVal)) {
+      return "".concat((modelVal[0] - Number(min)) * 100 / scope(), "%");
+    }
+
+    return "0%";
+  };
+
+  var barStyle = function barStyle() {
+    return {
+      width: calcMainAxis(),
+      left: calcOffset(),
+      background: activeColor,
+      transition: dragStatus ? 'none' : undefined
+    };
+  };
+
+  var format = function format(value) {
+    value = Math.max(+min, Math.min(value, +max));
+    return Math.round(value / +step) * +step;
+  };
+
+  var isSameValue = function isSameValue(newValue, oldValue) {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+
+  var handleOverlap = function handleOverlap(value) {
+    if (value[0] > value[1]) {
+      return value.slice(0).reverse();
+    }
+
+    return value;
+  };
+
+  var updateValue = function updateValue(value, end) {
+    if (isRange(value)) {
+      value = handleOverlap(value).map(format);
+    } else {
+      value = format(value);
+    }
+
+    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+
+    if (!isSameValue(value, modelVal)) {
+      SetInitValue(value);
+    }
+
+    if (end && !isSameValue(value, startValue)) {
+      change && change(value);
+    }
+  };
+
+  var _onTouchStart = function onTouchStart(event) {
+    if (disabled) {
+      return;
+    }
+
+    touch.start(event);
+    currentValue = initValue || initValue === 0 ? initValue : modelValue;
+
+    if (isRange(currentValue)) {
+      startValue = currentValue.map(format);
+    } else {
+      startValue = format(currentValue);
+    }
+
+    SetDragStatus('start');
+  };
+
+  var _onTouchMove = function onTouchMove(event) {
+    if (disabled || !root.current) {
+      return;
+    }
+
+    if (dragStatus === 'start') {
+      dragStart && dragStart();
+    }
+
+    touch.move(event);
+    SetDragStatus('draging');
+    var rect = useRect(root.current);
+    var delta = touch.deltaX;
+    var total = rect.width;
+    var diff = delta / total * scope();
+
+    if (isRange(startValue)) {
+      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      currentValue = startValue + diff;
+    }
+
+    updateValue(currentValue);
+  };
+
+  var _onTouchEnd = function onTouchEnd(event) {
+    if (disabled) {
+      return;
+    }
+
+    if (dragStatus === 'draging') {
+      updateValue(currentValue, true);
+      dragEnd && dragEnd();
+    }
+
+    SetDragStatus('');
+  };
+
+  var curValue = function curValue(idx) {
+    var modelVal = initValue || initValue === 0 ? initValue : modelValue;
+    var value = typeof idx === 'number' ? modelVal[idx] : modelVal;
+    return value;
+  };
+
+  return React__default.createElement("div", {
+    className: "nut-range-container ".concat(className ? className : '')
+  }, !hiddenRange ? React__default.createElement("div", {
+    className: "min"
+  }, +min) : null, React__default.createElement("div", {
+    ref: root,
+    style: wrapperStyle(),
+    className: "".concat(rangeBem(), " ").concat(disabled ? rangeBem('disabled') : '', " ").concat(!hiddenRange ? rangeBem('show-number') : '')
+  }, React__default.createElement("div", {
+    className: "nut-range-bar",
+    style: barStyle()
+  }, range ? [0, 1].map(function (item, index) {
+    return React__default.createElement("div", {
+      role: "slider",
+      key: index,
+      className: "".concat(index == 0 ? 'nut-range-button-wrapper-left' : '', "\n              ").concat(index == 1 ? 'nut-range-button-wrapper-right' : ''),
+      tabIndex: disabled ? -1 : 0,
+      "aria-valuemin": +min,
+      "aria-valuenow": curValue(index),
+      "aria-valuemax": +max,
+      "aria-orientation": "horizontal",
+      onTouchStart: function onTouchStart(e) {
+        e.preventDefault;
+
+        if (typeof index === 'number') {
+          // 实时更新当前拖动的按钮索引
+          SetButtonIndex(index);
+        }
+
+        _onTouchStart(e);
+      },
+      onTouchMove: function onTouchMove(e) {
+        _onTouchMove(e);
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        _onTouchEnd();
+      },
+      onTouchCancel: function onTouchCancel(e) {
+        _onTouchEnd();
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    }, button ? button : React__default.createElement("div", {
+      className: "nut-range-button",
+      style: buttonStyle()
+    }, !hiddenTag ? React__default.createElement("div", {
+      className: "number"
+    }, curValue(index)) : null));
+  }) : React__default.createElement("div", {
+    role: "slider",
+    className: "nut-range-button-wrapper",
+    tabIndex: disabled ? -1 : 0,
+    "aria-valuemin": +min,
+    "aria-valuenow": curValue(),
+    "aria-valuemax": +max,
+    "aria-orientation": "horizontal",
+    onTouchStart: function onTouchStart(e) {
+      _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      _onTouchEnd();
+    },
+    onTouchCancel: function onTouchCancel(e) {
+      _onTouchEnd();
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, button ? button : React__default.createElement("div", {
+    className: "nut-range-button",
+    style: buttonStyle()
+  }, !hiddenTag ? React__default.createElement("div", {
+    className: "number"
+  }, curValue()) : null)))), !hiddenRange ? React__default.createElement("div", {
+    className: "max"
+  }, +max) : null);
+};
+
+Range.defaultProps = defaultProps;
+Range.displayName = 'NutRange';
+export { Range as default };

package/dist/esm/Rate.js

@@ -0,0 +1,122 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-63c0d58f.js';
+import '@bem-react/classname';
+var defaultProps = {
+  count: 5,
+  modelValue: 0,
+  iconSize: 18,
+  activeColor: '',
+  voidColor: '',
+  checkedIcon: 'star-fill-n',
+  uncheckedIcon: 'star-n',
+  disabled: false,
+  readonly: false,
+  allowHalf: false,
+  spacing: 14
+};
+
+var Rate = function Rate(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      count = _defaultProps$props.count,
+      modelValue = _defaultProps$props.modelValue,
+      iconSize = _defaultProps$props.iconSize,
+      activeColor = _defaultProps$props.activeColor,
+      voidColor = _defaultProps$props.voidColor,
+      checkedIcon = _defaultProps$props.checkedIcon,
+      uncheckedIcon = _defaultProps$props.uncheckedIcon,
+      disabled = _defaultProps$props.disabled,
+      readonly = _defaultProps$props.readonly,
+      allowHalf = _defaultProps$props.allowHalf,
+      spacing = _defaultProps$props.spacing,
+      change = _defaultProps$props.change;
+
+  var b = cn('rate');
+  var bi = cn('rate-item');
+
+  var _useState = useState([1, 2, 3, 4, 5]),
+      _useState2 = _slicedToArray(_useState, 2),
+      countArray = _useState2[0],
+      setCountArray = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      score = _useState4[0],
+      setScore = _useState4[1];
+
+  useEffect(function () {
+    var tmp = [];
+
+    for (var i = 1; i <= Number(count); i++) {
+      tmp.push(i);
+    }
+
+    setCountArray(tmp);
+  }, [count]);
+  useEffect(function () {
+    setScore(Number(modelValue));
+  }, [modelValue]);
+
+  var pxCheck = function pxCheck(value) {
+    return isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+  };
+
+  var _onClick = function onClick(e, index) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled || readonly) return;
+    var value = 0;
+    if (index === 1 && score === index) ;else {
+      value = index;
+
+      if (allowHalf) {
+        if (e !== null && e !== void 0 && e.target.className.includes('__icon--half')) {
+          value -= 0.5;
+        }
+      }
+    }
+    setScore(value);
+    change && change(value);
+  };
+
+  return React__default.createElement("div", {
+    className: b()
+  }, countArray.map(function (n) {
+    return React__default.createElement("div", {
+      className: bi(),
+      key: n,
+      onClick: function onClick(event) {
+        return _onClick(event, n);
+      },
+      style: {
+        marginRight: pxCheck(spacing)
+      }
+    }, React__default.createElement(Icon, {
+      size: iconSize,
+      className: "".concat(bi('icon'), " ").concat(disabled || n > score ? bi('icon--disabled') : ''),
+      name: n <= score ? checkedIcon : uncheckedIcon,
+      color: n <= score ? activeColor : voidColor
+    }), allowHalf && score > n - 1 && React__default.createElement(Icon, {
+      className: "".concat(bi('icon'), " ").concat(bi('icon--half')),
+      color: n <= score ? activeColor : voidColor,
+      size: iconSize,
+      name: checkedIcon
+    }), allowHalf && score < n - 1 && React__default.createElement(Icon, {
+      className: "".concat(bi('icon'), " ").concat(bi('icon--disabled'), " ").concat(bi('icon--half')),
+      color: voidColor,
+      size: iconSize,
+      name: uncheckedIcon
+    }));
+  }));
+};
+
+Rate.defaultProps = defaultProps;
+Rate.displayName = 'NutRate';
+export { Rate as default };