@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
390 lines (380 loc) • 16.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PixelEntryComponentNext = exports.PixelEntryComponent = 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 _new = require("@atlaskit/button/new");
var _media = require("@atlaskit/editor-common/media");
var _form = _interopRequireWildcard(require("@atlaskit/form"));
var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
var _primitives = require("@atlaskit/primitives");
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _constants = require("./constants");
var _styles = require("./styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/* eslint-disable jsdoc/check-tag-names */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives, @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var pixelSizingLabel = (0, _primitives.xcss)({
gridArea: 'label',
lineHeight: "var(--ds-space-300, 24px)"
});
var PixelEntryComponent = exports.PixelEntryComponent = function PixelEntryComponent(_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,
onCloseAndSave = _ref.onCloseAndSave,
isViewMode = _ref.isViewMode,
areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
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 submit when user presses enter or click close button in PixelEntryComponentNext
var handleCloseAndSave = (0, _react.useCallback)(function (data, setFocus) {
if (data.inputWidth === '' || data.inputHeight === '') {
return;
}
if (onCloseAndSave) {
var widthToBeSubmitted = data.inputWidth;
var validation = 'valid';
if (data.inputWidth < minWidth) {
widthToBeSubmitted = minWidth;
validation = 'less-than-min';
}
if (data.inputWidth > maxWidth) {
widthToBeSubmitted = 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(widthToBeSubmitted);
setComputedHeight(Math.round(ratioWidth * widthToBeSubmitted));
}
onCloseAndSave({
width: widthToBeSubmitted,
validation: validation
}, setFocus);
}
}, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
// 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(_media.pixelEntryMessages.migrationButtonTooltip)
}, (0, _react2.jsx)(_button.default, {
appearance: "warning",
spacing: "compact",
onClick: onMigrate,
testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
}, formatMessage(_media.pixelEntryMessages.migrationButtonText)));
}
if (areAnyNewToolbarFlagsEnabled) {
return (0, _react2.jsx)(PixelEntryComponentNext, {
maxWidth: maxWidth,
formatMessage: formatMessage,
handleFieldChange: handleOnChange,
computedWidth: computedWidth,
computedHeight: computedHeight,
handleCloseAndSave: handleCloseAndSave,
isViewMode: isViewMode
});
}
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _styles.pixelEntryForm
}, (0, _react2.jsx)(_form.default, {
onSubmit: handleOnSubmit
}, function (_ref2) {
var formProps = _ref2.formProps;
return (
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
(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(_media.pixelEntryMessages.inputWidthTooltip, {
maxWidth: maxWidth
}),
position: "top"
}, (0, _react2.jsx)(_textfield.default
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, (0, _extends2.default)({}, fieldProps, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
appearance: "none",
isCompact: true,
onChange: handleOnChange('inputWidth'),
pattern: "\\d*",
"aria-label": formatMessage(_media.pixelEntryMessages.inputWidthAriaLabel, {
maxWidth: maxWidth
})
})));
}), (0, _react2.jsx)(_primitives.Box, {
as: "span",
xcss: pixelSizingLabel
}, "\xD7"), (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(_media.pixelEntryMessages.inputHeightTooltip),
position: "top"
}, (0, _react2.jsx)(_textfield.default
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, (0, _extends2.default)({}, fieldProps, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
css: [_styles.pixelSizingHeightInput, _styles.pixelSizingInput],
appearance: "none",
isCompact: true,
onChange: handleOnChange('inputHeight'),
pattern: "\\d*",
"aria-label": formatMessage(_media.pixelEntryMessages.inputHeightAriaLabel)
})));
}), (0, _react2.jsx)(_button.default, {
css: _styles.pixelEntryHiddenSubmit,
type: "submit"
}, formatMessage(_media.pixelEntryMessages.submitButtonText))))
);
}))
);
};
var pixelEntryWrapperStyles = (0, _primitives.xcss)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
width: "".concat(_constants.PIXEL_RESIZING_TOOLBAR_WIDTH, "px")
});
var pixelEntryWrapperViewModeStyles = (0, _primitives.xcss)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
width: "".concat(_constants.PIXEL_VIEW_MODE_TOOLBAR_WIDTH, "px")
});
var fieldStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-ds--text-field--input]': {
paddingBlock: "var(--ds-space-0, 0px)",
paddingInline: "var(--ds-space-100, 8px)"
},
flex: '1'
});
var dividerStyles = (0, _primitives.xcss)({
width: '1px',
height: "var(--ds-space-500, 40px)",
background: "var(--ds-border, #0B120E24)",
marginInlineEnd: 'space.050'
});
var PixelEntryComponentNext = exports.PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
var maxWidth = _ref5.maxWidth,
formatMessage = _ref5.formatMessage,
handleFieldChange = _ref5.handleFieldChange,
computedWidth = _ref5.computedWidth,
computedHeight = _ref5.computedHeight,
handleCloseAndSave = _ref5.handleCloseAndSave,
isViewMode = _ref5.isViewMode;
var widthInputRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (widthInputRef.current) {
if (isViewMode) {
widthInputRef.current.blur();
} else {
widthInputRef.current.focus();
}
}
}, [isViewMode, widthInputRef]);
var handleKeyDown = (0, _react.useCallback)(function (event) {
if (event.key === 'Enter') {
var shouldSetFocus = true;
handleCloseAndSave({
inputWidth: computedWidth,
inputHeight: computedHeight
}, shouldSetFocus);
}
}, [computedWidth, computedHeight, handleCloseAndSave]);
var handleCloseButtonKeyDown = (0, _react.useCallback)(function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
var shouldSetFocus = true;
handleCloseAndSave({
inputWidth: computedWidth,
inputHeight: computedHeight
}, shouldSetFocus);
}
}, [computedWidth, computedHeight, handleCloseAndSave]);
return (
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
(0, _react2.jsx)(_primitives.Box, {
xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
}, (0, _react2.jsx)(_primitives.Inline, {
alignBlock: "center",
spread: "space-between"
}, (0, _react2.jsx)(_primitives.Box, {
paddingInlineStart: "space.100"
}, (0, _react2.jsx)(_primitives.Text, {
color: "color.text.subtlest"
}, formatMessage(_media.pixelEntryMessages.inputWidthLabel))), (0, _react2.jsx)("div", {
css: fieldStyles
}, (0, _react2.jsx)(_tooltip.default, {
hideTooltipOnMouseDown: true,
hideTooltipOnClick: true,
position: "top",
content: formatMessage(_media.pixelEntryMessages.inputWidthTooltip, {
maxWidth: maxWidth
})
}, (0, _react2.jsx)(_textfield.default, {
name: "inputWidth",
value: computedWidth,
ref: widthInputRef,
height: "var(--ds-space-250, 20px)",
appearance: "none",
pattern: "\\d*",
"aria-label": formatMessage(_media.pixelEntryMessages.inputWidthAriaLabel, {
maxWidth: maxWidth
}),
onChange: handleFieldChange('inputWidth'),
onKeyDown: handleKeyDown
}))), (0, _react2.jsx)(_primitives.Box, {
paddingInlineStart: "space.100"
}, (0, _react2.jsx)(_primitives.Text, {
color: "color.text.subtlest"
}, formatMessage(_media.pixelEntryMessages.inputHeightTooltip))), (0, _react2.jsx)("div", {
css: fieldStyles
}, (0, _react2.jsx)(_tooltip.default, {
hideTooltipOnMouseDown: true,
hideTooltipOnClick: true,
content: formatMessage(_media.pixelEntryMessages.inputHeightTooltip),
position: "top"
}, (0, _react2.jsx)(_textfield.default, {
name: "inputHeight",
value: computedHeight,
height: "var(--ds-space-250, 20px)",
appearance: "none",
pattern: "\\d*",
"aria-label": formatMessage(_media.pixelEntryMessages.inputHeightAriaLabel),
onChange: handleFieldChange('inputHeight'),
onKeyDown: handleKeyDown
}))), !isViewMode && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
xcss: dividerStyles
}), (0, _react2.jsx)(_new.IconButton
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
icon: function icon() {
return (0, _react2.jsx)(_cross.default, {
label: "",
color: "var(--ds-icon-subtlest, #6B6E76)"
});
},
label: formatMessage(_media.pixelEntryMessages.closePixelEntry),
appearance: "subtle"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
handleCloseAndSave({
inputWidth: computedWidth,
inputHeight: computedHeight
});
},
onKeyDown: handleCloseButtonKeyDown
}))))
);
};