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

package/dist/esm/Pagination.js

@@ -1,203 +1,129 @@
 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 { useConfig } from './ConfigProvider.js';
-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 _excluded = ["value", "mode", "prev", "next", "total", "pageSize", "itemSize", "onChange", "ellipse", "itemRender", "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);
   }
-};
-
-var Pagination = function Pagination(props) {
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  _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 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, { useMemo } from "react";
+import classNames from "classnames";
+import { useConfig } from "./ConfigProvider.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  defaultValue: 1,
+  mode: "multi",
+  prev: null,
+  next: null,
+  total: 50,
+  pageSize: 10,
+  itemSize: 5,
+  ellipse: false
+});
+var Pagination = function Pagination2(props) {
+  var _useConfig = useConfig(), locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), value = _defaultProps$props.value, mode = _defaultProps$props.mode, prev = _defaultProps$props.prev, next = _defaultProps$props.next, total = _defaultProps$props.total, pageSize = _defaultProps$props.pageSize, itemSize = _defaultProps$props.itemSize, onChange = _defaultProps$props.onChange, ellipse = _defaultProps$props.ellipse, itemRender = _defaultProps$props.itemRender, defaultValue = _defaultProps$props.defaultValue, className = _defaultProps$props.className, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-pagination";
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 1,
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), currentPage = _usePropsValue2[0], setCurrentPage = _usePropsValue2[1];
+  var pageCount = useMemo(function() {
+    var num = Math.ceil(total / pageSize);
     return Number.isNaN(num) ? 1 : Math.max(1, num);
-  }; // 生成pages数组，用来遍历
-
-
-  var computedPages = function computedPages(_currentPage, _countRef) {
-    if (mode === 'simple') return [];
+  }, [total, pageSize]);
+  var pages = useMemo(function() {
     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;
-
+    var partialShow = pageCount > itemSize;
     if (partialShow) {
-      // 选中的page在展示的page中间
-      startPage = Math.max(_current - Math.floor(pageSize / 2), 1);
-      endPage = startPage + pageSize - 1;
-
+      startPage = Math.max(currentPage - Math.floor(itemSize / 2), 1);
+      endPage = startPage + itemSize - 1;
       if (endPage > pageCount) {
         endPage = pageCount;
-        startPage = endPage - pageSize + 1;
+        startPage = endPage - itemSize + 1;
       }
-    } // 遍历生成数组
-
-
+    }
     for (var i = startPage; i <= endPage; i++) {
-      var page = setPage(i, i, _current === i);
-      items.push(page);
-    } // 判断是否有折叠
-
-
-    if (partialShow && pageSize > 0 && forceEllipses) {
+      items.push({
+        number: i,
+        text: i
+      });
+    }
+    if (partialShow && itemSize > 0 && ellipse) {
       if (startPage > 1) {
-        var prevPage = setPage(startPage - 1, '...');
-        items.unshift(prevPage);
+        items.unshift({
+          number: startPage - 1,
+          text: "..."
+        });
       }
-
       if (endPage < pageCount) {
-        var nextPage = setPage(endPage + 1, '...');
-        items.push(nextPage);
+        items.push({
+          number: endPage + 1,
+          text: "..."
+        });
       }
     }
-
     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
-    };
+  }, [currentPage, itemSize, pageCount]);
+  var handleSelectPage = function handleSelectPage2(curPage) {
+    if (curPage > pageCount || curPage < 1)
+      return;
+    setCurrentPage(curPage);
   };
