Rework params styled injection (#8797)

* Rework params styled injection * Adjust * Pass registry * Adjust * Adjust
2023-01-14 14:49:53 +02:00 · 2023-01-14 14:49:53 +02:00 · 3d4e8a5048
commit 3d4e8a5048
parent 56da35f1aa
11 changed files with 51 additions and 45 deletions
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@ -91,6 +91,11 @@
        /* --color-table-head: rgba(78, 78, 78, 0.8); */
        --color-text: rgba(78, 78, 78, 0.8); /* 1 */
      }
+    </style>
+    <style>
+      .--absolute {
+        position: absolute;
+      }

      .--digits {
        font-variant-numeric: tabular-nums;
@ -102,6 +107,10 @@
        display: none;
      }

+      .--relative {
+        position: relative;
+      }
+
      .--tmp {
        background: grey;
        filter: blur(2px);
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@ -14,13 +14,13 @@ interface Props {

 function Holder ({ children, className = '', withBorder, withExpander, withPadding }: Props): React.ReactElement<Props> {
  return (
-    <div className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}${withExpander ? ' withExpander' : ''}`}>
+    <StyledDiv className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}${withExpander ? ' withExpander' : ''}`}>
      {children}
-    </div>
+    </StyledDiv>
  );
 }

-export default React.memo(styled(Holder)`
+const StyledDiv = styled.div`
  &.withBorder {
    padding-left: 2rem;

@ -106,4 +106,6 @@ export default React.memo(styled(Holder)`
      right: 3.5rem;
    }
  }
-`);
+`;
+
+export default React.memo(Holder);
--- a/packages/react-params/src/Param/Bare.tsx
+++ b/packages/react-params/src/Param/Bare.tsx
@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0

 import React from 'react';
-import styled from 'styled-components';

 interface Props {
  children?: React.ReactNode;
@ -11,12 +10,10 @@ interface Props {

 function Bare ({ children, className = '' }: Props): React.ReactElement<Props> {
  return (
-    <div className={`ui--row ${className}`}>
+    <div className={`ui--row --relative ${className}`}>
      {children}
    </div>
  );
 }

-export default React.memo(styled(Bare)`
-  position: relative;
-`);
+export default React.memo(Bare);
--- a/packages/react-params/src/Param/BaseBytes.tsx
+++ b/packages/react-params/src/Param/BaseBytes.tsx
@ -114,7 +114,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
  );

  return (
-    <Bare className={className}>
+    <StyledBare className={className}>
      <Input
        className={size}
        defaultValue={defaultValue as string}
@ -142,11 +142,11 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
          />
        )}
      </Input>
-    </Bare>
+    </StyledBare>
  );
 }

-export default React.memo(styled(BaseBytes)`
+const StyledBare = styled(Bare)`
  .ui--InputAddressSimpleIcon {
    background: #eee;
    border: 1px solid #888;
@ -155,4 +155,6 @@ export default React.memo(styled(BaseBytes)`
    position: absolute;
    top: 8px;
  }
-`);
+`;
+
+export default React.memo(BaseBytes);
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/packages/react-params/src/Param/Bytes.tsx
@ -4,7 +4,6 @@
 import type { Props } from '../types';

 import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';

 import { Toggle } from '@polkadot/react-components';
 import { compactAddLength } from '@polkadot/util';
@ -33,7 +32,7 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, isInOption,
  );

  return (
-    <div className={className}>
+    <div className={`${className} --relative`}>
      {!isDisabled && isFileDrop
        ? (
          <File
@ -74,6 +73,4 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, isInOption,
  );
 }

-export default React.memo(styled(Bytes)`
-  position: relative;
-`);
+export default React.memo(Bytes);
--- a/packages/react-params/src/Param/Code.tsx
+++ b/packages/react-params/src/Param/Code.tsx
@ -10,7 +10,7 @@ import { isWasm } from '@polkadot/util';
 import Bytes from './Bytes';
 import BytesFile from './File';

-function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
+function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, registry, type, withLabel }: Props): React.ReactElement<Props> {
  const [isValid, setIsValid] = useState(false);

  const _onChange = useCallback(
@ -32,6 +32,7 @@ function Code ({ className = '', defaultValue, isDisabled, isError, label, onCha
        label={label}
        onEnter={onEnter}
        onEscape={onEscape}
+        registry={registry}
        type={type}
        withLabel={withLabel}
      />
--- a/packages/react-params/src/Param/DispatchError.tsx
+++ b/packages/react-params/src/Param/DispatchError.tsx
@ -5,7 +5,6 @@ import type { DispatchError } from '@polkadot/types/interfaces';
 import type { Props as BaseProps } from '../types';

 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';

 import { Input } from '@polkadot/react-components';

@ -85,8 +84,4 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
  );
 }

-export default React.memo(styled(ErrorDisplay)`
-  // .ui--Labelled-content {
-  //   background: rgba(196, 0, 0, 0.1);
-  // }
-`);
+export default React.memo(ErrorDisplay);
--- a/packages/react-params/src/Param/KeyValueArray.tsx
+++ b/packages/react-params/src/Param/KeyValueArray.tsx
@ -50,7 +50,7 @@ function parseFile (raw: Uint8Array): Parsed {
  };
 }

-function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, registry, withLabel }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const [placeholder, setPlaceholder] = useState<string>(t(EMPTY_PLACEHOLDER));

