@braineet/ui/dist/esm/components/selectForm/index.js

Braineet design system

var _excluded = ["id", "theme", "disabled", "addonAfter", "field", "form", "onKeyDown", "onChange", "autoRefresh", "onKeyUp", "options", "debounce", "debouncedVal", "placeholder", "placeholderDisabled", "className"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useState, useEffect } from 'react';
import { getIn } from 'formik';
import { withTheme } from 'styled-components';
import { useDebounce } from '../../utils';
import { StyledBox, StyledSelect, StyledIcon, StyledIconSelect } from './styles';

/**
 * The `SelectForm` component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var SelectForm = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var id = _ref.id,
    theme = _ref.theme,
    disabled = _ref.disabled,
    addonAfter = _ref.addonAfter,
    field = _ref.field,
    form = _ref.form,
    onKeyDown = _ref.onKeyDown,
    onChange = _ref.onChange,
    autoRefresh = _ref.autoRefresh,
    onKeyUp = _ref.onKeyUp,
    options = _ref.options,
    debounce = _ref.debounce,
    debouncedVal = _ref.debouncedVal,
    placeholder = _ref.placeholder,
    placeholderDisabled = _ref.placeholderDisabled,
    className = _ref.className,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(form && form.values ? getIn(form.values, field.name) : restProps.value),
    value = _useState[0],
    setValue = _useState[1];
  var _useState2 = useState(null),
    valueEvent = _useState2[0],
    setValueEvent = _useState2[1];
  var valueDebounced = useDebounce(valueEvent, debouncedVal);
  var valueEventDebounced = debounce ? valueDebounced : valueEvent;
  useEffect(function () {
    var newVal = form && form.values ? getIn(form.values, field.name) : restProps.value;
    if (newVal !== value && autoRefresh) {
      setValue(newVal);
    }
  }, [form && form.values ? form.values : restProps.value]);
  useEffect(function () {
    if (valueEventDebounced) {
      if (onChange) {
        onChange(valueEventDebounced);
      } else {
        field.onChange(valueEventDebounced);
      }
    }
  }, [valueEventDebounced]);
  var onKeyDownEnter = function onKeyDownEnter(e) {
    if (e.keyCode === 13) {
      if (!onChange && form && form.setFieldValue) {
        form.setFieldValue(field.name, value);
      }
    }
    if (onKeyDown) {
      return onKeyDown(e);
    }
  };
  var onChangeValue = function onChangeValue(e) {
    e.persist();
    setValue(e.target.value);
    setValueEvent(e);
  };
  var error = form && form.errors && field && field.name && getIn(form.errors, field.name);
  var touch = form && form.touched && field && field.name && getIn(form.touched, field.name);
  var valInput = form && form.values ? getIn(form.values, field.name) : undefined;
  var filled = form && form.values ? !!getIn(form.values, field.name) : !!restProps.value;
  return /*#__PURE__*/_jsxs(StyledBox, {
    className: className,
    children: [/*#__PURE__*/_jsxs(StyledSelect, _extends({
      as: "select",
      isInvalid: touch && error,
      disabled: disabled,
      onKeyDown: onKeyDownEnter,
      onKeyUp: onKeyUp,
      options: options,
      $height: 40,
      ref: ref,
      placeholderShown: !valInput && !value
    }, field, restProps, {
      value: onKeyUp ? valInput : value,
      filled: filled,
      onChange: onKeyUp ? onChange : onChangeValue,
      id: id,
      children: [placeholder ? /*#__PURE__*/_jsx("option", {
        value: "",
        disabled: placeholderDisabled,
        selected: true,
        children: placeholder
      }) : null, options.map(function (option) {
        return /*#__PURE__*/_jsx("option", {
          value: option.value,
          disabled: !!option.disabled,
          children: option.label
        }, option.value);
      })]
    })), addonAfter && addonAfter, touch && error && !disabled ? /*#__PURE__*/_jsx(StyledIcon, {
      name: "error_alert",
      size: 24,
      color: theme.colors.intent.error
    }) : /*#__PURE__*/_jsx(StyledIconSelect, {
      name: "drop",
      size: 24,
      color: theme.colors.black,
      $position: "right",
      height: restProps.height,
      disabled: disabled
    })]
  });
});
SelectForm.defaultProps = {
  addonAfter: null,
  disabled: false,
  placeholderDisabled: true,
  debounce: true,
  onKeyDown: null,
  onKeyUp: null,
  autoRefresh: false,
  placeholder: null,
  theme: {},
  onChange: null,
  debouncedVal: 300,
  height: 40,
  field: null,
  form: null
};
export default withTheme(SelectForm);