@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
214 lines (212 loc) • 10.3 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import classnames from 'classnames';
import { Resizable } from 're-resizable';
import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
import { richMediaClassName } from '../../styles';
import { gridTypeForLayout } from '../../utils';
import { handleSides, snapTo } from './utils';
var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
var actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
return {
action: ACTION.EDITED,
actionSubject: actionSubject,
actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
attributes: {
size: size,
layout: layout
},
eventType: EVENT_TYPE.UI
};
};
var getWidthFromSnapPoints = function getWidthFromSnapPoints(width, snapPoints) {
if (snapPoints.length) {
return Math.min(Math.max(width, snapPoints[0]), snapPoints[snapPoints.length - 1]);
}
return width;
};
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var Resizer = /*#__PURE__*/function (_React$Component) {
function Resizer() {
var _this;
_classCallCheck(this, Resizer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Resizer, [].concat(args));
_defineProperty(_this, "resizable", /*#__PURE__*/React.createRef());
_defineProperty(_this, "state", {
isResizing: false
});
_defineProperty(_this, "handleResizeStart", function (event) {
var _this$props = _this.props,
_this$props$innerPadd = _this$props.innerPadding,
innerPadding = _this$props$innerPadd === void 0 ? 0 : _this$props$innerPadd,
highlights = _this$props.highlights,
displayGrid = _this$props.displayGrid,
layout = _this$props.layout,
width = _this$props.width,
snapPoints = _this$props.snapPoints;
// prevent creating a drag event on Firefox
event.preventDefault();
_this.setState({
isResizing: true
}, function () {
var newHighlights = highlights(width + innerPadding, snapPoints);
displayGrid === null || displayGrid === void 0 || displayGrid(newHighlights.length > 0, gridTypeForLayout(layout), newHighlights);
});
});
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
_defineProperty(_this, "handleResize", function (_event, _direction, _elementRef, delta) {
var _this$props2 = _this.props,
highlights = _this$props2.highlights,
calcNewSize = _this$props2.calcNewSize,
scaleFactor = _this$props2.scaleFactor,
snapPoints = _this$props2.snapPoints,
displayGrid = _this$props2.displayGrid,
layout = _this$props2.layout,
updateSize = _this$props2.updateSize,
_this$props2$innerPad = _this$props2.innerPadding,
innerPadding = _this$props2$innerPad === void 0 ? 0 : _this$props2$innerPad;
var resizable = _this.resizable.current;
var isResizing = _this.state.isResizing;
if (!resizable || !resizable.state.original || !isResizing) {
return;
}
var newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width * (scaleFactor || 1), snapPoints);
var newSize = calcNewSize(newWidth + innerPadding, false);
if (newSize.layout !== layout) {
updateSize(newSize.width, newSize.layout);
}
var newHighlights = highlights(newWidth, snapPoints);
displayGrid === null || displayGrid === void 0 || displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
resizable.updateSize({
width: newWidth,
height: 'auto'
});
resizable.setState({
isResizing: true
});
});
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
_defineProperty(_this, "handleResizeStop", function (_event, _direction, _elementRef, delta) {
var _this$props3 = _this.props,
highlights = _this$props3.highlights,
calcNewSize = _this$props3.calcNewSize,
snapPoints = _this$props3.snapPoints,
displayGrid = _this$props3.displayGrid,
layout = _this$props3.layout,
updateSize = _this$props3.updateSize,
dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
nodeType = _this$props3.nodeType;
var resizable = _this.resizable.current;
var isResizing = _this.state.isResizing;
if (!resizable || !resizable.state.original || !isResizing) {
return;
}
var newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width, snapPoints);
var snapWidth = snapTo(newWidth, snapPoints);
var newSize = calcNewSize(snapWidth, true);
var newHighlights = highlights(newWidth, snapPoints);
if (dispatchAnalyticsEvent) {
dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
}
// show committed grid size
displayGrid === null || displayGrid === void 0 || displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
_this.setState({
isResizing: false
}, function () {
updateSize(newSize.width, newSize.layout);
displayGrid === null || displayGrid === void 0 || displayGrid(false, gridTypeForLayout(layout), []);
});
});
return _this;
}
_inherits(Resizer, _React$Component);
return _createClass(Resizer, [{
key: "render",
value: function render() {
var baseHandleStyles = {};
var handles = {};
var handleComponent = {};
var _this$props4 = this.props,
_this$props4$innerPad = _this$props4.innerPadding,
innerPadding = _this$props4$innerPad === void 0 ? 0 : _this$props4$innerPad,
width = _this$props4.width,
pctWidth = _this$props4.pctWidth,
selected = _this$props4.selected,
layout = _this$props4.layout,
enable = _this$props4.enable,
children = _this$props4.children,
ratio = _this$props4.ratio,
handleComponentFunc = _this$props4.handleComponentFunc,
handleStyles = _this$props4.handleStyles;
var isResizing = this.state.isResizing;
handleSides.forEach(function (side) {
handles[side] = "richMedia-resize-handle-".concat(side);
baseHandleStyles[side] = _defineProperty(_defineProperty(_defineProperty({
width: '24px'
}, side, "".concat(-13 - innerPadding, "px")), "zIndex", akRichMediaResizeZIndex), "pointerEvents", 'auto');
var sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
if (sideHandleComponent) {
handleComponent[side] = sideHandleComponent;
}
});
var updatedHandleStyles = {
left: _objectSpread(_objectSpread({}, baseHandleStyles.left), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.left),
right: _objectSpread(_objectSpread({}, baseHandleStyles.right), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.right)
};
var className = classnames(richMediaClassName, "image-".concat(layout), this.props.className, {
'is-resizing': isResizing,
'not-resized': !pctWidth,
'richMedia-selected': selected,
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
});
var handleWrapperStyle;
if (ratio) {
handleWrapperStyle = {
position: 'absolute',
width: '100%',
paddingBottom: "".concat(ratio, "%"),
top: 0,
pointerEvents: 'none'
};
}
// Ideally, Resizable would let you pass in the component rather than
// the div. For now, we just apply the same styles using CSS
return /*#__PURE__*/React.createElement(Resizable, {
ref: this.resizable,
size: {
width: width,
// just content itself (no paddings)
height: 'auto'
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
handleClasses: handles,
handleStyles: updatedHandleStyles,
handleWrapperStyle: handleWrapperStyle,
handleComponent: handleComponent,
enable: enable,
onResize: this.handleResize,
onResizeStop: this.handleResizeStop,
onResizeStart: this.handleResizeStart
}, children);
}
}]);
}(React.Component);
export { Resizer as default };