wix-style-react/dist/src/Calendar/DatePickerDropdown/DatePickerDropdown.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _DatePickerDropdownSt = require("./DatePickerDropdown.st.css");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _DropdownBase = _interopRequireDefault(require("../../DropdownBase"));
var _TextButton = _interopRequireDefault(require("../../TextButton"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Calendar/DatePickerDropdown/DatePickerDropdown.js";
var YEAR_ADD = 15;
class DropdownPicker extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.state = {
      open: false,
      visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD)
    };
    this._onSelect = data => {
      var {
        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) => {
      var eventWasHandled = delegateKeyDown(e);
      var {
        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 = () => {
      var length = this.state.visibleOptions.length;
      this.setState(_ref => {
        var {
          visibleOptions
        } = _ref;
        return {
          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() {
    var {
      className,
      caption,
      options,
      dataHook,
      selectedId,
      ariaLabel,
      ariaLabelledBy
    } = this.props;
    var {
      open
    } = this.state;
    var finalAriaLabel = ariaLabel ? "".concat(ariaLabel, " ").concat(caption) : undefined;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _DatePickerDropdownSt.st)(_DatePickerDropdownSt.classes.root, className),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 119,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_DropdownBase.default, {
      "data-hook": dataHook,
      className: _DatePickerDropdownSt.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,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 120,
        columnNumber: 9
      }
    }, _ref2 => {
      var {
        delegateKeyDown
      } = _ref2;
      return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
        className: _DatePickerDropdownSt.classes.caption,
        skin: "dark",
        size: "small",
        suffixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronDown, {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 142,
            columnNumber: 29
          }
        }),
        onClick: this._toggle,
        dataHook: "".concat(dataHook, "-button"),
        onKeyDown: e => this._onKeyDown(e, delegateKeyDown),
        ariaLabel: finalAriaLabel,
        ariaLabelledBy: ariaLabelledBy,
        ariaHaspopup: "listbox",
        ariaExpanded: open,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 138,
          columnNumber: 15
        }
      }, caption);
    }));
  }
}
exports.default = DropdownPicker;
DropdownPicker.propTypes = {
  dataHook: _propTypes.default.string,
  className: _propTypes.default.string,
  caption: _propTypes.default.node,
  options: _propTypes.default.array,
  onChange: _propTypes.default.func,
  selectedId: _propTypes.default.number,
  ariaLabel: _propTypes.default.string,
  ariaLabelledBy: _propTypes.default.string
};
//# sourceMappingURL=DatePickerDropdown.js.map