-
-  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)
+    className: classNames(classPrefix, className)
   }, rest), React__default.createElement("div", {
-    className: "".concat(paginationBem('prev'), "  ").concat(mode === 'multi' ? '' : 'simple-border', " ").concat(currentPage === 1 ? 'disabled' : ''),
+    className: classNames("".concat(classPrefix, "__prev"), mode === "multi" ? "" : "simple-border", currentPage === 1 ? "disabled" : ""),
     onClick: function onClick(e) {
-      return selectPage(Number(currentPage) - 1, true);
+      return handleSelectPage(currentPage - 1);
     }
-  }, prevText || locale.pagination.prev), mode === 'multi' ? React__default.createElement("div", {
-    className: "".concat(paginationBem('contain'))
-  }, pages.map(function (item, index) {
+  }, prev || locale.pagination.prev), mode === "multi" && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__contain")
+  }, pages.map(function(item, index) {
     return React__default.createElement("div", {
       key: "".concat(index, "pagination"),
-      className: "".concat(paginationBem('item'), " ").concat(item.active ? 'active' : ''),
+      className: classNames("".concat(classPrefix, "__item"), {
+        active: item.number === currentPage
+      }),
       onClick: function onClick(e) {
-        return !item.active ? selectPage(item.number, true) : '';
+        item.number !== currentPage && handleSelectPage(item.number);
       }
-    }, pageNodeRender ? pageNodeRender(item) : item.text);
-  })) : '', mode === 'simple' ? React__default.createElement("div", {
-    className: "".concat(paginationBem('contain'))
+    }, itemRender ? itemRender(item) : item.text);
+  })), mode === "simple" && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__contain")
   }, React__default.createElement("div", {
-    className: "".concat(paginationBem('simple'))
-  }, currentPage, "/", countRef)) : '', React__default.createElement("div", {
-    className: "".concat(paginationBem('next'), "  ").concat(Number(currentPage) >= countRef ? 'disabled' : ''),
+    className: "".concat(classPrefix, "__simple")
+  }, currentPage, "/", pageCount)), React__default.createElement("div", {
+    className: classNames("".concat(classPrefix, "__next"), currentPage >= pageCount ? "disabled" : ""),
     onClick: function onClick(e) {
-      return selectPage(Number(currentPage) + 1, true);
+      return handleSelectPage(currentPage + 1);
     }
-  }, nextText || locale.pagination.next));
+  }, next || locale.pagination.next));
 };
-
 Pagination.defaultProps = defaultProps;
-Pagination.displayName = 'NutPagination';
-export { Pagination as default };
+Pagination.displayName = "NutPagination";
+export {
+  Pagination as default
+};

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

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

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

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

package/dist/esm/Picker/style/style.css

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-picker{background-color:var(--nutui-gray-6, #ffffff);width:100%}.nut-picker__control{display:flex;height:56px;font-size:16px;align-items:center;justify-content:space-between;padding:var(--nutui-picker-bar-button-padding, 0 15px)}.nut-picker__cancel-btn{color:var(--nutui-picker-cancel-color, #808080);font-size:var(--nutui-picker-bar-cancel-font-size, 14px)}.nut-picker__confirm-btn{color:var(--nutui-picker-ok-color, var(--nutui-brand-color, #fa2c19));font-size:var(--nutui-picker-bar-ok-font-size, 14px)}.nut-picker__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--nutui-picker-bar-title-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-bar-title-font-size, 16px);font-weight:var(--nutui-picker-bar-title-font-weight, normal)}.nut-picker__panel{display:flex;position:relative}.nut-picker-indicator{position:absolute;top:108px;height:var(--nutui-picker-item-height, 36px);width:100%;border:var(--nutui-picker-item-active-line-border, 1px solid #d8d8d8);border-left:0;border-right:0;color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);z-index:3}.nut-picker-list{flex:1;position:relative;height:var(--nutui-picker-list-height, 252px);overflow:hidden;text-align:center}.nut-picker-list-panel{transform-style:preserve-3d}.nut-picker-mask{position:absolute;top:0;left:0;right:0;bottom:0;background-image:var(--picker-mask-bg-img, linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)));background-position:top,bottom;background-size:100% 108px;background-repeat:no-repeat;z-index:3}.nut-picker-view-panel{height:var(--nutui-picker-list-height, 252px);flex-grow:1}.nut-picker-content,.nut-picker-roller{position:absolute;top:108px;width:100%;height:var(--nutui-picker-item-height, 36px)}.nut-picker-content{background:#fff;z-index:2;overflow:hidden}.nut-picker-item,.nut-picker-roller-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:var(--nutui-picker-item-height, 36px);line-height:var(--nutui-picker-item-height, 36px);color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);text-align:center}.nut-picker-item{font-size:16px;background:#fff}.nut-picker-roller{z-index:1;transform-style:preserve-3d}.nut-picker-roller-item{backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;top:0;width:100%;color:var(--nutui-gray-1, #1a1a1a)}.nut-picker-roller-item-title{display:block;width:100%;height:36px;line-height:36px;text-align:center;color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-picker-bar-title-font-size, 16px)}.nut-picker-roller-item-hidden{visibility:hidden;opacity:0}.nut-picker-placeholder{height:1px}