Toggle for file upload (#3060)

packages/react-params/src/Param/Bytes.tsx

@@ -5,20 +5,18 @@
 import { Props } from '../types';
 
 import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
 import { Compact } from '@polkadot/types';
-import { Button } from '@polkadot/react-components';
+import { Toggle } from '@polkadot/react-components';
 
+import { useTranslation } from '../translate';
 import BaseBytes from './BaseBytes';
 import File from './File';
 
 function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [isValid, setIsValid] = useState(false);
-  const [isFileDrop, setIsFileDrop] = useState(false);
-
-  const _toggleFile = useCallback(
-    (): void => setIsFileDrop(true),
-    []
-  );
+  const [isFileDrop, setFileInput] = useState(false);
 
   const _onChangeFile = useCallback(
     (value: Uint8Array): void => {
@@ -34,41 +32,53 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name
     [onChange]
   );
 
-  return !isDisabled && isFileDrop
-    ? (
-      <File
-        className={className}
-        isDisabled={isDisabled}
-        isError={isError || !isValid}
-        label={label}
-        onChange={_onChangeFile}
-        withLabel={withLabel}
-      />
-    )
-    : (
-      <BaseBytes
-        className={className}
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        label={label}
-        length={-1}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        onEscape={onEscape}
-        type={type}
-        withLabel={withLabel}
-        withLength
-      >
-        {!isDisabled && (
-          <Button
-            icon='file'
-            onClick={_toggleFile}
+  return (
+    <div className={className}>
+      {!isDisabled && isFileDrop
+        ? (
+          <File
+            isDisabled={isDisabled}
+            isError={isError || !isValid}
+            label={label}
+            onChange={_onChangeFile}
+            withLabel={withLabel}
           />
-        )}
-      </BaseBytes>
-    );
+        )
+        : (
+          <BaseBytes
+            defaultValue={defaultValue}
+            isDisabled={isDisabled}
+            isError={isError}
+            label={label}
+            length={-1}
+            name={name}
+            onChange={onChange}
+            onEnter={onEnter}
+            onEscape={onEscape}
+            type={type}
+            withLabel={withLabel}
+            withLength
+          />
+        )
+      }
+      {!isDisabled && (
+        <Toggle
+          className='ui--Param-Bytes-toggle'
+          label={t<string>('file upload')}
+          onChange={setFileInput}
+          value={isFileDrop}
+        />
+      )}
+    </div>
+  );
 }
 
-export default React.memo(Bytes);
+export default React.memo(styled(Bytes)`
+  position: relative;
+
+  > .ui--Param-Bytes-toggle {
+    top: 1.375rem;
+    position: absolute;
+    right: 3.5rem;
+  }
+`);

packages/react-params/src/Param/Option.tsx

@@ -39,11 +39,7 @@ function Option ({ className = '', defaultValue, isDisabled, name, onChange, onE
       {!isDisabled && (
         <Toggle
           className='ui--Param-Option-toggle'
-          label={
-            isActive
-              ? t<string>('include option')
-              : t<string>('exclude option')
-          }
+          label={t<string>('include option')}
           onChange={setIsActive}
           value={isActive}
         />
@@ -55,7 +51,7 @@ function Option ({ className = '', defaultValue, isDisabled, name, onChange, onE
 export default React.memo(styled(Option)`
   position: relative;
 
-  .ui--Param-Option-toggle {
+  > .ui--Param-Option-toggle {
     bottom: 1.375rem;
     position: absolute;
     right: 3.5rem;