Basic fixed-vec breakdown (#3187)

* Basic fixed-vec breakdown

* Update headers to reflect params package

packages/react-params/src/Holder.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -0,0 +1,100 @@
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ParamDef, Props, RawParam } from '../types';
+
+import React, { useEffect, useState } from 'react';
+import { isUndefined } from '@polkadot/util';
+
+import getInitValue from '../initValue';
+import Params from '../';
+import Base from './Base';
+import useParamDefs from './useParamDefs';
+
+function generateParam ([{ name, type }]: ParamDef[], index: number): ParamDef {
+  return {
+    name: `${index}: ${name || type.type}`,
+    type
+  };
+}
+
+function VectorFixed ({ className = '', defaultValue, isDisabled = false, label, onChange, overrides, type, withLabel }: Props): React.ReactElement<Props> | null {
+  const inputParams = useParamDefs(type);
+  const [params, setParams] = useState<ParamDef[]>([]);
+  const [values, setValues] = useState<RawParam[]>([]);
+
+  // build up the list of parameters we are using
+  useEffect((): void => {
+    if (inputParams.length) {
+      const count = (inputParams[0].length || 1);
+      const max = isDisabled ? (defaultValue.value as RawParam[] || []).length : count;
+      const params: ParamDef[] = [];
+
+      for (let index = 0; index < max; index++) {
+        params.push(generateParam(inputParams, index));
+      }
+
+      setParams(params);
+    }
+  }, [defaultValue, isDisabled, inputParams]);
+
+  // when !isDisable, generating an input list based on count
+  useEffect((): void => {
+    !isDisabled && inputParams.length &&
+      setValues((values): RawParam[] => {
+        const count = (inputParams[0].length || 1);
+
+        if (values.length === count) {
+          return values;
+        }
+
+        while (values.length < count) {
+          const value = getInitValue(inputParams[0].type);
+
+          values.push({ isValid: !isUndefined(value), value });
+        }
+
+        return values.slice(0, count);
+      });
+  }, [inputParams, isDisabled]);
+
+  // when isDisabled, set the values based on the defaultValue input
+  useEffect((): void => {
+    isDisabled &&
+      setValues(
+        (defaultValue.value as RawParam[] || []).map((value: RawParam) =>
+          isUndefined(value) || isUndefined(value.isValid)
+            ? { isValid: !isUndefined(value), value }
+            : value
+        )
+      );
+  }, [defaultValue, isDisabled]);
+
+  // when our values has changed, alert upstream
+  useEffect((): void => {
+    onChange && onChange({
+      isValid: values.reduce((result: boolean, { isValid }) => result && isValid, true),
+      value: values.map(({ value }) => value)
+    });
+  }, [values, onChange]);
+
+  return (
+    <Base
+      className={className}
+      isOuter
+      label={label}
+      withLabel={withLabel}
+    >
+      <Params
+        isDisabled={isDisabled}
+        onChange={setValues}
+        overrides={overrides}
+        params={params}
+        values={values}
+      />
+    </Base>
+  );
+}
+
+export default React.memo(VectorFixed);

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/Param/findComponent.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -6,7 +6,7 @@ import { TypeDef, TypeDefInfo } from '@polkadot/types/types';
 import { Props, ComponentMap } from '../types';
 
 import { registry } from '@polkadot/react-api';
-import { createType, getTypeDef, SPECIAL_TYPES } from '@polkadot/types';
+import { getTypeDef, SPECIAL_TYPES } from '@polkadot/types';
 import { isBn } from '@polkadot/util';
 
 import Account from './Account';
@@ -32,6 +32,7 @@ import Text from './Text';
 import Tuple from './Tuple';
 import Unknown from './Unknown';
 import Vector from './Vector';
+import VectorFixed from './VectorFixed';
 import Vote from './Vote';
 import VoteThreshold from './VoteThreshold';
 
@@ -63,6 +64,7 @@ const componentDef: TypeToComponent[] = [
   { c: Struct, t: ['Struct'] },
   { c: Tuple, t: ['Tuple'] },
   { c: Vector, t: ['Vec'] },
+  { c: VectorFixed, t: ['VecFixed'] },
   { c: Vote, t: ['Vote'] },
   { c: VoteThreshold, t: ['VoteThreshold'] },
   { c: Unknown, t: ['Unknown'] }
@@ -112,6 +114,9 @@ function fromDef ({ displayName, info, sub, type }: TypeDef): string {
         ? 'Vec<KeyValue>'
         : 'Vec';
 
+    case TypeDefInfo.VecFixed:
+      return 'VecFixed';
+
     default:
       return type;
   }
@@ -121,14 +126,13 @@ export default function findComponent (def: TypeDef, overrides: ComponentMap = {
   const findOne = (type: string): React.ComponentType<Props> | null =>
     overrides[type] || components[type];
   const type = fromDef(def);
-
   let Component = findOne(type);
 
   if (!Component) {
     let error: string | null = null;
 
     try {
-      const instance = createType(registry, type as 'u32');
+      const instance = registry.createType(type as 'u32');
       const raw = getTypeDef(instance.toRawType());
 
       Component = findOne(raw.type);
@@ -139,6 +143,8 @@ export default function findComponent (def: TypeDef, overrides: ComponentMap = {
         return Amount;
       } else if ([TypeDefInfo.Enum, TypeDefInfo.Struct, TypeDefInfo.Tuple].includes(raw.info)) {
         return findComponent(raw, overrides);
+      } else if (raw.info === TypeDefInfo.VecFixed && (raw.sub as TypeDef).type !== 'u8') {
+        return findComponent(raw, overrides);
       }
     } catch (e) {
       error = (e as Error).message;

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

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/Param/useParamDefs.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -31,6 +31,7 @@ export default function useParamDefs (type: TypeDef): ParamDef[] {
 
     setParams(
       (Array.isArray(typeDef.sub) ? typeDef.sub : [typeDef.sub]).map((td): ParamDef => ({
+        length: typeDef.length,
         name: td.name,
         type: td // expandDef(td)
       }))

packages/react-params/src/ParamComp.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/index.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/initValue.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/translate.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -51,6 +51,7 @@ export type Size = 'full' | 'large' | 'medium' | 'small';
 export type ComponentMap = Record<string, React.ComponentType<Props>>;
 
 export interface ParamDef {
+  length?: number;
   name?: string;
   type: TypeDef;
 }

packages/react-params/src/valueToText.tsx

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

packages/react-params/src/values.ts

@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// Copyright 2017-2020 @polkadot/react-params authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.