@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/esm/PullToRefresh.js

@@ -0,0 +1,277 @@
+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(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 { 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-5f85dee8.js';
+function bound(position, min, max) {
+  var ret = position;
+  if (min !== undefined) {
+    ret = Math.max(position, min);
+  }
+  if (max !== undefined) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}
+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] !== undefined ? arguments[4] : 0.15;
+  if (constant === 0) return bound(position, min, max);
+  if (position < min) return -rubberband(min - position, dimension, constant) + min;
+  if (position > max) return +rubberband(position - max, dimension, constant) + max;
+  return position;
+}
+var sleep = function sleep(time) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, time);
+  });
+};
+var passiveSupported = false;
+if (canUseDom) {
+  try {
+    var opts = Object.defineProperty({}, 'passive', {
+      get: function get() {
+        passiveSupported = true;
+      }
+    });
+    window.addEventListener('test-passive-supported', null, opts);
+  } catch (e) {
+    console.log(e);
+  }
+}
+var defaultProps = {
+  className: '',
+  style: {},
+  pullingText: '',
+  canReleaseText: '',
+  refreshingText: '',
+  completeText: '',
+  completeDelay: 500,
+  disabled: false,
+  headHeight: 40,
+  threshold: 60,
+  onRefresh: function onRefresh() {}
+};
+var PullToRefresh = function PullToRefresh(p) {
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var props = _objectSpread(_objectSpread(_objectSpread({}, 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 ? void 0 : _elementRef$current.addEventListener('touchmove', function () {});
+  }, []);
+  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);
+  }
+  useDrag(function (state) {
+    if (status === 'refreshing' || status === 'complete') return;
+    var event = state.event;
+    // 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
+    if (state.last) {
+      pullingRef.current = false;
+      if (status === 'canRelease') {
+        doRefresh();
+      } else {
+        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];
+    // 第一个事件，并且手指位置大于0
+    if (state.first && y > 0) {
+      var target = state.event.target;
+      if (!target || !(target instanceof Element)) return;
+      var scrollParent = getScrollParent(target);
+      while (true) {
+        if (!scrollParent) return;
+        var scrollTop = getScrollTop(scrollParent);
+        if (scrollTop > 0) {
+          return;
+        }
+        // 查找到 window 说明到顶了
+        if (scrollParent instanceof Window) {
+          break;
+        }
+        // 递归查找
+        scrollParent = getScrollParent(scrollParent.parentNode);
+      }
+      pullingRef.current = true;
+    }
+    if (!pullingRef.current) return;
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+    var height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    api.start({
+      height: height
+    });
+    setStatus(height > threshold ? 'canRelease' : 'pulling');
+  }, {
+    pointer: {
+      touch: true
+    },
+    axis: 'y',
+    target: elementRef,
+    enabled: !props.disabled,
+    eventOptions: passiveSupported ? {
+      passive: false
+    } : false
+  });
+  var renderStatusText = function renderStatusText() {
+    if (props.renderText) {
+      var _props$renderText;
+      return (_props$renderText = props.renderText) === null || _props$renderText === void 0 ? void 0 : _props$renderText.call(props, status);
+    }
+    if (status === 'pulling') return props.pullingText;
+    if (status === 'canRelease') return props.canReleaseText;
+    if (status === 'refreshing') return props.refreshingText;
+    if (status === 'complete') return props.completeText;
+    return '';
+  };
+  return React__default.createElement(animated.div, {
+    ref: elementRef,
+    className: "nut-pulltorefresh ".concat(props.className),
+    style: props.style
+  }, React__default.createElement(animated.div, {
+    style: springStyles,
+    className: "nut-pulltorefresh-head"
+  }, React__default.createElement("div", {
+    className: "nut-pulltorefresh-head-content",
+    style: {
+      height: headHeight
+    }
+  }, renderStatusText())), React__default.createElement("div", {
+    className: "nut-pulltorefresh-content"
+  }, props.children));
+};
+PullToRefresh.defaultProps = defaultProps;
+PullToRefresh.displayName = 'NutPullToRefresh';
+export { PullToRefresh as default };

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

@@ -0,0 +1,3 @@
+import '../../Icon/style'
+import '../../RadioGroup/style'
+import '../../../packages/radio/radio.scss'

package/dist/esm/Radio.js

@@ -0,0 +1,6 @@
+import { R as Radio } from './radio-9f141e6b.js';
+import 'react';
+import './Icon.js';
+import './RadioGroup.js';
+import './typings-f27b58f4.js';
+export { Radio as default };

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/radiogroup/radiogroup.scss'

package/dist/esm/RadioGroup.js

@@ -0,0 +1,123 @@
+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"];
+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, useCallback } from 'react';
+import { R as Radio, a as RadioContext } from './radio-9f141e6b.js';
+import { c as cn } from './bem-3b438e61.js';
+import './Icon.js';
+import './RadioGroup.js';
+import './typings-f27b58f4.js';
+import '@bem-react/classname';
+var defaultProps = {
+  value: null,
+  textPosition: 'right',
+  onChange: function onChange(value) {},
+  direction: 'vertical',
+  options: []
+};
+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];
+  // 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 validateChecked(value) {
+    if (val2State === null) return false;
+    return val2State === 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,
+      });
+    });
+  }
+
+  var renderOptionsChildren = useCallback(function () {
+    return options === null || options === void 0 ? void 0 : options.map(function (_ref) {
+      var label = _ref.label,
+        value = _ref.value,
+        disabled = _ref.disabled,
+        onChange = _ref.onChange,
+        rest = _objectWithoutProperties(_ref, _excluded2);
+      var childChecked = validateChecked(value);
+      return React__default.createElement(Radio, _objectSpread(_objectSpread({
+        key: value === null || value === void 0 ? void 0 : value.toString(),
+        children: label,
+        value: value,
+        disabled: disabled,
+        onChange: onChange
+      }, rest), {}, {
+        textPosition: textPosition,
+        checked: childChecked
+      }));
+    });
+  }, [val2State, options]);
+  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, " ").concat(className || '')
+  }, rest), options !== null && options !== void 0 && options.length ? renderOptionsChildren() : cloneChildren()));
+});
+RadioGroup.defaultProps = defaultProps;
+RadioGroup.displayName = 'NutRadioGroup';
+export { RadioGroup as default };

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

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