@atlaskit/editor-plugin-media/dist/esm/ui/PixelEntry/index.js

Media plugin for @atlaskit/editor-core

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)));
};