@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/pagination/Pagination.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _DoubleLeftOutlined = _interopRequireDefault(require("@ant-design/icons/DoubleLeftOutlined"));
+
+var _DoubleRightOutlined = _interopRequireDefault(require("@ant-design/icons/DoubleRightOutlined"));
+
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
+
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcPagination = _interopRequireDefault(require("rc-pagination"));
+
+var _en_US = _interopRequireDefault(require("rc-pagination/lib/locale/en_US"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _useBreakpoint2 = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
+
+var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
+
+var _Select = require("./Select");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Pagination = function Pagination(_a) {
+  var customizePrefixCls = _a.prefixCls,
+      customizeSelectPrefixCls = _a.selectPrefixCls,
+      className = _a.className,
+      size = _a.size,
+      customLocale = _a.locale,
+      selectComponentClass = _a.selectComponentClass,
+      responsive = _a.responsive,
+      showSizeChanger = _a.showSizeChanger,
+      restProps = __rest(_a, ["prefixCls", "selectPrefixCls", "className", "size", "locale", "selectComponentClass", "responsive", "showSizeChanger"]);
+
+  var _useBreakpoint = (0, _useBreakpoint2["default"])(responsive),
+      xs = _useBreakpoint.xs;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction,
+      _React$useContext$pag = _React$useContext.pagination,
+      pagination = _React$useContext$pag === void 0 ? {} : _React$useContext$pag;
+
+  var prefixCls = getPrefixCls('pagination', customizePrefixCls);
+  var mergedShowSizeChanger = showSizeChanger !== null && showSizeChanger !== void 0 ? showSizeChanger : pagination.showSizeChanger;
+
+  var getIconsProps = function getIconsProps() {
+    var ellipsis = /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-item-ellipsis")
+    }, "\u2022\u2022\u2022");
+    var prevIcon = /*#__PURE__*/React.createElement("button", {
+      className: "".concat(prefixCls, "-item-link"),
+      type: "button",
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement(_LeftOutlined["default"], null));
+    var nextIcon = /*#__PURE__*/React.createElement("button", {
+      className: "".concat(prefixCls, "-item-link"),
+      type: "button",
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement(_RightOutlined["default"], null));
+    var jumpPrevIcon = /*#__PURE__*/React.createElement("a", {
+      className: "".concat(prefixCls, "-item-link")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-item-container")
+    }, /*#__PURE__*/React.createElement(_DoubleLeftOutlined["default"], {
+      className: "".concat(prefixCls, "-item-link-icon")
+    }), ellipsis));
+    var jumpNextIcon = /*#__PURE__*/React.createElement("a", {
+      className: "".concat(prefixCls, "-item-link")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-item-container")
+    }, /*#__PURE__*/React.createElement(_DoubleRightOutlined["default"], {
+      className: "".concat(prefixCls, "-item-link-icon")
+    }), ellipsis)); // change arrows direction in right-to-left direction
+
+    if (direction === 'rtl') {
+      var _ref = [nextIcon, prevIcon];
+      prevIcon = _ref[0];
+      nextIcon = _ref[1];
+      var _ref2 = [jumpNextIcon, jumpPrevIcon];
+      jumpPrevIcon = _ref2[0];
+      jumpNextIcon = _ref2[1];
+    }
+
+    return {
+      prevIcon: prevIcon,
+      nextIcon: nextIcon,
+      jumpPrevIcon: jumpPrevIcon,
+      jumpNextIcon: jumpNextIcon
+    };
+  };
+
+  return /*#__PURE__*/React.createElement(_LocaleReceiver["default"], {
+    componentName: "Pagination",
+    defaultLocale: _en_US["default"]
+  }, function (contextLocale) {
+    var _classNames;
+
+    var locale = (0, _extends2["default"])((0, _extends2["default"])({}, contextLocale), customLocale);
+    var isSmall = size === 'small' || !!(xs && !size && responsive);
+    var selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
+    var extendedClassName = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-mini"), isSmall), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
+    return /*#__PURE__*/React.createElement(_rcPagination["default"], (0, _extends2["default"])({}, getIconsProps(), restProps, {
+      prefixCls: prefixCls,
+      selectPrefixCls: selectPrefixCls,
+      className: extendedClassName,
+      selectComponentClass: selectComponentClass || (isSmall ? _Select.MiniSelect : _Select.MiddleSelect),
+      locale: locale,
+      showSizeChanger: mergedShowSizeChanger
+    }));
+  });
+};
+
+var _default = Pagination;
+exports["default"] = _default;

package/lib/pagination/Select.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SelectProps } from '../select';
+import Select from '../select';
+interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+    Option: typeof Select.Option;
+}
+declare const MiniSelect: MiniOrMiddleSelectInterface;
+declare const MiddleSelect: MiniOrMiddleSelectInterface;
+export { MiniSelect, MiddleSelect };

