@modusoperandi/licit 0.14.0 → 0.14.2

package/dist/ui/ImageResizeBox.js.flow

@@ -1,219 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import nullthrows from 'nullthrows';
-import * as React from 'react';
-
-import { clamp } from '@modusoperandi/licit-ui-commands';
-import uuid from './uuid';
-
-import './czi-image-resize-box.css';
-
-type Props = {
-  height: number,
-  onResizeEnd: (w: number, height: number) => void,
-  src: string,
-  width: number,
-};
-
-export const MIN_SIZE = 20;
-export const MAX_SIZE = 10000;
-
-function setWidth(el: HTMLElement, width: number, height: number): void {
-  el.style.width = width + 'px';
-}
-
-function setHeight(el: HTMLElement, width: number, height: number): void {
-  el.style.height = height + 'px';
-}
-
-function setSize(el: HTMLElement, width: number, height: number): void {
-  el.style.width = Math.round(width) + 'px';
-  el.style.height = Math.round(height) + 'px';
-}
-
-const ResizeDirection = {
-  top: setHeight,
-  top_right: setSize,
-  right: setWidth,
-  bottom_right: setSize,
-  bottom: setHeight,
-  bottom_left: setSize,
-  left: setWidth,
-  top_left: setSize,
-};
-
-class ImageResizeBoxControl extends React.PureComponent<any, any> {
-  props: {
-    boxID: string,
-    direction: string,
-    height: number,
-    onResizeEnd: (w: number, height: number) => void,
-    width: number,
-  };
-
-  _active = false;
-  _el = null;
-  _h = '';
-  _rafID = 0;
-  _w = '';
-  _x1 = 0;
-  _x2 = 0;
-  _y1 = 0;
-  _y2 = 0;
-  _ww = 0;
-  _hh = 0;
-
-  componentWillUnmount(): void {
-    this._end();
-  }
-
-  render(): React.Element<any> {
-    const { direction } = this.props;
-
-    const className = cx({
-      'czi-image-resize-box-control': true,
-      [direction]: true,
-    });
-
-    return <span className={className} onMouseDown={this._onMouseDown} />;
-  }
-
-  _syncSize = (): void => {
-    if (!this._active) {
-      return;
-    }
-    const { direction, width, height } = this.props;
-
-    const dx = (this._x2 - this._x1) * (/left/.test(direction) ? -1 : 1);
-    const dy = (this._y2 - this._y1) * (/top/.test(direction) ? -1 : 1);
-
-    const el = nullthrows(this._el);
-    const fn = nullthrows(ResizeDirection[direction]);
-    const aspect = width / height;
-    let ww = clamp(MIN_SIZE, width + Math.round(dx), MAX_SIZE);
-    let hh = clamp(MIN_SIZE, height + Math.round(dy), MAX_SIZE);
-
-    if (fn === setSize) {
-      hh = Math.max(ww / aspect, MIN_SIZE);
-      ww = hh * aspect;
-    }
-
-    fn(el, Math.round(ww), Math.round(hh));
-    this._ww = ww;
-    this._hh = hh;
-  };
-
-  _start(e: SyntheticMouseEvent<>): void {
-    if (this._active) {
-      this._end();
-    }
-
-    this._active = true;
-
-    const { boxID, direction, width, height } = this.props;
-    const el = nullthrows(document.getElementById(boxID));
-    el.className += ' ' + direction;
-
-    this._el = el;
-    this._x1 = e.clientX;
-    this._y1 = e.clientY;
-    this._x2 = this._x1;
-    this._y2 = this._y1;
-    this._w = this._el.style.width;
-    this._h = this._el.style.height;
-    this._ww = width;
-    this._hh = height;
-
-    document.addEventListener('mousemove', this._onMouseMove, true);
-    document.addEventListener('mouseup', this._onMouseUp, true);
-  }
-
-  _end(): void {
-    if (!this._active) {
-      return;
-    }
-
-    this._active = false;
-    document.removeEventListener('mousemove', this._onMouseMove, true);
-    document.removeEventListener('mouseup', this._onMouseUp, true);
-
-    const el = nullthrows(this._el);
-    el.style.width = this._w;
-    el.style.height = this._h;
-    el.className = 'czi-image-resize-box';
-    this._el = null;
-
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = null;
-  }
-
-  _onMouseDown = (e: SyntheticMouseEvent<>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this._end();
-    this._start(e);
-  };
-
-  _onMouseMove = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this._x2 = e.clientX;
-    this._y2 = e.clientY;
-    this._rafID = requestAnimationFrame(this._syncSize);
-  };
-
-  _onMouseUp = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this._x2 = e.clientX;
-    this._y2 = e.clientY;
-
-    const { direction } = this.props;
-    const el = nullthrows(this._el);
-    el.classList.remove(direction);
-
-    this._end();
-    this.props.onResizeEnd(this._ww, this._hh);
-  };
-}
-
-class ImageResizeBox extends React.PureComponent<any, any> {
-  props: Props;
-
-  _id = uuid();
-
-  render(): React.Element<any> {
-    const { onResizeEnd, width, height, src } = this.props;
-
-    const style = {
-      height: height + 'px',
-      width: width + 'px',
-    };
-
-    const boxID = this._id;
-
-    const controls = Object.keys(ResizeDirection).map((key) => {
-      return (
-        <ImageResizeBoxControl
-          boxID={boxID}
-          config={ResizeDirection[key]}
-          direction={key}
-          height={height}
-          key={key}
-          onResizeEnd={onResizeEnd}
-          width={width}
-        />
-      );
-    });
-
-    return (
-      <span className="czi-image-resize-box" id={boxID} style={style}>
-        {controls}
-        <img className="czi-image-resize-box-image" src={src} />
-      </span>
-    );
-  }
-}
-
-export default ImageResizeBox;

