@nutui/nutui-react 0.1.0-beta.1

package/dist/esm/Pagination.js

@@ -0,0 +1,199 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["modelValue", "mode", "prevText", "nextText", "pageCount", "totalItems", "itemsPerPage", "showPageSize", "onChange", "updatecurrent", "forceEllipses", "pageNodeRender", "defaultValue", "className"];
+
+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 '@bem-react/classname';
+var defaultProps = {
+  defaultValue: 1,
+  mode: 'multi',
+  prevText: '上一页',
+  nextText: '下一页',
+  pageCount: '',
+  totalItems: '0',
+  itemsPerPage: '10',
+  showPageSize: '5',
+  forceEllipses: false,
+  className: '',
+  pageNodeRender: function pageNodeRender(item) {
+    return item.text;
+  }
+};
+
+var Pagination = function Pagination(props) {
+  _objectSpread(_objectSpread({}, defaultProps), props);
+
+  var modelValue = props.modelValue,
+      mode = props.mode,
+      prevText = props.prevText,
+      nextText = props.nextText,
+      pageCount = props.pageCount,
+      totalItems = props.totalItems,
+      itemsPerPage = props.itemsPerPage,
+      showPageSize = props.showPageSize,
+      onChange = props.onChange,
+      updatecurrent = props.updatecurrent,
+      forceEllipses = props.forceEllipses,
+      pageNodeRender = props.pageNodeRender,
+      defaultValue = props.defaultValue,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pages = _useState4[0],
+      setPages = _useState4[1];
+
+  var _useState5 = useState(Number(pageCount)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      countRef = _useState6[0],
+      setCountRef = _useState6[1];
+
+  var paginationBem = cn('pagination'); //计算页面的数量
+
+  var computedCountRef = function computedCountRef() {
+    var num = Number(pageCount) || Math.ceil(Number(totalItems) / Number(itemsPerPage));
+    return isNaN(num) ? 1 : Math.max(1, num);
+  }; //生成pages数组，用来遍历
+
+
+  var computedPages = function computedPages(_currentPage, _countRef) {
+    if (mode == 'simple') return [];
+    var items = [];
+    var pageCount = _countRef || countRef; //总的页面数量
+
+    var pageSize = Number(showPageSize); //展示的页面个数
+
+    var _current = _currentPage || Number(currentPage); // 当前页
+
+
+    var startPage = 1;
+    var endPage = pageCount;
+    var partialShow = pageCount > pageSize;
+
+    if (partialShow) {
+      //选中的page在展示的page中间
+      startPage = Math.max(_current - Math.floor(pageSize / 2), 1);
+      endPage = startPage + pageSize - 1;
+
+      if (endPage > pageCount) {
+        endPage = pageCount;
+        startPage = endPage - pageSize + 1;
+      }
+    } //遍历生成数组
+
+
+    for (var i = startPage; i <= endPage; i++) {
+      var page = setPage(i, i, _current == i);
+      items.push(page);
+    } //判断是否有折叠
+
+
+    if (partialShow && pageSize > 0 && forceEllipses) {
+      if (startPage > 1) {
+        var prevPage = setPage(startPage - 1, '...');
+        items.unshift(prevPage);
+      }
+
+      if (endPage < pageCount) {
+        var nextPage = setPage(endPage + 1, '...');
+        items.push(nextPage);
+      }
+    }
+
+    return items;
+  }; //点击选择page
+
+
+  var selectPage = function selectPage(curPage, isSelect) {
+    if (curPage > countRef || curPage < 1) return; // 是否传入modelValue
+
+    if (!('modelValue' in props)) {
+      setCurrent(Number(curPage));
+
+      if (curPage != currentPage) {
+        setPages(computedPages(curPage));
+      }
+    }
+
+    if (curPage != currentPage) {
+      updatecurrent && updatecurrent(curPage);
+    }
+
+    if (isSelect) onChange && onChange(curPage);
+  }; //set page 对象
+
+
+  var setPage = function setPage(number, text, active) {
+    return {
+      number: number,
+      text: text,
+      active: active
+    };
+  };
+
+  useEffect(function () {
+    // 初始化 判断是否传入值 计算 当前页，总页数，生成子节点
+    var currentValue = props.defaultValue || 1;
+
+    if ('modelValue' in props) {
+      currentValue = Number(props.modelValue);
+    }
+
+    var pageCount = computedCountRef();
+    setCountRef(pageCount);
+    setPages(computedPages(currentValue, pageCount));
+  }, []);
+
+  if ('modelValue' in props) {
+    var current = props.modelValue ? Number(props.modelValue) : 1;
+
+    if (current !== currentPage) {
+      setCurrent(current);
+      setPages(computedPages(Number(current)));
+    }
+  }
+
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(paginationBem(''), " ").concat(className)
+  }, rest), React__default.createElement("div", {
+    className: "".concat(paginationBem('prev'), "  ").concat(mode == 'multi' ? '' : 'simple-border', " ").concat(currentPage == 1 ? 'disabled' : ''),
+    onClick: function onClick(e) {
+      return selectPage(Number(currentPage) - 1, true);
+    }
+  }, prevText), mode == 'multi' ? React__default.createElement("div", {
+    className: "".concat(paginationBem('contain'))
+  }, pages.map(function (item, index) {
+    return React__default.createElement("div", {
+      key: index + 'pagination',
+      className: "".concat(paginationBem('item'), " ").concat(item.active ? 'active' : ''),
+      onClick: function onClick(e) {
+        return !item.active ? selectPage(item.number, true) : '';
+      }
+    }, pageNodeRender ? pageNodeRender(item) : item.text);
+  })) : '', mode == 'simple' ? React__default.createElement("div", {
+    className: "".concat(paginationBem('contain'))
+  }, React__default.createElement("div", {
+    className: "".concat(paginationBem('simple'))
+  }, currentPage, "/", countRef)) : '', React__default.createElement("div", {
+    className: "".concat(paginationBem('next'), "  ").concat(Number(currentPage) >= countRef ? 'disabled' : ''),
+    onClick: function onClick(e) {
+      return selectPage(Number(currentPage) + 1, true);
+    }
+  }, nextText));
+};
+
+Pagination.defaultProps = defaultProps;
+Pagination.displayName = 'NutPagination';
+export { Pagination as default };

