@confi/conflux-react-ui-test-package/esm/select/select.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useMemo, useRef, useState } from 'react';
import useTheme from '../styles/use-theme';
import useClickAway from '../utils/use-click-away';
import useCurrentState from '../utils/use-current-state';
import { pickChildByProps } from '../utils/collections';
import SelectIcon from './select-icon';
import SelectDropdown from './select-dropdown';
import SelectMultipleValue from './select-multiple-value';
import Grid from '../grid';
import { SelectContext } from './select-context';
import { getSizes } from './styles';
import Ellipsis from '../shared/ellipsis';
var defaultProps = {
  disabled: false,
  size: 'medium',
  icon: SelectIcon,
  pure: false,
  multiple: false,
  width: 'initial',
  className: '',
  disableMatchWidth: false
};

var Select = function Select(_ref) {
  var children = _ref.children,
      size = _ref.size,
      disabled = _ref.disabled,
      init = _ref.initialValue,
      customValue = _ref.value,
      Icon = _ref.icon,
      onChange = _ref.onChange,
      pure = _ref.pure,
      multiple = _ref.multiple,
      placeholder = _ref.placeholder,
      width = _ref.width,
      className = _ref.className,
      dropdownClassName = _ref.dropdownClassName,
      dropdownStyle = _ref.dropdownStyle,
      disableMatchWidth = _ref.disableMatchWidth,
      props = _objectWithoutProperties(_ref, ["children", "size", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "placeholder", "width", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth"]);

  var theme = useTheme();
  var ref = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useCurrentState = useCurrentState(function () {
    if (!multiple) return init;
    if (Array.isArray(init)) return init;
    return typeof init === 'undefined' ? [] : [init];
  }),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      value = _useCurrentState2[0],
      setValue = _useCurrentState2[1],
      valueRef = _useCurrentState2[2];

  var isEmpty = useMemo(function () {
    if (!Array.isArray(value)) return !value;
    return value.length === 0;
  }, [value]);
  var sizes = useMemo(function () {
    return getSizes(theme, size);
  }, [theme, size]);

  var updateVisible = function updateVisible(next) {
    return setVisible(next);
  };

  var updateValue = function updateValue(next) {
    setValue(function (last) {
      if (!Array.isArray(last)) return next;
      if (!last.includes(next)) return [].concat(_toConsumableArray(last), [next]);
      return last.filter(function (item) {
        return item !== next;
      });
    });
    onChange && onChange(valueRef.current);

    if (!multiple) {
      setVisible(false);
    }
  };

  var initialValue = useMemo(function () {
    return {
      value: value,
      visible: visible,
      updateValue: updateValue,
      updateVisible: updateVisible,
      size: size,
      ref: ref,
      disableAll: disabled
    };
  }, [visible, size, disabled, ref, value, multiple]);

  var clickHandler = function clickHandler(event) {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (disabled) return;
    setVisible(!visible);
  };

  useClickAway(ref, function () {
    return setVisible(false);
  });
  useEffect(function () {
    if (customValue === undefined) return;
    setValue(customValue);
  }, [customValue]);
  var selectedChild = useMemo(function () {
    var _pickChildByProps = pickChildByProps(children, 'value', value),
        _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
        optionChildren = _pickChildByProps2[1];

    return React.Children.map(optionChildren, function (child) {
      if (!React.isValidElement(child)) return null;
      var el = React.cloneElement(child, {
        preventAllEvents: true
      });
      if (!multiple) return el;
      return /*#__PURE__*/React.createElement(SelectMultipleValue, {
        size: sizes.fontSize,
        disabled: disabled
      }, el);
    });
  }, [value, children, multiple]);
  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["1690222691", [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || "select ".concat(multiple ? 'multiple' : '', " ").concat(className))
  }), isEmpty && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1690222691", [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]]]) + " " + "value placeholder"
  }, /*#__PURE__*/React.createElement(Ellipsis, {
    height: sizes.height
  }, placeholder)), value && !multiple && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1690222691", [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]]]) + " " + "value"
  }, selectedChild), value && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
    gap: 0.5
  }, selectedChild), /*#__PURE__*/React.createElement(SelectDropdown, {
    visible: visible,
    className: dropdownClassName,
    dropdownStyle: dropdownStyle,
    disableMatchWidth: disableMatchWidth
  }, children), !pure && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1690222691", [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]]]) + " " + "icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    className: _JSXStyle.dynamic([["1690222691", [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]]])
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1690222691",
    dynamic: [disabled ? 'not-allowed' : 'pointer', width, theme.palette.border, theme.layout.radius, theme.layout.gapQuarter, theme.layout.gapHalf, sizes.height, sizes.minWidth, disabled ? theme.palette.accents_1 : theme.palette.background, sizes.height, theme.layout.gapQuarter, sizes.fontSize, theme.layout.gapQuarter, theme.layout.gapHalf, disabled ? theme.palette.border : theme.palette.foreground, disabled ? theme.palette.accents_5 : theme.palette.foreground, sizes.fontSize, disabled ? theme.palette.accents_4 : theme.palette.foreground, theme.palette.accents_3, theme.layout.gapQuarter, sizes.fontSize, visible ? '180' : '0', theme.palette.accents_5]
  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:80vw;width:").concat(width, ";overflow:hidden;-webkit-transition:border 0.2s ease 0s,color 0.2s ease-out 0s,box-shadow 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease-out 0s,box-shadow 0.2s ease 0s;border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";padding:0 ").concat(theme.layout.gapQuarter, " 0 ").concat(theme.layout.gapHalf, ";height:").concat(sizes.height, ";min-width:").concat(sizes.minWidth, ";background-color:").concat(disabled ? theme.palette.accents_1 : theme.palette.background, ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:").concat(sizes.height, ";padding:").concat(theme.layout.gapQuarter, " calc(").concat(sizes.fontSize, " * 2) ").concat(theme.layout.gapQuarter, " ").concat(theme.layout.gapHalf, ";}.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : theme.palette.foreground, ";}.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : theme.palette.foreground, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25rem;font-size:").concat(sizes.fontSize, ";color:").concat(disabled ? theme.palette.accents_4 : theme.palette.foreground, ";width:calc(100% - 1.25rem);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:").concat(sizes.fontSize, ";top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.accents_5, ";}"))));
};

Select.defaultProps = defaultProps;
export default Select;