package/dist/ui/ImageURLEditor.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
-var _resolveImage = _interopRequireDefault(require("./resolveImage"));
-require("./czi-form.css");
-require("./czi-image-url-editor.css");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-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; }
-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; }
-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; }
-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; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-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); }
-class ImageURLEditor extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_img", null);
-    _defineProperty(this, "_unmounted", false);
-    _defineProperty(this, "state", _objectSpread(_objectSpread({}, this.props.initialValue || {}), {}, {
-      validValue: null
-    }));
-    _defineProperty(this, "_onSrcChange", e => {
-      const src = e.target.value;
-      this.setState({
-        src,
-        validValue: null
-      }, this._didSrcChange);
-    });
-    _defineProperty(this, "_didSrcChange", () => {
-      (0, _resolveImage.default)(this.state.src).then(result => {
-        if (this.state.src === result.src && !this._unmounted) {
-          const validValue = result.complete ? result : null;
-          this.setState({
-            validValue
-          });
-        }
-      });
-    });
-    _defineProperty(this, "_cancel", () => {
-      this.props.close();
-    });
-    _defineProperty(this, "_insert", () => {
-      const {
-        validValue
-      } = this.state;
-      this.props.close(validValue);
-    });
-  }
-  componentWillUnmount() {
-    this._unmounted = true;
-  }
-  render() {
-    const {
-      src,
-      validValue
-    } = this.state;
-    const preview = validValue ? /*#__PURE__*/React.createElement("div", {
-      className: "czi-image-url-editor-input-preview",
-      style: {
-        backgroundImage: `url(${String(validValue.src)}`
-      }
-    }) : null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "czi-image-url-editor"
-    }, /*#__PURE__*/React.createElement("form", {
-      className: "czi-form",
-      onSubmit: _licitUiCommands.preventEventDefault
-    }, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, "Insert Image"), /*#__PURE__*/React.createElement("div", {
-      className: "czi-image-url-editor-src-input-row"
-    }, /*#__PURE__*/React.createElement("input", {
-      autoFocus: true,
-      className: "czi-image-url-editor-src-input",
-      onChange: this._onSrcChange,
-      placeholder: "Paste URL of Image...",
-      type: "text",
-      value: src || ''
-    }), preview), /*#__PURE__*/React.createElement("em", null, "Only select image that you have confirmed the license to use")), /*#__PURE__*/React.createElement("div", {
-      className: "czi-form-buttons"
-    }, /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
-      label: "Cancel",
-      onClick: this._cancel
-    }), /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
-      active: !!validValue,
-      disabled: !validValue,
-      label: "Insert",
-      onClick: this._insert
-    }))));
-  }
-}
-_defineProperty(ImageURLEditor, "propsTypes", {
-  initialValue: _propTypes.default.object,
-  close: function (props, propName) {
-    const fn = props[propName];
-    if (!fn.prototype || typeof fn.prototype.constructor !== 'function' && fn.prototype.constructor.length !== 1) {
-      return new Error(propName + 'must be a function with 1 arg of type ImageLike');
-    }
-    return null;
-  }
-});
-var _default = ImageURLEditor;
-exports.default = _default;

