@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
186 lines (185 loc) • 6.98 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
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; }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { Fragment, useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { DatePicker } from '@atlaskit/datetime-picker';
import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
import { Field } from '@atlaskit/form';
import { RadioGroup } from '@atlaskit/radio';
import TextField from '@atlaskit/textfield';
import FieldMessages from '../FieldMessages';
import { validate as _validate, validateRequired } from '../utils';
var horizontalFieldsStyles = css({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
});
var horizontalFieldWrapperStyles = css({
flexBasis: '47%'
});
var hiddenStyles = css({
display: 'none'
});
var getFromDefaultValue = function getFromDefaultValue(field, attribute) {
if (field.defaultValue) {
return field.defaultValue[attribute];
}
};
var DateField = function DateField(_ref) {
var parentField = _ref.parentField,
scope = _ref.scope,
fieldName = _ref.fieldName,
onFieldChange = _ref.onFieldChange,
intl = _ref.intl,
isRequired = _ref.isRequired,
isDisabled = _ref.isDisabled;
return jsx("div", {
css: horizontalFieldWrapperStyles,
key: fieldName
}, jsx(Field, {
name: "".concat(scope, ".").concat(fieldName),
label: intl.formatMessage(messages[fieldName]),
defaultValue: getFromDefaultValue(parentField, fieldName),
isRequired: isRequired
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
validate: function validate(value) {
return validateRequired({
isRequired: isRequired
}, value);
},
isDisabled: isDisabled
}, function (_ref2) {
var fieldProps = _ref2.fieldProps,
error = _ref2.error;
return jsx(Fragment, null, jsx(DatePicker
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, fieldProps, {
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
onChange: function onChange(date) {
fieldProps.onChange(date);
onFieldChange(parentField.name, true);
},
locale: intl.locale,
shouldShowCalendarButton: true,
inputLabel: intl.formatMessage(messages[fieldName])
})), jsx(FieldMessages, {
error: error
}));
}));
};
var DateRange = function DateRange(_ref3) {
var name = _ref3.name,
field = _ref3.field,
onFieldChange = _ref3.onFieldChange,
intl = _ref3.intl;
var items = useMemo(function () {
return [].concat(_toConsumableArray(field.items || []), [{
label: intl.formatMessage(messages.custom),
value: 'custom'
}]).map(function (option) {
return _objectSpread(_objectSpread({}, option), {}, {
name: name
});
});
}, [field.items, name, intl]);
var _useState = useState(getFromDefaultValue(field, 'value') || items[0].value),
_useState2 = _slicedToArray(_useState, 2),
currentValue = _useState2[0],
setCurrentValue = _useState2[1];
useEffect(function () {
// calling onBlur here based on the currentValue changing will ensure that we
// get the most up to date value after the form has been rendered
onFieldChange(name, true);
}, [currentValue, onFieldChange, name]);
var element = jsx(Fragment, null, jsx("div", {
css: hiddenStyles
}, jsx(Field, {
name: "".concat(name, ".type"),
defaultValue: 'date-range'
}, function (_ref4) {
var fieldProps = _ref4.fieldProps;
return jsx(TextField
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, fieldProps, {
type: "hidden"
}));
})), jsx(Field, {
name: "".concat(name, ".value"),
label: field.label,
defaultValue: currentValue,
isRequired: field.isRequired
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
validate: function validate(value) {
return _validate(field, value || '');
},
testId: "config-panel-date-range-".concat(name),
isDisabled: field.isDisabled
}, function (_ref5) {
var fieldProps = _ref5.fieldProps,
error = _ref5.error;
return jsx(Fragment, null, jsx(RadioGroup
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, fieldProps, {
options: items
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(event) {
fieldProps.onChange(event.target.value);
setCurrentValue(event.target.value);
}
})), jsx(FieldMessages, {
error: error
}));
}), currentValue !== 'custom' ? jsx("div", {
css: hiddenStyles
}, jsx(Field, {
name: "".concat(name, ".from"),
defaultValue: currentValue
}, function (_ref6) {
var fieldProps = _ref6.fieldProps;
return jsx(TextField
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, fieldProps, {
type: "hidden"
}));
})) : jsx("div", {
css: horizontalFieldsStyles
}, jsx(DateField, {
scope: name,
parentField: field,
fieldName: "from",
onFieldChange: onFieldChange,
intl: intl,
isRequired: field.isRequired,
isDisabled: field.isDisabled
}), jsx(DateField, {
scope: name,
parentField: field,
fieldName: "to",
onFieldChange: onFieldChange,
intl: intl,
isRequired: field.isRequired,
isDisabled: field.isDisabled
})), jsx(FieldMessages, {
description: field.description
}));
return element;
};
var _default_1 = injectIntl(DateRange);
export default _default_1;