package/lib/pagination/Select.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MiniSelect = exports.MiddleSelect = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _select = _interopRequireDefault(require("../select"));
+
+var MiniSelect = function MiniSelect(props) {
+  return /*#__PURE__*/React.createElement(_select["default"], (0, _extends2["default"])({}, props, {
+    size: "small"
+  }));
+};
+
+exports.MiniSelect = MiniSelect;
+
+var MiddleSelect = function MiddleSelect(props) {
+  return /*#__PURE__*/React.createElement(_select["default"], (0, _extends2["default"])({}, props, {
+    size: "middle"
+  }));
+};
+
+exports.MiddleSelect = MiddleSelect;
+MiniSelect.Option = _select["default"].Option;
+MiddleSelect.Option = _select["default"].Option;

package/lib/pagination/index.d.ts

@@ -0,0 +1,3 @@
+import Pagination from './Pagination';
+export { PaginationConfig, PaginationProps } from './Pagination';
+export default Pagination;

package/lib/pagination/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+
+var _default = _Pagination["default"];
+exports["default"] = _default;

package/lib/pagination/style/css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");
+
+require("../../select/style/css");

package/lib/pagination/style/index-pure.less

@@ -0,0 +1,472 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
+
+.@{pagination-prefix-cls} {
+  .reset-component();
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &::after {
+    display: block;
+    clear: both;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    content: ' ';
+  }
+
+  &-total-text {
+    display: inline-block;
+    height: @pagination-item-size;
+    margin-right: 8px;
+    line-height: @pagination-item-size - 2px;
+    vertical-align: middle;
+  }
+
+  &-item {
+    display: inline-block;
+    min-width: @pagination-item-size;
+    height: @pagination-item-size;
+    margin-right: 8px;
+    font-family: @pagination-font-family;
+    line-height: @pagination-item-size - 2px;
+    text-align: center;
+    vertical-align: middle;
+    list-style: none;
+    background-color: @pagination-item-bg;
+    border: @border-width-base @border-style-base @border-color-base;
+    border-radius: @border-radius-base;
+    outline: 0;
+    cursor: pointer;
+    user-select: none;
+
+    a {
+      display: block;
+      padding: 0 6px;
+      color: @text-color;
+      transition: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &:hover {
+      border-color: @primary-color;
+      transition: all 0.3s;
+
+      a {
+        color: @primary-color;
+      }
+    }
+
+    // cannot merge with `&:hover`
+    // see https://github.com/ant-design/ant-design/pull/34002
+    &:focus-visible {
+      border-color: @primary-color;
+      transition: all 0.3s;
+
+      a {
+        color: @primary-color;
+      }
+    }
+
+    &-active {
+      font-weight: @pagination-font-weight-active;
+      background: @pagination-item-bg-active;
+      border-color: @primary-color;
+
+      a {
+        color: @primary-color;
+      }
+
+      &:hover {
+        border-color: @primary-5;
+      }
+
+      &:focus-visible {
+        border-color: @primary-5;
+      }
+
+      &:hover a {
+        color: @primary-5;
+      }
+
+      &:focus-visible a {
+        color: @primary-5;
+      }
+    }
+  }
+
+  &-jump-prev,
+  &-jump-next {
+    outline: 0;
+    .@{pagination-prefix-cls}-item-container {
+      position: relative;
+
+      .@{pagination-prefix-cls}-item-link-icon {
+        color: @primary-color;
+        font-size: @font-size-sm;
+        letter-spacing: -1px;
+        opacity: 0;
+        transition: all 0.2s;
+
+        &-svg {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+        }
+      }
+
+      .@{pagination-prefix-cls}-item-ellipsis {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: block;
+        margin: auto;
+        color: @disabled-color;
+        font-family: Arial, Helvetica, sans-serif;
+        letter-spacing: 2px;
+        text-align: center;
+        text-indent: 0.13em;
+        opacity: 1;
+        transition: all 0.2s;
+      }
+    }
+
+    &:hover {
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
+      }
+    }
+
+    &:focus-visible {
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
+      }
+    }
+  }
+
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
+    margin-right: 8px;
+  }
+
+  &-prev,
+  &-next,
+  &-jump-prev,
+  &-jump-next {
+    display: inline-block;
+    min-width: @pagination-item-size;
+    height: @pagination-item-size;
+    color: @text-color;
+    font-family: @pagination-font-family;
+    line-height: @pagination-item-size;
+    text-align: center;
+    vertical-align: middle;
+    list-style: none;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  &-prev,
+  &-next {
+    font-family: Arial, Helvetica, sans-serif;
+    outline: 0;
+
+    button {
+      color: @text-color;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    &:hover button {
+      border-color: @primary-5;
+    }
+
+    .@{pagination-prefix-cls}-item-link {
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      font-size: 12px;
+      text-align: center;
+      background-color: @pagination-item-link-bg;
+      border: @border-width-base @border-style-base @border-color-base;
+      border-radius: @border-radius-base;
+      outline: none;
+      transition: all 0.3s;
+    }
+
+    &:focus-visible .@{pagination-prefix-cls}-item-link {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+
+    &:hover .@{pagination-prefix-cls}-item-link {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+
+  &-disabled {
+    &,
+    &:hover {
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-item-link {
+        color: @disabled-color;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+
+    &:focus-visible {
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-item-link {
+        color: @disabled-color;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-slash {
+    margin: 0 10px 0 5px;
+  }
+
+  &-options {
+    display: inline-block;
+    margin-left: 16px;
+    vertical-align: middle;
+
+    // IE11 css hack. `*::-ms-backdrop,` is a must have
+    @media all and (-ms-high-contrast: none) {
+      *::-ms-backdrop,
+      & {
+        vertical-align: top;
+      }
+    }
+
+    &-size-changer.@{ant-prefix}-select {
+      display: inline-block;
+      width: auto;
+    }
+
+    &-quick-jumper {
+      display: inline-block;
+      height: @input-height-base;
+      margin-left: @margin-xs;
+      line-height: @input-height-base;
+      vertical-align: top;
+
+      input {
+        .input();
+
+        width: 50px;
+        height: @input-height-base;
+        margin: 0 8px;
+      }
+    }
+  }
+
+  &-simple &-prev,
+  &-simple &-next {
+    height: @pagination-item-size-sm;
+    line-height: @pagination-item-size-sm;
+    vertical-align: top;
+    .@{pagination-prefix-cls}-item-link {
+      height: @pagination-item-size-sm;
+      background-color: transparent;
+      border: 0;
+
+      &::after {
+        height: @pagination-item-size-sm;
+        line-height: @pagination-item-size-sm;
+      }
+    }
+  }
+
+  &-simple &-simple-pager {
+    display: inline-block;
+    height: @pagination-item-size-sm;
+    margin-right: 8px;
+
+    input {
+      box-sizing: border-box;
+      height: 100%;
+      margin-right: 8px;
+      padding: 0 6px;
+      text-align: center;
+      background-color: @pagination-item-input-bg;
+      border: @border-width-base @border-style-base @border-color-base;
+      border-radius: @border-radius-base;
+      outline: none;
+      transition: border-color 0.3s;
+
+      &:hover {
+        border-color: @primary-color;
+      }
+
+      &:focus {
+        border-color: @primary-color-hover;
+        box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
+      }
+
+      &[disabled] {
+        color: @disabled-color;
+        background: @disabled-bg;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &&-mini &-total-text,
+  &&-mini &-simple-pager {
+    height: @pagination-item-size-sm;
+    line-height: @pagination-item-size-sm;
+  }
+
+  &&-mini &-item {
+    min-width: @pagination-item-size-sm;
+    height: @pagination-item-size-sm;
+    margin: 0;
+    line-height: @pagination-item-size-sm - 2px;
+  }
+
+  &&-mini &-item:not(&-item-active) {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  &&-mini &-prev,
+  &&-mini &-next {
+    min-width: @pagination-item-size-sm;
+    height: @pagination-item-size-sm;
+    margin: 0;
+    line-height: @pagination-item-size-sm;
+  }
+
+  &&-mini &-prev &-item-link,
+  &&-mini &-next &-item-link {
+    background: transparent;
+    border-color: transparent;
+
+    &::after {
+      height: @pagination-item-size-sm;
+      line-height: @pagination-item-size-sm;
+    }
+  }
+
+  &&-mini &-jump-prev,
+  &&-mini &-jump-next {
+    height: @pagination-item-size-sm;
+    margin-right: 0;
+    line-height: @pagination-item-size-sm;
+  }
+
+  &&-mini &-options {
+    margin-left: 2px;
+
+    &-size-changer {
+      top: @pagination-mini-options-size-changer-top;
+    }
+
+    &-quick-jumper {
+      height: @pagination-item-size-sm;
+      line-height: @pagination-item-size-sm;
+
+      input {
+        .input-sm();
+
+        width: 44px;
+        height: @input-height-sm;
+      }
+    }
+  }
+
+  // ============================ Disabled ============================
+  &&-disabled {
+    cursor: not-allowed;
+
+    .@{pagination-prefix-cls}-item {
+      background: @disabled-bg;
+      border-color: @border-color-base;
+      cursor: not-allowed;
+
+      a {
+        color: @disabled-color;
+        background: transparent;
+        border: none;
+        cursor: not-allowed;
+      }
+
+      &-active {
+        background: @pagination-item-disabled-bg-active;
+
+        a {
+          color: @pagination-item-disabled-color-active;
+        }
+      }
+    }
+
+    .@{pagination-prefix-cls}-item-link {
+      color: @disabled-color;
+      background: @disabled-bg;
+      border-color: @border-color-base;
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-simple& {
+        background: transparent;
+      }
+    }
+
+    .@{pagination-prefix-cls}-item-link-icon {
+      opacity: 0;
+    }
+
+    .@{pagination-prefix-cls}-item-ellipsis {
+      opacity: 1;
+    }
+
+    .@{pagination-prefix-cls}-simple-pager {
+      color: @disabled-color;
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-lg) {
+  .@{pagination-prefix-cls}-item {
+    &-after-jump-prev,
+    &-before-jump-next {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-sm) {
+  .@{pagination-prefix-cls}-options {
+    display: none;
+  }
+}
+
+@import './rtl';