@nutui/nutui-react-taro 1.2.2-beta.0

package/dist/esm/range.taro-41ced357.js

@@ -0,0 +1,464 @@
+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, useRef, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useTouch } from './index-31152350.js';
+import { N as Notification } from './Notification-b09c89e8.js';
+import { u as useConfig } from './configprovider-18657611.js';
+/**
+  获取元素的大小及其相对于视口的位置，等价于 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 messageInstance = null;
+var options = {
+  msg: '',
+  id: '',
+  duration: 1.5,
+  center: true,
+  type: 'text',
+  customClass: '',
+  bottom: 30,
+  size: 'base',
+  icon: '',
+  textAlignCenter: true,
+  loadingRotate: true,
+  bgColor: 'rgba(0, 0, 0, .8)',
+  onClose: function onClose() {},
+  cover: false,
+  coverColor: 'rgba(0, 0, 0, 0)',
+  closeOnClickOverlay: false // 是否点击遮罩可关闭
+
+};
+
+function getInstance(props, callback) {
+  if (messageInstance) {
+    messageInstance.destroy();
+    messageInstance = null;
+  }
+
+  Notification.newInstance(props, function (notification) {
+    return callback && callback(notification);
+  });
+}
+
+function notice(opts) {
+  function close() {
+    if (messageInstance) {
+      messageInstance.destroy();
+      messageInstance = null;
+    }
+  }
+
+  var opts2 = _objectSpread(_objectSpread(_objectSpread({}, options), opts), {}, {
+    onClose: close
+  });
+
+  getInstance(opts2, function (notification) {
+    messageInstance = notification;
+  });
+}
+
+var errorMsg = function errorMsg(msg) {
+  if (!msg) {
+    console.warn('[NutUI Toast]: msg cannot be null');
+  }
+};
+
+var Toast = {
+  text: function text(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg,
+      type: 'text'
+    }, option));
+  },
+  success: function success(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg,
+      icon: 'success',
+      type: 'success'
+    }, option));
+  },
+  fail: function fail(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg,
+      icon: 'failure',
+      type: 'fail'
+    }, option));
+  },
+  loading: function loading(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg,
+      icon: 'loading',
+      type: 'loading'
+    }, option));
+  },
+  warn: function warn(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg,
+      icon: 'tips',
+      type: 'warn'
+    }, option));
+  },
+  customIcon: function customIcon(msg) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    errorMsg(msg);
+    return notice(_objectSpread({
+      msg: msg
+    }, option));
+  },
+  hide: function hide() {
+    if (messageInstance) {
+      messageInstance.destroy();
+      messageInstance = null;
+    }
+  }
+};
+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 _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  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 _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      buttonIndex = _useState2[0],
+      SetButtonIndex = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initValue = _useState4[0],
+      SetInitValue = _useState4[1];
+
+  var _useState5 = useState('start'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dragStatus = _useState6[0],
+      SetDragStatus = _useState6[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, " ").concat(locale.range.rangeText));
+        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 || '')
+  }, !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 || 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 || 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 R };

package/dist/esm/rate.taro-3d6edec3.js

@@ -0,0 +1,124 @@
+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-62bd7379.js';
+var defaultProps = {
+  count: 5,
+  modelValue: 0,
+  minimizeValue: 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,
+      minimizeValue = _defaultProps$props.minimizeValue,
+      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(Math.max(Number(modelValue), Number(minimizeValue)));
+  }, [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;
+        }
+      }
+    }
+    value = Math.max(value, Number(minimizeValue));
+    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 R };

package/dist/esm/row.taro-7afb510a.js

@@ -0,0 +1,48 @@
+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 from 'react';
+import { D as DataContext } from './UserContext-be8097d2.js';
+var defaultProps = {
+  type: '',
+  justify: 'start',
+  align: 'flex-start',
+  wrap: 'nowrap',
+  gutter: '0'
+};
+
+var Row = function Row(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      type = _defaultProps$props.type,
+      justify = _defaultProps$props.justify,
+      align = _defaultProps$props.align,
+      wrap = _defaultProps$props.wrap,
+      gutter = _defaultProps$props.gutter;
+
+  var prefixCls = 'nut-row';
+
+  var getClass = function getClass(prefix, type) {
+    return prefix ? type ? "nut-row-".concat(prefix, "-").concat(type) : '' : "nut-row-".concat(type);
+  };
+
+  var getClasses = function getClasses() {
+    return "\n    ".concat(getClass('', type), "\n    ").concat(getClass('justify', justify), "\n    ").concat(getClass('align', align), "\n    ").concat(getClass('flex', wrap), "\n    ").concat(prefixCls, "\n   ");
+  };
+
+  var parentRow = {
+    gutter: gutter
+  };
+  return React__default.createElement(DataContext.Provider, {
+    value: parentRow
+  }, React__default.createElement('div', {
+    className: getClasses()
+  }, children));
+};
+
+Row.defaultProps = defaultProps;
+Row.displayName = 'NutRow';
+export { Row as R };