@modusoperandi/licit 0.14.1 → 0.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/EditorCommands.js +1 -7
- package/dist/EditorCommands.js.flow +0 -4
- package/dist/EditorNodes.js +0 -3
- package/dist/EditorNodes.js.flow +0 -3
- package/dist/bom.xml +225 -227
- package/dist/buildEditorPlugins.js +1 -2
- package/dist/buildEditorPlugins.js.flow +0 -2
- package/dist/client/Licit.js +7 -0
- package/dist/client/Licit.js.flow +9 -0
- package/dist/ui/Editor.js +0 -2
- package/dist/ui/Editor.js.flow +1 -3
- package/dist/ui/EditorToolbarConfig.js +0 -6
- package/dist/ui/EditorToolbarConfig.js.flow +0 -8
- package/package.json +6 -12
- package/src/EditorCommands.js +0 -4
- package/src/EditorNodes.js +0 -3
- package/src/buildEditorPlugins.js +0 -2
- package/src/client/Licit.js +9 -0
- package/src/ui/Editor.js +1 -3
- package/src/ui/EditorToolbarConfig.js +0 -8
- package/dist/ImageFromURLCommand.js +0 -19
- package/dist/ImageFromURLCommand.js.flow +0 -14
- package/dist/ImageNodeSpec.js +0 -109
- package/dist/ImageNodeSpec.js.flow +0 -90
- package/dist/ImageSourceCommand.js +0 -117
- package/dist/ImageSourceCommand.js.flow +0 -117
- package/dist/ImageUploadCommand.js +0 -49
- package/dist/ImageUploadCommand.js.flow +0 -36
- package/dist/ui/ImageAlignEditor.js +0 -71
- package/dist/ui/ImageAlignEditor.js.flow +0 -60
- package/dist/ui/ImageNodeView.js +0 -404
- package/dist/ui/ImageNodeView.js.flow +0 -405
- package/dist/ui/ImageResizeBox.js +0 -206
- package/dist/ui/ImageResizeBox.js.flow +0 -219
- package/dist/ui/ImageURLEditor.js +0 -108
- package/dist/ui/ImageURLEditor.js.flow +0 -119
- package/dist/ui/ImageUploadEditor.js +0 -123
- package/dist/ui/ImageUploadEditor.js.flow +0 -117
- package/src/ImageFromURLCommand.js +0 -14
- package/src/ImageNodeSpec.js +0 -90
- package/src/ImageSourceCommand.js +0 -117
- package/src/ImageUploadCommand.js +0 -36
- package/src/ui/ImageAlignEditor.js +0 -60
- package/src/ui/ImageNodeView.js +0 -405
- package/src/ui/ImageResizeBox.js +0 -219
- package/src/ui/ImageURLEditor.js +0 -119
- package/src/ui/ImageUploadEditor.js +0 -117
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import nullthrows from 'nullthrows';
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
|
|
7
|
-
import { clamp } from '@modusoperandi/licit-ui-commands';
|
|
8
|
-
import uuid from './uuid';
|
|
9
|
-
|
|
10
|
-
import './czi-image-resize-box.css';
|
|
11
|
-
|
|
12
|
-
type Props = {
|
|
13
|
-
height: number,
|
|
14
|
-
onResizeEnd: (w: number, height: number) => void,
|
|
15
|
-
src: string,
|
|
16
|
-
width: number,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export const MIN_SIZE = 20;
|
|
20
|
-
export const MAX_SIZE = 10000;
|
|
21
|
-
|
|
22
|
-
function setWidth(el: HTMLElement, width: number, height: number): void {
|
|
23
|
-
el.style.width = width + 'px';
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function setHeight(el: HTMLElement, width: number, height: number): void {
|
|
27
|
-
el.style.height = height + 'px';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function setSize(el: HTMLElement, width: number, height: number): void {
|
|
31
|
-
el.style.width = Math.round(width) + 'px';
|
|
32
|
-
el.style.height = Math.round(height) + 'px';
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const ResizeDirection = {
|
|
36
|
-
top: setHeight,
|
|
37
|
-
top_right: setSize,
|
|
38
|
-
right: setWidth,
|
|
39
|
-
bottom_right: setSize,
|
|
40
|
-
bottom: setHeight,
|
|
41
|
-
bottom_left: setSize,
|
|
42
|
-
left: setWidth,
|
|
43
|
-
top_left: setSize,
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
class ImageResizeBoxControl extends React.PureComponent<any, any> {
|
|
47
|
-
props: {
|
|
48
|
-
boxID: string,
|
|
49
|
-
direction: string,
|
|
50
|
-
height: number,
|
|
51
|
-
onResizeEnd: (w: number, height: number) => void,
|
|
52
|
-
width: number,
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
_active = false;
|
|
56
|
-
_el = null;
|
|
57
|
-
_h = '';
|
|
58
|
-
_rafID = 0;
|
|
59
|
-
_w = '';
|
|
60
|
-
_x1 = 0;
|
|
61
|
-
_x2 = 0;
|
|
62
|
-
_y1 = 0;
|
|
63
|
-
_y2 = 0;
|
|
64
|
-
_ww = 0;
|
|
65
|
-
_hh = 0;
|
|
66
|
-
|
|
67
|
-
componentWillUnmount(): void {
|
|
68
|
-
this._end();
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
render(): React.Element<any> {
|
|
72
|
-
const { direction } = this.props;
|
|
73
|
-
|
|
74
|
-
const className = cx({
|
|
75
|
-
'czi-image-resize-box-control': true,
|
|
76
|
-
[direction]: true,
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
return <span className={className} onMouseDown={this._onMouseDown} />;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
_syncSize = (): void => {
|
|
83
|
-
if (!this._active) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
const { direction, width, height } = this.props;
|
|
87
|
-
|
|
88
|
-
const dx = (this._x2 - this._x1) * (/left/.test(direction) ? -1 : 1);
|
|
89
|
-
const dy = (this._y2 - this._y1) * (/top/.test(direction) ? -1 : 1);
|
|
90
|
-
|
|
91
|
-
const el = nullthrows(this._el);
|
|
92
|
-
const fn = nullthrows(ResizeDirection[direction]);
|
|
93
|
-
const aspect = width / height;
|
|
94
|
-
let ww = clamp(MIN_SIZE, width + Math.round(dx), MAX_SIZE);
|
|
95
|
-
let hh = clamp(MIN_SIZE, height + Math.round(dy), MAX_SIZE);
|
|
96
|
-
|
|
97
|
-
if (fn === setSize) {
|
|
98
|
-
hh = Math.max(ww / aspect, MIN_SIZE);
|
|
99
|
-
ww = hh * aspect;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
fn(el, Math.round(ww), Math.round(hh));
|
|
103
|
-
this._ww = ww;
|
|
104
|
-
this._hh = hh;
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
_start(e: SyntheticMouseEvent<>): void {
|
|
108
|
-
if (this._active) {
|
|
109
|
-
this._end();
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
this._active = true;
|
|
113
|
-
|
|
114
|
-
const { boxID, direction, width, height } = this.props;
|
|
115
|
-
const el = nullthrows(document.getElementById(boxID));
|
|
116
|
-
el.className += ' ' + direction;
|
|
117
|
-
|
|
118
|
-
this._el = el;
|
|
119
|
-
this._x1 = e.clientX;
|
|
120
|
-
this._y1 = e.clientY;
|
|
121
|
-
this._x2 = this._x1;
|
|
122
|
-
this._y2 = this._y1;
|
|
123
|
-
this._w = this._el.style.width;
|
|
124
|
-
this._h = this._el.style.height;
|
|
125
|
-
this._ww = width;
|
|
126
|
-
this._hh = height;
|
|
127
|
-
|
|
128
|
-
document.addEventListener('mousemove', this._onMouseMove, true);
|
|
129
|
-
document.addEventListener('mouseup', this._onMouseUp, true);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
_end(): void {
|
|
133
|
-
if (!this._active) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
this._active = false;
|
|
138
|
-
document.removeEventListener('mousemove', this._onMouseMove, true);
|
|
139
|
-
document.removeEventListener('mouseup', this._onMouseUp, true);
|
|
140
|
-
|
|
141
|
-
const el = nullthrows(this._el);
|
|
142
|
-
el.style.width = this._w;
|
|
143
|
-
el.style.height = this._h;
|
|
144
|
-
el.className = 'czi-image-resize-box';
|
|
145
|
-
this._el = null;
|
|
146
|
-
|
|
147
|
-
this._rafID && cancelAnimationFrame(this._rafID);
|
|
148
|
-
this._rafID = null;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
_onMouseDown = (e: SyntheticMouseEvent<>): void => {
|
|
152
|
-
e.preventDefault();
|
|
153
|
-
e.stopPropagation();
|
|
154
|
-
this._end();
|
|
155
|
-
this._start(e);
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
_onMouseMove = (e: MouseEvent): void => {
|
|
159
|
-
e.preventDefault();
|
|
160
|
-
e.stopPropagation();
|
|
161
|
-
this._x2 = e.clientX;
|
|
162
|
-
this._y2 = e.clientY;
|
|
163
|
-
this._rafID = requestAnimationFrame(this._syncSize);
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
_onMouseUp = (e: MouseEvent): void => {
|
|
167
|
-
e.preventDefault();
|
|
168
|
-
e.stopPropagation();
|
|
169
|
-
this._x2 = e.clientX;
|
|
170
|
-
this._y2 = e.clientY;
|
|
171
|
-
|
|
172
|
-
const { direction } = this.props;
|
|
173
|
-
const el = nullthrows(this._el);
|
|
174
|
-
el.classList.remove(direction);
|
|
175
|
-
|
|
176
|
-
this._end();
|
|
177
|
-
this.props.onResizeEnd(this._ww, this._hh);
|
|
178
|
-
};
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
class ImageResizeBox extends React.PureComponent<any, any> {
|
|
182
|
-
props: Props;
|
|
183
|
-
|
|
184
|
-
_id = uuid();
|
|
185
|
-
|
|
186
|
-
render(): React.Element<any> {
|
|
187
|
-
const { onResizeEnd, width, height, src } = this.props;
|
|
188
|
-
|
|
189
|
-
const style = {
|
|
190
|
-
height: height + 'px',
|
|
191
|
-
width: width + 'px',
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
const boxID = this._id;
|
|
195
|
-
|
|
196
|
-
const controls = Object.keys(ResizeDirection).map((key) => {
|
|
197
|
-
return (
|
|
198
|
-
<ImageResizeBoxControl
|
|
199
|
-
boxID={boxID}
|
|
200
|
-
config={ResizeDirection[key]}
|
|
201
|
-
direction={key}
|
|
202
|
-
height={height}
|
|
203
|
-
key={key}
|
|
204
|
-
onResizeEnd={onResizeEnd}
|
|
205
|
-
width={width}
|
|
206
|
-
/>
|
|
207
|
-
);
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
return (
|
|
211
|
-
<span className="czi-image-resize-box" id={boxID} style={style}>
|
|
212
|
-
{controls}
|
|
213
|
-
<img className="czi-image-resize-box-image" src={src} />
|
|
214
|
-
</span>
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
export default ImageResizeBox;
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
|
|
10
|
-
var _resolveImage = _interopRequireDefault(require("./resolveImage"));
|
|
11
|
-
require("./czi-form.css");
|
|
12
|
-
require("./czi-image-url-editor.css");
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
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; }
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
20
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
21
|
-
class ImageURLEditor extends React.PureComponent {
|
|
22
|
-
constructor() {
|
|
23
|
-
super(...arguments);
|
|
24
|
-
_defineProperty(this, "_img", null);
|
|
25
|
-
_defineProperty(this, "_unmounted", false);
|
|
26
|
-
_defineProperty(this, "state", _objectSpread(_objectSpread({}, this.props.initialValue || {}), {}, {
|
|
27
|
-
validValue: null
|
|
28
|
-
}));
|
|
29
|
-
_defineProperty(this, "_onSrcChange", e => {
|
|
30
|
-
const src = e.target.value;
|
|
31
|
-
this.setState({
|
|
32
|
-
src,
|
|
33
|
-
validValue: null
|
|
34
|
-
}, this._didSrcChange);
|
|
35
|
-
});
|
|
36
|
-
_defineProperty(this, "_didSrcChange", () => {
|
|
37
|
-
(0, _resolveImage.default)(this.state.src).then(result => {
|
|
38
|
-
if (this.state.src === result.src && !this._unmounted) {
|
|
39
|
-
const validValue = result.complete ? result : null;
|
|
40
|
-
this.setState({
|
|
41
|
-
validValue
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
_defineProperty(this, "_cancel", () => {
|
|
47
|
-
this.props.close();
|
|
48
|
-
});
|
|
49
|
-
_defineProperty(this, "_insert", () => {
|
|
50
|
-
const {
|
|
51
|
-
validValue
|
|
52
|
-
} = this.state;
|
|
53
|
-
this.props.close(validValue);
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
componentWillUnmount() {
|
|
57
|
-
this._unmounted = true;
|
|
58
|
-
}
|
|
59
|
-
render() {
|
|
60
|
-
const {
|
|
61
|
-
src,
|
|
62
|
-
validValue
|
|
63
|
-
} = this.state;
|
|
64
|
-
const preview = validValue ? /*#__PURE__*/React.createElement("div", {
|
|
65
|
-
className: "czi-image-url-editor-input-preview",
|
|
66
|
-
style: {
|
|
67
|
-
backgroundImage: `url(${String(validValue.src)}`
|
|
68
|
-
}
|
|
69
|
-
}) : null;
|
|
70
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: "czi-image-url-editor"
|
|
72
|
-
}, /*#__PURE__*/React.createElement("form", {
|
|
73
|
-
className: "czi-form",
|
|
74
|
-
onSubmit: _licitUiCommands.preventEventDefault
|
|
75
|
-
}, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, "Insert Image"), /*#__PURE__*/React.createElement("div", {
|
|
76
|
-
className: "czi-image-url-editor-src-input-row"
|
|
77
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
78
|
-
autoFocus: true,
|
|
79
|
-
className: "czi-image-url-editor-src-input",
|
|
80
|
-
onChange: this._onSrcChange,
|
|
81
|
-
placeholder: "Paste URL of Image...",
|
|
82
|
-
type: "text",
|
|
83
|
-
value: src || ''
|
|
84
|
-
}), preview), /*#__PURE__*/React.createElement("em", null, "Only select image that you have confirmed the license to use")), /*#__PURE__*/React.createElement("div", {
|
|
85
|
-
className: "czi-form-buttons"
|
|
86
|
-
}, /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
|
|
87
|
-
label: "Cancel",
|
|
88
|
-
onClick: this._cancel
|
|
89
|
-
}), /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
|
|
90
|
-
active: !!validValue,
|
|
91
|
-
disabled: !validValue,
|
|
92
|
-
label: "Insert",
|
|
93
|
-
onClick: this._insert
|
|
94
|
-
}))));
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
_defineProperty(ImageURLEditor, "propsTypes", {
|
|
98
|
-
initialValue: _propTypes.default.object,
|
|
99
|
-
close: function (props, propName) {
|
|
100
|
-
const fn = props[propName];
|
|
101
|
-
if (!fn.prototype || typeof fn.prototype.constructor !== 'function' && fn.prototype.constructor.length !== 1) {
|
|
102
|
-
return new Error(propName + 'must be a function with 1 arg of type ImageLike');
|
|
103
|
-
}
|
|
104
|
-
return null;
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
var _default = ImageURLEditor;
|
|
108
|
-
exports.default = _default;
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
|
|
6
|
-
import { CustomButton } from '@modusoperandi/licit-ui-commands';
|
|
7
|
-
import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
|
|
8
|
-
import resolveImage from './resolveImage';
|
|
9
|
-
|
|
10
|
-
import './czi-form.css';
|
|
11
|
-
import './czi-image-url-editor.css';
|
|
12
|
-
|
|
13
|
-
class ImageURLEditor extends React.PureComponent<any, any> {
|
|
14
|
-
_img = null;
|
|
15
|
-
_unmounted = false;
|
|
16
|
-
|
|
17
|
-
// [FS] IRAD-1005 2020-07-07
|
|
18
|
-
// Upgrade outdated packages.
|
|
19
|
-
// To take care of the property type declaration.
|
|
20
|
-
static propsTypes = {
|
|
21
|
-
initialValue: PropTypes.object,
|
|
22
|
-
close: function (props: any, propName: string) {
|
|
23
|
-
const fn = props[propName];
|
|
24
|
-
if (
|
|
25
|
-
!fn.prototype ||
|
|
26
|
-
(typeof fn.prototype.constructor !== 'function' &&
|
|
27
|
-
fn.prototype.constructor.length !== 1)
|
|
28
|
-
) {
|
|
29
|
-
return new Error(
|
|
30
|
-
propName + 'must be a function with 1 arg of type ImageLike'
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
return null;
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
state = {
|
|
38
|
-
...(this.props.initialValue || {}),
|
|
39
|
-
validValue: null,
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
componentWillUnmount(): void {
|
|
43
|
-
this._unmounted = true;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
render(): React.Element<any> {
|
|
47
|
-
const { src, validValue } = this.state;
|
|
48
|
-
const preview = validValue ? (
|
|
49
|
-
<div
|
|
50
|
-
className="czi-image-url-editor-input-preview"
|
|
51
|
-
style={{ backgroundImage: `url(${String(validValue.src)}` }}
|
|
52
|
-
/>
|
|
53
|
-
) : null;
|
|
54
|
-
|
|
55
|
-
return (
|
|
56
|
-
<div className="czi-image-url-editor">
|
|
57
|
-
<form className="czi-form" onSubmit={preventEventDefault}>
|
|
58
|
-
<fieldset>
|
|
59
|
-
<legend>Insert Image</legend>
|
|
60
|
-
<div className="czi-image-url-editor-src-input-row">
|
|
61
|
-
<input
|
|
62
|
-
autoFocus={true}
|
|
63
|
-
className="czi-image-url-editor-src-input"
|
|
64
|
-
onChange={this._onSrcChange}
|
|
65
|
-
placeholder="Paste URL of Image..."
|
|
66
|
-
type="text"
|
|
67
|
-
value={src || ''}
|
|
68
|
-
/>
|
|
69
|
-
{preview}
|
|
70
|
-
</div>
|
|
71
|
-
<em>
|
|
72
|
-
Only select image that you have confirmed the license to use
|
|
73
|
-
</em>
|
|
74
|
-
</fieldset>
|
|
75
|
-
<div className="czi-form-buttons">
|
|
76
|
-
<CustomButton label="Cancel" onClick={this._cancel} />
|
|
77
|
-
<CustomButton
|
|
78
|
-
active={!!validValue}
|
|
79
|
-
disabled={!validValue}
|
|
80
|
-
label="Insert"
|
|
81
|
-
onClick={this._insert}
|
|
82
|
-
/>
|
|
83
|
-
</div>
|
|
84
|
-
</form>
|
|
85
|
-
</div>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
_onSrcChange = (e: SyntheticInputEvent<>) => {
|
|
90
|
-
const src = e.target.value;
|
|
91
|
-
this.setState(
|
|
92
|
-
{
|
|
93
|
-
src,
|
|
94
|
-
validValue: null,
|
|
95
|
-
},
|
|
96
|
-
this._didSrcChange
|
|
97
|
-
);
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
_didSrcChange = (): void => {
|
|
101
|
-
resolveImage(this.state.src).then((result) => {
|
|
102
|
-
if (this.state.src === result.src && !this._unmounted) {
|
|
103
|
-
const validValue = result.complete ? result : null;
|
|
104
|
-
this.setState({ validValue });
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
_cancel = (): void => {
|
|
110
|
-
this.props.close();
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
_insert = (): void => {
|
|
114
|
-
const { validValue } = this.state;
|
|
115
|
-
this.props.close(validValue);
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
export default ImageURLEditor;
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
-
var React = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
|
|
10
|
-
var _LoadingIndicator = _interopRequireDefault(require("./LoadingIndicator"));
|
|
11
|
-
var _uuid = _interopRequireDefault(require("./uuid"));
|
|
12
|
-
require("./czi-form.css");
|
|
13
|
-
require("./czi-image-upload-editor.css");
|
|
14
|
-
var _Types = require("../Types");
|
|
15
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
-
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; }
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
20
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
21
|
-
class ImageUploadEditor extends React.PureComponent {
|
|
22
|
-
constructor() {
|
|
23
|
-
super(...arguments);
|
|
24
|
-
_defineProperty(this, "_img", null);
|
|
25
|
-
_defineProperty(this, "_unmounted", false);
|
|
26
|
-
_defineProperty(this, "props", void 0);
|
|
27
|
-
_defineProperty(this, "state", {
|
|
28
|
-
error: null,
|
|
29
|
-
id: (0, _uuid.default)(),
|
|
30
|
-
pending: false
|
|
31
|
-
});
|
|
32
|
-
_defineProperty(this, "_onSelectFile", event => {
|
|
33
|
-
const file = event.target.files && event.target.files[0];
|
|
34
|
-
if (file && typeof file === 'object') {
|
|
35
|
-
this._upload(file);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
_defineProperty(this, "_onSuccess", image => {
|
|
39
|
-
if (this._unmounted) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
this.props.close(image);
|
|
43
|
-
});
|
|
44
|
-
_defineProperty(this, "_onError", error => {
|
|
45
|
-
if (this._unmounted) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
this.setState({
|
|
49
|
-
error,
|
|
50
|
-
id: (0, _uuid.default)(),
|
|
51
|
-
pending: false
|
|
52
|
-
});
|
|
53
|
-
});
|
|
54
|
-
_defineProperty(this, "_upload", async file => {
|
|
55
|
-
try {
|
|
56
|
-
const runtime = this.props.runtime || {};
|
|
57
|
-
const {
|
|
58
|
-
canUploadImage,
|
|
59
|
-
uploadImage
|
|
60
|
-
} = runtime;
|
|
61
|
-
if (!canUploadImage || !uploadImage || !canUploadImage()) {
|
|
62
|
-
throw new Error('feature is not available');
|
|
63
|
-
}
|
|
64
|
-
this.setState({
|
|
65
|
-
pending: true,
|
|
66
|
-
error: null
|
|
67
|
-
});
|
|
68
|
-
const image = await uploadImage(file);
|
|
69
|
-
this._onSuccess(image);
|
|
70
|
-
} catch (ex) {
|
|
71
|
-
this._onError(ex);
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
_defineProperty(this, "_cancel", () => {
|
|
75
|
-
this.props.close();
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
componentWillUnmount() {
|
|
79
|
-
this._unmounted = true;
|
|
80
|
-
}
|
|
81
|
-
render() {
|
|
82
|
-
const {
|
|
83
|
-
id,
|
|
84
|
-
error,
|
|
85
|
-
pending
|
|
86
|
-
} = this.state;
|
|
87
|
-
const className = (0, _classnames.default)('czi-image-upload-editor', {
|
|
88
|
-
pending,
|
|
89
|
-
error
|
|
90
|
-
});
|
|
91
|
-
let label = 'Choose an image file...';
|
|
92
|
-
if (pending) {
|
|
93
|
-
label = /*#__PURE__*/React.createElement(_LoadingIndicator.default, null);
|
|
94
|
-
} else if (error) {
|
|
95
|
-
label = 'Something went wrong, please try again';
|
|
96
|
-
}
|
|
97
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
98
|
-
className: className
|
|
99
|
-
}, /*#__PURE__*/React.createElement("form", {
|
|
100
|
-
className: "czi-form",
|
|
101
|
-
onSubmit: _licitUiCommands.preventEventDefault
|
|
102
|
-
}, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, "Upload Image"), /*#__PURE__*/React.createElement("div", {
|
|
103
|
-
className: "czi-image-upload-editor-body"
|
|
104
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
105
|
-
className: "czi-image-upload-editor-label"
|
|
106
|
-
}, label), /*#__PURE__*/React.createElement("input", {
|
|
107
|
-
accept: "image/png,image/gif,image/jpeg,image/jpg",
|
|
108
|
-
className: "czi-image-upload-editor-input",
|
|
109
|
-
disabled: pending,
|
|
110
|
-
id: id,
|
|
111
|
-
key: id,
|
|
112
|
-
onChange: this._onSelectFile,
|
|
113
|
-
type: "file"
|
|
114
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
115
|
-
className: "czi-form-buttons"
|
|
116
|
-
}, /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
|
|
117
|
-
label: "Cancel",
|
|
118
|
-
onClick: this._cancel
|
|
119
|
-
}))));
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
var _default = ImageUploadEditor;
|
|
123
|
-
exports.default = _default;
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
|
|
6
|
-
import { CustomButton } from '@modusoperandi/licit-ui-commands';
|
|
7
|
-
import LoadingIndicator from './LoadingIndicator';
|
|
8
|
-
import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
|
|
9
|
-
import uuid from './uuid';
|
|
10
|
-
|
|
11
|
-
import './czi-form.css';
|
|
12
|
-
import './czi-image-upload-editor.css';
|
|
13
|
-
|
|
14
|
-
import type { EditorRuntime, ImageLike } from '../Types';
|
|
15
|
-
|
|
16
|
-
class ImageUploadEditor extends React.PureComponent<any, any> {
|
|
17
|
-
_img = null;
|
|
18
|
-
_unmounted = false;
|
|
19
|
-
|
|
20
|
-
props: {
|
|
21
|
-
runtime: ?EditorRuntime,
|
|
22
|
-
close: (val: ?ImageLike) => void,
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
state = {
|
|
26
|
-
error: null,
|
|
27
|
-
id: uuid(),
|
|
28
|
-
pending: false,
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
componentWillUnmount(): void {
|
|
32
|
-
this._unmounted = true;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
render(): React.Element<any> {
|
|
36
|
-
const { id, error, pending } = this.state;
|
|
37
|
-
const className = cx('czi-image-upload-editor', { pending, error });
|
|
38
|
-
let label = 'Choose an image file...';
|
|
39
|
-
|
|
40
|
-
if (pending) {
|
|
41
|
-
label = <LoadingIndicator />;
|
|
42
|
-
} else if (error) {
|
|
43
|
-
label = 'Something went wrong, please try again';
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
return (
|
|
47
|
-
<div className={className}>
|
|
48
|
-
<form className="czi-form" onSubmit={preventEventDefault}>
|
|
49
|
-
<fieldset>
|
|
50
|
-
<legend>Upload Image</legend>
|
|
51
|
-
<div className="czi-image-upload-editor-body">
|
|
52
|
-
<div className="czi-image-upload-editor-label">{label}</div>
|
|
53
|
-
<input
|
|
54
|
-
accept="image/png,image/gif,image/jpeg,image/jpg"
|
|
55
|
-
className="czi-image-upload-editor-input"
|
|
56
|
-
disabled={pending}
|
|
57
|
-
id={id}
|
|
58
|
-
key={id}
|
|
59
|
-
onChange={this._onSelectFile}
|
|
60
|
-
type="file"
|
|
61
|
-
/>
|
|
62
|
-
</div>
|
|
63
|
-
</fieldset>
|
|
64
|
-
<div className="czi-form-buttons">
|
|
65
|
-
<CustomButton label="Cancel" onClick={this._cancel} />
|
|
66
|
-
</div>
|
|
67
|
-
</form>
|
|
68
|
-
</div>
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
_onSelectFile = (event: SyntheticInputEvent<>): void => {
|
|
73
|
-
const file = event.target.files && event.target.files[0];
|
|
74
|
-
if (file && typeof file === 'object') {
|
|
75
|
-
this._upload(file);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
_onSuccess = (image: ImageLike): void => {
|
|
80
|
-
if (this._unmounted) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
this.props.close(image);
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
_onError = (error: Error): void => {
|
|
87
|
-
if (this._unmounted) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
this.setState({
|
|
91
|
-
error,
|
|
92
|
-
id: uuid(),
|
|
93
|
-
pending: false,
|
|
94
|
-
});
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
_upload = async (file: Object): Promise<void> => {
|
|
98
|
-
try {
|
|
99
|
-
const runtime = this.props.runtime || {};
|
|
100
|
-
const { canUploadImage, uploadImage } = runtime;
|
|
101
|
-
if (!canUploadImage || !uploadImage || !canUploadImage()) {
|
|
102
|
-
throw new Error('feature is not available');
|
|
103
|
-
}
|
|
104
|
-
this.setState({ pending: true, error: null });
|
|
105
|
-
const image = await uploadImage(file);
|
|
106
|
-
this._onSuccess(image);
|
|
107
|
-
} catch (ex) {
|
|
108
|
-
this._onError(ex);
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
_cancel = (): void => {
|
|
113
|
-
this.props.close();
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export default ImageUploadEditor;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
|
|
5
|
-
import ImageSourceCommand from './ImageSourceCommand';
|
|
6
|
-
import ImageURLEditor from './ui/ImageURLEditor';
|
|
7
|
-
|
|
8
|
-
class ImageFromURLCommand extends ImageSourceCommand {
|
|
9
|
-
getEditor(): Class<React.Component<any, any>> {
|
|
10
|
-
return ImageURLEditor;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default ImageFromURLCommand;
|