@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.
Files changed (48) hide show
  1. package/README.md +1 -0
  2. package/dist/EditorCommands.js +1 -7
  3. package/dist/EditorCommands.js.flow +0 -4
  4. package/dist/EditorNodes.js +0 -3
  5. package/dist/EditorNodes.js.flow +0 -3
  6. package/dist/bom.xml +225 -227
  7. package/dist/buildEditorPlugins.js +1 -2
  8. package/dist/buildEditorPlugins.js.flow +0 -2
  9. package/dist/client/Licit.js +7 -0
  10. package/dist/client/Licit.js.flow +9 -0
  11. package/dist/ui/Editor.js +0 -2
  12. package/dist/ui/Editor.js.flow +1 -3
  13. package/dist/ui/EditorToolbarConfig.js +0 -6
  14. package/dist/ui/EditorToolbarConfig.js.flow +0 -8
  15. package/package.json +6 -12
  16. package/src/EditorCommands.js +0 -4
  17. package/src/EditorNodes.js +0 -3
  18. package/src/buildEditorPlugins.js +0 -2
  19. package/src/client/Licit.js +9 -0
  20. package/src/ui/Editor.js +1 -3
  21. package/src/ui/EditorToolbarConfig.js +0 -8
  22. package/dist/ImageFromURLCommand.js +0 -19
  23. package/dist/ImageFromURLCommand.js.flow +0 -14
  24. package/dist/ImageNodeSpec.js +0 -109
  25. package/dist/ImageNodeSpec.js.flow +0 -90
  26. package/dist/ImageSourceCommand.js +0 -117
  27. package/dist/ImageSourceCommand.js.flow +0 -117
  28. package/dist/ImageUploadCommand.js +0 -49
  29. package/dist/ImageUploadCommand.js.flow +0 -36
  30. package/dist/ui/ImageAlignEditor.js +0 -71
  31. package/dist/ui/ImageAlignEditor.js.flow +0 -60
  32. package/dist/ui/ImageNodeView.js +0 -404
  33. package/dist/ui/ImageNodeView.js.flow +0 -405
  34. package/dist/ui/ImageResizeBox.js +0 -206
  35. package/dist/ui/ImageResizeBox.js.flow +0 -219
  36. package/dist/ui/ImageURLEditor.js +0 -108
  37. package/dist/ui/ImageURLEditor.js.flow +0 -119
  38. package/dist/ui/ImageUploadEditor.js +0 -123
  39. package/dist/ui/ImageUploadEditor.js.flow +0 -117
  40. package/src/ImageFromURLCommand.js +0 -14
  41. package/src/ImageNodeSpec.js +0 -90
  42. package/src/ImageSourceCommand.js +0 -117
  43. package/src/ImageUploadCommand.js +0 -36
  44. package/src/ui/ImageAlignEditor.js +0 -60
  45. package/src/ui/ImageNodeView.js +0 -405
  46. package/src/ui/ImageResizeBox.js +0 -219
  47. package/src/ui/ImageURLEditor.js +0 -119
  48. 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;