@ebrains/react 0.9.2-beta → 1.0.0

package/src/react-component-lib/createOverlayComponent.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
-
-interface OverlayElement extends HTMLElement {
-  present: () => Promise<void>;
-  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
-}
-
-export interface ReactOverlayProps {
-  children?: React.ReactNode;
-  isOpen: boolean;
-  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-}
-
-export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
-  tagName: string,
-  controller: { create: (options: any) => Promise<OverlayType> },
-  customElement?: any
-) => {
-  defineCustomElement(tagName, customElement);
-
-  const displayName = dashToPascalCase(tagName);
-  const didDismissEventName = `on${displayName}DidDismiss`;
-  const didPresentEventName = `on${displayName}DidPresent`;
-  const willDismissEventName = `on${displayName}WillDismiss`;
-  const willPresentEventName = `on${displayName}WillPresent`;
-
-  type Props = OverlayComponent &
-    ReactOverlayProps & {
-      forwardedRef?: StencilReactForwardedRef<OverlayType>;
-    };
-
-  let isDismissing = false;
-
-  class Overlay extends React.Component<Props> {
-    overlay?: OverlayType;
-    el!: HTMLDivElement;
-
-    constructor(props: Props) {
-      super(props);
-      if (typeof document !== 'undefined') {
-        this.el = document.createElement('div');
-      }
-      this.handleDismiss = this.handleDismiss.bind(this);
-    }
-
-    static get displayName() {
-      return displayName;
-    }
-
-    componentDidMount() {
-      if (this.props.isOpen) {
-        this.present();
-      }
-    }
-
-    componentWillUnmount() {
-      if (this.overlay) {
-        this.overlay.dismiss();
-      }
-    }
-
-    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {
-      if (this.props.onDidDismiss) {
-        this.props.onDidDismiss(event);
-      }
-      setRef(this.props.forwardedRef, null);
-    }
-
-    shouldComponentUpdate(nextProps: Props) {
-      // Check if the overlay component is about to dismiss
-      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
-        isDismissing = true;
-      }
-
-      return true;
-    }
-
-    async componentDidUpdate(prevProps: Props) {
-      if (this.overlay) {
-        attachProps(this.overlay, this.props, prevProps);
-      }
-
-      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-        this.present(prevProps);
-      }
-      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-        await this.overlay.dismiss();
-        isDismissing = false;
-
-        /**
-         * Now that the overlay is dismissed
-         * we need to render again so that any
-         * inner components will be unmounted
-         */
-        this.forceUpdate();
-      }
-    }
-
-    async present(prevProps?: Props) {
-      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
-      const elementProps = {
-        ...cProps,
-        ref: this.props.forwardedRef,
-        [didDismissEventName]: this.handleDismiss,
-        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
-        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
-        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
-      };
-
-      this.overlay = await controller.create({
-        ...elementProps,
-        component: this.el,
-        componentProps: {},
-      });
-
-      setRef(this.props.forwardedRef, this.overlay);
-      attachProps(this.overlay, elementProps, prevProps);
-
-      await this.overlay.present();
-    }
-
-    render() {
-      /**
-       * Continue to render the component even when
-       * overlay is dismissing otherwise component
-       * will be hidden before animation is done.
-       */
-      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
-    }
-  }
-
-  return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />;
-  });
-};

package/src/react-component-lib/dev.ts

@@ -1,14 +0,0 @@
-export const isDevMode = () => {
-  return process && process.env && process.env.NODE_ENV === 'development';
-};
-
-const warnings: { [key: string]: boolean } = {};
-
-export const deprecationWarning = (key: string, message: string) => {
-  if (isDevMode()) {
-    if (!warnings[key]) {
-      console.warn(message);
-      warnings[key] = true;
-    }
-  }
-};

package/src/react-component-lib/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import type { StyleReactProps } from '../interfaces';
-
-export type StencilReactExternalProps<PropType, ElementType> = PropType &
-  Omit<React.HTMLAttributes<ElementType>, 'style'> &
-  StyleReactProps;
-
-// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17
-export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
-
-export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref != null) {
-    // Cast as a MutableRef so we can assign current
-    (ref as React.MutableRefObject<any>).current = value;
-  }
-};
-
-export const mergeRefs = (
-  ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
-): React.RefCallback<any> => {
-  return (value: any) => {
-    refs.forEach((ref) => {
-      setRef(ref, value);
-    });
-  };
-};
-
-export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
-  const forwardRef = (
-    props: StencilReactExternalProps<PropType, ElementType>,
-    ref: StencilReactForwardedRef<ElementType>
-  ) => {
-    return <ReactComponent {...props} forwardedRef={ref} />;
-  };
-  forwardRef.displayName = displayName;
-
-  return React.forwardRef(forwardRef);
-};
-
-export const defineCustomElement = (tagName: string, customElement: any) => {
-  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
-    customElements.define(tagName, customElement);
-  }
-};
-
-export * from './attachProps';
-export * from './case';

package/src/react-component-lib/interfaces.ts

@@ -1,34 +0,0 @@
-// General types important to applications using stencil built components
-export interface EventEmitter<T = any> {
-  emit: (data?: T) => CustomEvent<T>;
-}
-
-export interface StyleReactProps {
-  class?: string;
-  className?: string;
-  style?: { [key: string]: any };
-}
-
-export interface OverlayEventDetail<T = any> {
-  data?: T;
-  role?: string;
-}
-
-export interface OverlayInterface {
-  el: HTMLElement;
-  animated: boolean;
-  keyboardClose: boolean;
-  overlayIndex: number;
-  presented: boolean;
-
-  enterAnimation?: any;
-  leaveAnimation?: any;
-
-  didPresent: EventEmitter<void>;
-  willPresent: EventEmitter<void>;
-  willDismiss: EventEmitter<OverlayEventDetail>;
-  didDismiss: EventEmitter<OverlayEventDetail>;
-
-  present(): Promise<void>;
-  dismiss(data?: any, role?: string): Promise<boolean>;
-}

