@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/esm/ui/PixelEntry/index.js

@@ -0,0 +1,174 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button';
+import Form, { Field } from '@atlaskit/form';
+import Textfield from '@atlaskit/textfield';
+import Tooltip from '@atlaskit/tooltip';
+import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
+import { messages } from './messages';
+import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+export var PixelEntry = function PixelEntry(_ref) {
+  var width = _ref.width,
+    mediaWidth = _ref.mediaWidth,
+    mediaHeight = _ref.mediaHeight,
+    onSubmit = _ref.onSubmit,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    onChange = _ref.onChange,
+    formatMessage = _ref.intl.formatMessage,
+    showMigration = _ref.showMigration,
+    onMigrate = _ref.onMigrate;
+  var ratioWidth = useMemo(function () {
+    return mediaHeight / mediaWidth;
+  }, [mediaHeight, mediaWidth]);
+  var ratioHeight = useMemo(function () {
+    return mediaWidth / mediaHeight;
+  }, [mediaHeight, mediaWidth]);
+  var _useState = useState(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    computedWidth = _useState2[0],
+    setComputedWidth = _useState2[1];
+  var _useState3 = useState(Math.round(ratioWidth * width)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    computedHeight = _useState4[0],
+    setComputedHeight = _useState4[1];
+
+  // Handle update to width from outside component
+  useEffect(function () {
+    setComputedWidth(width);
+    setComputedHeight(Math.round(ratioWidth * width));
+  }, [width, ratioWidth]);
+
+  // Handle submit when user presses enter in form
+  var handleOnSubmit = function handleOnSubmit(data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
+    if (onSubmit) {
+      var widthToBeSumitted = data.inputWidth;
+      var validation = 'valid';
+      if (data.inputWidth < minWidth) {
+        widthToBeSumitted = minWidth;
+        validation = 'less-than-min';
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSumitted = maxWidth;
+        validation = 'greater-than-max';
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (validation !== 'valid') {
+        setComputedWidth(widthToBeSumitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
+      }
+      onSubmit({
+        width: widthToBeSumitted,
+        validation: validation
+      });
+    }
+  };
+
+  // Handle updating computed fields based on
+  var handleOnChange = useCallback(function (type) {
+    return function (event) {
+      var value = parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : value;
+      var newWidth = '';
+      switch (type) {
+        case 'inputWidth':
+          {
+            newWidth = newInputValue;
+            setComputedWidth(newInputValue);
+            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+            setComputedHeight(newHeight);
+            break;
+          }
+        case 'inputHeight':
+          {
+            setComputedHeight(newInputValue);
+            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+            setComputedWidth(newWidth);
+            break;
+          }
+      }
+      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+      onChange && onChange(isInvalidInputValid);
+    };
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
+  if (showMigration) {
+    return jsx(Tooltip, {
+      content: formatMessage(messages.migrationButtonTooltip)
+    }, jsx(Button, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(messages.migrationButtonText)));
+  }
+  return jsx("div", {
+    css: pixelEntryForm
+  }, jsx(Form, {
+    onSubmit: handleOnSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps;
+    return jsx("form", formProps, jsx("div", {
+      css: pixelSizingWrapper
+    }, jsx(Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      defaultValue: computedWidth
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return jsx(Tooltip, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(messages.inputWidthTooltip, {
+          maxWidth: maxWidth
+        }),
+        position: "top"
+      }, jsx(Textfield, _extends({}, fieldProps, {
+        css: [pixelSizingWidthInput, pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputWidth'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+          maxWidth: maxWidth
+        })
+      })));
+    }), jsx("span", {
+      css: pixelSizingLabel
+    }, "x"), jsx(Field, {
+      key: "inputHeight",
+      name: "inputHeight",
+      defaultValue: computedHeight
+    }, function (_ref4) {
+      var fieldProps = _ref4.fieldProps;
+      return jsx(Tooltip, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(messages.inputHeightTooltip),
+        position: "top"
+      }, jsx(Textfield, _extends({}, fieldProps, {
+        css: [pixelSizingHeightInput, pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputHeight'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(messages.inputHeightAriaLabel)
+      })));
+    }), jsx(Button, {
+      css: pixelEntryHiddenSubmit,
+      type: "submit"
+    }, formatMessage(messages.submitButtonText))));
+  }));
+};
+export var FullWidthDisplay = function FullWidthDisplay(_ref5) {
+  var formatMessage = _ref5.intl.formatMessage;
+  return jsx("div", {
+    css: pixelSizingFullWidthLabelStyles
+  }, jsx("span", null, formatMessage(messages.fullWidthLabel)));
+};

package/dist/esm/ui/PixelEntry/messages.js

@@ -0,0 +1,48 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  validationFailedMessage: {
+    id: 'fabric.editor.media.pixelEntry.validationFailedMessage',
+    defaultMessage: 'Validation for width failed',
+    description: 'The passed in validator function returned false'
+  },
+  inputWidthTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
+    defaultMessage: 'Max width {maxWidth}px',
+    description: 'The tooltip displayed ontop of the width input'
+  },
+  inputWidthAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
+    defaultMessage: 'Max width {maxWidth}px',
+    description: 'The width input aria label'
+  },
+  inputHeightTooltip: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightTooltip',
+    defaultMessage: 'Height',
+    description: 'The tooltip displayed ontop of the height input'
+  },
+  inputHeightAriaLabel: {
+    id: 'fabric.editor.media.pixelEntry.inputHeightAriaLabel',
+    defaultMessage: 'height input',
+    description: 'The width input aria label'
+  },
+  submitButtonText: {
+    id: 'fabric.editor.media.pixelEntry.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'The text give to the hidden submit button'
+  },
+  fullWidthLabel: {
+    id: 'fabric.editor.image.fullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'The media has reached its maximum width'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
+  }
+});

package/dist/esm/ui/PixelEntry/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import { css } from '@emotion/react';
+var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
+export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+export var pixelEntryForm = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  form {\n    width: 100%;\n  }\n"])));
+export var pixelSizingInput = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  & input {\n    text-align: center;\n  }\n"])), "var(--ds-space-300, 24px)");
+export var pixelSizingLabel = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
+export var pixelSizingWidthInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  grid-area: widthinput;\n"])));
+export var pixelSizingHeightInput = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  grid-area: heightinput;\n"])));
+export var pixelEntryHiddenSubmit = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
+export var pixelSizingFullWidthLabelStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");

package/dist/esm/ui/PixelEntry/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { resizableMediaMigrationNotificationStyle } from './styles';
+export var ResizableMediaMigrationNotification = function ResizableMediaMigrationNotification() {
+  return jsx("div", {
+    "data-testid": "resizable-media-migration-notification",
+    css: [resizableMediaMigrationNotificationStyle]
+  });
+};