@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
132 lines • 7.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var styled_components_1 = require("styled-components");
var util_shared_styles_1 = require("@atlaskit/util-shared-styles");
var MediaComponent_1 = require("../../../ui/Media/MediaComponent");
exports.SINGLE_FILE_WIDTH = 275;
exports.SINGLE_FILE_HEIGHT = 180;
exports.SINGLE_LINK_WIDTH = 350;
exports.SINGLE_LINK_HEIGHT = 300;
var margin = (_a = ["\n margin: ", " 0;\n"], _a.raw = ["\n margin: ", " 0;\n"], styled_components_1.css(_a, util_shared_styles_1.akGridSize));
var center = (_b = ["\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n"], _b.raw = ["\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n"], styled_components_1.css(_b, util_shared_styles_1.akColorN30));
var filmStripItem = (_c = ["\n background: ", ";\n margin-right: ", ";\n min-height: ", "px;\n flex-shrink: 0;\n"], _c.raw = ["\n background: ", ";\n margin-right: ", ";\n min-height: ", "px;\n flex-shrink: 0;\n"], styled_components_1.css(_c, util_shared_styles_1.akColorN30, util_shared_styles_1.akGridSize, MediaComponent_1.MEDIA_HEIGHT));
// tslint:disable-next-line
var FilmStripWrapper = (_d = ["\n ", "\n min-height: ", "px;\n"], _d.raw = ["\n ", "\n min-height: ", "px;\n"], styled_components_1.default.div(_d, margin, MediaComponent_1.MEDIA_HEIGHT));
// tslint:disable-next-line
var FilmStripLoaderWrapper = (_e = ["\n ", "\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: ", "px;\n"], _e.raw = ["\n ", "\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: ", "px;\n"], styled_components_1.default.div(_e, margin, MediaComponent_1.MEDIA_HEIGHT));
// tslint:disable-next-line
var FilmStripFilePlaceholder = (_f = ["\n ", "\n width: ", "px;\n"], _f.raw = ["\n ", "\n width: ", "px;\n"], styled_components_1.default.div(_f, filmStripItem, MediaComponent_1.FILE_WIDTH));
// tslint:disable-next-line
var FilmStripLinkPlaceholder = (_g = ["\n ", "\n width: ", "px;\n"], _g.raw = ["\n ", "\n width: ", "px;\n"], styled_components_1.default.div(_g, filmStripItem, MediaComponent_1.LINK_WIDTH));
// tslint:disable-next-line
var SingleFileWrapper = (_h = ["\n ", "\n min-height: ", "px;\n width: ", "px;\n ", "\n // This is a fix for media component css problem\n .hVlmUn {\n line-height: 0;\n }\n"], _h.raw = ["\n ", "\n min-height: ", "px;\n width: ", "px;\n ", "\n // This is a fix for media component css problem\n .hVlmUn {\n line-height: 0;\n }\n"], styled_components_1.default.div(_h, margin, exports.SINGLE_FILE_HEIGHT, exports.SINGLE_FILE_WIDTH, center));
// tslint:disable-next-line
var SingleLinkWrapper = (_j = ["\n ", "\n min-height: ", "px;\n width: ", "px;\n ", "\n"], _j.raw = ["\n ", "\n min-height: ", "px;\n width: ", "px;\n ", "\n"], styled_components_1.default.div(_j, margin, exports.SINGLE_LINK_HEIGHT, exports.SINGLE_LINK_WIDTH, center));
var MediaGroup = (function (_super) {
tslib_1.__extends(MediaGroup, _super);
function MediaGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
animate: false,
offset: 0
};
_this.handleSize = function (_a) {
var offset = _a.offset;
return _this.setState({ offset: offset });
};
_this.handleScroll = function (_a) {
var animate = _a.animate, offset = _a.offset;
return _this.setState({ animate: animate, offset: offset });
};
return _this;
}
MediaGroup.prototype.componentWillMount = function () {
var _this = this;
require.ensure(['/media-card'], function (require) {
var FilmstripView = require('/media-filmstrip').FilmstripView;
_this.setState({ FilmstripView: FilmstripView });
});
};
MediaGroup.prototype.render = function () {
var numChildren = React.Children.count(this.props.children);
if (numChildren === 1) {
var card = React.Children.toArray(this.props.children)[0];
switch (card.props.type) {
case 'file':
return this.renderSingleFile(card);
case 'link':
default:
return this.renderSingleLink(card);
}
}
else {
return this.renderStrip();
}
};
MediaGroup.prototype.renderSingleFile = function (child) {
return (React.createElement(SingleFileWrapper, null, React.cloneElement(child, {
cardDimensions: {
width: exports.SINGLE_FILE_WIDTH,
height: exports.SINGLE_FILE_HEIGHT,
},
resizeMode: 'full-fit'
})));
};
MediaGroup.prototype.renderSingleLink = function (child) {
return (React.createElement(SingleLinkWrapper, null, React.cloneElement(child, {
cardDimensions: {
width: exports.SINGLE_LINK_WIDTH,
height: exports.SINGLE_LINK_HEIGHT,
},
appearance: 'square'
})));
};
MediaGroup.prototype.renderStrip = function () {
var children = this.props.children;
var _a = this.state, animate = _a.animate, offset = _a.offset, FilmstripView = _a.FilmstripView;
var listIds = React.Children.map(children, function (child) { return child.props.id; });
if (!FilmstripView) {
return (React.createElement(FilmStripLoaderWrapper, null, React.Children.map(children, function (media) {
return media.props.type === 'file' ? (React.createElement(FilmStripFilePlaceholder, null)) : (React.createElement(FilmStripLinkPlaceholder, null));
})));
}
return (React.createElement(FilmStripWrapper, null,
React.createElement(FilmstripView, { animate: animate, offset: offset, onSize: this.handleSize, onScroll: this.handleScroll }, React.Children.map(children, function (child) {
switch (child.props.type) {
case 'file':
return React.cloneElement(child, {
resizeMode: 'crop',
eventHandlers: tslib_1.__assign({}, child.props.eventHandlers, { media: {
onClick: function (event) {
if (!child.props
|| !child.props.eventHandlers
|| !child.props.eventHandlers.media
|| !child.props.eventHandlers.media.onClick) {
return;
}
var surroundings = {
collectionName: child.props.collection,
list: listIds,
};
child.props.eventHandlers.media.onClick(event, surroundings);
}
} })
});
default:
case 'link':
return React.cloneElement(child, {
cardDimensions: {
width: MediaComponent_1.LINK_WIDTH,
},
});
}
}))));
};
return MediaGroup;
}(react_1.PureComponent));
exports.default = MediaGroup;
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
//# sourceMappingURL=mediaGroup.js.map