package/dist/ui/ImageURLEditor.js.flow

@@ -1,119 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-import resolveImage from './resolveImage';
-
-import './czi-form.css';
-import './czi-image-url-editor.css';
-
-class ImageURLEditor extends React.PureComponent<any, any> {
-  _img = null;
-  _unmounted = false;
-
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    initialValue: PropTypes.object,
-    close: function (props: any, propName: string) {
-      const fn = props[propName];
-      if (
-        !fn.prototype ||
-        (typeof fn.prototype.constructor !== 'function' &&
-          fn.prototype.constructor.length !== 1)
-      ) {
-        return new Error(
-          propName + 'must be a function with 1 arg of type ImageLike'
-        );
-      }
-      return null;
-    },
-  };
-
-  state = {
-    ...(this.props.initialValue || {}),
-    validValue: null,
-  };
-
-  componentWillUnmount(): void {
-    this._unmounted = true;
-  }
-
-  render(): React.Element<any> {
-    const { src, validValue } = this.state;
-    const preview = validValue ? (
-      <div
-        className="czi-image-url-editor-input-preview"
-        style={{ backgroundImage: `url(${String(validValue.src)}` }}
-      />
-    ) : null;
-
-    return (
-      <div className="czi-image-url-editor">
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Insert Image</legend>
-            <div className="czi-image-url-editor-src-input-row">
-              <input
-                autoFocus={true}
-                className="czi-image-url-editor-src-input"
-                onChange={this._onSrcChange}
-                placeholder="Paste URL of Image..."
-                type="text"
-                value={src || ''}
-              />
-              {preview}
-            </div>
-            <em>
-              Only select image that you have confirmed the license to use
-            </em>
-          </fieldset>
-          <div className="czi-form-buttons">
-            <CustomButton label="Cancel" onClick={this._cancel} />
-            <CustomButton
-              active={!!validValue}
-              disabled={!validValue}
-              label="Insert"
-              onClick={this._insert}
-            />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  _onSrcChange = (e: SyntheticInputEvent<>) => {
-    const src = e.target.value;
-    this.setState(
-      {
-        src,
-        validValue: null,
-      },
-      this._didSrcChange
-    );
-  };
-
-  _didSrcChange = (): void => {
-    resolveImage(this.state.src).then((result) => {
-      if (this.state.src === result.src && !this._unmounted) {
-        const validValue = result.complete ? result : null;
-        this.setState({ validValue });
-      }
-    });
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-
-  _insert = (): void => {
-    const { validValue } = this.state;
-    this.props.close(validValue);
-  };
-}
-
-export default ImageURLEditor;

package/dist/ui/ImageUploadEditor.js

@@ -1,123 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var React = _interopRequireWildcard(require("react"));
-var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
-var _LoadingIndicator = _interopRequireDefault(require("./LoadingIndicator"));
-var _uuid = _interopRequireDefault(require("./uuid"));
-require("./czi-form.css");
-require("./czi-image-upload-editor.css");
-var _Types = require("../Types");
-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); }
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-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); }
-class ImageUploadEditor extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_img", null);
-    _defineProperty(this, "_unmounted", false);
-    _defineProperty(this, "props", void 0);
-    _defineProperty(this, "state", {
-      error: null,
-      id: (0, _uuid.default)(),
-      pending: false
-    });
-    _defineProperty(this, "_onSelectFile", event => {
-      const file = event.target.files && event.target.files[0];
-      if (file && typeof file === 'object') {
-        this._upload(file);
-      }
-    });
-    _defineProperty(this, "_onSuccess", image => {
-      if (this._unmounted) {
-        return;
-      }
-      this.props.close(image);
-    });
-    _defineProperty(this, "_onError", error => {
-      if (this._unmounted) {
-        return;
-      }
-      this.setState({
-        error,
-        id: (0, _uuid.default)(),
-        pending: false
-      });
-    });
-    _defineProperty(this, "_upload", async file => {
-      try {
-        const runtime = this.props.runtime || {};
-        const {
-          canUploadImage,
-          uploadImage
-        } = runtime;
-        if (!canUploadImage || !uploadImage || !canUploadImage()) {
-          throw new Error('feature is not available');
-        }
-        this.setState({
-          pending: true,
-          error: null
-        });
-        const image = await uploadImage(file);
-        this._onSuccess(image);
-      } catch (ex) {
-        this._onError(ex);
-      }
-    });
-    _defineProperty(this, "_cancel", () => {
-      this.props.close();
-    });
-  }
-  componentWillUnmount() {
-    this._unmounted = true;
-  }
-  render() {
-    const {
-      id,
-      error,
-      pending
-    } = this.state;
-    const className = (0, _classnames.default)('czi-image-upload-editor', {
-      pending,
-      error
-    });
-    let label = 'Choose an image file...';
-    if (pending) {
-      label = /*#__PURE__*/React.createElement(_LoadingIndicator.default, null);
-    } else if (error) {
-      label = 'Something went wrong, please try again';
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement("form", {
-      className: "czi-form",
-      onSubmit: _licitUiCommands.preventEventDefault
-    }, /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", null, "Upload Image"), /*#__PURE__*/React.createElement("div", {
-      className: "czi-image-upload-editor-body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-image-upload-editor-label"
-    }, label), /*#__PURE__*/React.createElement("input", {
-      accept: "image/png,image/gif,image/jpeg,image/jpg",
-      className: "czi-image-upload-editor-input",
-      disabled: pending,
-      id: id,
-      key: id,
-      onChange: this._onSelectFile,
-      type: "file"
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "czi-form-buttons"
-    }, /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
-      label: "Cancel",
-      onClick: this._cancel
-    }))));
-  }
-}
-var _default = ImageUploadEditor;
-exports.default = _default;

