Rollback Dropdown updates

packages/react-components/src/Dropdown.tsx

@@ -48,23 +48,20 @@ function BaseDropdown<Option> ({ allowAdd = false, className, defaultValue, drop
   const lastUpdate = useRef<string>('');
   const [stored, setStored] = useState<any>();
 
-  const _setStored = useCallback(
-    (value: any): void => {
-      const json = JSON.stringify({ v: value });
+  const _setStored = (value: any): void => {
+    const json = JSON.stringify({ v: value });
 
-      if (lastUpdate.current !== json) {
-        lastUpdate.current = json;
+    if (lastUpdate.current !== json) {
+      lastUpdate.current = json;
 
-        setStored(value);
-        onChange && onChange(
-          transform
-            ? transform(value)
-            : value
-        );
-      }
-    },
-    []
-  );
+      setStored(value);
+      onChange && onChange(
+        transform
+          ? transform(value)
+          : value
+      );
+    }
+  };
 
   useEffect((): void => {
     _setStored(isUndefined(value) ? defaultValue : value);
@@ -122,7 +119,7 @@ function BaseDropdown<Option> ({ allowAdd = false, className, defaultValue, drop
     );
 }
 
-const Dropdown = React.memo(styled(BaseDropdown)`
+const Dropdown = styled(BaseDropdown)`
   .ui--Dropdown-item {
     position: relative;
     white-space: nowrap;
@@ -158,7 +155,7 @@ const Dropdown = React.memo(styled(BaseDropdown)`
       }
     }
   }
-`) as unknown as IDropdown<any>;
+` as unknown as IDropdown<any>;
 
 (Dropdown as any).Header = SUIDropdown.Header;
 

packages/react-components/src/InputConsts/SelectKey.tsx

@@ -29,7 +29,7 @@ function transform ({ value }: Props): (method: string) => ConstValueBase {
   };
 }
 
-function SelectKey (props: Props): React.ReactElement<Props> | null {
+export default function SelectKey (props: Props): React.ReactElement<Props> | null {
   const { className, isError, onChange, options, style, value } = props;
 
   if (!options.length) {
@@ -49,5 +49,3 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
     />
   );
 }
-
-export default React.memo(SelectKey);

packages/react-components/src/InputConsts/SelectSection.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: ConstValueBase;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { section } }: Props): React.ReactElement<Props> {
+export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { section } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -33,5 +33,3 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
     />
   );
 }
-
-export default React.memo(SelectSection);

packages/react-components/src/InputConsts/index.tsx

@@ -40,7 +40,7 @@ function getValue (api: ApiPromise, { method, section }: ConstValueBase): ConstV
   };
 }
 
-function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -92,5 +92,3 @@ function InputConsts ({ className, defaultValue, help, label, onChange, style, w
     </LinkedWrapper>
   );
 }
-
-export default React.memo(InputConsts);

packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx

@@ -35,7 +35,7 @@ function LinkedWrapper ({ children, className, help, label, style, withLabel }:
   );
 }
 
-export default React.memo(styled(LinkedWrapper)`
+export default styled(LinkedWrapper)`
   .ui--DropdownLinked-Items {
     .text {
       box-sizing: border-box;
@@ -72,4 +72,4 @@ export default React.memo(styled(LinkedWrapper)`
     text-align: right;
     text-overflow: ellipsis;
   }
-`);
+`;

packages/react-components/src/InputExtrinsic/SelectMethod.tsx

@@ -6,7 +6,7 @@ import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import { BareProps } from '../types';
 import { DropdownOptions } from '../util/types';
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import ApiPromise from '@polkadot/api/promise';
 
 import Dropdown from '../Dropdown';
@@ -20,16 +20,13 @@ interface Props extends BareProps {
   value: SubmittableExtrinsicFunction<'promise'>;
 }
 
-function SelectMethod ({ api, className, isError, onChange, options, style, value }: Props): React.ReactElement<Props> | null {
+export default function SelectMethod ({ api, className, isError, onChange, options, style, value }: Props): React.ReactElement<Props> | null {
   if (!options.length) {
     return null;
   }
 
-  const transform = useCallback(
-    (method: string): SubmittableExtrinsicFunction<'promise'> =>
-      api.tx[value.section][method],
-    [value]
-  );
+  const transform = (method: string): SubmittableExtrinsicFunction<'promise'> =>
+    api.tx[value.section][method];
 
   return (
     <Dropdown
@@ -44,5 +41,3 @@ function SelectMethod ({ api, className, isError, onChange, options, style, valu
     />
   );
 }
-
-export default React.memo(SelectMethod);

packages/react-components/src/InputExtrinsic/SelectSection.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: SubmittableExtrinsicFunction<'promise'>;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
+export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -33,5 +33,3 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
     />
   );
 }
-
-export default React.memo(SelectSection);

packages/react-components/src/InputExtrinsic/index.tsx

@@ -5,7 +5,7 @@
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import { DropdownOptions } from '../util/types';
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
 import LinkedWrapper from './LinkedWrapper';
@@ -33,31 +33,25 @@ function InputExtrinsic ({ className, defaultValue, help, label, onChange, style
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
   const [value, setValue] = useState<SubmittableExtrinsicFunction<'promise'>>((): SubmittableExtrinsicFunction<'promise'> => defaultValue);
 
-  const _onKeyChange = useCallback(
-    (newValue: SubmittableExtrinsicFunction<'promise'>): void => {
-      if (!newValue || (value.section === newValue.section && value.method === newValue.method)) {
-        return;
-      }
+  const _onKeyChange = (newValue: SubmittableExtrinsicFunction<'promise'>): void => {
+    if (value.section === newValue.section && value.method === newValue.method) {
+      return;
+    }
 
-      // set this via callback, since the we are setting a function (alternatively... we have issues)
-      setValue((): SubmittableExtrinsicFunction<'promise'> => newValue);
-      onChange(newValue);
-    },
-    [value]
-  );
-  const _onSectionChange = useCallback(
-    (section: string): void => {
-      if (section === value.section) {
-        return;
-      }
+    // set this via callback, since the we are setting a function (alternatively... we have issues)
+    setValue((): SubmittableExtrinsicFunction<'promise'> => newValue);
+    onChange(newValue);
+  };
+  const _onSectionChange = (section: string): void => {
+    if (section === value.section) {
+      return;
+    }
 
-      const optionsMethod = methodOptions(api, section);
+    const optionsMethod = methodOptions(api, section);
 
-      setOptionsMethod(optionsMethod);
-      _onKeyChange(api.tx[section][optionsMethod[0].value]);
-    },
-    [value]
-  );
+    setOptionsMethod(optionsMethod);
+    _onKeyChange(api.tx[section][optionsMethod[0].value]);
+  };
 
   return (
     <LinkedWrapper

packages/react-components/src/InputRpc/SelectMethod.tsx

@@ -26,7 +26,7 @@ function transform ({ value }: Props): (method: string) => RpcMethod {
   };
 }
 
-function SelectMethod (props: Props): React.ReactElement<Props> | null {
+export default function SelectMethod (props: Props): React.ReactElement<Props> | null {
   const { className, isError, onChange, options, style, value } = props;
 
   if (!options.length) {
@@ -46,5 +46,3 @@ function SelectMethod (props: Props): React.ReactElement<Props> | null {
     />
   );
 }
-
-export default React.memo(SelectMethod);

packages/react-components/src/InputRpc/SelectSection.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: RpcMethod;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
+export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -33,5 +33,3 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
     />
   );
 }
-
-export default React.memo(SelectSection);

packages/react-components/src/InputRpc/index.tsx

@@ -28,7 +28,7 @@ interface Props {
   withLabel?: boolean;
 }
 
-function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -77,5 +77,3 @@ function InputRpc ({ className, defaultValue, help, label, onChange, style, with
     </LinkedWrapper>
   );
 }
-
-export default React.memo(InputRpc);

packages/react-components/src/InputStorage/SelectKey.tsx

@@ -28,7 +28,7 @@ function transform (api: ApiPromise, { value }: Props): (method: string) => Stor
   };
 }
 
-function SelectKey (props: Props): React.ReactElement<Props> | null {
+export default function SelectKey (props: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const { className, isError, onChange, options, style, value } = props;
 
@@ -49,5 +49,3 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
     />
   );
 }
-
-export default React.memo(SelectKey);

packages/react-components/src/InputStorage/SelectSection.tsx

@@ -19,7 +19,7 @@ interface Props extends BareProps {
   value: StorageEntryPromise;
 }
 
-function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { creator: { section } } }: Props): React.ReactElement<Props> {
+export default function SelectSection ({ className, defaultValue, isError, onChange, options, style, value: { creator: { section } } }: Props): React.ReactElement<Props> {
   return (
     <Dropdown
       className={classes('ui--DropdownLinked-Sections', className)}
@@ -33,5 +33,3 @@ function SelectSection ({ className, defaultValue, isError, onChange, options, s
     />
   );
 }
-
-export default React.memo(SelectSection);

packages/react-components/src/InputStorage/index.tsx

@@ -27,7 +27,7 @@ interface Props {
   withLabel?: boolean;
 }
 
-function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.creator.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -76,5 +76,3 @@ function InputStorage ({ className, defaultValue, help, label, onChange, style,
     </LinkedWrapper>
   );
 }
-
-export default React.memo(InputStorage);