baseui
Version:
A React Component library implementing the Base design language
257 lines (255 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _locale = require("../locale");
var _themeProvider = require("../styles/theme-provider");
var _select = require("../select");
var _button = require("../button");
var _styledComponents = require("./styled-components");
var _chevronLeft = _interopRequireDefault(require("../icon/chevron-left"));
var _chevronRight = _interopRequireDefault(require("../icon/chevron-right"));
var _overrides = require("../helpers/overrides");
var _focusVisible = require("../utils/focusVisible");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/ // @ts-ignore
// Files
class Pagination extends React.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
isFocusVisible: false
});
_defineProperty(this, "handleFocus", event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
this.setState({
isFocusVisible: true
});
}
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_defineProperty(this, "handleBlur", event => {
if (this.state.isFocusVisible !== false) {
this.setState({
isFocusVisible: false
});
}
});
_defineProperty(this, "getMenuOptions", (0, _memoizeOne.default)(numPages => {
const menuOptions = [];
for (let i = 1; i <= numPages; i++) {
// @ts-ignore
menuOptions.push({
label: i
});
}
return menuOptions;
}));
_defineProperty(this, "onMenuItemSelect", data => {
const item = data.value[0];
const {
onPageChange,
currentPage
} = this.props;
const page = item.label;
if (page !== currentPage) {
onPageChange && onPageChange({
nextPage: page,
prevPage: currentPage
});
}
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_defineProperty(this, "onPrevClick", event => {
const {
currentPage,
onPageChange,
onPrevClick
} = this.props;
if (currentPage > 1) {
onPageChange && onPageChange({
nextPage: currentPage - 1,
prevPage: currentPage
});
onPrevClick && onPrevClick({
event
});
}
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_defineProperty(this, "onNextClick", event => {
const {
currentPage,
numPages,
onPageChange,
onNextClick
} = this.props;
if (currentPage < numPages) {
onPageChange && onPageChange({
nextPage: currentPage + 1,
prevPage: currentPage
});
onNextClick && onNextClick({
event
});
}
});
_defineProperty(this, "constructAriaWayfinderLabel", (locale, prefix) => {
const {
currentPage,
numPages,
labels
} = this.props;
return prefix + ' ' + currentPage + ' ' + `${labels && labels.preposition ? labels.preposition : locale.pagination.preposition}` + ' ' + numPages;
});
}
render() {
const {
overrides = {},
currentPage,
labels,
numPages,
size
} = this.props;
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [MaxLabel, maxLabelProps] = (0, _overrides.getOverrides)(overrides.MaxLabel, _styledComponents.StyledMaxLabel);
const [DropdownContainer, dropdownContainerProps] = (0, _overrides.getOverrides)(overrides.DropdownContainer, _styledComponents.StyledDropdownContainer);
const [Select, selectProps] = (0, _overrides.getOverrides)(overrides.Select, _select.Select);
const defaultSelectOverrides = {
ControlContainer: {
// @ts-ignore
style: ({
$theme,
$disabled,
$isOpen,
$error
}) => ({
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: 'transparent',
borderBottomColor: 'transparent',
boxShadow: 'none',
backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.backgroundLightNegative : $theme.colors.buttonTertiaryFill,
':hover': {
backgroundColor: $theme.colors.buttonTertiaryHover
}
})
},
InputContainer: {
style: {
marginLeft: 0
}
},
ValueContainer: {
style: {
flexBasis: 'auto'
}
},
SingleValue: {
// @ts-ignore
style: ({
$theme
}) => ({
position: 'relative',
paddingTop: '0',
paddingBottom: '0',
paddingLeft: $theme.sizing.scale200,
paddingRight: $theme.sizing.scale500,
color: $theme.colors.buttonTertiaryText,
...$theme.typography.font350,
lineHeight: 'unset'
})
},
SelectArrow: {
// @ts-ignore
style: ({
$theme
}) => ({
width: '24px',
height: '24px',
color: $theme.colors.buttonTertiaryText
})
}
};
selectProps.overrides = (0, _overrides.mergeOverrides)(defaultSelectOverrides, selectProps.overrides);
const options = this.getMenuOptions(numPages);
return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "pagination"
}, rootProps), /*#__PURE__*/React.createElement(_button.Button, {
"aria-label": this.constructAriaWayfinderLabel(locale, 'previous page. current page'),
disabled: currentPage <= 1,
onClick: this.onPrevClick,
startEnhancer: () => {
return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(_chevronRight.default, {
title: '',
size: 24
}) : /*#__PURE__*/React.createElement(_chevronLeft.default, {
title: '',
size: 24
});
},
kind: _button.KIND.tertiary,
overrides: {
BaseButton: overrides.PrevButton
},
size: size,
type: "button"
}, labels && labels.prevButton ? labels.prevButton : locale.pagination.prev), /*#__PURE__*/React.createElement(DropdownContainer, _extends({
$isFocusVisible: this.state.isFocusVisible
}, dropdownContainerProps, {
onFocus: (0, _focusVisible.forkFocus)(dropdownContainerProps, this.handleFocus),
onBlur: (0, _focusVisible.forkBlur)(dropdownContainerProps, this.handleBlur)
}), /*#__PURE__*/React.createElement(Select, _extends({
"aria-label": this.constructAriaWayfinderLabel(locale, 'page'),
options: options,
labelKey: "label",
valueKey: "label",
onChange: this.onMenuItemSelect,
searchable: false,
clearable: false,
value: [{
label: currentPage
}],
maxDropdownHeight: "200px",
size: size
}, selectProps))), /*#__PURE__*/React.createElement(MaxLabel, _extends({}, maxLabelProps, {
"aria-hidden": true
}), `${labels && labels.preposition ? labels.preposition : locale.pagination.preposition || ''} ${numPages}`), /*#__PURE__*/React.createElement(_button.Button, {
"aria-label": this.constructAriaWayfinderLabel(locale, 'next page. current page'),
disabled: currentPage >= numPages,
onClick: this.onNextClick,
endEnhancer: () => {
return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(_chevronLeft.default, {
title: '',
size: 24
}) : /*#__PURE__*/React.createElement(_chevronRight.default, {
title: '',
size: 24
});
},
kind: _button.KIND.tertiary,
overrides: {
BaseButton: overrides.NextButton
},
size: size,
type: "button"
}, labels && labels.nextButton ? labels.nextButton : locale.pagination.next))));
}
}
exports.default = Pagination;
_defineProperty(Pagination, "defaultProps", {
labels: {},
overrides: {}
});