@atlaskit/editor-plugin-extension/dist/cjs/ui/ConfigPanel/Fields/DateRange.js

editor-plugin-extension plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _datetimePicker = require("@atlaskit/datetime-picker");
var _extensions = require("@atlaskit/editor-common/extensions");
var _form = require("@atlaskit/form");
var _radio = require("@atlaskit/radio");
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
var _utils = require("../utils");
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; } /**
 * @jsxRuntime classic
 * @jsx jsx
 */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var horizontalFieldsStyles = (0, _react2.css)({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between'
});
var horizontalFieldWrapperStyles = (0, _react2.css)({
  flexBasis: '47%'
});
var hiddenStyles = (0, _react2.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 (0, _react2.jsx)("div", {
    css: horizontalFieldWrapperStyles,
    key: fieldName
  }, (0, _react2.jsx)(_form.Field, {
    name: "".concat(scope, ".").concat(fieldName),
    label: intl.formatMessage(_extensions.configPanelMessages[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 (0, _utils.validateRequired)({
        isRequired: isRequired
      }, value);
    },
    isDisabled: isDisabled
  }, function (_ref2) {
    var fieldProps = _ref2.fieldProps,
      error = _ref2.error;
    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_datetimePicker.DatePicker
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , (0, _extends2.default)({}, 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(_extensions.configPanelMessages[fieldName])
    })), (0, _react2.jsx)(_FieldMessages.default, {
      error: error
    }));
  }));
};
var DateRange = function DateRange(_ref3) {
  var name = _ref3.name,
    field = _ref3.field,
    onFieldChange = _ref3.onFieldChange,
    intl = _ref3.intl;
  var items = (0, _react.useMemo)(function () {
    return [].concat((0, _toConsumableArray2.default)(field.items || []), [{
      label: intl.formatMessage(_extensions.configPanelMessages.custom),
      value: 'custom'
    }]).map(function (option) {
      return _objectSpread(_objectSpread({}, option), {}, {
        name: name
      });
    });
  }, [field.items, name, intl]);
  var _useState = (0, _react.useState)(getFromDefaultValue(field, 'value') || items[0].value),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    currentValue = _useState2[0],
    setCurrentValue = _useState2[1];
  (0, _react.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 = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
    css: hiddenStyles
  }, (0, _react2.jsx)(_form.Field, {
    name: "".concat(name, ".type"),
    defaultValue: 'date-range'
  }, function (_ref4) {
    var fieldProps = _ref4.fieldProps;
    return (0, _react2.jsx)(_textfield.default
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , (0, _extends2.default)({}, fieldProps, {
      type: "hidden"
    }));
  })), (0, _react2.jsx)(_form.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 (0, _utils.validate)(field, value || '');
    },
    testId: "config-panel-date-range-".concat(name),
    isDisabled: field.isDisabled
  }, function (_ref5) {
    var fieldProps = _ref5.fieldProps,
      error = _ref5.error;
    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_radio.RadioGroup
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , (0, _extends2.default)({}, 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);
      }
    })), (0, _react2.jsx)(_FieldMessages.default, {
      error: error
    }));
  }), currentValue !== 'custom' ? (0, _react2.jsx)("div", {
    css: hiddenStyles
  }, (0, _react2.jsx)(_form.Field, {
    name: "".concat(name, ".from"),
    defaultValue: currentValue
  }, function (_ref6) {
    var fieldProps = _ref6.fieldProps;
    return (0, _react2.jsx)(_textfield.default
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
    , (0, _extends2.default)({}, fieldProps, {
      type: "hidden"
    }));
  })) : (0, _react2.jsx)("div", {
    css: horizontalFieldsStyles
  }, (0, _react2.jsx)(DateField, {
    scope: name,
    parentField: field,
    fieldName: "from",
    onFieldChange: onFieldChange,
    intl: intl,
    isRequired: field.isRequired,
    isDisabled: field.isDisabled
  }), (0, _react2.jsx)(DateField, {
    scope: name,
    parentField: field,
    fieldName: "to",
    onFieldChange: onFieldChange,
    intl: intl,
    isRequired: field.isRequired,
    isDisabled: field.isDisabled
  })), (0, _react2.jsx)(_FieldMessages.default, {
    description: field.description
  }));
  return element;
};
var _default_1 = (0, _reactIntl.injectIntl)(DateRange);
var _default = exports.default = _default_1;