Merge pull request #385 from mashmatrix/component-settings-context

use React.createContext to propagate component settings

Author: stomita

src/scripts/AutoAlign.tsx

@@ -1,5 +1,4 @@
 import React, { ComponentType } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import RelativePortal from 'react-relative-portal';
 import { ComponentSettingsContext } from './ComponentSettings';
@@ -237,16 +236,6 @@ export function autoAlign(options: AutoAlignOptions) {
       content: any;
       /* eslint-enable react/sort-comp */
 
-      context!: Pick<
-        ComponentSettingsContext,
-        'portalClassName' | 'portalStyle'
-      >;
-
-      static contextTypes = {
-        portalClassName: PropTypes.string,
-        portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-      };
-
       constructor(props: ResultProps) {
         super(props);
         this.state = {
@@ -380,10 +369,6 @@ export function autoAlign(options: AutoAlignOptions) {
           children,
           ...pprops
         } = this.props;
-        const {
-          portalClassName = 'slds-scope',
-          portalStyle = { position: 'absolute', top: 0, left: 0, right: 0 },
-        } = this.context;
         // eslint-disable-next-line prefer-const
         let { top, left } = calcAlignmentRect(
           triggerNodeRect,
@@ -411,22 +396,37 @@ export function autoAlign(options: AutoAlignOptions) {
           content
         ) : (
           <div ref={(node) => (this.node = node)}>
-            <RelativePortal
-              fullWidth
-              left={offsetLeft}
-              right={-offsetLeft}
-              top={offsetTop}
-              onScroll={ignoreFirstCall(this.requestRecalcAlignment)}
-              component='div'
-              className={classnames(portalClassName, additionalPortalClassName)}
-              style={{ ...portalStyle, ...additionalPortalStyle }}
-            >
-              {this.state.triggerNodeRect ? (
-                content
-              ) : (
-                <div className='slds-hidden'>{content}</div>
+            <ComponentSettingsContext.Consumer>
+              {({
+                portalClassName = 'slds-scope',
+                portalStyle = {
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                },
+              }) => (
+                <RelativePortal
+                  fullWidth
+                  left={offsetLeft}
+                  right={-offsetLeft}
+                  top={offsetTop}
+                  onScroll={ignoreFirstCall(this.requestRecalcAlignment)}
+                  component='div'
+                  className={classnames(
+                    portalClassName,
+                    additionalPortalClassName
+                  )}
+                  style={{ ...portalStyle, ...additionalPortalStyle }}
+                >
+                  {this.state.triggerNodeRect ? (
+                    content
+                  ) : (
+                    <div className='slds-hidden'>{content}</div>
+                  )}
+                </RelativePortal>
               )}
-            </RelativePortal>
+            </ComponentSettingsContext.Consumer>
           </div>
         );
       }

src/scripts/ComponentSettings.tsx

@@ -1,37 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext } from 'react';
 
 export type ComponentSettingsProps = {
   assetRoot?: string;
   portalClassName?: string;
   portalStyle?: object;
+  getActiveElement?: () => HTMLElement | null;
 };
 
-export type ComponentSettingsContext = {
-  assetRoot?: string;
-  portalClassName?: string;
-  portalStyle?: object;
-};
+function getDocumentActiveElement() {
+  return document.activeElement as HTMLElement | null;
+}
+
+export const ComponentSettingsContext = createContext<
+  ComponentSettingsProps &
+    Required<Pick<ComponentSettingsProps, 'getActiveElement'>>
+>({ getActiveElement: getDocumentActiveElement });
 
 /**
  *
  */
-export class ComponentSettings extends React.Component<
-  ComponentSettingsProps,
-  {}
+export class ComponentSettings extends React.PureComponent<
+  ComponentSettingsProps
 > {
-  static childContextTypes = {
-    assetRoot: PropTypes.string,
-    portalClassName: PropTypes.string,
-    portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  };
-
-  getChildContext(): ComponentSettingsContext {
-    const { assetRoot, portalClassName, portalStyle } = this.props;
-    return { assetRoot, portalClassName, portalStyle };
-  }
-
   render() {
-    return this.props.children;
+    const {
+      assetRoot,
+      portalClassName,
+      portalStyle,
+      getActiveElement = getDocumentActiveElement,
+      children,
+    } = this.props;
+    return (
+      <ComponentSettingsContext.Provider
+        value={{ assetRoot, portalClassName, portalStyle, getActiveElement }}
+      >
+        {children}
+      </ComponentSettingsContext.Provider>
+    );
   }
 }

src/scripts/DateInput.tsx

@@ -12,6 +12,7 @@ import { FormElement } from './FormElement';
 import { Input, InputProps } from './Input';
 import { Datepicker } from './Datepicker';
 import { uuid, isElInChildren } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 type DatepickerDropdownProps = {
   className?: string;
@@ -95,16 +96,24 @@ export type DateInputProps = {
   extensionRenderer?: (...props: any[]) => JSX.Element;
 } & Omit<InputProps, 'value' | 'defaultValue' | 'onBlur' | 'onValueChange'>;
 
-type DateInputState = {
+type DateInputInnerProps = DateInputProps & {
+  getActiveElement: () => HTMLElement | null;
+};
+
+type DateInputInnerState = {
   id: string;
   opened: boolean;
   value: string | null;
   inputValue: string | null;
 };
+
 /**
  *
  */
-export class DateInput extends Component<DateInputProps, DateInputState> {
+class DateInputInner extends Component<
+  DateInputInnerProps,
+  DateInputInnerState
+> {
   static isFormElement = true;
 
   node: HTMLDivElement | null = null;
@@ -113,7 +122,7 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
 
   input: HTMLInputElement | null = null;
 
-  constructor(props: Readonly<DateInputProps>) {
+  constructor(props: Readonly<DateInputInnerProps>) {
     super(props);
     this.state = {
       id: `form-element-${uuid()}`,
@@ -138,7 +147,10 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
     this.onDatepickerClose = this.onDatepickerClose.bind(this);
   }
 
-  componentDidUpdate(prevProps: DateInputProps, prevState: DateInputState) {
+  componentDidUpdate(
+    prevProps: DateInputInnerProps,
+    prevState: DateInputInnerState
+  ) {
     if (this.props.onValueChange && prevState.value !== this.state.value) {
       this.props.onValueChange(this.state.value, prevState.value);
     }
@@ -264,7 +276,8 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
   }
 
   isFocusedInComponent() {
-    const targetEl = document.activeElement;
+    const { getActiveElement } = this.props;
+    const targetEl = getActiveElement();
     return (
       isElInChildren(this.node, targetEl) ||
       isElInChildren(this.datepicker, targetEl)
@@ -334,6 +347,7 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
       includeTime,
       onComplete,
       onValueChange,
+      getActiveElement,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -377,3 +391,38 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
     );
   }
 }
+
+/**
+ *
+ */
+export class DateInput extends Component<DateInputProps> {
+  static isFormElement = true;
+
+  inner: DateInputInner | null = null;
+
+  get node(): HTMLDivElement | null {
+    return this.inner ? this.inner.node : null;
+  }
+
+  get datepicker(): HTMLDivElement | null {
+    return this.inner ? this.inner.datepicker : null;
+  }
+
+  get input(): HTMLInputElement | null {
+    return this.inner ? this.inner.input : null;
+  }
+
+  render() {
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ getActiveElement }) => (
+          <DateInputInner
+            ref={(cmp) => (this.inner = cmp)}
+            {...this.props}
+            getActiveElement={getActiveElement}
+          />
+        )}
+      </ComponentSettingsContext.Consumer>
+    );
+  }
+}

src/scripts/Datepicker.tsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import { Button } from './Button';
 import { Select, Option } from './Select';
 import { getToday, isElInChildren } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 type Date = {
   year: number;
@@ -97,17 +98,24 @@ export type DatepickerProps = {
   onClose?: () => void;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>;
 
-export type DatepickerState = {
+type DatepickerInnerProps = DatepickerProps & {
+  getActiveElement: () => HTMLElement | null;
+};
+
+type DatepickerInnerState = {
   focusDate?: boolean;
   targetDate?: string;
 };
 
-export class Datepicker extends Component<DatepickerProps, DatepickerState> {
+class DatepickerInner extends Component<
+  DatepickerInnerProps,
+  DatepickerInnerState
+> {
   node: HTMLDivElement | null = null;
 
   month: HTMLTableElement | null = null;
 
-  constructor(props: Readonly<DatepickerProps>) {
+  constructor(props: Readonly<DatepickerInnerProps>) {
     super(props);
     this.state = {};
 
@@ -228,7 +236,9 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
   }
 
   isFocusedInComponent() {
-    return isElInChildren(this.node, document.activeElement);
+    const { getActiveElement } = this.props;
+    const targetEl = getActiveElement();
+    return isElInChildren(this.node, targetEl);
   }
 
   renderFilter(cal: Calendar) {
@@ -374,6 +384,7 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
       autoFocus,
       onSelect,
       onClose,
+      getActiveElement,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -404,3 +415,28 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
     );
   }
 }
+
+/**
+ *
+ */
+export class Datepicker extends Component<DatepickerProps> {
+  private inner: DatepickerInner | null = null;
+
+  get node(): HTMLDivElement | null {
+    return this.inner ? this.inner.node : null;
+  }
+
+  render() {
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ getActiveElement }) => (
+          <DatepickerInner
+            ref={(cmp) => (this.inner = cmp)}
+            {...this.props}
+            getActiveElement={getActiveElement}
+          />
+        )}
+      </ComponentSettingsContext.Consumer>
+    );
+  }
+}