@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/ui/ConfigPanel/FieldMessages.js

@@ -0,0 +1,97 @@
+import React, { Fragment, useMemo } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { ErrorMessage, HelperMessage } from '@atlaskit/form';
+import { messages } from './messages';
+import { FieldTypeError, ValidationError } from './types';
+
+// sidestep XSS issues
+function makeMarkup(fragment, key) {
+  var nodeName = fragment.nodeName,
+    nodeType = fragment.nodeType,
+    childNodes = fragment.childNodes,
+    textContent = fragment.textContent;
+  if (nodeType === Node.TEXT_NODE) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, textContent);
+  }
+
+  // NOTE: NodeList doesn't have .map
+  var children = [];
+  childNodes.forEach(function (childNode, i) {
+    var markup = makeMarkup(childNode, String(i));
+    if (markup) {
+      children.push(markup);
+    }
+  });
+  switch (nodeName) {
+    case 'B':
+      return /*#__PURE__*/React.createElement("b", {
+        key: key
+      }, children);
+    case 'I':
+      return /*#__PURE__*/React.createElement("i", {
+        key: key
+      }, children);
+    case 'STRONG':
+      return /*#__PURE__*/React.createElement("strong", {
+        key: key
+      }, children);
+    case 'EM':
+      return /*#__PURE__*/React.createElement("em", {
+        key: key
+      }, children);
+    case 'CODE':
+      return /*#__PURE__*/React.createElement("code", {
+        key: key
+      }, children);
+  }
+  if (children.length === 1) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, children[0]);
+  }
+  if (children.length) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: key
+    }, children);
+  }
+  return null;
+}
+function Description(_ref) {
+  var description = _ref.description;
+  var markup = useMemo(function () {
+    var dom = new DOMParser().parseFromString(description, 'text/html');
+    return makeMarkup(dom);
+  }, [description]);
+  return /*#__PURE__*/React.createElement(HelperMessage, {
+    testId: "field-message-description"
+  }, markup);
+}
+var FieldMessages = function FieldMessages(_ref2) {
+  var error = _ref2.error,
+    description = _ref2.description,
+    intl = _ref2.intl;
+  if (!error && description) {
+    return /*#__PURE__*/React.createElement(Description, {
+      description: description
+    });
+  }
+  switch (error) {
+    case ValidationError.Required:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.required));
+    case ValidationError.Invalid:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.invalid));
+    case FieldTypeError.isMultipleAndRadio:
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.isMultipleAndRadio));
+    default:
+      return null;
+  }
+};
+export default injectIntl(FieldMessages);

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value"],
+  _excluded2 = ["id", "value"];
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
+import { Field } from '@atlaskit/form';
+import AKToggle from '@atlaskit/toggle';
+import FieldMessages from '../FieldMessages';
+import { ValidationError } from '../types';
+import { requiredIndicator } from './common/RequiredIndicator';
+var toggleFieldWrapperStyles = css({
+  display: 'flex'
+});
+var toggleLabelStyles = css({
+  display: 'flex',
+  padding: '3px 3px 3px 0px',
+  flexGrow: 1
+});
+function _validate(value, isRequired) {
+  if (isRequired && !value) {
+    return ValidationError.Required;
+  }
+}
+function parseBoolean(value) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return value === 'true';
+}
+function handleOnChange(onChange, onFieldChange, event) {
+  var _event$target;
+  onChange((event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false);
+  // Note: prior to bumping typescript to version 2.4.2 onFieldChange
+  // was being called with a global variable (which had a value of '')
+  // While this was not intended, the code still worked as expected.
+  // In typescript 2.4.2 accessing the global variable name has been
+  // deprecated, so this has been replaced with the value it was
+  // previously passing.
+  onFieldChange('', true);
+}
+function Checkbox(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange;
+  var label = field.label,
+    description = field.description,
+    _field$isRequired = field.isRequired,
+    isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
+    _field$defaultValue = field.defaultValue,
+    defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    },
+    defaultValue: defaultValue
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    var isChecked = fieldProps.value,
+      restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
+      label: label,
+      onChange: function onChange(event) {
+        return handleOnChange(fieldProps.onChange, onFieldChange, event);
+      },
+      isChecked: parseBoolean(isChecked)
+    })), jsx(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}
+function Toggle(_ref3) {
+  var name = _ref3.name,
+    field = _ref3.field,
+    onFieldChange = _ref3.onFieldChange;
+  var label = field.label,
+    description = field.description,
+    _field$isRequired2 = field.isRequired,
+    isRequired = _field$isRequired2 === void 0 ? false : _field$isRequired2,
+    _field$defaultValue2 = field.defaultValue,
+    defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    },
+    defaultValue: defaultValue,
+    testId: "config-panel-toggle-".concat(name)
+  }, function (_ref4) {
+    var fieldProps = _ref4.fieldProps,
+      error = _ref4.error;
+    var id = fieldProps.id,
+      isChecked = fieldProps.value,
+      restFieldProps = _objectWithoutProperties(fieldProps, _excluded2);
+    return jsx(Fragment, null, jsx("div", {
+      css: toggleFieldWrapperStyles
+    }, jsx("label", {
+      css: toggleLabelStyles,
+      id: id,
+      htmlFor: id
+    }, label, isRequired ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("span", {
+      css: requiredIndicator,
+      "aria-hidden": "true"
+    }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
+      onChange: function onChange(event) {
+        return handleOnChange(fieldProps.onChange, onFieldChange, event);
+      },
+      isChecked: parseBoolean(isChecked)
+    }))), jsx(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}
+export default function Boolean(_ref5) {
+  var name = _ref5.name,
+    field = _ref5.field,
+    onFieldChange = _ref5.onFieldChange;
+  if (field.style === 'toggle') {
+    return jsx(Toggle, {
+      name: name,
+      field: field,
+      onFieldChange: onFieldChange
+    });
+  }
+  return jsx(Checkbox, {
+    name: name,
+    field: field,
+    onFieldChange: onFieldChange
+  });
+}

package/dist/esm/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -0,0 +1,95 @@
+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"];
+/** @jsx jsx */
+
+import { Fragment, useCallback } from 'react';
+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, #bf2600)"
+});
+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, _extends({
+      key: i
+    }, 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;
+  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,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    }
+  }, function (props) {
+    return jsx(CheckboxGroupInner, _extends({
+      label: label,
+      description: description,
+      options: options,
+      onFieldChange: _onFieldChange
+    }, props));
+  });
+}