@modusoperandi/licit 0.1.9 → 0.13.2

package/src/ui/createPopUp.js

@@ -1,205 +0,0 @@
-// @flow
-
-import './czi-vars.css';
-import './czi-pop-up.css';
-
-import type { PopUpParams, ViewProps } from './PopUp';
-
-import PopUp from './PopUp';
-// eslint-disable-next-line no-unused-vars
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import uuid from './uuid';
-
-export type PopUpHandle = {
-  close: (val: any) => void,
-  update: (props: Object) => void,
-};
-
-let modalsCount = 0;
-let popUpsCount = 0;
-
-const Z_INDEX_BASE = 9999;
-const MODAL_MASK_ID = 'pop-up-modal-mask-' + uuid();
-
-function showModalMask(IsChildDialog: ?boolean): void {
-  const root: any = document.body || document.documentElement;
-  let element = document.getElementById(MODAL_MASK_ID);
-  if (!element) {
-    element = document.createElement('div');
-    element.id = MODAL_MASK_ID;
-    // [FS] IRAD-1048 2020-10-07
-    // To handle child dialog window
-    if (IsChildDialog) {
-      element.className = 'czi-pop-up-modal-mask child-modal';
-      element.setAttribute(
-        'data-mask-type',
-        'czi-pop-up-modal-mask child-modal'
-      );
-    } else {
-      element.className = 'czi-pop-up-modal-mask';
-      element.setAttribute('data-mask-type', 'czi-pop-up-modal-mask');
-    }
-
-    element.setAttribute('role', 'dialog');
-    element.setAttribute('aria-modal', 'true');
-  }
-
-  if (root && !element.parentElement) {
-    root.appendChild(element);
-  }
-  const style: any = element.style;
-
-  const selector = '.czi-pop-up-element[data-pop-up-modal]';
-  const zIndex = Array.from(document.querySelectorAll(selector)).reduce(
-    (zz, el) => Math.max(zz, Number(el.style.zIndex)),
-    0
-  );
-
-  style.zIndex = zIndex - 1;
-}
-
-function hideModalMask(): void {
-  const element = document.getElementById(MODAL_MASK_ID);
-  if (element && element.parentElement) {
-    element.parentElement.removeChild(element);
-  }
-}
-
-function getRootElement(
-  id: string,
-  forceCreation: boolean,
-  popUpParams: ?PopUpParams
-): ?HTMLElement {
-  const root: any =
-    (popUpParams && popUpParams.container) ||
-    document.body ||
-    document.documentElement;
-  let element = document.getElementById(id);
-  if (!element && forceCreation) {
-    element = document.createElement('div');
-  }
-
-  if (!element) {
-    return null;
-  }
-
-  if (popUpParams && popUpParams.modal) {
-    element.setAttribute('data-pop-up-modal', 'y');
-  }
-  // [FS] IRAD-1048 2020-10-07
-  // To handle child dialog window
-  if (popUpParams && popUpParams.IsChildDialog) {
-    element.className = 'czi-pop-up-element child-modal czi-vars';
-  } else {
-    element.className = 'czi-pop-up-element czi-vars';
-  }
-
-  element.id = id;
-  const style: any = element.style;
-  const modalZIndexOffset = popUpParams && popUpParams.modal ? 1 : 0;
-  if (!(popUpParams && popUpParams.container)) {
-    style.zIndex = Z_INDEX_BASE + popUpsCount * 3 + modalZIndexOffset;
-  }
-
-  // Populates the default ARIA attributes here.
-  // http://accessibility.athena-ict.com/aria/examples/dialog.shtml
-  element.setAttribute('role', 'dialog');
-  element.setAttribute('aria-modal', 'true');
-  if (root && !element.parentElement) {
-    root.appendChild(element);
-  }
-  return element;
-}
-
-function renderPopUp(
-  rootId: string,
-  close: Function,
-  View: Function,
-  viewProps: ViewProps,
-  popUpParams: PopUpParams
-): void {
-  const rootNode = getRootElement(rootId, true, popUpParams);
-  if (rootNode) {
-    const component = (
-      <PopUp
-        View={View}
-        close={close}
-        popUpParams={popUpParams}
-        viewProps={viewProps}
-      />
-    );
-    ReactDOM.render(component, rootNode);
-  }
-
-  if (modalsCount > 0) {
-    showModalMask(popUpParams.IsChildDialog);
-  } else {
-    hideModalMask();
-  }
-}
-
-function unrenderPopUp(rootId: string): void {
-  const rootNode = getRootElement(rootId, false);
-  if (rootNode) {
-    ReactDOM.unmountComponentAtNode(rootNode);
-    rootNode.parentElement && rootNode.parentElement.removeChild(rootNode);
-  }
-
-  if (modalsCount === 0) {
-    hideModalMask();
-  }
-}
-
-export default function createPopUp(
-  View: Function,
-  viewProps?: ?ViewProps,
-  popUpParams?: ?PopUpParams
-): PopUpHandle {
-  const rootId = uuid();
-
-  let handle = null;
-  let currentViewProps = viewProps;
-
-  viewProps = viewProps || {};
-  popUpParams = popUpParams || {};
-
-  const modal = popUpParams.modal || !popUpParams.anchor;
-  popUpParams.modal = modal;
-
-  popUpsCount++;
-  if (modal) {
-    modalsCount++;
-  }
-
-  const closePopUp = (value) => {
-    if (!handle) {
-      return;
-    }
-
-    if (modal) {
-      modalsCount--;
-    }
-    popUpsCount--;
-
-    handle = null;
-    unrenderPopUp(rootId);
-
-    const onClose = popUpParams && popUpParams.onClose;
-    onClose && onClose(value);
-  };
-
-  const render = renderPopUp.bind(null, rootId, closePopUp, View);
-  const emptyObj = {};
-
-  handle = {
-    close: closePopUp,
-    update: (nextViewProps) => {
-      currentViewProps = nextViewProps;
-      render(currentViewProps || emptyObj, popUpParams || emptyObj);
-    },
-  };
-
-  render(currentViewProps || emptyObj, popUpParams);
-  return handle;
-}

