@prisma-cms/editor
Version:
Editor for @prisma-cms
102 lines • 4.47 kB
JavaScript
'use strict';
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageBlock = void 0;
const react_1 = __importDefault(require("react"));
const Dialog_1 = __importStar(require("material-ui/Dialog"));
const Button_1 = __importDefault(require("material-ui/Button"));
// import './styles/styles.less';
const withStyles_1 = __importDefault(require("material-ui/styles/withStyles"));
const propTypes = {};
const defaultProps = {
open: false,
};
const styles = () => {
return {
root: {},
dialog: {
'& .dialog-paper': {
maxWidth: '90%',
width: 'auto',
},
},
dialogContent: {},
thumb: {},
img: {
maxWidth: '100%',
'.editor-image__wrapper &': {
'&.thumb': {
maxWidth: 400,
maxHeight: 250,
cursor: 'pointer',
},
},
'&.opened': {
display: 'block',
maxWidth: '100%',
},
},
};
};
class ImageBlock extends react_1.default.Component {
constructor(props) {
super(props);
this.handleOpen = () => {
this.setState({ open: true });
};
this.handleClose = () => {
this.setState({ open: false });
};
this.state = {
original_url: props.block.data.get('original_url'),
src: props.block.data.get('url'),
open: props.open,
};
}
render() {
if (!this.state.src) {
return null;
}
const { classes } = this.props;
return (react_1.default.createElement("div", { className: ['editor-image__wrapper', classes.root].join(' ') },
react_1.default.createElement("div", { className: "editor-image__anchore_wrapper" }, this.state.original_url ? (react_1.default.createElement("a", { href: this.state.original_url, target: "_blank", rel: "nofollow noreferrer" }, this.state.original_url)) : null),
react_1.default.createElement("img", { className: ['thumb', classes.img, classes.thumb].join(' '), src: this.state.src, onClick: this.handleOpen }),
react_1.default.createElement(Dialog_1.default, { className: [classes.dialog].join(' '), onBackdropClick: this.handleClose, onClose: this.handleClose, onEscapeKeyDown: this.handleClose, open: this.state.open, PaperProps: {
className: 'dialog-paper',
} },
react_1.default.createElement(Dialog_1.DialogContent, { className: [classes.dialogContent].join(' ') },
react_1.default.createElement("img", { className: ['opened', classes.img].join(' '), src: this.state.src })),
react_1.default.createElement(Dialog_1.DialogActions, null,
react_1.default.createElement(Button_1.default, { key: "close", onClick: this.handleClose }, "\u0417\u0430\u043A\u0440\u044B\u0442\u044C")))));
}
}
exports.ImageBlock = ImageBlock;
ImageBlock.propTypes = propTypes;
ImageBlock.defaultProps = defaultProps;
exports.default = (0, withStyles_1.default)(styles)((props) => react_1.default.createElement(ImageBlock, Object.assign({}, props)));
//# sourceMappingURL=image.js.map