@aws-amplify/ui-react 1.2.25-unstable.1 → 2.0.0

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { attachEventProps } from './utils/attachEventProps';
-
-interface LoadingElement {
-  present: () => any;
-  dismiss: () => any;
-}
-
-interface ReactControllerProps<E> {
-  isOpen: boolean;
-  onDidDismiss: (event: CustomEvent<E>) => void;
-}
-
-export function createControllerComponent<
-  OptionsType extends object,
-  LoadingElementType extends LoadingElement,
-  OverlayEventDetail
->(displayName: string, controller: { create: (options: any) => Promise<LoadingElementType> }) {
-  const dismissEventName = `on${displayName}DidDismiss`;
-
-  type Props = OptionsType & ReactControllerProps<OverlayEventDetail>;
-
-  return class ReactControllerComponent extends React.Component<Props> {
-    controller?: LoadingElementType;
-
-    constructor(props: Props) {
-      super(props);
-    }
-
-    static get displayName() {
-      return displayName;
-    }
-
-    async componentDidMount() {
-      const { isOpen } = this.props;
-      if (isOpen) {
-        this.present();
-      }
-    }
-
-    async componentDidUpdate(prevProps: Props) {
-      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-        this.present(prevProps);
-      }
-      if (
-        this.controller &&
-        prevProps.isOpen !== this.props.isOpen &&
-        this.props.isOpen === false
-      ) {
-        await this.controller.dismiss();
-      }
-    }
-
-    async present(prevProps?: Props) {
-      const { isOpen, onDidDismiss, ...cProps } = this.props;
-      const elementProps = {
-        ...cProps,
-        [dismissEventName]: onDidDismiss,
-      };
-      this.controller = await controller.create({
-        ...elementProps,
-      });
-      attachEventProps(this.controller as any, elementProps, prevProps);
-      this.controller.present();
-    }
-
-    render(): null {
-      return null;
-    }
-  };
-}

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { attachEventProps } from './utils/attachEventProps';
-
-interface LoadingElement {
-  present: () => any;
-  dismiss: () => any;
-}
-interface ReactOverlayProps<E> {
-  children?: React.ReactNode;
-  isOpen: boolean;
-  onDidDismiss?: (event: CustomEvent<E>) => void;
-}
-
-export function createOverlayComponent<
-  T extends object,
-  LoadingElementType extends LoadingElement,
-  OverlayEventDetail
->(displayName: string, controller: { create: (options: any) => Promise<LoadingElementType> }) {
-  const dismissEventName = `on${displayName}DidDismiss`;
-
-  type Props = T & ReactOverlayProps<OverlayEventDetail>;
-
-  return class ReactOverlayComponent extends React.Component<Props> {
-    controller?: LoadingElementType;
-    el: HTMLDivElement;
-
-    constructor(props: Props) {
-      super(props);
-      this.el = document.createElement('div');
-    }
-
-    static get displayName() {
-      return displayName;
-    }
-
-    componentDidMount() {
-      if (this.props.isOpen) {
-        this.present();
-      }
-    }
-
-    async componentDidUpdate(prevProps: Props) {
-      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-        this.present(prevProps);
-      }
-      if (
-        this.controller &&
-        prevProps.isOpen !== this.props.isOpen &&
-        this.props.isOpen === false
-      ) {
-        await this.controller.dismiss();
-      }
-    }
-
-    async present(prevProps?: Props) {
-      // tslint:disable-next-line:no-empty
-      const { children, isOpen, onDidDismiss = () => {}, ...cProps } = this.props;
-      const elementProps = {
-        ...cProps,
-        [dismissEventName]: onDidDismiss,
-      };
-
-      this.controller = await controller.create({
-        ...elementProps,
-        component: this.el,
-        componentProps: {},
-      });
-
-      attachEventProps(this.controller as any, elementProps, prevProps);
-
-      this.controller.present();
-    }
-
-    render() {
-      return ReactDOM.createPortal(this.props.children, this.el);
-    }
-  };
-}

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

@@ -1,3 +0,0 @@
-export { createReactComponent } from './createComponent';
-export { createControllerComponent } from './createControllerComponent';
-export { createOverlayComponent } from './createOverlayComponent';

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

