@modusoperandi/licit 0.1.9 → 0.13.2

package/src/ui/CustomButton.js

@@ -1,33 +0,0 @@
-// @flow
-
-import './czi-custom-button.css';
-import PointerSurface from './PointerSurface';
-import * as React from 'react';
-import TooltipSurface from './TooltipSurface';
-import cx from 'classnames';
-
-import type { PointerSurfaceProps } from './PointerSurface';
-
-class CustomButton extends React.PureComponent<any, any> {
-  props: PointerSurfaceProps & {
-    icon?: string | React.Element<any> | null,
-    label?: string | React.Element<any> | null,
-  };
-
-  render(): React.Element<any> {
-    const { icon, label, className, title, ...pointerProps } = this.props;
-    const klass = cx(className, 'czi-custom-button', {
-      'use-icon': !!icon,
-    });
-    return (
-      <TooltipSurface tooltip={title}>
-        <PointerSurface {...pointerProps} className={klass}>
-          {icon}
-          {label}
-        </PointerSurface>
-      </TooltipSurface>
-    );
-  }
-}
-
-export default CustomButton;

package/src/ui/PointerSurface.js

@@ -1,141 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import * as React from 'react';
-
-import preventEventDefault from './preventEventDefault';
-
-export type PointerSurfaceProps = {
-  active?: ?boolean,
-  children?: any,
-  className?: ?string,
-  disabled?: ?boolean,
-  id?: ?string,
-  onClick?: ?(val: any, e: SyntheticEvent<>) => void,
-  onMouseEnter?: ?(val: any, e: SyntheticEvent<>) => void,
-  style?: ?Object,
-  title?: ?string,
-  value?: any,
-};
-
-class PointerSurface extends React.PureComponent<any, any> {
-  props: PointerSurfaceProps;
-
-  _clicked = false;
-  _mul = false;
-  _pressedTarget = null;
-  _unmounted = false;
-
-  state = { pressed: false };
-
-  render(): React.Element<any> {
-    const {
-      className,
-      disabled,
-      active,
-      id,
-      style,
-      title,
-      children,
-    } = this.props;
-    const { pressed } = this.state;
-
-    const buttonClassName = cx(className, {
-      active: active,
-      disabled: disabled,
-      pressed: pressed,
-    });
-
-    return (
-      <span
-        aria-disabled={disabled}
-        aria-pressed={pressed}
-        className={buttonClassName}
-        disabled={disabled}
-        id={id}
-        onKeyPress={disabled ? preventEventDefault : this._onMouseUp}
-        onMouseDown={disabled ? preventEventDefault : this._onMouseDown}
-        onMouseEnter={disabled ? preventEventDefault : this._onMouseEnter}
-        onMouseLeave={disabled ? null : this._onMouseLeave}
-        onMouseUp={disabled ? preventEventDefault : this._onMouseUp}
-        role="button"
-        style={style}
-        tabIndex={disabled ? null : 0}
-        title={title}
-      >
-        {children}
-      </span>
-    );
-  }
-
-  componentWillUnmount(): void {
-    this._unmounted = true;
-    if (this._mul) {
-      this._mul = false;
-      document.removeEventListener('mouseup', this._onMouseUpCapture, true);
-    }
-  }
-
-  _onMouseEnter = (e: SyntheticEvent<*>): void => {
-    this._pressedTarget = null;
-    e.preventDefault();
-    const { onMouseEnter, value } = this.props;
-    onMouseEnter && onMouseEnter(value, e);
-  };
-
-  _onMouseLeave = (e: SyntheticEvent<*>): void => {
-    this._pressedTarget = null;
-    const mouseUpEvent: any = e;
-    this._onMouseUpCapture(mouseUpEvent);
-  };
-
-  _onMouseDown = (e: any): void => {
-    e.preventDefault();
-
-    this._pressedTarget = null;
-    this._clicked = false;
-
-    if (e.which === 3 || e.button == 2) {
-      // right click.
-      return;
-    }
-
-    this.setState({ pressed: true });
-    this._pressedTarget = e.currentTarget;
-    this._clicked = false;
-
-    if (!this._mul) {
-      document.addEventListener('mouseup', this._onMouseUpCapture, true);
-      this._mul = true;
-    }
-  };
-
-  _onMouseUp = (e: SyntheticEvent<*>): void => {
-    e.preventDefault();
-
-    if (this._clicked || e.type === 'keypress') {
-      const { onClick, value, disabled } = this.props;
-      !disabled && onClick && onClick(value, e);
-    }
-
-    this._pressedTarget = null;
-    this._clicked = false;
-  };
-
-  _onMouseUpCapture = (e: MouseEvent): void => {
-    if (this._mul) {
-      this._mul = false;
-      document.removeEventListener('mouseup', this._onMouseUpCapture, true);
-    }
-    const target = e.target;
-    this._clicked =
-      this._pressedTarget instanceof HTMLElement &&
-      target instanceof HTMLElement &&
-      (target === this._pressedTarget ||
-        target.contains(this._pressedTarget) ||
-        this._pressedTarget.contains(target));
-    this.setState({ pressed: false });
-  };
-}
-
-export default PointerSurface;