package/dist/ui/ImageUploadEditor.js.flow

@@ -1,117 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import * as React from 'react';
-
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import LoadingIndicator from './LoadingIndicator';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-import uuid from './uuid';
-
-import './czi-form.css';
-import './czi-image-upload-editor.css';
-
-import type { EditorRuntime, ImageLike } from '../Types';
-
-class ImageUploadEditor extends React.PureComponent<any, any> {
-  _img = null;
-  _unmounted = false;
-
-  props: {
-    runtime: ?EditorRuntime,
-    close: (val: ?ImageLike) => void,
-  };
-
-  state = {
-    error: null,
-    id: uuid(),
-    pending: false,
-  };
-
-  componentWillUnmount(): void {
-    this._unmounted = true;
-  }
-
-  render(): React.Element<any> {
-    const { id, error, pending } = this.state;
-    const className = cx('czi-image-upload-editor', { pending, error });
-    let label = 'Choose an image file...';
-
-    if (pending) {
-      label = <LoadingIndicator />;
-    } else if (error) {
-      label = 'Something went wrong, please try again';
-    }
-
-    return (
-      <div className={className}>
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Upload Image</legend>
-            <div className="czi-image-upload-editor-body">
-              <div className="czi-image-upload-editor-label">{label}</div>
-              <input
-                accept="image/png,image/gif,image/jpeg,image/jpg"
-                className="czi-image-upload-editor-input"
-                disabled={pending}
-                id={id}
-                key={id}
-                onChange={this._onSelectFile}
-                type="file"
-              />
-            </div>
-          </fieldset>
-          <div className="czi-form-buttons">
-            <CustomButton label="Cancel" onClick={this._cancel} />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  _onSelectFile = (event: SyntheticInputEvent<>): void => {
-    const file = event.target.files && event.target.files[0];
-    if (file && typeof file === 'object') {
-      this._upload(file);
-    }
-  };
-
-  _onSuccess = (image: ImageLike): void => {
-    if (this._unmounted) {
-      return;
-    }
-    this.props.close(image);
-  };
-
-  _onError = (error: Error): void => {
-    if (this._unmounted) {
-      return;
-    }
-    this.setState({
-      error,
-      id: uuid(),
-      pending: false,
-    });
-  };
-
-  _upload = async (file: Object): Promise<void> => {
-    try {
-      const runtime = this.props.runtime || {};
-      const { canUploadImage, uploadImage } = runtime;
-      if (!canUploadImage || !uploadImage || !canUploadImage()) {
-        throw new Error('feature is not available');
-      }
-      this.setState({ pending: true, error: null });
-      const image = await uploadImage(file);
-      this._onSuccess(image);
-    } catch (ex) {
-      this._onError(ex);
-    }
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-}
-
-export default ImageUploadEditor;