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

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

import _extends from "@babel/runtime/helpers/extends";
/**
 * @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, validateRequired } from '../utils';
const horizontalFieldsStyles = css({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-between'
});
const horizontalFieldWrapperStyles = css({
  flexBasis: '47%'
});
const hiddenStyles = css({
  display: 'none'
});
const getFromDefaultValue = (field, attribute) => {
  if (field.defaultValue) {
    return field.defaultValue[attribute];
  }
};
const DateField = ({
  parentField,
  scope,
  fieldName,
  onFieldChange,
  intl,
  isRequired,
  isDisabled
}) => jsx("div", {
  css: horizontalFieldWrapperStyles,
  key: fieldName
}, jsx(Field, {
  name: `${scope}.${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: value => {
    return validateRequired({
      isRequired
    }, value);
  },
  isDisabled: isDisabled
}, ({
  fieldProps,
  error
}) => 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: date => {
    fieldProps.onChange(date);
    onFieldChange(parentField.name, true);
  },
  locale: intl.locale,
  shouldShowCalendarButton: true,
  inputLabel: intl.formatMessage(messages[fieldName])
})), jsx(FieldMessages, {
  error: error
}))));
const DateRange = function ({
  name,
  field,
  onFieldChange,
  intl
}) {
  const items = useMemo(() => {
    return [...(field.items || []), {
      label: intl.formatMessage(messages.custom),
      value: 'custom'
    }].map(option => ({
      ...option,
      name
    }));
  }, [field.items, name, intl]);
  const [currentValue, setCurrentValue] = useState(getFromDefaultValue(field, 'value') || items[0].value);
  useEffect(() => {
    // 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]);
  const element = jsx(Fragment, null, jsx("div", {
    css: hiddenStyles
  }, jsx(Field, {
    name: `${name}.type`,
    defaultValue: 'date-range'
  }, ({
    fieldProps
  }) => jsx(TextField
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , _extends({}, fieldProps, {
    type: "hidden"
  })))), jsx(Field, {
    name: `${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: value => validate(field, value || ''),
    testId: `config-panel-date-range-${name}`,
    isDisabled: field.isDisabled
  }, ({
    fieldProps,
    error
  }) => 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: event => {
      fieldProps.onChange(event.target.value);
      setCurrentValue(event.target.value);
    }
  })), jsx(FieldMessages, {
    error: error
  }))), currentValue !== 'custom' ? jsx("div", {
    css: hiddenStyles
  }, jsx(Field, {
    name: `${name}.from`,
    defaultValue: currentValue
  }, ({
    fieldProps
  }) => 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;
};
const _default_1 = injectIntl(DateRange);
export default _default_1;