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

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

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["onChange", "value"];
/**
 * @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;
  }
}
var requiredIndicatorStyles = css({
  color: "var(--ds-text-danger, #AE2E24)"
});
function CheckboxGroupInner(_ref) {
  var label = _ref.label,
    description = _ref.description,
    onFieldChange = _ref.onFieldChange,
    options = _ref.options,
    error = _ref.error,
    fieldProps = _ref.fieldProps;
  var onChange = fieldProps.onChange,
    value = fieldProps.value,
    restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
  function _onChange(optionValue, isChecked) {
    var active = new Set(value ? value : []);
    if (isChecked) {
      active.add(optionValue);
    } else {
      active.delete(optionValue);
    }
    onChange(_toConsumableArray(active));
    onFieldChange();
  }
  return jsx(Fragment, null, jsx(AKFieldset, {
    legend: label
  }, options.map(function (_ref2, i) {
    var optionLabel = _ref2.label,
      optionValue = _ref2.value;
    var isChecked = value && value.includes(optionValue);
    var onOptionChange = function 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(_ref3) {
  var name = _ref3.name,
    field = _ref3.field,
    onFieldChange = _ref3.onFieldChange;
  var labelBase = field.label,
    description = field.description,
    defaultValue = field.defaultValue,
    _field$isRequired = field.isRequired,
    isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
    options = field.items,
    isDisabled = field.isDisabled;
  var label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
    css: requiredIndicatorStyles,
    "aria-hidden": "true"
  }, " *") : null);
  var _onFieldChange = useCallback(function () {
    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: function validate(value) {
      return _validate(value, isRequired);
    },
    isDisabled: isDisabled
  }, function (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));
  });
}