@@ -1,87 +0,0 @@
-export function attachEventProps(node: HTMLElement, newProps: any, oldProps: any = {}) {
-  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 === 'className') {
-      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];
-    }
-  });
-}
-
-export function getClassName(classList: DOMTokenList, newProps: any, oldProps: any) {
-  // map the classes to Maps for performance
-  const currentClasses = arrayToMap(classList);
-  const incomingPropClasses = arrayToMap(newProps.className ? newProps.className.split(' ') : []);
-  const oldPropClasses = arrayToMap(oldProps.className ? oldProps.className.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(' ');
-}
-
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export function isCoveredByReact(eventNameSuffix: string, doc: Document = document) {
-  const eventName = 'on' + eventNameSuffix;
-  let isSupported = eventName in doc;
-
-  if (!isSupported) {
-    const element = doc.createElement('div');
-    element.setAttribute(eventName, 'return;');
-    isSupported = typeof (element as any)[eventName] === 'function';
-  }
-
-  return isSupported;
-}
-
-export function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any) {
-  const eventStore = (node as any).__events || ((node as any).__events = {});
-  const oldEventHandler = eventStore[eventName];
-
-  // Remove old listener so they don't double up.
-  if (oldEventHandler) {
-    node.removeEventListener(eventName, oldEventHandler);
-  }
-
-  if (newEventHandler != null) {
-    // Bind new listener.
-    node.addEventListener(
-      eventName,
-      (eventStore[eventName] = function handler(e: Event) {
-        newEventHandler.call(this, e);
-      }),
-    );
-  }
-}
-
-function 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/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-export const dashToPascalCase = (str: string) =>
-  str
-    .toLowerCase()
-    .split('-')
-    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-
-export interface ReactProps {
-  class?: string;
-}
-
-export type IonicReactExternalProps<PropType, ElementType> = PropType & React.HTMLAttributes<ElementType> & ReactProps;
-
-export const createForwardRef = <PropType, ElementType>(
-  ReactComponent: any,
-  displayName: string,
-) => {
-  const forwardRef = (
-    props: IonicReactExternalProps<PropType, ElementType>,
-    ref: React.Ref<ElementType>,
-  ) => {
-    return <ReactComponent {...props} forwardedRef={ref} />;
-  };
-  forwardRef.displayName = displayName;
-
-  return React.forwardRef(forwardRef);
-};
-
-export * from './attachEventProps';

package/src/withAuthenticator.tsx

@@ -1,62 +0,0 @@
-import React, {
-	ComponentType,
-	ComponentPropsWithRef,
-	FunctionComponent,
-} from 'react';
-import { Auth, appendToCognitoUserAgent } from '@aws-amplify/auth';
-import { AmplifyContainer, AmplifyAuthenticator, AmplifyAuthContainer } from './';
-import { onAuthUIStateChange, AuthState } from '@aws-amplify/ui-components';
-import { Logger } from '@aws-amplify/core';
-
-const logger = new Logger('withAuthenticator');
-
-export function withAuthenticator<T extends object>(
-	Component: ComponentType<T>,
-	authenticatorProps?: ComponentPropsWithRef<typeof AmplifyAuthenticator>
-) {
-	const AppWithAuthenticator: FunctionComponent<T> = props => {
-		const [signedIn, setSignedIn] = React.useState(false);
-
-		React.useEffect(() => {
-			appendToCognitoUserAgent('withAuthenticator');
-			
-			// checkUser returns an "unsubscribe" function to stop side-effects
-			return checkUser();
-		}, []);
-
-		function checkUser() {
-			setUser();
-			
-			return onAuthUIStateChange(authState => {
-				if (authState === AuthState.SignedIn) {
-					setSignedIn(true);
-				} else if (authState === AuthState.SignedOut) {
-					setSignedIn(false);
-				}
-			});
-		}
-
-		async function setUser() {
-			try {
-				const user = await Auth.currentAuthenticatedUser();
-				if (user) setSignedIn(true);
-			} catch (err) {
-				logger.debug(err);
-			}
-		};
-
-		if (!signedIn) {
-			return (
-				<AmplifyContainer>
-					<AmplifyAuthContainer>
-						<AmplifyAuthenticator {...authenticatorProps} {...props} />
-					</AmplifyAuthContainer>
-				</AmplifyContainer>
-			);
-		}
-
-		return <Component {...props} />;
-	};
-
-	return AppWithAuthenticator;
-}

package/webpack.config.dev.js

@@ -1,6 +0,0 @@
-var config = require('./webpack.config.js');
-
-var entry = {
-	'@aws-amplify/ui-react': './lib/index.js',
-};
-module.exports = Object.assign(config, { entry, mode: 'development' });

package/webpack.config.js

@@ -1,56 +0,0 @@
-module.exports = {
-	entry: {
-		'aws-amplify-react.min': './lib/index.js',
-	},
-	externals: [
-		'@aws-amplify/auth',
-		'@aws-amplify/analytics',
-		'@aws-amplify/api',
-		'@aws-amplify/core',
-		'@aws-amplify/interactions',
-		'@aws-amplify/storage',
-		'@aws-amplify/ui',
-		'@aws-amplify/ui/dist/style.css',
-		'@aws-amplify/xr',
-		'aws-amplify',
-		'react',
-	],
-	output: {
-		filename: '[name].js',
-		path: __dirname + '/dist',
-		library: 'aws_amplify_react',
-		libraryTarget: 'umd',
-		umdNamedDefine: true,
-		globalObject: 'this',
-		devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils')
-			.devtoolModuleFilenameTemplate,
-	},
-	// Enable sourcemaps for debugging webpack's output.
-	devtool: 'source-map',
-	resolve: {
-		extensions: ['.js', '.json'],
-	},
-	mode: 'production',
-	module: {
-		rules: [
-			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-			//{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
-			{
-				test: /\.js?$/,
-				exclude: /node_modules/,
-				use: [
-					'babel-loader',
-					{
-						loader: 'babel-loader',
-						options: {
-							presets: ['@babel/preset-env'],
-						},
-					},
-				],
-			},
-		],
-	},
-	node: {
-		fs: 'empty',
-	},
-};