@ -101,6 +101,7 @@ function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, lab
                name={keyHex}
                onEnter={onEnter}
                onEscape={onEscape}
+                registry={registry}
                type={BYTES_TYPE}
              />
            );
--- a/packages/react-params/src/Param/Option.tsx
+++ b/packages/react-params/src/Param/Option.tsx
@ -5,7 +5,6 @@ import type { Codec, TypeDef } from '@polkadot/types/types';
 import type { Props, RawParamOnChangeValue } from '../types';

 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';

 import { Toggle } from '@polkadot/react-components';
 import { Option } from '@polkadot/types';
@ -48,7 +47,7 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
  );

  return (
-    <div className={className}>
+    <div className={`${className} --relative`}>
      <Param
        defaultValue={
          isActive
@ -76,6 +75,4 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
  );
 }

-export default React.memo(styled(OptionDisplay)`
-  position: relative;
-`);
+export default React.memo(OptionDisplay);
--- a/packages/react-params/src/Param/Static.tsx
+++ b/packages/react-params/src/Param/Static.tsx
@ -4,7 +4,7 @@
 import type { Codec } from '@polkadot/types/types';
 import type { RawParam } from '../types';

-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';

 import { Static } from '@polkadot/react-components';
@ -25,18 +25,22 @@ interface Props {

 function StaticParam ({ asHex, children, childrenPre, className = '', defaultValue, label }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
-  const value = defaultValue && (defaultValue.value as string) && (
-    asHex
-      ? (defaultValue.value as Codec).toHex()
-      : toHumanJson(
-        (defaultValue.value as { toHuman?: () => unknown }).toHuman
-          ? (defaultValue.value as Codec).toHuman()
-          : defaultValue.value
-      )
+
+  const value = useMemo(
+    () => defaultValue && defaultValue.value && (
+      asHex
+        ? (defaultValue.value as Codec).toHex()
+        : toHumanJson(
+          (defaultValue.value as Codec).toHuman
+            ? (defaultValue.value as Codec).toHuman()
+            : defaultValue.value
+        )
+    ),
+    [asHex, defaultValue]
  );

  return (
-    <Bare className={className}>
+    <StyledBare className={className}>
      {childrenPre}
      <Static
        className='full'
@ -44,11 +48,11 @@ function StaticParam ({ asHex, children, childrenPre, className = '', defaultVal
        value={<pre>{value || t<string>('<empty>')}</pre>}
      />
      {children}
-    </Bare>
+    </StyledBare>
  );
 }

-export default React.memo(styled(StaticParam)`
+const StyledBare = styled(Bare)`
  pre {
    margin: 0;
    overflow: hidden;
@ -58,4 +62,6 @@ export default React.memo(styled(StaticParam)`
  .ui--Static {
    margin-bottom: 0 !important;
  }
-`);
+`;
+
+export default React.memo(StaticParam);
--- a/packages/react-params/src/Param/index.tsx
+++ b/packages/react-params/src/Param/index.tsx
@ -53,7 +53,6 @@ function Param ({ className = '', defaultValue, isDisabled, isError, isInOption,
      <Static
        defaultValue={defaultValue}
        label={label}
-        type={type}
      />
    )
    : (