@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
239 lines (238 loc) • 9.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { isFieldset } from '@atlaskit/editor-common/extensions';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import Boolean from './Fields/Boolean';
import ColorPicker from './Fields/ColorPicker';
import CustomSelect from './Fields/CustomSelect';
import Date from './Fields/Date';
import DateRange from './Fields/DateRange';
import Enum from './Fields/Enum';
import Expand from './Fields/Expand';
import Fieldset from './Fields/Fieldset';
import Number from './Fields/Number';
import String from './Fields/String';
import TabGroup from './Fields/TabGroup';
import UnhandledType from './Fields/UnhandledType';
import UserSelect from './Fields/UserSelect';
import { FormErrorBoundary } from './FormErrorBoundary';
import RemovableField from './NestedForms/RemovableField';
import { getSafeParentedName } from './utils';
export function FieldComponent(_ref) {
var _parameters$errors;
var field = _ref.field,
parameters = _ref.parameters,
parentName = _ref.parentName,
extensionManifest = _ref.extensionManifest,
firstVisibleFieldName = _ref.firstVisibleFieldName,
onFieldChange = _ref.onFieldChange,
featureFlags = _ref.featureFlags;
var _field = field,
name = _field.name,
type = _field.type;
var autoFocus = name === firstVisibleFieldName;
var defaultValue = parameters[name];
var error = (_parameters$errors = parameters.errors) === null || _parameters$errors === void 0 ? void 0 : _parameters$errors[name];
var parentedName = getSafeParentedName(name, parentName);
var fieldDefaultValue = field.type === 'enum' ? field.defaultValue : undefined;
if (name in parameters && !isFieldset(field)) {
field = _objectSpread(_objectSpread({}, field), defaultValue != null ? {
defaultValue: defaultValue
} : {});
}
switch (field.type) {
case 'string':
return /*#__PURE__*/React.createElement(String, {
name: parentedName,
field: field,
autoFocus: autoFocus,
onFieldChange: onFieldChange,
placeholder: field.placeholder
});
case 'number':
return /*#__PURE__*/React.createElement(Number, {
name: parentedName,
field: field,
autoFocus: autoFocus,
onFieldChange: onFieldChange,
placeholder: field.placeholder
});
case 'boolean':
return /*#__PURE__*/React.createElement(Boolean, {
name: parentedName,
field: field,
onFieldChange: onFieldChange
});
case 'color':
return /*#__PURE__*/React.createElement(ColorPicker, {
name: parentedName,
field: field,
onFieldChange: onFieldChange,
featureFlags: featureFlags
});
case 'date':
return /*#__PURE__*/React.createElement(Date, {
name: parentedName,
field: field,
autoFocus: autoFocus,
onFieldChange: onFieldChange,
placeholder: field.placeholder
});
case 'date-range':
return /*#__PURE__*/React.createElement(DateRange, {
name: parentedName,
field: field,
autoFocus: autoFocus,
onFieldChange: onFieldChange
});
case 'enum':
return /*#__PURE__*/React.createElement(Enum, {
name: parentedName,
field: field,
autoFocus: autoFocus,
onFieldChange: onFieldChange,
fieldDefaultValue: fieldDefaultValue
});
case 'custom':
return /*#__PURE__*/React.createElement(CustomSelect, {
name: parentedName,
field: field,
extensionManifest: extensionManifest,
placeholder: field.placeholder,
autoFocus: autoFocus,
onFieldChange: onFieldChange,
parameters: parameters
});
case 'fieldset':
return /*#__PURE__*/React.createElement(Fieldset, {
name: parentedName,
field: field,
firstVisibleFieldName: firstVisibleFieldName,
onFieldChange: onFieldChange,
extensionManifest: extensionManifest,
parameters: defaultValue || {},
error: error,
formComponent: FormContent
});
case 'user':
return /*#__PURE__*/React.createElement(UserSelect, {
name: parentedName,
field: field,
autoFocus: name === firstVisibleFieldName,
extensionManifest: extensionManifest,
onFieldChange: onFieldChange
});
case 'expand':
{
// if expand is under a tab with hasGroupedValues=true
var resolvedParentName = [parentName, field.hasGroupedValues ? field.name : undefined].filter(function (val) {
return !!val;
}).join('.') || undefined;
var resolvedParameters = !field.hasGroupedValues ? parameters : parameters[field.name] || {};
return /*#__PURE__*/React.createElement(Expand, {
field: field,
isExpanded: field.isExpanded
}, /*#__PURE__*/React.createElement(FormContent, {
parentName: resolvedParentName,
fields: field.fields,
parameters: resolvedParameters,
onFieldChange: onFieldChange,
extensionManifest: extensionManifest,
featureFlags: featureFlags,
isDisabled: field.isDisabled
}));
}
case 'tab-group':
{
var tabGroupField = field;
var tabGroupParams = tabGroupField.hasGroupedValues ? parameters[tabGroupField.name] || {} : parameters;
var renderPanel = function renderPanel(tabField) {
var parentName = [tabGroupField.hasGroupedValues ? tabGroupField.name : undefined, tabField.hasGroupedValues ? tabField.name : undefined].filter(function (val) {
return !!val;
}).join('.') || undefined;
var tabParameters = tabField.hasGroupedValues ? tabGroupParams[tabField.name] || {} : tabGroupParams;
return /*#__PURE__*/React.createElement(FormContent, {
parentName: parentName,
fields: tabField.fields,
parameters: tabParameters,
onFieldChange: onFieldChange,
extensionManifest: extensionManifest,
featureFlags: featureFlags,
isDisabled: field.isDisabled
});
};
return /*#__PURE__*/React.createElement(TabGroup, {
field: tabGroupField,
renderPanel: renderPanel
});
}
default:
return /*#__PURE__*/React.createElement(UnhandledType, {
field: field,
errorMessage: "Field \"".concat(name, "\" of type \"").concat(type, "\" not supported")
});
}
}
function Hidden(_ref2) {
var children = _ref2.children;
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'none'
}
}, children);
}
export default function FormContent(_ref3) {
var fields = _ref3.fields,
parentName = _ref3.parentName,
parameters = _ref3.parameters,
extensionManifest = _ref3.extensionManifest,
canRemoveFields = _ref3.canRemoveFields,
onClickRemove = _ref3.onClickRemove,
onFieldChange = _ref3.onFieldChange,
firstVisibleFieldName = _ref3.firstVisibleFieldName,
contextIdentifierProvider = _ref3.contextIdentifierProvider,
featureFlags = _ref3.featureFlags,
isDisabled = _ref3.isDisabled;
var mappedFields = fields;
if (editorExperiment('platform_editor_offline_editing_web', true)) {
mappedFields = fields.map(function (field) {
var _field$isDisabled;
return _objectSpread(_objectSpread({}, field), {}, {
isDisabled: (_field$isDisabled = field.isDisabled) !== null && _field$isDisabled !== void 0 ? _field$isDisabled : isDisabled
});
});
}
return /*#__PURE__*/React.createElement(FormErrorBoundary, {
contextIdentifierProvider: contextIdentifierProvider,
extensionKey: extensionManifest.key,
fields: mappedFields
}, mappedFields.map(function (field) {
var fieldElement = /*#__PURE__*/React.createElement(FieldComponent, {
field: field,
parameters: parameters || {},
parentName: parentName,
extensionManifest: extensionManifest,
firstVisibleFieldName: firstVisibleFieldName,
onFieldChange: onFieldChange,
featureFlags: featureFlags
});
// only to be supported by String fields at this time
if ('isHidden' in field && field.isHidden) {
fieldElement = /*#__PURE__*/React.createElement(Hidden, null, fieldElement);
}
var name = field.name,
type = field.type;
return /*#__PURE__*/React.createElement(RemovableField, {
key: name,
name: name,
canRemoveField: canRemoveFields && !field.isRequired,
onClickRemove: onClickRemove
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "field-wrapper-".concat(type)
}, fieldElement);
}));
}