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,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext } from 'react';
 
 export type ComponentSettingsProps = {
   assetRoot?: string;
@@ -16,22 +15,17 @@ export type ComponentSettingsContext = {
 /**
  *
  */
-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, children } = this.props;
+    return (
+      <ComponentSettingsContext.Provider
+        value={{ assetRoot, portalClassName, portalStyle }}
+      >
+        {children}
+      </ComponentSettingsContext.Provider>
+    );
   }
 }

src/scripts/Icon.tsx

@@ -129,8 +129,6 @@ export class Icon extends Component<IconProps, IconState> {
   };
 
   // eslint-disable-next-line react/sort-comp
-  context!: Pick<ComponentSettingsContext, 'assetRoot'>;
-
   iconContainer: HTMLSpanElement | null;
 
   svgIcon: SVGElement | null;
@@ -258,7 +256,6 @@ export class Icon extends Component<IconProps, IconState> {
 
   render() {
     const { container, size, ...props } = this.props;
-    const { assetRoot = getAssetRoot() } = this.context;
     let { category, icon } = props;
 
     if (icon.indexOf(':') > 0) {
@@ -274,23 +271,33 @@ export class Icon extends Component<IconProps, IconState> {
         iconColor ? `slds-icon-${iconColor}` : null
       );
       return (
-        <span
-          className={ccontainerClassName}
-          ref={(node) => (this.iconContainer = node)}
-        >
-          {this.renderSVG({
-            ...pprops,
-            size,
-            category,
-            icon,
-            fillColor: iconColor,
-            container,
-            assetRoot,
-          })}
-        </span>
+        <ComponentSettingsContext.Consumer>
+          {({ assetRoot = getAssetRoot() }) => (
+            <span
+              className={ccontainerClassName}
+              ref={(node) => (this.iconContainer = node)}
+            >
+              {this.renderSVG({
+                ...pprops,
+                size,
+                category,
+                icon,
+                fillColor: iconColor,
+                container,
+                assetRoot,
+              })}
+            </span>
+          )}
+        </ComponentSettingsContext.Consumer>
       );
     }
 
-    return this.renderSVG({ ...props, category, icon, size, assetRoot });
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ assetRoot = getAssetRoot() }) =>
+          this.renderSVG({ ...props, category, icon, size, assetRoot })
+        }
+      </ComponentSettingsContext.Consumer>
+    );
   }
 }