@indec/form-builder/lib/components/Select/Select.js

Form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = require("react");
var _FieldMessage = _interopRequireDefault(require("../FieldMessage"));
var _InputLabel = _interopRequireDefault(require("../InputLabel"));
var _Icons = require("../Icons");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function Select(_ref) {
  var _ref$options = _ref.options,
    options = _ref$options === void 0 ? [] : _ref$options,
    field = _ref.field,
    label = _ref.label,
    form = _ref.form,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    onClean = _ref.onClean,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? '[Seleccione]' : _ref$placeholder,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$keyValue = _ref.keyValue,
    keyValue = _ref$keyValue === void 0 ? 'value' : _ref$keyValue,
    _ref$warnings = _ref.warnings,
    warnings = _ref$warnings === void 0 ? {} : _ref$warnings;
  var _useState = (0, _react.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var handleChange = function handleChange(selectedValue) {
    form.setFieldValue(field.name, selectedValue ? selectedValue[keyValue] : undefined);
    form.setFieldTouched(field.name, false);
    if (onClean) {
      onClean(form);
    }
    setIsOpen(false);
  };
  var handleClear = function handleClear() {
    form.setFieldValue(field.name, undefined);
    form.setFieldTouched(field.name, false);
    if (onClean) {
      onClean(form);
    }
  };
  var selectedValue = (0, _react.useMemo)(function () {
    return options.find(function (option) {
      return option[keyValue] === field.value;
    }) || null;
  }, [field === null || field === void 0 ? void 0 : field.value, options, keyValue]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "fb:flex fb:flex-col fb:w-full",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel["default"], {
      warnings: warnings,
      form: form,
      field: field,
      label: label,
      disabled: disabled
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "fb:relative fb:mt-2",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
        type: "button",
        className: "fb:w-full fb:px-3 fb:py-2 fb:text-left fb:bg-white fb:border-2 fb:border-gray-400 fb:rounded-lg fb:focus:outline-none fb:focus:ring-blue-500 fb:focus:border-blue-500 fb:transition-colors fb:duration-200 ".concat(disabled ? 'fb:opacity-50 fb:cursor-not-allowed fb:bg-gray-50' : 'fb:cursor-pointer fb:hover:border-gray-500'),
        onClick: function onClick() {
          return !disabled && setIsOpen(!isOpen);
        },
        onBlur: function onBlur() {
          form.handleBlur({
            target: {
              name: field.name
            }
          });
          setTimeout(function () {
            return setIsOpen(false);
          }, 200);
        },
        disabled: disabled,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: selectedValue ? 'fb:text-gray-900' : 'fb:text-gray-500',
          children: selectedValue ? selectedValue.label : placeholder
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "fb:absolute fb:inset-y-0 fb:right-0 fb:flex fb:items-center fb:pr-2 fb:space-x-1",
          children: [selectedValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
            type: "button",
            onClick: function onClick(e) {
              e.stopPropagation();
              handleClear();
            },
            className: "fb:p-1 fb:text-gray-400 fb:hover:text-gray-600 fb:rounded fb:transition-colors fb:duration-200",
            "aria-label": "Clear selection",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
              className: "fb:w-4 fb:h-4"
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronDownIcon, {
            className: "fb:w-5 fb:h-5 fb:text-gray-400 fb:transition-transform fb:duration-200 ".concat(isOpen ? 'fb:rotate-180' : '')
          })]
        })]
      }), isOpen && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "fb:absolute fb:z-10 fb:w-full fb:mt-1 fb:bg-white fb:border fb:border-gray-300 fb:rounded-md fb:shadow-lg fb:max-h-60 fb:overflow-auto",
        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "fb:px-3 fb:py-2 fb:text-gray-500",
          children: "Cargando..."
        }), !loading && options.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "fb:px-3 fb:py-2 fb:text-gray-500",
          children: "No hay opciones."
        }), options.length > 0 && options.map(function (option) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
            type: "button",
            className: "fb:w-full fb:px-3 fb:py-2 fb:text-left fb:hover:bg-blue-50 fb:focus:outline-none fb:focus:bg-blue-50 fb:transition-colors fb:duration-200 ".concat(selectedValue && selectedValue[keyValue] === option[keyValue] ? 'fb:bg-blue-100 fb:text-blue-900' : 'fb:text-gray-900'),
            onClick: function onClick() {
              return handleChange(option);
            },
            children: option.label
          }, option[keyValue]);
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldMessage["default"], {
      warnings: warnings,
      form: form,
      field: field
    })]
  });
}
var _default = exports["default"] = Select;