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

Form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
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; }
var handleChecked = function handleChecked(e, options, selectedOption, _ref, setFieldValue) {
  var name = _ref.name,
    value = _ref.value;
  var selectedValue = selectedOption.value,
    exclusive = selectedOption.exclusive;
  var isChecked = e.target.checked;
  var values;
  var exclusiveOptions = options.filter(function (option) {
    return option.exclusive;
  });
  if (isChecked) {
    if (exclusive) {
      values = [selectedValue];
    } else {
      var nonExclusiveOptions = exclusiveOptions.length > 0 ? value.filter(function (currentValue) {
        return !exclusiveOptions.map(function (exclusiveOption) {
          return exclusiveOption.value;
        }).includes(currentValue);
      }) : value;
      values = [].concat(_toConsumableArray(nonExclusiveOptions), [selectedValue]);
    }
  } else {
    values = value.filter(function (currentValue) {
      return currentValue !== selectedValue;
    });
  }
  setFieldValue(name, values);
};
function Checkbox(_ref2) {
  var options = _ref2.options,
    label = _ref2.label,
    field = _ref2.field,
    form = _ref2.form,
    _ref2$disabled = _ref2.disabled,
    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
    warnings = _ref2.warnings;
  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.jsx)("div", {
      className: "fb:space-y-3 fb:mt-2",
      children: options.map(function (option, index) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
          "data-testid": "checkbox-".concat(index),
          className: "fb:group fb:flex fb:items-center fb:space-x-4 fb:p-2 fb:rounded-lg fb:transition-all fb:duration-200 ".concat(disabled ? 'fb:opacity-50 fb:cursor-not-allowed' : 'fb:cursor-pointer '),
          htmlFor: "checkbox-".concat(field.name, "-").concat(index),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "fb:relative fb:flex-shrink-0",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
              id: "checkbox-".concat(field.name, "-").concat(index),
              type: "checkbox",
              "data-testid": "option-".concat(index),
              checked: field.value.includes(option.value),
              onChange: function onChange(e) {
                handleChecked(e, options, option, field, form.setFieldValue);
                form.setFieldTouched(field.name, false);
              },
              disabled: disabled,
              className: "fb:sr-only"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "fb:w-6 fb:h-6 fb:border-2 fb:rounded-md fb:flex fb:items-center fb:justify-center fb:transition-all fb:duration-200 fb:transform ".concat(field.value.includes(option.value) ? 'fb:bg-blue-600 fb:border-blue-600 fb:scale-100 fb:shadow-md' : 'fb:bg-white fb:border-gray-300 fb:scale-100', " ").concat(disabled ? 'fb:opacity-50' : '', " fb:focus-within:ring-2 fb:focus-within:ring-blue-500 fb:focus-within:ring-offset-2"),
              children: field.value.includes(option.value) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
                className: "fb:w-4 fb:h-4 fb:text-white fb:transform fb:transition-transform fb:duration-150 fb:scale-110"
              })
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "fb:select-none fb:font-medium fb:transition-colors fb:duration-200 ".concat(disabled ? 'fb:text-gray-400' : 'fb:text-gray-900'),
            children: option.label
          })]
        }, option.value);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldMessage["default"], {
      warnings: warnings,
      form: form,
      field: field
    })]
  });
}
var _default = exports["default"] = Checkbox;