package/src/ui/czi-animations.css

@@ -1,15 +0,0 @@
-.czi-animation-fade-in {
-  animation-duration: 250ms;
-  animation-fill-mode: both;
-  animation-name: cziAnimationFadeIn;
-  opacity: 0.6;
-}
-
-@keyframes cziAnimationFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/src/ui/czi-color-editor.css

@@ -1,56 +0,0 @@
-@import './czi-vars.css';
-
-.czi-color-editor {
-  background: #fff;
-  box-shadow: var(--czi-overlay-shadow);
-  font-family: var(--czi-font-family);
-  font-size: var(--czi-font-size);
-  padding-bottom: 4px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 4px;
-}
-
-.czi-color-editor .czi-custom-button {
-  border-color: #fff;
-  border-style: solid;
-  border-width: 1px;
-  border: solid 1px #fff;
-  box-sizing: border-box;
-  height: 18px;
-  margin: 1px;
-  padding: 0;
-  width: 18px;
-}
-
-.czi-color-editor .czi-custom-button.czi-color-editor-color-transparent {
-  box-sizing: border-box;
-  display: block;
-  height: auto;
-  margin: 2px;
-  padding: 6px;
-  text-align: center;
-  width: auto;
-}
-
-.czi-color-editor .czi-custom-button.czi-color-editor-color-transparent:hover {
-  background-color: var(--czi-button-hover-background-color);
-}
-
-.czi-color-editor .czi-custom-button.active,
-.czi-color-editor .czi-custom-button:hover {
-  font-weight: normal;
-  outline: solid 1px #000;
-}
-
-.czi-color-editor-section {
-  margin-bottom: 8px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 8px;
-  width: 200px;
-}
-
-.czi-color-editor-section .czi-color-editor-cell {
-  border-radius: 0;
-}

package/src/ui/czi-custom-button.css

