From 6ffc1653db9a65629adf3e5d6e1df8d3ddc6e4bd Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 17 Oct 2019 17:26:08 +0200 Subject: [PATCH] Fix Tuple rendering (in same vein as Struct) (#1737) --- packages/react-params/src/Param/BaseBytes.tsx | 29 +++++-- .../src/Param/{Hash.tsx => Hash256.tsx} | 2 +- packages/react-params/src/Param/Hash512.tsx | 28 +++++++ packages/react-params/src/Param/Tuple.tsx | 82 +++++++------------ .../react-params/src/Param/findComponent.ts | 6 +- 5 files changed, 84 insertions(+), 63 deletions(-) rename packages/react-params/src/Param/{Hash.tsx => Hash256.tsx} (78%) create mode 100644 packages/react-params/src/Param/Hash512.tsx diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx index 079b5efe84..01049d3016 100644 --- a/packages/react-params/src/Param/BaseBytes.tsx +++ b/packages/react-params/src/Param/BaseBytes.tsx @@ -4,7 +4,7 @@ import { Props as BaseProps, Size } from '../types'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Compact } from '@polkadot/types'; import { Input } from '@polkadot/react-components'; import { hexToU8a, isHex, u8aToHex } from '@polkadot/util'; @@ -44,13 +44,18 @@ function convertInput (value: string): [boolean, Uint8Array] { export default function BaseBytes ({ asHex, children, className, defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, size = 'full', style, validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement { const [isValid, setIsValid] = useState(false); - const defaultValue = value - ? ( - isHex(value) - ? value - : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1) - ) - : undefined; + + useEffect((): void => { + const [isValid, converted] = convertInput(value); + + setIsValid( + isValid && validate(converted) && ( + length !== -1 + ? converted.length === length + : true + ) + ); + }, [length, value]); const _onChange = (hex: string): void => { let [isValid, value] = convertInput(hex); @@ -75,6 +80,14 @@ export default function BaseBytes ({ asHex, children, className, defaultValue: { setIsValid(isValid); }; + const defaultValue = value + ? ( + isHex(value) + ? value + : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1) + ) + : undefined; + return ( { +export default function Hash256 ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement { return ( { + return ( + + ); +} diff --git a/packages/react-params/src/Param/Tuple.tsx b/packages/react-params/src/Param/Tuple.tsx index fe752f27f3..31f072aa7c 100644 --- a/packages/react-params/src/Param/Tuple.tsx +++ b/packages/react-params/src/Param/Tuple.tsx @@ -2,72 +2,50 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { Codec, TypeDef } from '@polkadot/types/types'; -import { Props, RawParam } from '../types'; +import { TypeDef } from '@polkadot/types/types'; +import { ParamDef, Props, RawParam } from '../types'; import React, { useEffect, useState } from 'react'; -import { isUndefined } from '@polkadot/util'; +import { createType, getTypeDef } from '@polkadot/types'; -import Bare from './Bare'; -import findComponent from './findComponent'; +import Params from '../'; +import Base from './Base'; +import Static from './Static'; -export default function Tuple ({ className, defaultValue, isDisabled, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement { - const [{ Components, subTypes }, setComponents] = useState<{ Components: React.ComponentType[]; subTypes: TypeDef[] }>({ Components: [], subTypes: [] }); - const [values, setValues] = useState([]); +export default function Tuple (props: Props): React.ReactElement { + const [params, setParams] = useState([]); + const { className, isDisabled, label, onChange, style, type, withLabel } = props; useEffect((): void => { - const subTypes: TypeDef[] = type.sub && Array.isArray(type.sub) - ? type.sub - : []; + const rawType = createType(type.type as any).toRawType(); + const typeDef = getTypeDef(rawType); - setComponents({ - Components: subTypes.map((type): React.ComponentType => findComponent(type)), - subTypes - }); + setParams((typeDef.sub as TypeDef[]).map((type): ParamDef => ({ name: type.name, type }))); }, [type]); - useEffect((): void => { - setValues( - (((defaultValue && defaultValue.value) || []) as any[]).map((value): { isValid: boolean; value: Codec } => - isUndefined(value) || isUndefined(value.isValid) - ? { isValid: !isUndefined(value), value } - : value - ) - ); - }, [defaultValue]); + if (isDisabled) { + return ; + } - useEffect((): void => { + const _onChangeParams = (values: RawParam[]): void => { onChange && onChange({ - isValid: values.reduce((result: boolean, { isValid }): boolean => result && isValid, true), + isValid: values.reduce((result, { isValid }): boolean => result && isValid, true as boolean), value: values.map(({ value }): any => value) }); - }, [values]); - - const _onChange = (index: number): (value: RawParam) => void => - (value: RawParam): void => - setValues(values.map((prev, prevIndex): RawParam => - (prevIndex === index) - ? value - : prev - )); + }; return ( - - {Components.map((Component, index): React.ReactNode => ( - - ))} - +
+ + +
); } diff --git a/packages/react-params/src/Param/findComponent.ts b/packages/react-params/src/Param/findComponent.ts index da80db47c6..d4e8030f29 100644 --- a/packages/react-params/src/Param/findComponent.ts +++ b/packages/react-params/src/Param/findComponent.ts @@ -16,7 +16,8 @@ import Bytes from './Bytes'; import Code from './Code'; import Data from './Data'; import Enum from './Enum'; -import Hash from './Hash'; +import Hash256 from './Hash256'; +import Hash512 from './Hash512'; import Moment from './Moment'; import Proposal from './Proposal'; import KeyValue from './KeyValue'; @@ -45,7 +46,8 @@ const components: ComponentMap = ([ { c: Code, t: ['Code'] }, { c: Data, t: ['Data', 'Keys'] }, { c: Enum, t: ['Enum'] }, - { c: Hash, t: ['CodeHash', 'Hash', 'H256', 'H512', 'SeedOf', 'Signature'] }, + { c: Hash256, t: ['CodeHash', 'Hash', 'H256', 'SeedOf'] }, + { c: Hash512, t: ['H512', 'Signature'] }, { c: KeyValue, t: ['KeyValue'] }, { c: KeyValueArray, t: ['Vec'] }, { c: Moment, t: ['Moment', 'MomentOf'] },