@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
291 lines (289 loc) • 14.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
var _extensions = require("@atlaskit/editor-common/extensions");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
var _primitives = require("@atlaskit/primitives");
var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
var _select = _interopRequireDefault(require("@atlaskit/select"));
var _utils = require("../utils");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
* @jsxRuntime classic
* @jsx jsx
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var actionsWrapperStyles = (0, _react2.css)({
borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
marginTop: "var(--ds-space-200, 16px)",
paddingTop: "var(--ds-space-200, 16px)"
});
var populateFromParameters = function populateFromParameters(parameters, fields) {
if (Object.keys(parameters).length) {
var keys = Object.keys(parameters);
var existingFieldKeys = keys.filter(function (key) {
return fields.find(function (field) {
return field.name === (0, _utils.getNameFromDuplicateField)(key);
});
});
if (existingFieldKeys.length > 0) {
return existingFieldKeys;
}
}
};
var populateFromRequired = function populateFromRequired(fields) {
return fields.filter(function (field) {
return field.isRequired;
}).map(function (field) {
return field.name;
});
};
var getInitialFields = function getInitialFields() {
var parameters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var fields = arguments.length > 1 ? arguments[1] : undefined;
var isDynamic = arguments.length > 2 ? arguments[2] : undefined;
if (!isDynamic) {
return new Set(fields.map(function (field) {
return field.name;
}));
}
var dynamicFields = [];
var fromRequired = populateFromRequired(fields);
if (fromRequired) {
dynamicFields.push.apply(dynamicFields, (0, _toConsumableArray2.default)(fromRequired));
}
var fromParameters = populateFromParameters(parameters, fields);
if (fromParameters) {
dynamicFields.push.apply(dynamicFields, (0, _toConsumableArray2.default)(fromParameters));
}
if (dynamicFields.length === 0 && Array.isArray(fields) && fields.length > 0) {
dynamicFields.push(fields[0].name);
}
return new Set(dynamicFields);
};
// eslint-disable-next-line @repo/internal/react/no-class-components
var FieldsetField = /*#__PURE__*/function (_React$Component) {
function FieldsetField(props) {
var _this;
(0, _classCallCheck2.default)(this, FieldsetField);
_this = _callSuper(this, FieldsetField, [props]);
(0, _defineProperty2.default)(_this, "getSelectedFields", function (visibleFields) {
var field = _this.props.field;
return (0, _toConsumableArray2.default)(visibleFields).map(function (fieldName) {
var originalFieldDef = field.fields.find(function (field) {
return field.name === (0, _utils.getNameFromDuplicateField)(fieldName);
});
var fieldDef = _objectSpread(_objectSpread({}, originalFieldDef), {}, {
name: fieldName
});
// for duplicate fields we only want the first one to actually be required
if (originalFieldDef.name !== fieldName && fieldDef.isRequired === true) {
fieldDef.isRequired = false;
}
return fieldDef;
});
});
(0, _defineProperty2.default)(_this, "getSelectOptions", function (visibleFields) {
var field = _this.props.field;
return field.fields.filter(function (field) {
return field.allowDuplicates || !visibleFields.has(field.name);
}).map(function (field) {
return {
value: field.name,
label: field.label
};
});
});
(0, _defineProperty2.default)(_this, "setIsAdding", function (value) {
_this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
isAdding: value
});
});
});
(0, _defineProperty2.default)(_this, "setCurrentParameters", function (parameters) {
_this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
currentParameters: parameters
});
},
// callback required so autosave can be triggered on
// the right moment if fields are being removed
function () {
return _this.props.onFieldChange(_this.props.field.name, true);
});
});
(0, _defineProperty2.default)(_this, "setVisibleFields", function (fields) {
_this.setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
visibleFields: fields,
selectedFields: _this.getSelectedFields(fields),
selectOptions: _this.getSelectOptions(fields)
});
});
});
(0, _defineProperty2.default)(_this, "onSelectItem", function (option) {
var visibleFields = _this.state.visibleFields;
var newItem = option.value;
var duplicates = (0, _toConsumableArray2.default)(visibleFields).filter(function (field) {
return (0, _utils.getNameFromDuplicateField)(field) === newItem;
});
if (duplicates.length > 0) {
newItem += ":".concat(duplicates.length);
}
_this.setVisibleFields(new Set([].concat((0, _toConsumableArray2.default)(visibleFields), [newItem])));
_this.setIsAdding(false);
});
(0, _defineProperty2.default)(_this, "onClickRemove", function (fieldName) {
var _this$state = _this.state,
visibleFields = _this$state.visibleFields,
currentParameters = _this$state.currentParameters;
visibleFields.delete(fieldName);
_this.setVisibleFields(new Set(visibleFields));
var newParameters = _objectSpread({}, currentParameters);
delete newParameters[fieldName];
// if any there are duplicate fields that come after the one removed, we want to reduce their
// duplicate index eg. label:2 -> label:1
if ((0, _utils.isDuplicateField)(fieldName)) {
var _fieldName$split = fieldName.split(':'),
_fieldName$split2 = (0, _slicedToArray2.default)(_fieldName$split, 2),
key = _fieldName$split2[0],
idx = _fieldName$split2[1];
var currentIdx = +idx;
while (currentParameters["".concat(key, ":").concat(currentIdx + 1)]) {
newParameters["".concat(key, ":").concat(currentIdx)] = currentParameters["".concat(key, ":").concat(currentIdx + 1)];
currentIdx++;
}
delete newParameters["".concat(key, ":").concat(currentIdx)];
}
_this.setCurrentParameters(newParameters);
});
(0, _defineProperty2.default)(_this, "renderActions", function () {
var intl = _this.props.intl;
var _this$state2 = _this.state,
selectOptions = _this$state2.selectOptions,
isAdding = _this$state2.isAdding;
if (selectOptions.length === 0) {
return null;
}
return (0, _react2.jsx)(_react.default.Fragment, null, isAdding ? (0, _react2.jsx)(_select.default, {
testId: "field-picker",
defaultMenuIsOpen: true,
autoFocus: true,
placeholder: intl.formatMessage(_extensions.configPanelMessages.addField),
options: selectOptions
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(option) {
if (option) {
_this.onSelectItem(option);
}
}
}) : (0, _react2.jsx)(_new.default, {
testId: "add-more",
appearance: "subtle"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
iconBefore: function iconBefore(iconProps) {
return (0, _react2.jsx)(_add.default
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, (0, _extends2.default)({}, iconProps, {
spacing: "none",
label: intl.formatMessage(_extensions.configPanelMessages.addField)
}));
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return _this.setIsAdding(true);
}
}, intl.formatMessage(_extensions.configPanelMessages.addField)));
});
var initialFields = getInitialFields(props.parameters, props.field.fields, props.field.options.isDynamic);
_this.state = {
isAdding: false,
currentParameters: props.parameters || {},
visibleFields: initialFields,
selectedFields: _this.getSelectedFields(initialFields),
selectOptions: _this.getSelectOptions(initialFields)
};
return _this;
}
(0, _inherits2.default)(FieldsetField, _React$Component);
return (0, _createClass2.default)(FieldsetField, [{
key: "render",
value: function render() {
var _this$props = this.props,
name = _this$props.name,
field = _this$props.field,
extensionManifest = _this$props.extensionManifest,
onFieldChange = _this$props.onFieldChange,
firstVisibleFieldName = _this$props.firstVisibleFieldName,
error = _this$props.error,
FormComponent = _this$props.formComponent;
var label = field.label,
options = field.options;
var _this$state3 = this.state,
selectedFields = _this$state3.selectedFields,
currentParameters = _this$state3.currentParameters,
visibleFields = _this$state3.visibleFields;
var children = this.renderActions();
return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(FieldsetError, {
message: error
}), (0, _react2.jsx)("div", null, (options === null || options === void 0 ? void 0 : options.showTitle) && (0, _react2.jsx)(_heading.default, {
size: "xsmall"
}, label), (0, _react2.jsx)(FormComponent, {
fields: selectedFields,
parentName: name,
extensionManifest: extensionManifest,
parameters: currentParameters,
canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
onClickRemove: this.onClickRemove,
onFieldChange: onFieldChange,
firstVisibleFieldName: firstVisibleFieldName,
isDisabled: field.isDisabled
}), children && (0, _react2.jsx)("div", {
css: actionsWrapperStyles,
"data-testId": "fieldset-actions"
}, children)));
}
}]);
}(_react.default.Component);
function FieldsetError(_ref) {
var message = _ref.message;
return (0, _react2.jsx)(_primitives.Box, {
xcss: sectionMessageWrapperStyles
}, (0, _react2.jsx)(_sectionMessage.default, {
appearance: "error"
}, (0, _react2.jsx)(_primitives.Text, {
as: "p"
}, message)));
}
var sectionMessageWrapperStyles = (0, _primitives.xcss)({
marginBottom: 'space.300'
});
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(FieldsetField);
var _default = exports.default = _default_1;