contentoh-components-library 21.6.25 → 21.6.27

package/dist/components/molecules/SingleSelect/index.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleSelect = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Select de opción única con búsqueda escribiendo.
+
+  Es el CustomSelect que la aplicación usa en el alta de productos, traído a la
+  librería para que las pantallas que viven aquí no tengan que caer en el <select>
+  del sistema, que se ve ajeno al resto de la plataforma.
+
+  Se llama distinto porque la librería ya exporta un `CustomSelect`: aquel es un
+  filtro de selección múltiple con calendario, otra cosa. Compartir nombre habría
+  roto el export global.
+
+  Tres cambios respecto al original, todos porque aquí el entorno es otro:
+  el ancho es flexible en vez de 210px fijos —en el modal van tres en fila—, los
+  colores salen de las variables de la librería en lugar de `var(--gray)`, y la
+  flecha va dibujada porque la fuente de iconos de Material la carga la
+  aplicación, no esta librería.
+
+  props:
+    - options: [{ label, value }]
+    - value: el value seleccionado
+    - onChange: recibe el value elegido, o null al limpiar
+    - placeholder, disabled, loading
+*/
+var SingleSelect = function SingleSelect(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "Selecciona una opción" : _ref$placeholder,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      onChange = _ref.onChange,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selectedValue = _useState4[0],
+      setSelectedValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var wrapperRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var selectedOption = options.find(function (option) {
+    return "".concat(option === null || option === void 0 ? void 0 : option.value) === "".concat(selectedValue);
+  });
+  var filteredOptions = loading ? [] : options.filter(function (option) {
+    var _option$label;
+
+    return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : "").toLowerCase().includes(inputValue.toLowerCase());
+  });
+
+  var handleSelect = function handleSelect(option) {
+    setSelectedValue(option === null || option === void 0 ? void 0 : option.value);
+    setInputValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value);
+    setIsOpen(false);
+  };
+
+  var clearSelected = function clearSelected() {
+    setSelectedValue("");
+    setInputValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(null);
+  };
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []); // Al deshabilitarse se limpia: un nivel de cascada que se apaga no puede
+  // quedarse mostrando la elección anterior, que ya no significa nada.
+
+  (0, _react.useEffect)(function () {
+    if (disabled) {
+      setSelectedValue("");
+      setInputValue("");
+    }
+  }, [disabled]);
+  (0, _react.useEffect)(function () {
+    setSelectedValue(value);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectWrapper, {
+    id: id,
+    className: className,
+    ref: wrapperRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectBase, {
+      disabled: disabled,
+      className: "selectBase",
+      onClick: function onClick() {
+        if (!disabled && !isOpen) setIsOpen(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [selectedOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SelectedOptionItem, {
+          title: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          placeholder: selectedOption ? "" : placeholder,
+          value: inputValue,
+          disabled: disabled,
+          ref: inputRef,
+          onChange: function onChange(event) {
+            return setInputValue(event.target.value);
+          },
+          onFocus: function onFocus() {
+            if (!isOpen) setIsOpen(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            var _inputRef$current;
+
+            var esBorrar = event.key === "Backspace";
+            var vacio = (((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "") === "";
+            if (!isOpen) setIsOpen(true); // Borrar con el campo vacío deshace la elección, que es lo que
+            // espera quien escribe para cambiarla.
+
+            if (esBorrar && vacio && selectedValue !== "") clearSelected();
+
+            if (event.key === "Enter" && filteredOptions.length > 0) {
+              event.preventDefault();
+              handleSelect(filteredOptions[0]);
+            }
+          },
+          onBlur: function onBlur() {
+            setTimeout(function () {
+              if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {
+                setIsOpen(false);
+              }
+            }, 0);
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Arrow, {
+        "aria-hidden": "true",
+        children: "\u25BC"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Options, {
+      open: isOpen,
+      "data-testid": "options",
+      children: filteredOptions.length > 0 ? filteredOptions.map(function (option) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
+          selected: "".concat(option === null || option === void 0 ? void 0 : option.value) === "".concat(selectedValue),
+          onClick: function onClick() {
+            return handleSelect(option);
+          },
+          className: inputValue.trim() !== "" && option === filteredOptions[0] ? "first" : "",
+          tabIndex: -1,
+          children: option === null || option === void 0 ? void 0 : option.label
+        }, option === null || option === void 0 ? void 0 : option.value);
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
+        disabled: true,
+        style: {
+          pointerEvents: "none",
+          opacity: 0.5
+        },
+        children: loading ? "Cargando…" : "No se encontraron elementos"
+      })
+    })]
+  });
+};
+
+exports.SingleSelect = SingleSelect;

package/dist/components/molecules/SingleSelect/styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedOptionItem = exports.SelectWrapper = exports.SelectBase = exports.Options = exports.OptionItem = exports.Arrow = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+require("../../../global-files/global-styles.css");
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var PINK = "#E13AA8";
+
+var SelectWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: 1 1 0;\n  min-width: 0;\n  font-family: ", ";\n  font-size: 13px;\n  user-select: none;\n  box-sizing: border-box;\n"])), _variables.FontFamily.Raleway);
+
+exports.SelectWrapper = SelectWrapper;
+
+var SelectBase = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  min-width: 0;\n  border-radius: 5px 5px 0 0;\n  border-bottom: 1px solid rgba(225, 58, 168, 0.5);\n  color: ", ";\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  white-space: nowrap;\n  overflow-x: hidden;\n  padding: 0;\n\n  cursor: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n  > div {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  > div > input {\n    width: 100%;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 9px 22px 9px 10px;\n    border-radius: 5px 5px 0 0;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n    background: none;\n  }\n\n  > div > input::placeholder {\n    color: ", ";\n  }\n"])), _variables.GlobalColors.deep_gray, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "not-allowed" : "pointer";
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 0.5 : 1;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? "none" : "auto";
+}, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.SelectBase = SelectBase;
+
+var SelectedOptionItem = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  max-width: 60%;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n  padding: 5px 8px;\n  background-color: rgba(225, 58, 168, 0.06);\n  color: ", ";\n  font-size: 12px;\n\n  > p {\n    width: 100%;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), _variables.GlobalColors.gray);
+/*
+  Flecha dibujada, no un icono de fuente. El componente original usaba
+  material-symbols-outlined, que la aplicación carga y esta librería no: aquí
+  habría salido la palabra "arrow_drop_down" escrita donde debería ir el triángulo.
+*/
+
+
+exports.SelectedOptionItem = SelectedOptionItem;
+
+var Arrow = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 6px;\n  pointer-events: none;\n  color: ", ";\n  font-size: 10px;\n  line-height: 1;\n"])), PINK);
+
+exports.Arrow = Arrow;
+
+var Options = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-shadow: 0 4px 8px rgb(0 0 0 / 18%);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: ", ";\n  z-index: 1000;\n"])), _variables.GlobalColors.white, _variables.GlobalColors.s2, function (_ref4) {
+  var open = _ref4.open;
+  return open ? "block" : "none";
+});
+
+exports.Options = Options;
+
+var OptionItem = _styledComponents.default.li(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 9px 12px;\n  cursor: pointer;\n  font-size: 12px;\n  white-space: normal;\n  background-color: ", ";\n  color: ", ";\n\n  &.first {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref5) {
+  var selected = _ref5.selected;
+  return selected ? PINK : _variables.GlobalColors.white;
+}, function (_ref6) {
+  var selected = _ref6.selected;
+  return selected ? _variables.GlobalColors.white : _variables.GlobalColors.gray;
+}, function (_ref7) {
+  var selected = _ref7.selected;
+  return selected ? PINK : "rgba(225, 58, 168, 0.1)";
+}, function (_ref8) {
+  var selected = _ref8.selected;
+  return selected ? PINK : "rgba(225, 58, 168, 0.06)";
+});
+
+exports.OptionItem = OptionItem;