package/dist/esm/Popup.js

@@ -0,0 +1,195 @@
+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 { CSSTransition } from 'react-transition-group';
+import { d as defaultOverlayProps } from './overlay-418bcf84.js';
+import Icon from './Icon.js';
+import Overlay from './Overlay.js';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+
+var defaultProps = _objectSpread({
+  position: 'center',
+  transition: '',
+  style: {},
+  popClass: '',
+  closeable: false,
+  closeIconPosition: 'top-right',
+  closeIcon: 'close',
+  destroyOnClose: true,
+  // teleport: 'body',
+  overlay: true,
+  round: false,
+  onOpen: function onOpen() {},
+  onClose: function onClose() {},
+  onClick: function onClick(e) {},
+  onOpened: function onOpened(e) {},
+  onClosed: function onClosed(e) {},
+  onClickOverlay: function onClickOverlay(e) {},
+  onClickCloseIcon: function onClickCloseIcon(e) {}
+}, defaultOverlayProps);
+
+var _zIndex = 2000;
+
+var Popup = function Popup(props) {
+  var _classNames;
+
+  var children = props.children,
+      visible = props.visible,
+      closeOnClickOverlay = props.closeOnClickOverlay,
+      overlayStyle = props.overlayStyle,
+      zIndex = props.zIndex,
+      lockScroll = props.lockScroll,
+      duration = props.duration,
+      closeable = props.closeable,
+      closeIconPosition = props.closeIconPosition,
+      closeIcon = props.closeIcon,
+      style = props.style,
+      transition = props.transition,
+      round = props.round,
+      position = props.position,
+      popClass = props.popClass,
+      destroyOnClose = props.destroyOnClose,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      onClickOverlay = props.onClickOverlay,
+      onClickCloseIcon = props.onClickCloseIcon,
+      onOpened = props.onOpened,
+      onClosed = props.onClosed,
+      onClick = props.onClick;
+
+  var _useState = useState(zIndex ? zIndex : _zIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+
+  var _useState3 = useState(visible),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerVisible = _useState4[0],
+      setInnerVisible = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showChildren = _useState6[0],
+      setShowChildren = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      transitionName = _useState8[0],
+      setTransitionName = _useState8[1];
+
+  var b = cn('popup');
+  var baseStyle = {
+    zIndex: index,
+    animationDuration: "".concat(duration, "s")
+  };
+
+  var overlayStyles = _objectSpread(_objectSpread({}, overlayStyle), baseStyle);
+
+  var popStyles = _objectSpread(_objectSpread({}, style), baseStyle);
+
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, 'round', round), _defineProperty(_classNames, "popup-".concat(position), true), _defineProperty(_classNames, "".concat(popClass), true), _classNames), b(''));
+  var closeClasses = classNames(_defineProperty({
+    'nutui-popup__close-icon': true
+  }, "nutui-popup__close-icon--".concat(closeIconPosition), true));
+
+  var open = function open() {
+    if (!innerVisible) {
+      // if(zIndex !== undefined) {
+      //   _zIndex = +zIndex;
+      // }
+      setInnerVisible(true);
+      setIndex(++_zIndex);
+    }
+
+    if (destroyOnClose) {
+      setShowChildren(true);
+    }
+
+    onOpen && onOpen();
+  };
+
+  var close = function close() {
+    console.log('close', innerVisible, visible);
+
+    if (innerVisible) {
+      setInnerVisible(false);
+
+      if (destroyOnClose) {
+        setTimeout(function () {
+          setShowChildren(false);
+          onClose && onClose();
+        }, Number(duration) * 1000);
+      }
+    }
+  };
+
+  var onHandleClickOverlay = function onHandleClickOverlay(e) {
+    if (closeOnClickOverlay) {
+      onClickOverlay && onClickOverlay(e);
+      close();
+    }
+  };
+
+  var onHandleClick = function onHandleClick(e) {
+    onClick && onClick(e);
+  };
+
+  var onHandleClickCloseIcon = function onHandleClickCloseIcon(e) {
+    onClickCloseIcon && onClickCloseIcon(e);
+    close();
+  };
+
+  var onHandleOpened = function onHandleOpened(e) {
+    onOpened && onOpened(e);
+  };
+
+  var onHandleClosed = function onHandleClosed(e) {
+    onClosed && onClosed(e);
+  };
+
+  useEffect(function () {
+    console.log('popup', visible);
+    visible && open();
+    !visible && close();
+  }, [visible]);
+  useEffect(function () {
+    setTransitionName(transition ? transition : "popup-slide-".concat(position));
+  }, [position]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Overlay, {
+    style: overlayStyles,
+    visible: innerVisible,
+    closeOnClickOverlay: closeOnClickOverlay,
+    zIndex: zIndex,
+    lockScroll: lockScroll,
+    duration: duration,
+    onClick: onHandleClickOverlay
+  }), React__default.createElement(CSSTransition, {
+    classNames: transitionName,
+    unmountOnExit: true,
+    timeout: 500,
+    "in": innerVisible,
+    onEntered: onHandleOpened,
+    onExited: onHandleClosed
+  }, React__default.createElement("div", {
+    style: popStyles,
+    className: classes,
+    onClick: onHandleClick
+  }, showChildren ? children : '', closeable ? React__default.createElement("div", {
+    className: closeClasses,
+    onClick: onHandleClickCloseIcon
+  }, React__default.createElement(Icon, {
+    name: closeIcon,
+    size: "12px"
+  })) : '')));
+};
+
+Popup.defaultProps = defaultProps;
+Popup.displayName = 'NutPopup';
+export { Popup as default };

