ultra-design/lib/select/select.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var selectStyle = require('./select-style.js');
var clsx = require('clsx');
var option = require('./option.js');
var react$1 = require('@icon-park/react');
var trigger = require('../trigger/trigger.js');
var mergeProps = require('../utils/mergeProps.js');
var withStyle = require('../utils/withStyle.js');
var react = require('@emotion/react');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

var _templateObject;

var _excluded = ["onClick", "onMouseEnter", "className"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
  name: 'ultra-select'
};
var SelectComponent = /*#__PURE__*/React.forwardRef(function (p, ref) {
  var props = mergeProps.useMergeProps(defaultProps, p);
  var disabled = props.disabled,
      onChange = props.onChange,
      value = props.value,
      defaultValue = props.defaultValue,
      placeholder = props.placeholder,
      clearable = props.clearable,
      filterable = props.filterable,
      children = props.children,
      className = props.className,
      style = props.style;
  var selfRef = React.useRef(null);

  var _useState = React.useState(''),
      _useState2 = _slicedToArray__default["default"](_useState, 2),
      inputValue = _useState2[0],
      setInputValue = _useState2[1];

  var _useState3 = React.useState(true),
      _useState4 = _slicedToArray__default["default"](_useState3, 2),
      filterFinished = _useState4[0],
      setFilterFinished = _useState4[1];

  var _useState5 = React.useState('value' in props ? value : defaultValue),
      _useState6 = _slicedToArray__default["default"](_useState5, 2),
      selectValue = _useState6[0],
      setSelectValue = _useState6[1];

  var _useState7 = React.useState(-1),
      _useState8 = _slicedToArray__default["default"](_useState7, 2),
      hoverIndex = _useState8[0],
      setHoverIndex = _useState8[1];

  var _useState9 = React.useState(false),
      _useState10 = _slicedToArray__default["default"](_useState9, 2),
      dropdownVisivle = _useState10[0],
      setDropdownVisivle = _useState10[1];

  var _useState11 = React.useState(false),
      _useState12 = _slicedToArray__default["default"](_useState11, 2),
      focus = _useState12[0],
      setFocus = _useState12[1];

  var _useState13 = React.useState('0'),
      _useState14 = _slicedToArray__default["default"](_useState13, 2),
      layerMinWidth = _useState14[0],
      setLayerMinWidth = _useState14[1];

  var selfFilterMethod = function selfFilterMethod(option) {
    var label_ = 'label' in option ? option.label : typeof option.children === 'string' ? option.children : '';
    if (!label_) return false;
    return label_.toLowerCase().includes(inputValue.toLowerCase());
  };

  var filterMethod = React.useCallback(function (option) {
    if (typeof filterable === 'function') {
      return filterable(inputValue, option);
    } else {
      return selfFilterMethod(option);
    }
  }, [filterable, inputValue]);
  var optionList = React.useMemo(function () {
    var childs = [];
    React__default["default"].Children.toArray(children).forEach(function (child) {
      if ( /*#__PURE__*/React.isValidElement(child)) {
        childs.push(child.props);
      }
    });
    return childs;
  }, [children]);
  var filteredOptionList = React.useMemo(function () {
    var filteredData = !filterable || filterFinished ? optionList : optionList.filter(filterMethod);
    return filteredData;
  }, [filterable, filterFinished, optionList, filterMethod]);
  var selectIndex = filteredOptionList.findIndex(function (opt) {
    return (opt.value || opt.label || opt.children) === selectValue;
  });
  var selectionLabel = React.useMemo(function () {
    if (!selectValue) return undefined;

    if (selectIndex >= 0) {
      setHoverIndex(selectIndex);
      var _filteredOptionList$s = filteredOptionList[selectIndex],
          _children = _filteredOptionList$s.children,
          label = _filteredOptionList$s.label;

      if (filterable) {
        setInputValue(typeof _children === 'string' ? _children : label);
      }

      return _children || label;
    }
  }, [selectValue, filteredOptionList, selectIndex]);
  React.useEffect(function () {
    setSelectValue(value);
  }, [value]);
  React.useImperativeHandle(ref, function () {
    return {
      value: selectValue
    };
  }, [selectValue]);

  var handleChange = function handleChange(data) {
    var optionValue = data.value;
    var finalValue = optionValue !== null && optionValue !== void 0 ? optionValue : data.children || data.label;
    setSelectValue(finalValue);

    if (!data.label && typeof data.children === 'string') {
      setInputValue(data.children);
    }

    setFilterFinished(true);
    var v = filteredOptionList.find(function (o) {
      return o.value === optionValue;
    });

    if (v) {
      setTimeout(function () {
        onChange === null || onChange === void 0 ? void 0 : onChange(finalValue);
      });
    }

    setDropdownVisivle(false);
  };

  var handleKeyDown = function handleKeyDown(e) {
    e.preventDefault();
    var optsLen = filteredOptionList.length;
    if (disabled || !optsLen) return;
    if (filteredOptionList.every(function (o) {
      return o.disabled;
    })) return;

    if (e.code === 'ArrowDown' && dropdownVisivle) {
      setHoverIndex(function (i) {
        while (filteredOptionList[(i + 1) % optsLen].disabled) {
          i += 1;
        }

        return (i + 1) % optsLen;
      });
    } else if (e.code === 'ArrowUp' && dropdownVisivle) {
      setHoverIndex(function (i) {
        while (filteredOptionList[(i - 1 + optsLen) % optsLen].disabled) {
          i -= 1;
        }

        return (i - 1 + optsLen) % optsLen;
      });
    } else if (e.code === 'Enter') {
      var noHover = hoverIndex <= -1;

      if (noHover) {
        return;
      }

      setDropdownVisivle(!dropdownVisivle);

      if (dropdownVisivle && !noHover) {
        if (!filteredOptionList[hoverIndex]) {
          return;
        }

        handleChange(filteredOptionList[hoverIndex]);
      }
    }
  };

  var handleInputKeyDown = function handleInputKeyDown(_e) {
    _e.stopPropagation(); // if (!['ArrowDown', 'ArrowUp', 'Enter', 'Backspace'].includes(e.code)) {
    //   e.stopPropagation();
    // }

  };

  var handleMouseDown = function handleMouseDown(e) {
    if (dropdownVisivle) {
      e.preventDefault();
    }
  };

  var handleInput = function handleInput(e) {
    setInputValue(e.currentTarget.value);
    setDropdownVisivle(true);
    setFilterFinished(false);
  };

  var handleClear = function handleClear() {
    setInputValue('');
    setSelectValue(undefined);
    setTimeout(function () {
      onChange === null || onChange === void 0 ? void 0 : onChange(selectValue);
    });
  };

  React.useEffect(function () {
    if (!dropdownVisivle && !filteredOptionList.length) {
      if (typeof selectionLabel === 'string') {
        setInputValue(selectionLabel);
      }
    }
  }, [dropdownVisivle]);

  var renderOptionItem = function renderOptionItem(props, index) {
    var _onClick = props.onClick,
        _onMouseEnter = props.onMouseEnter,
        className = props.className,
        rest = _objectWithoutProperties__default["default"](props, _excluded);

    var idx = filteredOptionList.findIndex(function (opt) {
      return (opt.value || opt.children || opt.label) === selectValue;
    });
    return /*#__PURE__*/React__default["default"].cloneElement(jsxRuntime.jsx(option["default"], {}), _objectSpread(_objectSpread({}, rest), {}, {
      key: index,
      id: "ultra-select-option_".concat(index),
      className: clsx__default["default"](className, idx === index && 'ultra-select-option--active', hoverIndex === index && 'ultra-select-option--hover'),
      onClick: function onClick(e) {
        _onClick === null || _onClick === void 0 ? void 0 : _onClick(e);
        !props.disabled && handleChange(props);
      },
      onMouseEnter: function onMouseEnter(e) {
        _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e);
        setHoverIndex(index);
      }
    }));
  };

  return jsxRuntime.jsxs("div", {
    className: clsx__default["default"](['ultra-select', className, focus && 'ultra-select--focused', disabled && 'ultra-select--disabled']),
    tabIndex: 1,
    style: style,
    css: selectStyle.selectStyles(props),
    onKeyDown: handleKeyDown,
    onMouseDown: handleMouseDown,
    onFocus: function onFocus() {
      return setFocus(true);
    },
    onBlur: function onBlur() {
      return setFocus(false);
    },
    ref: function ref(node) {
      if (!node) return;
      selfRef.current = node;
      setLayerMinWidth(getComputedStyle(node).width);
    },
    children: [jsxRuntime.jsx(trigger["default"], _objectSpread(_objectSpread({
      triggerRef: selfRef,
      visible: dropdownVisivle,
      showDelay: 0,
      onVisibleChange: function onVisibleChange(v) {
        return setDropdownVisivle(v);
      },
      showArrow: false,
      placement: "bottomLeft",
      trigger: "click",
      content: filteredOptionList.length ? filteredOptionList.map(renderOptionItem) : jsxRuntime.jsx("p", {
        style: {
          textAlign: 'center'
        },
        children: "No Data"
      })
    }, props), {}, {
      name: "ultra-select",
      transitionClassName: "ultra-select-layer-slide",
      getLayerContainer: function getLayerContainer(node) {
        return node === null || node === void 0 ? void 0 : node.parentNode;
      },
      css: [selectStyle.selectLayerStyles(props), react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n            min-width: ", ";\n          "])), layerMinWidth)]
    })), filterable ? jsxRuntime.jsx("input", {
      onKeyDown: handleInputKeyDown,
      onInput: handleInput,
      value: inputValue,
      disabled: disabled,
      placeholder: placeholder
    }) : jsxRuntime.jsx("div", {
      className: "ultra-select__selection",
      children: selectionLabel || selectValue || jsxRuntime.jsx("span", {
        className: "ultra-select__placeholder",
        children: placeholder
      })
    }), jsxRuntime.jsx("div", {
      className: "ultra-select__icon",
      children: clearable ? jsxRuntime.jsx(react$1.Close, {
        onClick: handleClear
      }) : dropdownVisivle ? jsxRuntime.jsx(react$1.Up, {
        className: "ultra-icon"
      }) : jsxRuntime.jsx(react$1.Down, {
        className: "ultra-icon"
      })
    })]
  });
});
SelectComponent.displayName = 'UltraSelect';
var Select = withStyle["default"](SelectComponent);
var SelectComponent$1 = Select;

exports["default"] = SelectComponent$1;