package/src/ui/PopUp.js

@@ -1,77 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import PopUpManager from './PopUpManager';
-import { atAnchorBottomLeft, atViewportCenter } from './PopUpPosition';
-import uuid from './uuid';
-
-import type { PopUpDetails } from './PopUpManager';
-import type { Rect } from './rects';
-
-type PositionHandler = (anchorRect: ?Rect, bodyRect: ?Rect) => Rect;
-
-export type ViewProps = Object;
-
-export type PopUpParams = {
-  anchor?: any,
-  autoDismiss?: ?boolean,
-  container?: ?Element,
-  modal?: ?boolean,
-  onClose?: ?(val: any) => void,
-  position?: ?PositionHandler,
-  IsChildDialog?: boolean,
-};
-
-export type PopUpProps = {
-  View: Function,
-  close: Function,
-  popUpParams: PopUpParams,
-  viewProps: Object,
-};
-
-export type PopUpHandle = {
-  close: (val: any) => void,
-  update: (props: Object) => void,
-};
-
-class PopUp extends React.PureComponent<any, any> {
-  props: PopUpProps;
-
-  _bridge = null;
-  _id = uuid();
-
-  render(): React.Element<any> {
-    const dummy = {};
-    const { View, viewProps, close } = this.props;
-    return (
-      <div data-pop-up-id={this._id} id={this._id}>
-        <View {...(viewProps || dummy)} close={close} />
-      </div>
-    );
-  }
-
-  componentDidMount(): void {
-    this._bridge = { getDetails: this._getDetails };
-    PopUpManager.register(this._bridge);
-  }
-
-  componentWillUnmount(): void {
-    this._bridge && PopUpManager.unregister(this._bridge);
-  }
-
-  _getDetails = (): PopUpDetails => {
-    const { close, popUpParams } = this.props;
-    const { anchor, autoDismiss, position, modal } = popUpParams;
-    return {
-      anchor,
-      autoDismiss: autoDismiss === false ? false : true,
-      body: document.getElementById(this._id),
-      close,
-      modal: modal === true,
-      position: position || (modal ? atViewportCenter : atAnchorBottomLeft),
-    };
-  };
-}
-
-export default PopUp;

package/src/ui/PopUpManager.js

