@sanity/form-builder
Version:
Sanity form builder
172 lines (171 loc) • 8.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ItemRow = void 0;
var _presence = require("@sanity/base/presence");
var _react = _interopRequireWildcard(require("react"));
var _ui = require("@sanity/ui");
var _components = require("@sanity/base/components");
var _types = require("@sanity/types");
var _icons = require("@sanity/icons");
var _autoId = require("@reach/auto-id");
var _internal = require("@sanity/base/_internal");
var _DragHandle = require("../common/DragHandle");
var _PatchEvent = _interopRequireWildcard(require("../../../PatchEvent"));
var _ItemWithMissingType = require("../ArrayOfObjectsInput/item/ItemWithMissingType");
var _FormBuilderInput = require("../../../FormBuilderInput");
var _InsertMenu = require("../ArrayOfObjectsInput/InsertMenu");
var _getEmptyValue = _interopRequireDefault(require("./getEmptyValue"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var dragHandle = /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
paddingX: 1,
paddingY: 3
});
var ItemRow = /*#__PURE__*/_react.default.forwardRef(function ItemRow(props, ref) {
var _useConditionalReadOn;
var focusRef = _react.default.useRef(null);
var isSortable = props.isSortable,
value = props.value,
index = props.index,
compareValue = props.compareValue,
level = props.level,
onEscapeKey = props.onEscapeKey,
onEnterKey = props.onEnterKey,
onFocus = props.onFocus,
onChange = props.onChange,
onBlur = props.onBlur,
insertableTypes = props.insertableTypes,
onInsert = props.onInsert,
onRemove = props.onRemove,
focusPath = props.focusPath,
markers = props.markers,
type = props.type,
readOnly = props.readOnly,
presence = props.presence;
var conditionalReadOnly = (_useConditionalReadOn = (0, _internal.useConditionalReadOnly)()) !== null && _useConditionalReadOn !== void 0 ? _useConditionalReadOn : readOnly;
var hasError = markers.filter(_types.isValidationErrorMarker).length > 0;
var hasWarning = markers.filter(_types.isValidationWarningMarker).length > 0;
var showValidationStatus = !conditionalReadOnly && markers.length > 0 && !(type !== null && type !== void 0 && type.title);
var showPresence = !(type !== null && type !== void 0 && type.title) && !conditionalReadOnly && presence.length > 0;
var handleRemove = (0, _react.useCallback)(() => {
onRemove(index);
}, [index, onRemove]);
var handleInsert = (0, _react.useCallback)((pos, insertType) => {
onInsert === null || onInsert === void 0 ? void 0 : onInsert(pos, index, (0, _getEmptyValue.default)(insertType));
}, [index, onInsert]);
var handleDuplicate = (0, _react.useCallback)(() => {
onInsert === null || onInsert === void 0 ? void 0 : onInsert('after', index, value);
}, [index, onInsert, value]);
var handleKeyPress = (0, _react.useCallback)(event => {
if (event.key === 'Enter') {
onEnterKey(index);
}
}, [index, onEnterKey]);
var handleKeyUp = (0, _react.useCallback)(event => {
if (event.shiftKey && event.key === 'Backspace' && value === '') {
onRemove(index);
}
if (event.key === 'Escape') {
onEscapeKey(index);
}
}, [index, onEscapeKey, onRemove, value]);
var handleChange = (0, _react.useCallback)(patchEvent => {
onChange(_PatchEvent.default.from(patchEvent.patches.map((patch // Map direct unset patches to empty value instead in order to not *remove* elements as the user clears out the value
) => patch.path.length === 0 && patch.type === 'unset' && type ? (0, _PatchEvent.set)((0, _getEmptyValue.default)(type)) : patch)).prefixAll(index));
}, [index, onChange, type]);
var handleMissingTypeFocus = (0, _react.useCallback)(() => onFocus([]), [onFocus]);
var tone = (0, _react.useMemo)(() => {
if (hasError) {
return 'critical';
}
if (hasWarning) {
return 'caution';
}
return undefined;
}, [hasError, hasWarning]);
var id = (0, _autoId.useId)();
return /*#__PURE__*/_react.default.createElement(_ui.Card, {
tone: tone,
radius: 2,
paddingX: 1,
paddingY: 2
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: type ? 'flex-end' : 'center',
ref: ref
}, type ? /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "flex-end",
flex: 1
}, isSortable && /*#__PURE__*/_react.default.createElement(_ui.Box, {
marginRight: 1
}, dragHandle), /*#__PURE__*/_react.default.createElement(_ui.Box, {
flex: 1,
marginRight: 2
}, /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, {
ref: focusRef,
value: value,
path: [index],
compareValue: compareValue,
markers: markers,
focusPath: focusPath,
onFocus: onFocus,
onBlur: onBlur,
type: type,
readOnly: Boolean(conditionalReadOnly !== null && conditionalReadOnly !== void 0 ? conditionalReadOnly : type.readOnly),
level: level,
presence: presence,
onKeyUp: handleKeyUp,
onKeyPress: handleKeyPress,
onChange: handleChange
}))) : /*#__PURE__*/_react.default.createElement(_ui.Box, {
flex: 1
}, /*#__PURE__*/_react.default.createElement(_ItemWithMissingType.ItemWithMissingType, {
value: value,
onFocus: handleMissingTypeFocus
})), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
align: "center",
marginLeft: 2
}, showValidationStatus && /*#__PURE__*/_react.default.createElement(_ui.Box, {
marginRight: 3
}, /*#__PURE__*/_react.default.createElement(_components.FormFieldValidationStatus, {
__unstable_markers: markers
})), showPresence &&
/*#__PURE__*/
// if title is set on type, presence avatars will be shown in the input' formfield instead
_react.default.createElement(_ui.Box, {
marginRight: 1
}, /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
presence: presence,
maxAvatars: 1
})), !conditionalReadOnly && /*#__PURE__*/_react.default.createElement(_ui.Box, {
paddingY: 1
}, /*#__PURE__*/_react.default.createElement(_ui.MenuButton, {
button: /*#__PURE__*/_react.default.createElement(_ui.Button, {
padding: 2,
mode: "bleed",
icon: _icons.EllipsisVerticalIcon
}),
id: "".concat(id, "-menuButton"),
portal: true,
popover: {
portal: true,
tone: 'default'
},
menu: /*#__PURE__*/_react.default.createElement(_ui.Menu, null, /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
text: "Remove",
tone: "critical",
icon: _icons.TrashIcon,
onClick: handleRemove
}), /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
text: "Duplicate",
icon: _icons.CopyIcon,
onClick: handleDuplicate
}), /*#__PURE__*/_react.default.createElement(_InsertMenu.InsertMenu, {
types: insertableTypes,
onInsert: handleInsert
}))
})))));
});
exports.ItemRow = ItemRow;