package/src/react-component-lib/utils/attachProps.ts

@@ -1,125 +0,0 @@
-import { camelToDashCase } from './case';
-
-export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
-  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
-  if (node instanceof Element) {
-    // add any classes in className to the class list
-    const className = getClassName(node.classList, newProps, oldProps);
-    if (className !== '') {
-      node.className = className;
-    }
-
-    Object.keys(newProps).forEach((name) => {
-      if (
-        name === 'children' ||
-        name === 'style' ||
-        name === 'ref' ||
-        name === 'class' ||
-        name === 'className' ||
-        name === 'forwardedRef'
-      ) {
-        return;
-      }
-      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-        const eventName = name.substring(2);
-        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-
-        if (!isCoveredByReact(eventNameLc)) {
-          syncEvent(node, eventNameLc, newProps[name]);
-        }
-      } else {
-        (node as any)[name] = newProps[name];
-        const propType = typeof newProps[name];
-        if (propType === 'string') {
-          node.setAttribute(camelToDashCase(name), newProps[name]);
-        }
-      }
-    });
-  }
-};
-
-export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
-  const newClassProp: string = newProps.className || newProps.class;
-  const oldClassProp: string = oldProps.className || oldProps.class;
-  // map the classes to Maps for performance
-  const currentClasses = arrayToMap(classList);
-  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-  const finalClassNames: string[] = [];
-  // loop through each of the current classes on the component
-  // to see if it should be a part of the classNames added
-  currentClasses.forEach((currentClass) => {
-    if (incomingPropClasses.has(currentClass)) {
-      // add it as its already included in classnames coming in from newProps
-      finalClassNames.push(currentClass);
-      incomingPropClasses.delete(currentClass);
-    } else if (!oldPropClasses.has(currentClass)) {
-      // add it as it has NOT been removed by user
-      finalClassNames.push(currentClass);
-    }
-  });
-  incomingPropClasses.forEach((s) => finalClassNames.push(s));
-  return finalClassNames.join(' ');
-};
-
-/**
- * Transforms a React event name to a browser event name.
- */
-export const transformReactEventName = (eventNameSuffix: string) => {
-  switch (eventNameSuffix) {
-    case 'doubleclick':
-      return 'dblclick';
-  }
-  return eventNameSuffix;
-};
-
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export const isCoveredByReact = (eventNameSuffix: string) => {
-  if (typeof document === 'undefined') {
-    return true;
-  } else {
-    const eventName = 'on' + transformReactEventName(eventNameSuffix);
-    let isSupported = eventName in document;
-
-    if (!isSupported) {
-      const element = document.createElement('div');
-      element.setAttribute(eventName, 'return;');
-      isSupported = typeof (element as any)[eventName] === 'function';
-    }
-
-    return isSupported;
-  }
-};
-
-export const syncEvent = (
-  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
-  eventName: string,
-  newEventHandler?: (e: Event) => any
-) => {
-  const eventStore = node.__events || (node.__events = {});
-  const oldEventHandler = eventStore[eventName];
-
-  // Remove old listener so they don't double up.
-  if (oldEventHandler) {
-    node.removeEventListener(eventName, oldEventHandler);
-  }
-
-  // Bind new listener.
-  node.addEventListener(
-    eventName,
-    (eventStore[eventName] = function handler(e: Event) {
-      if (newEventHandler) {
-        newEventHandler.call(this, e);
-      }
-    })
-  );
-};
-
-const arrayToMap = (arr: string[] | DOMTokenList) => {
-  const map = new Map<string, string>();
-  (arr as string[]).forEach((s: string) => map.set(s, s));
-  return map;
-};

package/src/react-component-lib/utils/case.ts

@@ -1,7 +0,0 @@
-export const dashToPascalCase = (str: string) =>
-  str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

package/src/react-component-lib/utils/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import type { StyleReactProps } from '../interfaces';
-
-export type StencilReactExternalProps<PropType, ElementType> = PropType &
-  Omit<React.HTMLAttributes<ElementType>, 'style'> &
-  StyleReactProps;
-
-// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17
-export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
-
-export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref != null) {
-    // Cast as a MutableRef so we can assign current
-    (ref as React.MutableRefObject<any>).current = value;
-  }
-};
-
-export const mergeRefs = (
-  ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
-): React.RefCallback<any> => {
-  return (value: any) => {
-    refs.forEach((ref) => {
-      setRef(ref, value);
-    });
-  };
-};
-
-export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
-  const forwardRef = (
-    props: StencilReactExternalProps<PropType, ElementType>,
-    ref: StencilReactForwardedRef<ElementType>
-  ) => {
-    return <ReactComponent {...props} forwardedRef={ref} />;
-  };
-  forwardRef.displayName = displayName;
-
-  return React.forwardRef(forwardRef);
-};
-
-export const defineCustomElement = (tagName: string, customElement: any) => {
-  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
-    customElements.define(tagName, customElement);
-  }
-};
-
-export * from './attachProps';
-export * from './case';

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "exclude": [
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}