@@ -1,213 +0,0 @@
-// @flow
-
-import clamp from './clamp';
-import { fromHTMlElement, fromXY, isIntersected } from './rects';
-
-import type { PositionHandler } from './PopUpPosition';
-import type { Rect } from './rects';
-
-export type PopUpDetails = {
-  anchor: ?HTMLElement,
-  anchorRect?: ?Rect,
-  autoDismiss: boolean,
-  body: ?HTMLElement,
-  bodyRect?: ?Rect,
-  close: (val: any) => void,
-  modal: boolean,
-  position: PositionHandler,
-};
-
-export type PopUpBridge = {
-  getDetails: () => PopUpDetails,
-};
-
-const CLICK_INTERVAL = 350;
-const DUMMY_RECT = { x: -10000, y: -10000, w: 0, h: 0 };
-
-class PopUpManager {
-  _bridges = new Map<any, any>();
-  _positions = new Map<any, any>();
-
-  _mx = 0;
-  _my = 0;
-  _rafID = 0;
-
-  register(bridge: PopUpBridge): void {
-    this._bridges.set(bridge, Date.now());
-    this._positions.set(bridge, null);
-    if (this._bridges.size === 1) {
-      this._observe();
-    }
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  }
-
-  unregister(bridge: PopUpBridge): void {
-    this._bridges.delete(bridge);
-    this._positions.delete(bridge);
-    if (this._bridges.size === 0) {
-      this._unobserve();
-    }
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _observe(): void {
-    document.addEventListener('mousemove', this._onMouseChange, false);
-    document.addEventListener('mouseup', this._onMouseChange, false);
-    document.addEventListener('click', this._onClick, false);
-    window.addEventListener('scroll', this._onScroll, true);
-    window.addEventListener('resize', this._onResize, true);
-  }
-
-  _unobserve(): void {
-    document.removeEventListener('mousemove', this._onMouseChange, false);
-    document.removeEventListener('mouseup', this._onMouseChange, false);
-    document.removeEventListener('click', this._onClick, false);
-    window.removeEventListener('scroll', this._onScroll, true);
-    window.removeEventListener('resize', this._onResize, true);
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _onScroll = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onResize = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onMouseChange = (e: MouseEvent): void => {
-    this._mx = Math.round(e.clientX);
-    this._my = Math.round(e.clientY);
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onClick = (e: MouseEvent): void => {
-    const now = Date.now();
-    let detailsWithModalToDismiss;
-    for (const [bridge, registeredAt] of this._bridges) {
-      if (now - registeredAt > CLICK_INTERVAL) {
-        const details = bridge.getDetails();
-        if (details.modal && details.autoDismiss) {
-          detailsWithModalToDismiss = details;
-        }
-      }
-    }
-    if (!detailsWithModalToDismiss) {
-      return;
-    }
-    const { body, close } = detailsWithModalToDismiss;
-    const pointer = fromXY(e.clientX, e.clientY, 1);
-    const bodyRect = body ? fromHTMlElement(body) : null;
-    if (!bodyRect || !isIntersected(pointer, bodyRect)) {
-      close();
-    }
-  };
-
-  _syncPosition = (): void => {
-    this._rafID = 0;
-
-    const bridgeToDetails = new Map<any, any>();
-    for (const [
-      bridge,
-      // eslint-disable-next-line no-unused-vars
-      registeredAt,
-    ] of this._bridges) {
-      const details = bridge.getDetails();
-      bridgeToDetails.set(bridge, details);
-      const { anchor, body } = details;
-      if (body instanceof HTMLElement) {
-        details.bodyRect = fromHTMlElement(body);
-      }
-      if (anchor instanceof HTMLElement) {
-        details.anchorRect = fromHTMlElement(anchor);
-      }
-    }
-
-    const pointer = fromXY(this._mx, this._my, 2);
-    const hoveredAnchors = new Set();
-    for (const [bridge, details] of bridgeToDetails) {
-      const { anchor, bodyRect, anchorRect, position, body } = details;
-      if (!bodyRect && !anchorRect) {
-        continue;
-      }
-
-      const { x, y } = position(anchorRect, bodyRect);
-      const positionKey = `${x}-${y}`;
-
-      if (body && bodyRect && this._positions.get(bridge) !== positionKey) {
-        const ax = anchorRect
-          ? clamp(
-              0,
-              anchorRect.x - x + anchorRect.w / 2,
-              bodyRect.w - anchorRect.w / 2
-            )
-          : 0;
-        this._positions.set(bridge, positionKey);
-        const bodyStyle = body.style;
-        bodyStyle.position = 'absolute';
-        bodyStyle.left = `${x}px`;
-        bodyStyle.top = `${y}px`;
-        bodyStyle.setProperty('--czi-pop-up-anchor-offset-left', `${ax}px`);
-        bodyRect.x = x;
-        bodyRect.y = y;
-      }
-
-      if (
-        isIntersected(pointer, bodyRect || DUMMY_RECT, 0) ||
-        isIntersected(pointer, anchorRect || DUMMY_RECT, 0)
-      ) {
-        if (anchor) {
-          hoveredAnchors.add(anchor);
-        }
-      }
-    }
-
-    while (true) {
-      const size = hoveredAnchors.size;
-      for (const [
-        // eslint-disable-next-line no-unused-vars
-        bridge,
-        details,
-      ] of bridgeToDetails) {
-        const { anchor, body } = details;
-        for (const ha of hoveredAnchors) {
-          if (
-            anchor &&
-            body &&
-            !hoveredAnchors.has(anchor) &&
-            body.contains(ha)
-          ) {
-            hoveredAnchors.add(anchor);
-          }
-        }
-      }
-      if (hoveredAnchors.size === size) {
-        break;
-      }
-    }
-
-    const now = Date.now();
-    for (const [bridge, registeredAt] of this._bridges) {
-      const details = bridgeToDetails.get(bridge);
-      if (details) {
-        const { autoDismiss, anchor, close, modal } = details;
-        if (
-          autoDismiss &&
-          // Modal is handled separately at `onClick`
-          !modal &&
-          now - registeredAt > CLICK_INTERVAL &&
-          !hoveredAnchors.has(anchor)
-        ) {
-          close();
-        }
-      }
-    }
-  };
-}
-
-const instance = new PopUpManager();
-
-export default instance;

package/src/ui/PopUpPosition.js

@@ -1,104 +0,0 @@
-// @flow
-
-import { isCollapsed } from './rects';
-
-import type { Rect } from './rects';
-
-export type PositionHandler = (anchorRect: ?Rect, bodyRect: ?Rect) => Rect;
-
-export function atAnchorBottomLeft(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x;
-    rect.y = anchorRect.y + anchorRect.h;
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = anchorRect.x - bodyRect.w + anchorRect.w;
-    }
-    if (rect.y + bodyRect.h > viewportHeight) {
-      rect.y = Math.max(anchorRect.y - bodyRect.h, 2);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorBottomCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = Math.max(anchorRect.x - (bodyRect.w - anchorRect.w) / 2, 10);
-    rect.y = anchorRect.y + anchorRect.h;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1;
-    rect.y = anchorRect.y;
-    const viewportWidth = window.innerWidth;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = Math.max(2, anchorRect.x - bodyRect.w);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atViewportCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (bodyRect) {
-    rect.x = (window.innerWidth - bodyRect.w) / 2;
-    rect.y = (window.innerHeight - bodyRect.h) / 2;
-  }
-
-  if (!bodyRect || isCollapsed(bodyRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1 - bodyRect.w;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + (anchorRect.w - bodyRect.w) / 2;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}

package/src/ui/TooltipSurface.js

@@ -1,76 +0,0 @@
-// @flow
-
-import './czi-tooltip-surface.css';
-import './czi-animations.css';
-
-import * as React from 'react';
-import createPopUp from './createPopUp';
-import { atAnchorBottomCenter } from './PopUpPosition';
-import uuid from './uuid';
-
-class TooltipView extends React.PureComponent<any, any> {
-  render(): React.Element<any> {
-    const { tooltip } = this.props;
-    return (
-      <div className="czi-tooltip-view czi-animation-fade-in">{tooltip}</div>
-    );
-  }
-}
-
-class TooltipSurface extends React.PureComponent<any, any> {
-  _id = uuid();
-  _popUp = null;
-
-  props: {
-    tooltip: string,
-    children?: any,
-  };
-
-  componentWillUnmount(): void {
-    this._popUp && this._popUp.close();
-  }
-
-  render(): React.Element<any> {
-    const { tooltip, children } = this.props;
-    return (
-      <span
-        aria-label={tooltip}
-        className="czi-tooltip-surface"
-        data-tooltip={tooltip}
-        id={this._id}
-        onMouseDown={tooltip && this._onMouseLeave}
-        onMouseEnter={tooltip && this._onMouseEnter}
-        onMouseLeave={tooltip && this._onMouseLeave}
-        role="tooltip"
-      >
-        {children}
-      </span>
-    );
-  }
-
-  _onMouseEnter = (): void => {
-    if (!this._popUp) {
-      const { tooltip } = this.props;
-      this._popUp = createPopUp(
-        TooltipView,
-        { tooltip },
-        {
-          anchor: document.getElementById(this._id),
-          onClose: this._onClose,
-          position: atAnchorBottomCenter,
-        }
-      );
-    }
-  };
-
-  _onMouseLeave = (): void => {
-    this._popUp && this._popUp.close();
-    this._popUp = null;
-  };
-
-  _onClose = (): void => {
-    this._popUp = null;
-  };
-}
-
-export default TooltipSurface;

package/src/ui/clamp.js

@@ -1,11 +0,0 @@
-// @flow
-
-export default function clamp(min: number, val: number, max: number): number {
-  if (val < min) {
-    return min;
-  }
-  if (val > max) {
-    return max;
-  }
-  return val;
-}