@sanity/form-builder
Version:
Sanity form builder
175 lines (173 loc) • 8.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _react = _interopRequireDefault(require("react"));
var _components = require("@sanity/base/components");
var _types = require("@sanity/types");
var _ui = require("@sanity/ui");
var _content = require("@sanity/util/content");
var _internal = require("@sanity/base/_internal");
var _PatchEvent = _interopRequireWildcard(require("../../../PatchEvent"));
var _Preview = _interopRequireDefault(require("../../../Preview"));
var _ItemWithMissingType = require("../ArrayOfObjectsInput/item/ItemWithMissingType");
var _list = require("../common/list");
var _common = require("../../common");
var _legacyOptionsSupport = require("./legacyOptionsSupport");
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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var changeIndicatorOptions = {
compareDeep: true
};
function isEqual(item, otherItem) {
if ((0, _legacyOptionsSupport.isLegacyOptionsItem)(item) || (0, _legacyOptionsSupport.isLegacyOptionsItem)(otherItem)) {
return item.value === otherItem.value;
}
if (item === otherItem) {
return true;
}
if (typeof item !== typeof otherItem) {
return false;
}
if (typeof item !== 'object' && !Array.isArray(item)) {
return item === otherItem;
}
if (item._key && item._key === otherItem._key) {
return true;
}
if (Array.isArray(item)) {
if (!item.length !== otherItem.length) {
return false;
}
return item.every((it, i) => isEqual(item[i], otherItem[i]));
}
var keys = Object.keys(item);
var otherKeys = Object.keys(item);
if (keys.length !== otherKeys.length) {
return false;
}
return keys.every(keyName => isEqual(item[keyName], otherItem[keyName]));
}
function inArray(array, candidate) {
return array ? array.some(item => isEqual(item, candidate)) : false;
}
class OptionsArrayInput extends _react.default.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "_element", void 0);
_defineProperty(this, "handleChange", (isChecked, optionValue) => {
var _this$props = this.props,
type = _this$props.type,
_this$props$value = _this$props.value,
value = _this$props$value === void 0 ? [] : _this$props$value;
var list = (0, _get2.default)(type.options, 'list');
if (!isChecked && optionValue._key) {
// This is an optimization that only works if list items are _keyed
this.props.onChange(_PatchEvent.default.from((0, _PatchEvent.unset)([{
_key: optionValue._key
}])));
}
var nextValue = list.filter(item => isEqual(optionValue, item) ? isChecked : inArray(value, (0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(item))).map(_legacyOptionsSupport.resolveValueWithLegacyOptionsSupport);
this.props.onChange(_PatchEvent.default.from(nextValue.length > 0 ? (0, _PatchEvent.set)(nextValue) : (0, _PatchEvent.unset)()));
});
_defineProperty(this, "setElement", el => {
this._element = el;
});
_defineProperty(this, "handleFocus", index => {
this.props.onFocus([index]);
});
}
getMemberTypeOfItem(option) {
var type = this.props.type;
return type.of.find(memberType => memberType.name === (0, _content.resolveTypeName)((0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option)));
}
focus() {
if (this._element) {
this._element.focus();
}
}
render() {
var _type$options, _type$options2, _type$options3;
var _this$props2 = this.props,
type = _this$props2.type,
markers = _this$props2.markers,
value = _this$props2.value,
level = _this$props2.level,
readOnly = _this$props2.readOnly,
presence = _this$props2.presence,
_onFocus = _this$props2.onFocus,
onBlur = _this$props2.onBlur;
var options = ((_type$options = type.options) === null || _type$options === void 0 ? void 0 : _type$options.list) || [];
// note: direction was never documented and makes more sense to use "grid" for it too
var isGrid = ((_type$options2 = type.options) === null || _type$options2 === void 0 ? void 0 : _type$options2.direction) === 'horizontal' || ((_type$options3 = type.options) === null || _type$options3 === void 0 ? void 0 : _type$options3.layout) === 'grid';
return /*#__PURE__*/_react.default.createElement(_components.FormFieldSet, {
ref: this.setElement,
title: type.title,
description: type.description,
__unstable_presence: presence,
level: level,
__unstable_changeIndicator: changeIndicatorOptions,
__unstable_markers: markers
}, /*#__PURE__*/_react.default.createElement(_list.List, {
isGrid: isGrid
}, options.map((option, index) => {
var optionType = this.getMemberTypeOfItem(option);
var checked = inArray(value, (0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option));
var disabled = !optionType;
var isTitled = (0, _types.isTitledListValue)(option);
return /*#__PURE__*/_react.default.createElement(_list.Item, {
index: index,
isGrid: isGrid,
key: index
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
as: "label",
muted: disabled
}, /*#__PURE__*/_react.default.createElement(_common.ConditionalReadOnlyField, {
readOnly: readOnly || (optionType === null || optionType === void 0 ? void 0 : optionType.readOnly),
parent: value,
value: checked
}, /*#__PURE__*/_react.default.createElement(WrappedCheckbox, {
disabled: disabled,
checked: checked,
onChange: e => this.handleChange(e.currentTarget.checked, option),
onFocus: () => this.handleFocus(index),
onBlur: onBlur
}), optionType && (isTitled ? /*#__PURE__*/_react.default.createElement(_ui.Box, {
padding: 2
}, /*#__PURE__*/_react.default.createElement(_ui.Text, null, option.title)) : /*#__PURE__*/_react.default.createElement(_ui.Box, {
marginLeft: 2
}, /*#__PURE__*/_react.default.createElement(_Preview.default, {
layout: "grid",
type: optionType,
value: (0, _legacyOptionsSupport.resolveValueWithLegacyOptionsSupport)(option)
}))), !optionType && /*#__PURE__*/_react.default.createElement(_ItemWithMissingType.ItemWithMissingType, {
value: option,
onFocus: () => _onFocus([])
}))));
})));
}
}
exports.default = OptionsArrayInput;
var WrappedCheckbox = props => {
var disabled = props.disabled,
checked = props.checked,
onChange = props.onChange,
onFocus = props.onFocus,
onBlur = props.onBlur;
var readOnly = (0, _internal.useConditionalReadOnly)();
return /*#__PURE__*/_react.default.createElement(_ui.Checkbox, {
disabled,
checked,
readOnly,
onChange,
onFocus,
onBlur
});
};