@@ -1,93 +0,0 @@
-/* <CustomButton /> */
-@import './czi-vars.css';
-
-.czi-custom-buttons {
-  margin-bottom: 0;
-  margin-left: 8px;
-  margin-right: 8px;
-  margin-top: 0;
-  white-space: nowrap;
-}
-
-.czi-custom-button {
-  background-clip: padding-box;
-  background-color: #fff;
-  border: var(--czi-border-grey);
-  border-radius: 5px;
-  box-sizing: border-box;
-  color: var(--czi-button-text-color);
-  cursor: pointer;
-  display: inline-block;
-  font-family: var(--czi-font-family);
-  font-size: var(--czi-font-size);
-  font-weight: normal;
-  line-height: 1.2em;
-  overflow: hidden;
-  padding-bottom: 6px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 6px;
-  position: relative;
-  text-overflow: ellipsis;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.czi-custom-button.use-icon {
-  border-color: transparent;
-  padding: 0;
-}
-
-.czi-custom-button:focus,
-.czi-custom-button:hover {
-  background-color: #f0f0f0;
-  border-color: #555;
-  outline: none;
-}
-
-.czi-custom-button.active {
-  /*
-   * Use text-stroke to strengthen teh text, do not use "bold" because it will
-   * cause layout reflow.
-   * Firefox & Edge specifically only support the -webkit-text-stroke property.
-   * https://caniuse.com/#feat=text-stroke
-   */
-  border-color: #666;
-  color: #000;
-  -webkit-text-stroke-color: #000;
-  -webkit-text-stroke-width: 0.5px;
-}
-
-.czi-custom-button.pressed {
-  background-color: #e0e0e0;
-}
-
-.czi-custom-button.disabled,
-.czi-custom-button.disabled:hover {
-  background: #fff;
-  border-color: #ccc;
-  color: #dedede;
-  cursor: unset;
-  pointer-events: none;
-  -webkit-text-stroke-width: 0;
-}
-
-.czi-custom-buttons .czi-custom-button {
-  border-radius: 0;
-  margin-left: 0;
-}
-
-.czi-custom-buttons > .czi-custom-button:first-of-type {
-  border-bottom-left-radius: var(--czi-button-radius);
-  border-top-left-radius: var(--czi-button-radius);
-}
-
-.czi-custom-buttons > .czi-custom-button:last-child {
-  border-bottom-right-radius: var(--czi-button-radius);
-  border-top-right-radius: var(--czi-button-radius);
-}
-
-.czi-custom-buttons > .czi-custom-button:only-child {
-  border-radius: var(--czi-button-radius);
-}

package/src/ui/czi-pop-up.css

@@ -1,32 +0,0 @@
-@import './czi-vars.css';
-
-.czi-pop-up-modal-mask,
-.czi-pop-up-element {
-  background-color: rgba(0, 0, 0, 0.5);
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  z-index: 5000;
-}
-
-/* [FS] IRAD-1048 2020-10-07
- To handle child dialog window  */
-.child-modal {
-  background-color: unset !important;
-  z-index: 100006 !important;
-}
-
-.czi-pop-up-element {
-  background-color: transparent;
-  height: auto;
-  width: auto;
-}
-
-.czi-pop-up-element a:link,
-.czi-pop-up-element a:visited,
-.czi-pop-up-element a:hover,
-.czi-pop-up-element a:active {
-  color: var(--czi-link-color);
-}

package/src/ui/czi-tooltip-surface.css

@@ -1,45 +0,0 @@
-@import './czi-vars.css';
-@import './czi-animations.css';
-
-.czi-tooltip-surface.czi-animation-fade-in {
-  display: contents;
-}
-
-.czi-tooltip-view {
-  background-color: #393939;
-  border-radius: 5px;
-  box-sizing: border-box;
-  color: #fff;
-  font-family: var(--czi-font-family);
-  font-size: var(--czi-font-size);
-  margin: 20px 0 0 0;
-  min-width: 100px;
-  padding: 6px 8px;
-  pointer-events: none;
-  text-align: center;
-  user-select: none;
-}
-
-@media only print {
-  .czi-tooltip-view {
-    display: none;
-  }
-}
-
-.czi-tooltip-view.czi-animation-fade-in {
-  animation-delay: 150ms;
-  animation-duration: 250ms;
-}
-
-.czi-tooltip-view::after {
-  background-color: #393939;
-  content: '';
-  height: 8px;
-  left: var(--czi-pop-up-anchor-offset-left);
-  margin-left: -6px;
-  position: absolute;
-  top: 16px;
-  transform: rotate(45deg);
-  width: 8px;
-  z-index: -1;
-}

package/src/ui/preventEventDefault.js

@@ -1,5 +0,0 @@
-// @flow
-
-export default function preventEventDefault(e: SyntheticEvent<>): void {
-  e.preventDefault();
-}

package/src/ui/rects.js

@@ -1,47 +0,0 @@
-// @flow
-
-export type Rect = {
-  h: number,
-  w: number,
-  x: number,
-  y: number,
-};
-
-export function isCollapsed(rect: Rect): boolean {
-  return rect.w === 0 || rect.h === 0;
-}
-
-export function isIntersected(r1: Rect, r2: Rect, padding: ?number): boolean {
-  const pp = padding || 0;
-  return !(
-    r2.x - pp > r1.x + r1.w + pp ||
-    r2.x + r2.w + pp < r1.x - pp ||
-    r2.y - pp > r1.y + r1.h + pp ||
-    r2.y + r2.h + pp < r1.y - pp
-  );
-}
-
-export function fromXY(x: number, y: number, padding: ?number): Rect {
-  padding = padding || 0;
-  return {
-    x: x - padding,
-    y: y - padding,
-    w: padding * 2,
-    h: padding * 2,
-  };
-}
-
-export function fromHTMlElement(el: HTMLElement): Rect {
-  const display = document.defaultView.getComputedStyle(el).display;
-  if (display === 'contents' && el.children.length === 1) {
-    // el has no layout at all, use its children instead.
-    return fromHTMlElement(el.children[0]);
-  }
-  const rect = el.getBoundingClientRect();
-  return {
-    x: rect.left,
-    y: rect.top,
-    w: rect.width,
-    h: rect.height,
-  };
-}

package/src/updateIndentLevel.js

@@ -1,211 +0,0 @@
-// @flow
-import clamp from './ui/clamp';
-import compareNumber from './compareNumber';
-import consolidateListNodes from './consolidateListNodes';
-import isListNode from './isListNode';
-import transformAndPreserveTextSelection from './transformAndPreserveTextSelection';
-import { EditorState, AllSelection, TextSelection } from 'prosemirror-state';
-import { BLOCKQUOTE, HEADING, LIST_ITEM, PARAGRAPH } from './NodeNames';
-import { Fragment, Schema } from 'prosemirror-model';
-import { MAX_INDENT_LEVEL, MIN_INDENT_LEVEL } from './ParagraphNodeSpec';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-
-export default function updateIndentLevel(
-  state: EditorState,
-  tr: Transform,
-  schema: Schema,
-  delta: number,
-  view: EditorView
-): Transform {
-  const { doc, selection } = tr;
-  if (!doc || !selection) {
-    return { tr, docChanged: false };
-  }
-
-  if (
-    !(selection instanceof TextSelection || selection instanceof AllSelection)
-  ) {
-    return { tr, docChanged: false };
-  }
-
-  const { nodes } = schema;
-  const { from, to } = selection;
-  const listNodePoses = [];
-  const blockquote = nodes[BLOCKQUOTE];
-  const heading = nodes[HEADING];
-  const paragraph = nodes[PARAGRAPH];
-
-  doc.nodesBetween(from, to, (node, pos) => {
-    const nodeType = node.type;
-    if (
-      nodeType === paragraph ||
-      nodeType === heading ||
-      nodeType === blockquote
-    ) {
-      tr = setNodeIndentMarkup(state, tr, pos, delta, view).tr;
-      return false;
-    } else if (isListNode(node)) {
-      // List is tricky, we'll handle it later.
-      listNodePoses.push(pos);
-      return false;
-    }
-    return true;
-  });
-
-  if (!listNodePoses.length) {
-    return { tr, docChanged: true };
-  }
-
-  tr = transformAndPreserveTextSelection(tr, schema, (memo) => {
-    const { schema } = memo;
-    let tr2 = memo.tr;
-    listNodePoses
-      .sort(compareNumber)
-      .reverse()
-      .forEach((pos) => {
-        tr2 = setListNodeIndent(state, tr2, schema, pos, delta);
-      });
-    tr2 = consolidateListNodes(tr2);
-    return tr2;
-  });
-
-  return { tr, docChanged: true };
-}
-
-function setListNodeIndent(
-  state: EditorState,
-  tr: Transform,
-  schema: Schema,
-  pos: number,
-  delta: number
-): Transform {
-  const listItem = schema.nodes[LIST_ITEM];
-  if (!listItem) {
-    return tr;
-  }
-
-  const { doc, selection } = tr;
-  if (!doc) {
-    return tr;
-  }
-
-  const listNode = doc.nodeAt(pos);
-  if (!listNode) {
-    return tr;
-  }
-
-  const indentNew = clamp(
-    MIN_INDENT_LEVEL,
-    listNode.attrs.indent + delta,
-    MAX_INDENT_LEVEL
-  );
-  if (indentNew === listNode.attrs.indent) {
-    return tr;
-  }
-
-  const { from, to } = selection;
-
-  // [FS] IRAD-947 2020-05-19
-  // Fix for Multi-level lists lose multi-levels when indenting/de-indenting
-  // Earlier they checked the to postion value to >= pos + listNode.nodeSize
-  // It wont satisfy the list hve childrens
-
-  if (from <= pos && to >= pos) {
-    return setNodeIndentMarkup(state, tr, pos, delta).tr;
-  }
-
-  const listNodeType = listNode.type;
-
-  // listNode is partially selected.
-  const itemsBefore = [];
-  const itemsSelected = [];
-  const itemsAfter = [];
-
-  doc.nodesBetween(pos, pos + listNode.nodeSize, (itemNode, itemPos) => {
-    if (itemNode.type === listNodeType) {
-      return true;
-    }
-
-    if (itemNode.type === listItem) {
-      const listItemNode = listItem.create(
-        itemNode.attrs,
-        itemNode.content,
-        itemNode.marks
-      );
-      if (itemPos + itemNode.nodeSize <= from) {
-        itemsBefore.push(listItemNode);
-      } else if (itemPos > to) {
-        itemsAfter.push(listItemNode);
-      } else {
-        itemsSelected.push(listItemNode);
-      }
-      return false;
-    }
-
-    return true;
-  });
-
-  tr = tr.delete(pos, pos + listNode.nodeSize);
-  if (itemsAfter.length) {
-    const listNodeNew = listNodeType.create(
-      listNode.attrs,
-      Fragment.from(itemsAfter)
-    );
-    tr = tr.insert(pos, Fragment.from(listNodeNew));
-  }
-
-  if (itemsSelected.length) {
-    const listNodeAttrs = {
-      ...listNode.attrs,
-      indent: indentNew,
-    };
-    const listNodeNew = listNodeType.create(
-      listNodeAttrs,
-      Fragment.from(itemsSelected)
-    );
-    tr = tr.insert(pos, Fragment.from(listNodeNew));
-  }
-
-  if (itemsBefore.length) {
-    const listNodeNew = listNodeType.create(
-      listNode.attrs,
-      Fragment.from(itemsBefore)
-    );
-    tr = tr.insert(pos, Fragment.from(listNodeNew));
-  }
-
-  return tr;
-}
-
-function setNodeIndentMarkup(
-  state: EditorState,
-  tr: Transform,
-  pos: number,
-  delta: number,
-  view: EditorView
-): Transform {
-  const retVal = true;
-  if (!tr.doc) {
-    return tr;
-  }
-  const node = tr.doc.nodeAt(pos);
-  if (!node) {
-    return { tr, docChanged: retVal };
-  }
-  const indent = clamp(
-    MIN_INDENT_LEVEL,
-    (node.attrs.indent || 0) + delta,
-    MAX_INDENT_LEVEL
-  );
-
-  if (indent === node.attrs.indent) {
-    return { tr, docChanged: false };
-  }
-  const nodeAttrs = {
-    ...node.attrs,
-    indent,
-  };
-  tr = tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
-  return { tr, docChanged: true };
-}