@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PixelEntry = exports.FullWidthDisplay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("./constants");
+var _messages = require("./messages");
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+var PixelEntry = exports.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 = (0, _react.useMemo)(function () {
+    return mediaHeight / mediaWidth;
+  }, [mediaHeight, mediaWidth]);
+  var ratioHeight = (0, _react.useMemo)(function () {
+    return mediaWidth / mediaHeight;
+  }, [mediaHeight, mediaWidth]);
+  var _useState = (0, _react.useState)(width),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    computedWidth = _useState2[0],
+    setComputedWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(Math.round(ratioWidth * width)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    computedHeight = _useState4[0],
+    setComputedHeight = _useState4[1];
+
+  // Handle update to width from outside component
+  (0, _react.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 = (0, _react.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 (0, _react2.jsx)(_tooltip.default, {
+      content: formatMessage(_messages.messages.migrationButtonTooltip)
+    }, (0, _react2.jsx)(_button.default, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(_messages.messages.migrationButtonText)));
+  }
+  return (0, _react2.jsx)("div", {
+    css: _styles.pixelEntryForm
+  }, (0, _react2.jsx)(_form.default, {
+    onSubmit: handleOnSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps;
+    return (0, _react2.jsx)("form", formProps, (0, _react2.jsx)("div", {
+      css: _styles.pixelSizingWrapper
+    }, (0, _react2.jsx)(_form.Field, {
+      key: "inputWidth",
+      name: "inputWidth",
+      defaultValue: computedWidth
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return (0, _react2.jsx)(_tooltip.default, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(_messages.messages.inputWidthTooltip, {
+          maxWidth: maxWidth
+        }),
+        position: "top"
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputWidth'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(_messages.messages.inputWidthAriaLabel, {
+          maxWidth: maxWidth
+        })
+      })));
+    }), (0, _react2.jsx)("span", {
+      css: _styles.pixelSizingLabel
+    }, "x"), (0, _react2.jsx)(_form.Field, {
+      key: "inputHeight",
+      name: "inputHeight",
+      defaultValue: computedHeight
+    }, function (_ref4) {
+      var fieldProps = _ref4.fieldProps;
+      return (0, _react2.jsx)(_tooltip.default, {
+        hideTooltipOnMouseDown: true,
+        content: formatMessage(_messages.messages.inputHeightTooltip),
+        position: "top"
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
+        appearance: "none",
+        isCompact: true,
+        onChange: handleOnChange('inputHeight'),
+        pattern: "\\d*",
+        "aria-label": formatMessage(_messages.messages.inputHeightAriaLabel)
+      })));
+    }), (0, _react2.jsx)(_button.default, {
+      css: _styles.pixelEntryHiddenSubmit,
+      type: "submit"
+    }, formatMessage(_messages.messages.submitButtonText))));
+  }));
+};
+var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref5) {
+  var formatMessage = _ref5.intl.formatMessage;
+  return (0, _react2.jsx)("div", {
+    css: _styles.pixelSizingFullWidthLabelStyles
+  }, (0, _react2.jsx)("span", null, formatMessage(_messages.messages.fullWidthLabel)));
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.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/cjs/ui/PixelEntry/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelSizingFullWidthLabelStyles = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
+var pixelSizingWrapper = exports.pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)");
+var pixelEntryForm = exports.pixelEntryForm = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  form {\n    width: 100%;\n  }\n"])));
+var pixelSizingInput = exports.pixelSizingInput = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: ", ";\n  & input {\n    text-align: center;\n  }\n"])), "var(--ds-space-300, 24px)");
+var pixelSizingLabel = exports.pixelSizingLabel = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
+var pixelSizingWidthInput = exports.pixelSizingWidthInput = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: widthinput;\n"])));
+var pixelSizingHeightInput = exports.pixelSizingHeightInput = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: heightinput;\n"])));
+var pixelEntryHiddenSubmit = exports.pixelEntryHiddenSubmit = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
+var pixelSizingFullWidthLabelStyles = exports.pixelSizingFullWidthLabelStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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/cjs/ui/PixelEntry/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizableMediaMigrationNotification = void 0;
+var _react = require("@emotion/react");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var ResizableMediaMigrationNotification = exports.ResizableMediaMigrationNotification = function ResizableMediaMigrationNotification() {
+  return (0, _react.jsx)("div", {
+    "data-testid": "resizable-media-migration-notification",
+    css: [_styles.resizableMediaMigrationNotificationStyle]
+  });
+};