@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
185 lines (179 loc) • 8.29 kB
JavaScript
;
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)));
};