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

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

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import { Fragment, useCallback } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
import { Fieldset as AKFieldset, Field } from '@atlaskit/form';
import FieldMessages from '../FieldMessages';
import { ValidationError } from '../types';
function validate(value, isRequired) {
  if (isRequired && !(value !== null && value !== void 0 && value.length)) {
    return ValidationError.Required;
  }
}
const requiredIndicatorStyles = css({
  color: "var(--ds-text-danger, #AE2E24)"
});
function CheckboxGroupInner({
  label,
  description,
  onFieldChange,
  options,
  error,
  fieldProps
}) {
  const {
    onChange,
    value,
    ...restFieldProps
  } = fieldProps;
  function _onChange(optionValue, isChecked) {
    const active = new Set(value ? value : []);
    if (isChecked) {
      active.add(optionValue);
    } else {
      active.delete(optionValue);
    }
    onChange([...active]);
    onFieldChange();
  }
  return jsx(Fragment, null, jsx(AKFieldset, {
    legend: label
  }, options.map(({
    label: optionLabel,
    value: optionValue
  }, i) => {
    const isChecked = value && value.includes(optionValue);
    const onOptionChange = event => {
      _onChange(optionValue, event.target.checked);
    };
    return jsx(AKCheckbox
    // Ignored via go/ees005
    // eslint-disable-next-line react/no-array-index-key
    , _extends({
      key: i
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
    }, restFieldProps, {
      isRequired: false,
      label: optionLabel,
      isChecked: isChecked,
      onChange: onOptionChange
    }));
  })), jsx(FieldMessages, {
    error: error,
    description: description
  }));
}
export default function CheckboxGroup({
  name,
  field,
  onFieldChange
}) {
  const {
    label: labelBase,
    description,
    defaultValue,
    isRequired = false,
    items: options,
    isDisabled
  } = field;
  const label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
    css: requiredIndicatorStyles,
    "aria-hidden": "true"
  }, " *") : null);
  const _onFieldChange = useCallback(() => {
    onFieldChange(name, true);
  }, [name, onFieldChange]);
  return jsx(Field, {
    name: name,
    isRequired: isRequired,
    defaultValue: defaultValue
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    validate: value => validate(value, isRequired),
    isDisabled: isDisabled
  }, props => {
    return jsx(CheckboxGroupInner, _extends({
      label: label,
      description: description,
      options: options,
      onFieldChange: _onFieldChange
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
    }, props));
  });
}