package/dist/esm/Price.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["price", "needSymbol", "symbol", "decimalDigits", "thousands", "className"];
+
+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 { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  price: 0,
+  needSymbol: true,
+  symbol: '&yen;',
+  decimalDigits: 2,
+  thousands: false,
+  className: ''
+};
+
+var Price = function Price(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      price = _defaultProps$props.price,
+      needSymbol = _defaultProps$props.needSymbol,
+      symbol = _defaultProps$props.symbol,
+      decimalDigits = _defaultProps$props.decimalDigits,
+      thousands = _defaultProps$props.thousands,
+      className = _defaultProps$props.className,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('price');
+
+  var showSymbol = function showSymbol() {
+    return {
+      __html: (needSymbol ? symbol : '') || ''
+    };
+  };
+
+  var checkPoint = function checkPoint(price) {
+    return String(price).indexOf('.') > 0;
+  };
+
+  var formatThousands = function formatThousands(num) {
+    if (Number(num) == 0) {
+      num = 0;
+    }
+
+    if (checkPoint(num)) {
+      num = Number(num).toFixed(decimalDigits);
+      num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
+    } else {
+      num = num.toString();
+    }
+
+    if (thousands) {
+      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+    } else {
+      return num;
+    }
+  };
+
+  var formatDecimal = function formatDecimal(decimalNum) {
+    if (Number(decimalNum) == 0) {
+      decimalNum = 0;
+    }
+
+    if (checkPoint(decimalNum)) {
+      decimalNum = Number(decimalNum).toFixed(decimalDigits);
+      decimalNum = typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1];
+    } else {
+      decimalNum = 0;
+    }
+
+    var result = '0.' + decimalNum;
+    var resultFixed = Number(result).toFixed(decimalDigits);
+    return String(resultFixed).substring(2, resultFixed.length);
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className)
+  }, rest), needSymbol ? React__default.createElement("div", {
+    className: "".concat(b('symbol')),
+    dangerouslySetInnerHTML: showSymbol()
+  }) : null, React__default.createElement("div", {
+    className: "".concat(b('big'))
+  }, formatThousands(price)), React__default.createElement("div", {
+    className: "".concat(b('point'))
+  }, "."), React__default.createElement("div", {
+    className: "".concat(b('small'))
+  }, formatDecimal(price)));
+};
+
+Price.defaultProps = defaultProps;
+Price.displayName = 'NutPrice';
+export { Price as default };

