@coko/client
Version:
Client side common code for coko apps
128 lines (127 loc) • 8.15 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _antd = require("antd");
var _toolkit = require("../../toolkit");
var _excluded = ["pagination", "onChange", "onShowSizeChange"];
var _templateObject;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var PaginationNav = _styledComponents["default"].nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-pagination li {\n &:focus-within {\n outline: 4px solid #71ada9;\n outline-offset: 1px;\n transition: outline-offset 0s, outline 0s;\n }\n }\n\n .ant-pagination-prev,\n .ant-pagination-next {\n > * {\n color: ", ";\n display: block;\n height: 100%;\n padding: 0 ", ";\n width: 100%;\n\n /* stylelint-disable-next-line string-quotes */\n &[aria-disabled='true'] {\n color: ", ";\n cursor: not-allowed;\n }\n\n &:hover {\n background-color: gainsboro;\n transition: all 0.2s;\n }\n }\n }\n"])), (0, _toolkit.th)('colorText'), (0, _toolkit.grid)(1), function (props) {
return "".concat(props.theme.colorText, "77");
});
var Pagination = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
var pagination = props.pagination,
onChange = props.onChange,
onShowSizeChange = props.onShowSizeChange,
rest = _objectWithoutProperties(props, _excluded);
var current = pagination.current,
pageSize = pagination.pageSize,
total = pagination.total;
var paginationRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(forwardRef, function () {
return paginationRef.current;
});
(0, _react.useEffect)(function () {
// enhance accessibility of pagination, only if no custom render method was provided
if (pagination && !pagination.itemRender) {
paginationRef.current.querySelectorAll('li.ant-pagination-item').forEach(function (page, index) {
var counter = index + 1;
var label = "Go to page ".concat(counter);
if (page.classList.contains('ant-pagination-item-active')) {
page.querySelector(':scope > *').setAttribute('aria-current', 'page');
label = "Page ".concat(counter, " , Current Page");
} else {
page.querySelector(':scope > *').removeAttribute('aria-current');
}
page.querySelector(':scope > *').setAttribute('aria-label', label);
});
paginationRef.current.querySelectorAll('.ant-pagination li:not([class*="custom-icon"])').forEach(function (item) {
item.removeAttribute('tabindex');
if (item.getAttribute('aria-disabled') === 'true') {
item.querySelector(':scope > *').removeAttribute('disabled');
item.querySelector(':scope > *').setAttribute('aria-disabled', 'true');
} else {
item.querySelector(':scope > *').removeAttribute('aria-disabled');
}
});
}
}, [current, pageSize, total]);
var paginationLinkClick = function paginationLinkClick(e) {
e.preventDefault();
};
var paginationKeyDown = function paginationKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
e.stopPropagation();
e.currentTarget.parentNode.click();
}
};
var itemRender = pagination.itemRender || function (page, type, originalElement) {
if (type === 'jump-next' || type === 'jump-prev') {
return originalElement;
}
if (type === 'prev') {
return /*#__PURE__*/_react["default"].createElement("a", {
href: "/previous/page",
onClick: paginationLinkClick,
onKeyDown: paginationKeyDown
}, "Previous");
}
if (type === 'next') {
return /*#__PURE__*/_react["default"].createElement("a", {
href: "/next/page",
onClick: paginationLinkClick,
onKeyDown: paginationKeyDown
}, "Next");
}
return /*#__PURE__*/_react["default"].createElement("a", {
href: "/page/".concat(page),
onClick: paginationLinkClick,
onKeyDown: paginationKeyDown
}, page);
};
return /*#__PURE__*/_react["default"].createElement(PaginationNav, _extends({
"aria-label": "Pagination",
ref: paginationRef,
role: "navigation"
}, rest), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, _extends({}, pagination, {
itemRender: itemRender,
onChange: onChange,
onShowSizeChange: onShowSizeChange
})));
});
Pagination.propTypes = {
pagination: _propTypes["default"].shape({
current: _propTypes["default"].number,
total: _propTypes["default"].number,
pageSize: _propTypes["default"].number,
itemRender: _propTypes["default"].func,
showSizeChanger: _propTypes["default"].bool
}),
onChange: _propTypes["default"].func,
onShowSizeChange: _propTypes["default"].func
};
Pagination.defaultProps = {
pagination: {
current: 1,
pageSize: 10,
itemRender: null,
showSizeChanger: false
},
onChange: function onChange() {},
onShowSizeChange: function onShowSizeChange() {}
};
var _default = Pagination;
exports["default"] = _default;