fix: export theme context

Author: minheq

src/components/Badge/Badge.mdx

@@ -5,7 +5,7 @@ menu: Components
 
 import { Playground, PropsTable } from 'docz';
 import Badge from './Badge';
-import { ThemeConsumer } from '../../theme';
+import { ThemeContext } from '../../theme';
 import { Box } from '../Layout';
 
 ## Usage
@@ -15,7 +15,7 @@ import { Box } from '../Layout';
 ### Default
 
 <Playground>
-  <ThemeConsumer>
+  <ThemeContext.Consumer>
     {theme => (
       <Box>
         {Object.keys(theme.fills.solid).map(color => (
@@ -28,13 +28,13 @@ import { Box } from '../Layout';
         ))}
       </Box>
     )}
-  </ThemeConsumer>
+  </ThemeContext.Consumer>
 </Playground>
 
 ### Pills
 
 <Playground>
-  <ThemeConsumer>
+  <ThemeContext.Consumer>
     {theme => (
       <Box>
         {Object.keys(theme.fills.solid).map(color => (
@@ -49,7 +49,7 @@ import { Box } from '../Layout';
         ))}
       </Box>
     )}
-  </ThemeConsumer>
+  </ThemeContext.Consumer>
 </Playground>
 
 ## Props

src/components/Modal/ModalBase.web.tsx

@@ -90,7 +90,7 @@ class ModalBase extends React.PureComponent<ModalBaseProps> {
     }
   };
 
-  public render() {
+  public render(): React.ReactPortal | null {
     const { transparent, visible, isBackgroundScrollable = false } = this.props;
 
     if (!visible || !this.el) return null;

src/components/SelectList/SelectList.tsx

@@ -33,14 +33,11 @@ const SelectListBase = (props: SelectListProps): any => {
     }
   };
 
-  return React.Children.map(children, (child, index) => {
-    if (!React.isValidElement(child)) {
-      return child;
+  return React.Children.map(children, (selectListItem, index) => {
+    if (!React.isValidElement(selectListItem)) {
+      return selectListItem;
     }
 
-    // @ts-ignore
-    const selectListItem = child as React.ReactElement<SelectListItemBaseProps>;
-
     const isSelected =
       isMulti && Array.isArray(selectedValue)
         ? selectedValue.some(selVal => selVal === selectListItem.props.value)

src/components/Typography/List.tsx

@@ -15,14 +15,11 @@ export interface ListProps {
 export const List = (props: ListProps) => {
   const { listType, children, icon, size = 'medium' } = props;
 
-  const finalChildren = React.Children.map(children, (child, index) => {
-    if (!React.isValidElement(child)) {
-      return child;
+  const finalChildren = React.Children.map(children, (listItem, index) => {
+    if (!React.isValidElement(listItem)) {
+      return listItem;
     }
 
-    // @ts-ignore
-    const listItem = child as React.ReactElement<ListItemProps>;
-
     return React.cloneElement(listItem, {
       // Prefer more granularly defined icon if present
       icon: listItem.props.icon || icon,

src/theme/ThemeContext.ts

@@ -2,9 +2,4 @@ import * as React from 'react';
 
 import { defaultTheme } from './default-theme';
 
-const {
-  Provider: ThemeProvider,
-  Consumer: ThemeConsumer,
-} = React.createContext(defaultTheme);
-
-export { ThemeProvider, ThemeConsumer };
+export const ThemeContext = React.createContext(defaultTheme);

src/theme/withTheme.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ThemeConsumer } from './ThemeContext';
+import { ThemeContext } from './ThemeContext';
 import { Theme } from './ThemeInterface';
 
 export interface ThemeProps {
@@ -27,12 +27,12 @@ const withTheme = <TWrappedComponentProps extends any>(
 
     public render() {
       return (
-        <ThemeConsumer>
+        <ThemeContext.Consumer>
           {theme => {
             // @ts-ignore TODO: https://github.com/Microsoft/TypeScript/issues/28748
             return <WrappedComponent theme={theme} {...this.props} />;
           }}
-        </ThemeConsumer>
+        </ThemeContext.Consumer>
       );
     }
   };