@sanity/form-builder/lib/inputs/SelectInput.js

Sanity form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _capitalize2 = _interopRequireDefault(require("lodash/capitalize"));
var _react = _interopRequireWildcard(require("react"));
var _autoId = require("@reach/auto-id");
var _types = require("@sanity/types");
var _ui = require("@sanity/ui");
var _components = require("@sanity/base/components");
var _PatchEvent = _interopRequireWildcard(require("../PatchEvent"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function toSelectItem(option) {
  return (0, _types.isTitledListValue)(option) ? option : {
    title: (0, _capitalize2.default)("".concat(option)),
    value: option
  };
}
var EMPTY_ITEM = {
  title: '',
  value: undefined
};
var SelectInput = /*#__PURE__*/_react.default.forwardRef(function SelectInput(props, forwardedRef) {
  var _type$options2;
  var value = props.value,
    readOnly = props.readOnly,
    markers = props.markers,
    type = props.type,
    level = props.level,
    onChange = props.onChange,
    onFocus = props.onFocus,
    presence = props.presence;
  var items = (0, _react.useMemo)(() => {
    var _type$options;
    return (((_type$options = type.options) === null || _type$options === void 0 ? void 0 : _type$options.list) || []).map(toSelectItem);
  }, [(_type$options2 = type.options) === null || _type$options2 === void 0 ? void 0 : _type$options2.list]);
  var currentItem = items.find(item => item.value === value);
  var isRadio = type.options && type.options.layout === 'radio';
  var errors = (0, _react.useMemo)(() => markers.filter(marker => marker.type === 'validation' && marker.level === 'error'), [markers]);
  var itemFromOptionValue = (0, _react.useCallback)(optionValue => {
    var index = Number(optionValue);
    return items[index];
  }, [items]);
  var optionValueFromItem = (0, _react.useCallback)(item => {
    return String(items.indexOf(item));
  }, [items]);
  var inputId = (0, _autoId.useId)();
  var handleChange = _react.default.useCallback(nextItem => {
    onChange(_PatchEvent.default.from(typeof nextItem.value === 'undefined' ? (0, _PatchEvent.unset)() : (0, _PatchEvent.set)(nextItem.value)));
  }, [onChange]);
  var handleSelectChange = (0, _react.useCallback)(event => {
    var nextItem = itemFromOptionValue(event.currentTarget.value);
    if (!nextItem) {
      handleChange(EMPTY_ITEM);
      return;
    }
    handleChange(nextItem);
  }, [handleChange, itemFromOptionValue]);
  var handleFocus = _react.default.useCallback(() => {
    onFocus();
  }, [onFocus]);
  var children = (0, _react.useMemo)(() => {
    var _errors$2;
    if (isRadio) {
      var _errors$;
      return /*#__PURE__*/_react.default.createElement(RadioSelect, {
        inputId: inputId,
        items: items,
        value: currentItem,
        onChange: handleChange,
        direction: type.options.direction || 'vertical',
        ref: forwardedRef,
        readOnly: readOnly,
        onFocus: handleFocus,
        customValidity: errors === null || errors === void 0 || (_errors$ = errors[0]) === null || _errors$ === void 0 ? void 0 : _errors$.item.message
      });
    }
    return /*#__PURE__*/_react.default.createElement(_ui.Select, {
      onChange: handleSelectChange,
      onFocus: handleFocus,
      id: inputId,
      ref: forwardedRef,
      readOnly: readOnly,
      customValidity: errors === null || errors === void 0 || (_errors$2 = errors[0]) === null || _errors$2 === void 0 ? void 0 : _errors$2.item.message,
      value: optionValueFromItem(currentItem)
    }, [EMPTY_ITEM, ...items].map((item, i) => /*#__PURE__*/_react.default.createElement("option", {
      key: "".concat(i - 1),
      value: i - 1
    }, item.title)));
  }, [currentItem, errors, forwardedRef, handleChange, handleFocus, handleSelectChange, inputId, isRadio, items, optionValueFromItem, readOnly, type.options.direction]);
  return /*#__PURE__*/_react.default.createElement(_components.FormField, {
    inputId: inputId,
    level: level,
    title: type.title,
    description: type.description,
    __unstable_markers: markers,
    __unstable_presence: presence
  }, children);
});
var _default = SelectInput;
exports.default = _default;
var RadioSelect = /*#__PURE__*/(0, _react.forwardRef)(function RadioSelect(props, ref) {
  var items = props.items,
    value = props.value,
    onChange = props.onChange,
    onFocus = props.onFocus,
    readOnly = props.readOnly,
    customValidity = props.customValidity,
    direction = props.direction,
    inputId = props.inputId;
  var Layout = direction === 'horizontal' ? _ui.Inline : _ui.Stack;
  return /*#__PURE__*/_react.default.createElement(_ui.Card, {
    border: true,
    padding: 3,
    radius: 1
  }, /*#__PURE__*/_react.default.createElement(Layout, {
    space: 3,
    role: "group"
  }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(RadioSelectItem, {
    customValidity: customValidity,
    inputId: inputId,
    item: item,
    key: index,
    onChange: onChange,
    onFocus: onFocus,
    readOnly: readOnly,
    ref: index === 0 ? ref : null,
    value: value
  }))));
});
var RadioSelectItem = /*#__PURE__*/(0, _react.forwardRef)(function RadioSelectItem(props, ref) {
  var customValidity = props.customValidity,
    inputId = props.inputId,
    item = props.item,
    onChange = props.onChange,
    onFocus = props.onFocus,
    readOnly = props.readOnly,
    value = props.value;
  var handleChange = (0, _react.useCallback)(() => {
    onChange(item);
  }, [item, onChange]);
  return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    as: "label",
    align: "center"
  }, /*#__PURE__*/_react.default.createElement(_ui.Radio, {
    ref: ref,
    checked: value === item,
    onChange: handleChange,
    onFocus: onFocus,
    readOnly: readOnly,
    customValidity: customValidity,
    name: inputId
  }), /*#__PURE__*/_react.default.createElement(_ui.Box, {
    marginLeft: 2
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
    size: 1,
    weight: "semibold"
  }, item.title)));
});