wix-style-react
Version:
wix-style-react
92 lines • 4.08 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './DatePickerDropdown.st.css';
import { ChevronDown } from '@wix/wix-ui-icons-common';
import DropdownBase from '../../DropdownBase';
import TextButton from '../../TextButton';
const YEAR_ADD = 15;
class DropdownPicker extends React.Component {
constructor() {
super(...arguments);
this.state = {
open: false,
visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD),
};
this._onSelect = data => {
const { onChange } = this.props;
this.setState({
open: false,
}, () => {
if (typeof onChange === 'function') {
onChange(data);
}
});
};
this._toggle = () => {
this.setState({ open: !this.state.open });
};
this._onKeyDown = (e, delegateKeyDown) => {
const eventWasHandled = delegateKeyDown(e);
const { open } = this.state;
// We'll open the list when pressing the ArrowDown key
if (!eventWasHandled && e.key === 'ArrowDown') {
this._open();
e.preventDefault();
return;
}
// close on Escape
if (e.key === 'Escape') {
this._close();
e.preventDefault();
}
// prevent TextButton onClick event
if (open && (e.key === 'Enter' || e.key === 'Spacebar' || e.key === ' ')) {
e.preventDefault();
}
};
this._close = () => {
this.setState({ open: false });
};
this._open = () => {
this.setState({ open: true });
};
this._fetchMoreOptions = () => {
const length = this.state.visibleOptions.length;
this.setState(({ visibleOptions }) => ({
visibleOptions: [
...visibleOptions,
...this.props.options.slice(length, length + YEAR_ADD),
],
}));
};
}
componentDidUpdate(prevProps) {
if (prevProps.options.length !== this.props.options.length ||
this.props.selectedId >= this.state.visibleOptions.length) {
this.setState({
visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD),
});
}
}
render() {
const { className, caption, options, dataHook, selectedId, ariaLabel, ariaLabelledBy, } = this.props;
const { open } = this.state;
const finalAriaLabel = ariaLabel ? `${ariaLabel} ${caption}` : undefined;
return (React.createElement("div", { className: st(classes.root, className) },
React.createElement(DropdownBase, { "data-hook": dataHook, className: classes.dropdown, options: this.state.visibleOptions, onClickOutside: this._close, dynamicWidth: true, minWidth: 120, selectedId: selectedId, onSelect: this._onSelect, focusOnSelectedOption: true, open: open, infiniteScroll: true, hasMore: this.state.visibleOptions.length < options.length, loadMore: this._fetchMoreOptions, autoFocus: true }, ({ delegateKeyDown }) => {
return (React.createElement(TextButton, { className: classes.caption, skin: "dark", size: "small", suffixIcon: React.createElement(ChevronDown, null), onClick: this._toggle, dataHook: `${dataHook}-button`, onKeyDown: e => this._onKeyDown(e, delegateKeyDown), ariaLabel: finalAriaLabel, ariaLabelledBy: ariaLabelledBy, ariaHaspopup: "listbox", ariaExpanded: open }, caption));
})));
}
}
DropdownPicker.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
caption: PropTypes.node,
options: PropTypes.array,
onChange: PropTypes.func,
selectedId: PropTypes.number,
ariaLabel: PropTypes.string,
ariaLabelledBy: PropTypes.string,
};
export default DropdownPicker;
//# sourceMappingURL=DatePickerDropdown.js.map