From 6889183dfd6aba09a915be2d191ffe056303f511 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 17 Mar 2020 14:10:25 +0100
Subject: [PATCH] Rollback Dropdown updates

---
 packages/react-components/src/Dropdown.tsx    | 31 +++++++-------
 .../src/InputConsts/SelectKey.tsx             |  4 +-
 .../src/InputConsts/SelectSection.tsx         |  4 +-
 .../src/InputConsts/index.tsx                 |  4 +-
 .../src/InputExtrinsic/LinkedWrapper.tsx      |  4 +-
 .../src/InputExtrinsic/SelectMethod.tsx       | 13 ++----
 .../src/InputExtrinsic/SelectSection.tsx      |  4 +-
 .../src/InputExtrinsic/index.tsx              | 40 ++++++++-----------
 .../src/InputRpc/SelectMethod.tsx             |  4 +-
 .../src/InputRpc/SelectSection.tsx            |  4 +-
 .../react-components/src/InputRpc/index.tsx   |  4 +-
 .../src/InputStorage/SelectKey.tsx            |  4 +-
 .../src/InputStorage/SelectSection.tsx        |  4 +-
 .../src/InputStorage/index.tsx                |  4 +-
 14 files changed, 47 insertions(+), 81 deletions(-)

diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index 5e957a7fd3..26f234b99e 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/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;
 
diff --git a/packages/react-components/src/InputConsts/SelectKey.tsx b/packages/react-components/src/InputConsts/SelectKey.tsx
index 8f66f236c6..8d79e9cbec 100644
--- a/packages/react-components/src/InputConsts/SelectKey.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputConsts/SelectSection.tsx b/packages/react-components/src/InputConsts/SelectSection.tsx
index 1b2c69a971..be7fe1a305 100644
--- a/packages/react-components/src/InputConsts/SelectSection.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputConsts/index.tsx b/packages/react-components/src/InputConsts/index.tsx
index cfa9ffa390..119c7dd8b3 100644
--- a/packages/react-components/src/InputConsts/index.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
index aa827913eb..152c21fb12 100644
--- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
+++ b/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;
   }
-`);
+`;
diff --git a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx b/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
index f44a99678c..d005d5d3b4 100644
--- a/packages/react-components/src/InputExtrinsic/SelectMethod.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputExtrinsic/SelectSection.tsx b/packages/react-components/src/InputExtrinsic/SelectSection.tsx
index dcc944a05d..37f9e5fb85 100644
--- a/packages/react-components/src/InputExtrinsic/SelectSection.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputExtrinsic/index.tsx b/packages/react-components/src/InputExtrinsic/index.tsx
index 6c3c185590..92da82c247 100644
--- a/packages/react-components/src/InputExtrinsic/index.tsx
+++ b/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
diff --git a/packages/react-components/src/InputRpc/SelectMethod.tsx b/packages/react-components/src/InputRpc/SelectMethod.tsx
index 75a1504443..2d757cac6d 100644
--- a/packages/react-components/src/InputRpc/SelectMethod.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputRpc/SelectSection.tsx b/packages/react-components/src/InputRpc/SelectSection.tsx
index 232da0cae7..82375038e7 100644
--- a/packages/react-components/src/InputRpc/SelectSection.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputRpc/index.tsx b/packages/react-components/src/InputRpc/index.tsx
index f1f35551a8..f10e9738c6 100644
--- a/packages/react-components/src/InputRpc/index.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputStorage/SelectKey.tsx b/packages/react-components/src/InputStorage/SelectKey.tsx
index ed798c37e4..23c3e594fa 100644
--- a/packages/react-components/src/InputStorage/SelectKey.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputStorage/SelectSection.tsx b/packages/react-components/src/InputStorage/SelectSection.tsx
index c8d3efa5f1..a343a0e6d7 100644
--- a/packages/react-components/src/InputStorage/SelectSection.tsx
+++ b/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);
diff --git a/packages/react-components/src/InputStorage/index.tsx b/packages/react-components/src/InputStorage/index.tsx
index 0f62ab4390..6f53ce311b 100644
--- a/packages/react-components/src/InputStorage/index.tsx
+++ b/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);