@prefect9/ui/components/_Select/index.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("../../helpers/isType");
var _Scroll = _interopRequireDefault(require("../Scroll"));
var _Option = _interopRequireDefault(require("./Option"));
var _styles = _interopRequireDefault(require("../../styles.css"));
var _icons = _interopRequireDefault(require("../../icons"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 : 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); }
const Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
  let {
    children,
    onChange
  } = _ref2;
  const _ref = (0, _react.useRef)(null);
  const selectRef = ref !== null && ref !== void 0 ? ref : _ref;
  const modalRef = (0, _react.useRef)(null);
  const scrollActions = (0, _react.useRef)({});
  const [initedValue, setInitedValue] = (0, _react.useState)(false);
  const [value, setValue] = (0, _react.useState)('');
  const editHandler = (0, _react.useCallback)(newValue => {
    setValue(newValue);
    setInitedValue(true);
    if ((0, _isType.isFunc)(onChange)) onChange(newValue);
  }, [onChange]);

  // Init options
  const [options, setOptions] = (0, _react.useState)([]);
  (0, _react.useEffect)(() => {
    const newOptions = [];
    const processingChild = child => {
      var _child$props$children;
      const optionValue = (0, _isType.isStr)(child.props.value) ? child.props.value : '';
      const content = (_child$props$children = child.props.children) !== null && _child$props$children !== void 0 ? _child$props$children : '';
      newOptions.push({
        value: optionValue,
        content,
        selected: child.props.selected
      });
    };
    if ((0, _isType.isArr)(children)) for (let child of children) processingChild(child);else if ((0, _isType.isObj)(children)) processingChild(children);
    setOptions(newOptions);
  }, [children]);
  const getOptionContent = (0, _react.useCallback)(searchValue => {
    for (var option of options) {
      if (option.value === searchValue) return option.content;
    }
    return '';
  }, [options]);

  // Click handler
  const [showed, setShowed] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    let nowShowed = null;
    const setNewShowed = newShowed => {
      if (newShowed === nowShowed) return;
      nowShowed = newShowed;
      setShowed(nowShowed);
      if (nowShowed) {
        if (modalRef.current) modalRef.current.style.display = 'block';
        if ((0, _isType.isObj)(scrollActions.current) && (0, _isType.isFunc)(scrollActions.current.scrollTop)) scrollActions.current.scrollTop(0);
      } else modalRef.current.style.display = 'none';
    };
    setNewShowed(false);
    const clickHandler = e => {
      const target = e.target;
      const parentSelect = target.closest('.prefect9-select');
      const isSelect = target.classList.contains('prefect9-select') && target === selectRef.current || parentSelect && parentSelect === selectRef.current;
      if (isSelect) {
        e.preventDefault();
        const parentBody = target.closest('.prefect9-select__body');
        const isBody = target.classList.contains('prefect9-select__body') || parentBody;
        if (isBody && nowShowed) setNewShowed(false);else setNewShowed(true);
        const parentOption = target.closest('.prefect9-select__option');
        const isOption = target.classList.contains('prefect9-select__option') || parentOption;
        if (isOption) {
          const option = target;
          if (!target.classList.contains('prefect9-select__option')) option = parentOption;
          const optionValue = option.getAttribute('data-value');
          editHandler(optionValue);
          setNewShowed(false);
        }
      } else setNewShowed(false);
    };
    window.addEventListener('click', clickHandler);
    return () => {
      window.removeEventListener('click', clickHandler);
    };
  }, [scrollActions, modalRef, selectRef]);

  // Init default value
  (0, _react.useEffect)(() => {
    if (initedValue) return;
    for (let option of options) {
      if (option.selected) return editHandler(option.value);
    }
    if (options.length) return editHandler(options[0].value);
  }, [initedValue, options]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: selectRef,
    className: "prefect9-select ".concat(showed ? 'prefect9-select__active' : ''),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "prefect9-select__body",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-select__body-text",
        children: getOptionContent(value)
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-select__body-arrow",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.ArrowBottom, {})
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroll.default, {
      ref: modalRef,
      actions: scrollActions,
      className: "prefect9-select__modal",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-select__modal-content",
        children: children.map((child, index) => {
          return /*#__PURE__*/(0, _react.cloneElement)(child, _objectSpread(_objectSpread({}, child.props), {}, {
            key: index,
            value: (0, _isType.isStr)(child.props.value) ? child.props.value : '',
            selected: child.props.value === value
          }));
        })
      })
    })]
  });
});
var _default = exports.default = Select;