fix: reorganize SelectContext to resolve #703

GSS-FED · Jan 12, 2021 · a492ff5 · a492ff5
1 parent 01df04a
commit a492ff5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 40 deletions.
diff --git a/packages/form/src/select/Dropdown.tsx b/packages/form/src/select/Dropdown.tsx
@@ -9,7 +9,7 @@ import {
   PopupProps,
 } from '@vital-ui/react-popup';
 import { MenuItem } from './styled';
-import { Context } from './context';
+import { SelectConsumer } from './context';
 
 export interface DropdownProps extends PopupProps {}
 
@@ -19,7 +19,7 @@ export const Dropdown: React.SFC<DropdownProps> = ({
   ...props
 }) => {
   return (
-    <Context.Consumer>
+    <SelectConsumer>
       {({ getMenuProps, isOpen }) => (
         <Popup
           {...getMenuProps()}
@@ -33,7 +33,7 @@ export const Dropdown: React.SFC<DropdownProps> = ({
           {children}
         </Popup>
       )}
-    </Context.Consumer>
+    </SelectConsumer>
   );
 };
 
@@ -51,7 +51,7 @@ export const DropdownItem = ({
   wrap = true,
   ...props
 }: Props) => (
-  <Context.Consumer>
+  <SelectConsumer>
     {({ getItemProps, highlightedIndex }) => (
       <li
         {...getItemProps({
@@ -68,5 +68,5 @@ export const DropdownItem = ({
         </MenuItem>
       </li>
     )}
-  </Context.Consumer>
+  </SelectConsumer>
 );
diff --git a/packages/form/src/select/MultiSelect.tsx b/packages/form/src/select/MultiSelect.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Select, SelectProps } from './Select';
-import { Context } from './context';
+import { SelectConsumer } from './context';
 import {
   fieldWrapperBase,
   fieldInputBase,
@@ -46,14 +46,14 @@ const Input = React.forwardRef<
     HTMLInputElement
   >
 >((props, ref) => (
-  <Context.Consumer>
+  <SelectConsumer>
     {({ getInputProps }) => {
       return (
         // @ts-ignore
         <InputBase ref={ref} {...getInputProps({ ...props })} />
       );
     }}
-  </Context.Consumer>
+  </SelectConsumer>
 ));
 
 type State = {
@@ -91,8 +91,6 @@ export class MultiSelect<T> extends React.Component<
 
   static Input: typeof Input = Input;
 
-  static Context: typeof Context = Context;
-
   state: State = {
     input: '',
     isOpen: false,
@@ -125,13 +123,13 @@ export class MultiSelect<T> extends React.Component<
     });
   };
 
-  handleInputChange: React.ChangeEventHandler<
-    HTMLInputElement
-  > = evt => {
+  handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
+    evt,
+  ) => {
     this.setState({ input: evt.target.value, isOpen: true });
   };
 
-  handleKeyDown: React.KeyboardEventHandler = evt => {
+  handleKeyDown: React.KeyboardEventHandler = (evt) => {
     const { values } = this.props;
     if (
       values.length &&

diff --git a/packages/form/src/select/Select.stories.tsx b/packages/form/src/select/Select.stories.tsx
@@ -32,17 +32,17 @@ class SelectExample extends React.Component<
     selectedItem: undefined,
   };
 
-  onChangeItem = selectedItem => {
+  onChangeItem = (selectedItem) => {
     this.setState({
       selectedItem,
     });
   };
 
   render() {
     return (
-      <Select<Item>
+      <Select
         selectedItem={this.state.selectedItem}
-        itemToString={item => (item ? item.value : '')}
+        itemToString={(item) => (item ? item.value : '')}
         onChange={this.onChangeItem}
       >
         <Select.Dropdown
@@ -72,7 +72,7 @@ class DropdownExample extends React.Component<
     selectedItem: undefined,
   };
 
-  onChangeItem = selectedItem => {
+  onChangeItem = (selectedItem) => {
     this.setState({
       selectedItem,
     });
@@ -81,9 +81,9 @@ class DropdownExample extends React.Component<
   render() {
     const defaultText = 'Select an item';
     return (
-      <Select<Item>
+      <Select
         selectedItem={this.state.selectedItem}
-        itemToString={item => (item ? item.content : '')}
+        itemToString={(item) => (item ? item.content : '')}
         onChange={this.onChangeItem}
       >
         <Select.Dropdown
@@ -117,26 +117,26 @@ class TagExample extends React.Component<
   { selectedItem: Item[] }
 > {
   state: { selectedItem: Item[] } = {
-    selectedItem: [],
+    selectedItem: [items[0]],
   };
 
-  onChangeItem = selectedItem => {
+  onChangeItem = (selectedItem) => {
     this.setState({ selectedItem });
   };
 
-  onDeleteItem = item => {
-    this.setState(prevState => ({
+  onDeleteItem = (item) => {
+    this.setState((prevState) => ({
       selectedItem: prevState.selectedItem.filter(
-        x => x.content !== item.content,
+        (x) => x.content !== item.content,
       ),
     }));
   };
 
   render() {
     return (
-      <MultiSelect<Item>
+      <MultiSelect
         // @ts-ignore
-        itemToString={item => (item ? item.content : '')}
+        itemToString={(item) => (item ? item.content : '')}
         onChange={this.onChangeItem}
         values={this.state.selectedItem}
         selection={this.state.selectedItem.map((item, i) => (
@@ -148,7 +148,7 @@ class TagExample extends React.Component<
         <MultiSelect.Dropdown
           popup={items
             // @ts-ignore
-            .filter(item => !this.state.selectedItem.includes(item))
+            .filter((item) => !this.state.selectedItem.includes(item))
             .map((item, i) => (
               <MultiSelect.DropdownItem
                 key={item.content}

diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx
@@ -12,7 +12,11 @@ import {
   RightIconButton,
 } from '../input';
 import { Dropdown, DropdownItem } from './Dropdown';
-import { withContext, Context } from './context';
+import {
+  withContext,
+  SelectProvider,
+  SelectConsumer,
+} from './context';
 import { SelectButton, SelectButtonText } from './styled';
 import { DownshiftProps } from './DownshiftTypes';
 import { CloseIcon } from './icon/CloseIcon';
@@ -48,14 +52,14 @@ const Button: React.SFC<{
   text?: string;
   children?: React.ReactNode;
 }> = ({ text = '', children, ...props }) => (
-  <Context.Consumer>
+  <SelectConsumer>
     {({ getToggleButtonProps }) => (
       <SelectButton {...props} {...getToggleButtonProps()}>
         {<SelectButtonText>{text}</SelectButtonText>}
         {children}
       </SelectButton>
     )}
-  </Context.Consumer>
+  </SelectConsumer>
 );
 
 Button.defaultProps = {
@@ -76,8 +80,6 @@ export class Select<T = any> extends React.Component<SelectProps<T>> {
 
   static DropdownItem: typeof DropdownItem = DropdownItem;
 
-  static Context: typeof Context = Context;
-
   static Button = Button;
 
   render() {
@@ -86,12 +88,12 @@ export class Select<T = any> extends React.Component<SelectProps<T>> {
       <Downshift {...props}>
         {(options: ControllerStateAndHelpers<T>) => (
           <Box {...options.getRootProps()} {...rootProps}>
-            <Context.Provider
+            <SelectProvider
               // @ts-ignore
               value={{ ...props, ...options }}
             >
               {children}
-            </Context.Provider>
+            </SelectProvider>
           </Box>
         )}
       </Downshift>

diff --git a/packages/form/src/select/context.tsx b/packages/form/src/select/context.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { ControllerStateAndHelpers, DownshiftProps } from 'downshift';
 
-export const Context = React.createContext<
+const Context = React.createContext<
   ControllerStateAndHelpers<any> & DownshiftProps<any>
   // @ts-ignore
 >(undefined);
+export const SelectProvider = Context.Provider;
+export const SelectConsumer = Context.Consumer;
+
 export const withContext = <T extends {}>(
   Component: React.ComponentType<T>,
-  get: (n: any) => any = n => n,
+  get: (n: any) => any = (n) => n,
 ) => (props: T) => (
-  <Context.Consumer>
-    {value => <Component {...get(value)} {...props} />}
-  </Context.Consumer>
+  <SelectConsumer>
+    {(value) => <Component {...get(value)} {...props} />}
+  </SelectConsumer>
 );