package/dist/esm/Radio.js

@@ -0,0 +1,111 @@
+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 { I as Icon } from './icon-63c0d58f.js';
+import { R as RadioContext } from './context-aa058329.js';
+import RadioGroup from './RadioGroup.js';
+import './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  disabled: false,
+  checked: false,
+  shape: 'round',
+  value: '',
+  textPosition: 'right',
+  iconName: 'check-normal',
+  iconActiveName: 'check-checked',
+  iconSize: 18,
+  onChange: function onChange(e) {}
+};
+
+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() {
+    return !disabledStatement ? checkedStatement ? 'nut-radio__icon' : 'nut-radio__icon--unchecked' : 'nut-radio__icon--disable';
+  };
+
+  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 handleClick = function handleClick(e) {
+    setCheckedStatement(!checkedStatement);
+    props.onChange && props.onChange(e);
+    context && context.onChange(valueStatement);
+  };
+
+  var reverseState = textPosition === 'left';
+  return React__default.createElement("div", _objectSpread({
+    className: "nut-radio ".concat(className),
+    onClick: handleClick
+  }, rest), props.shape == 'button' ? renderButton() : reverseState ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()]);
+};
+
+Radio.defaultProps = defaultProps;
+Radio.displayName = 'NutRadio';
+Radio.RadioGroup = RadioGroup;
+export { Radio as default };