types#TypeDef TypeScript Examples

export function Enum(props: Props) {
  const { components, typeDef, onChange: _onChange, registry, value = {} } = props;
  const variants = typeDef.sub as TypeDef[];
  const { keyring } = useApi();
  const [variantIndex, _setVariantIndex] = useState<number>(
    Math.max(
      0,
      variants.findIndex(({ name }) => name === Object.keys(value)[0])
    )
  );

  const Component = components[variantIndex];

  const onChange = useCallback(
    (value: unknown): void => {
      _onChange({ [variants[variantIndex].name as string]: value });
    },
    [_onChange, variants, variantIndex]
  );

  const setVariantIndex = useCallback(
    (value: OrFalsy<number>) => {
      if (isNumber(value)) {
        _setVariantIndex(value);

        _onChange({
          [variants[value].name as string]: getInitValue(registry, keyring, variants[value]),
        });
      }
    },
    [registry, keyring, _onChange, variants]
  );

  return (
    <>
      <Dropdown
        options={variants.map(({ name }, index) => ({ label: name, value: index }))}
        value={variantIndex}
        onChange={setVariantIndex}
      />
      {variants[variantIndex].type !== 'Null' && (
        <FormField
          className="ml-8 mt-2"
          label={<ArgSignature arg={{ type: variants[variantIndex] }} />}
          {...getValidation(props)}
        >
          <Component value={Object.values(value)[0]} onChange={onChange} />
        </FormField>
      )}
    </>
  );
}

export function Option({
  component: Component,
  onChange: _onChange,
  registry,
  typeDef,
  value = null,
}: Props) {
  const { keyring } = useApi();

  const [isSupplied, toggleIsSupplied] = useToggle();
  const onChange = useCallback(
    (value: OrFalsy<unknown>): void => {
      if (!isSupplied) {
        _onChange(null);

        return;
      }

      _onChange(value);
    },
    [_onChange, isSupplied]
  );

  useEffect((): void => {
    if (isSupplied && value === null) {
      onChange(getInitValue(registry, keyring, typeDef.sub as TypeDef));
    } else {
      if (!isSupplied && value !== null) {
        onChange(null);
      }
    }
  }, [keyring, registry, onChange, value, isSupplied, typeDef.sub]);

  return (
    <div className="flex items-start">
      {isSupplied ? (
        <Component className="flex-1" onChange={onChange} value={value} />
      ) : (
        <Input className="flex-1" isDisabled onChange={NOOP} value="" placeholder="Do not supply" />
      )}
      <div className="flex justify-center items-center w-18 my-2.5">
        <Switch value={isSupplied} onChange={toggleIsSupplied} />
      </div>
    </div>
  );
}

export function Vector({ Component, value, onChange, nestingNumber, type, ...props }: Props) {
  const _rowAdd = () => onChange([...value, '']);
  const _rowRemove = () => onChange(value.slice(0, -1));
  const _onChange = (row: number) => (newEntry: unknown) => {
    const newValue = value.map((entry, index) => (index == row ? newEntry : entry));
    onChange(newValue);
  };
  const isOddNesting = nestingNumber % 2 != 0;
  return (
    <div
      className={`p-4 text-left text-sm ${
        isOddNesting ? 'dark:bg-gray-900 bg-white' : 'dark:bg-elevation-1 bg-gray-100'
      } rounded border dark:border-gray-500 border-gray-200`}
    >
      <div className="flex justify-between align-middle">
        <div className="table mt-2 mb-4">
          <div className="table-cell align-middle font-mono font-bold dark:text-gray-300 text-gray-400">
            <Title
              nestingNumber={nestingNumber}
              type={(type?.sub as TypeDef)?.type || ''}
              count={nestingNumber}
            />
          </div>
        </div>
        <Buttons className={'flex mt-2 mr-1 mb-4 justify-end'}>
          <Button className="w-4" onClick={_rowAdd}>
            <svg
              width="10"
              height="10"
              viewBox="0 0 10 10"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M5 0.5C5.23869 0.5 5.46761 0.594821 5.6364 0.763604C5.80518 0.932387 5.9 1.16131 5.9 1.4V4.1H8.6C8.83869 4.1 9.06761 4.19482 9.2364 4.3636C9.40518 4.53239 9.5 4.76131 9.5 5C9.5 5.23869 9.40518 5.46761 9.2364 5.6364C9.06761 5.80518 8.83869 5.9 8.6 5.9H5.9V8.6C5.9 8.83869 5.80518 9.06761 5.6364 9.2364C5.46761 9.40518 5.23869 9.5 5 9.5C4.76131 9.5 4.53239 9.40518 4.3636 9.2364C4.19482 9.06761 4.1 8.83869 4.1 8.6V5.9H1.4C1.16131 5.9 0.932387 5.80518 0.763604 5.6364C0.594821 5.46761 0.5 5.23869 0.5 5C0.5 4.76131 0.594821 4.53239 0.763604 4.3636C0.932387 4.19482 1.16131 4.1 1.4 4.1H4.1V1.4C4.1 1.16131 4.19482 0.932387 4.3636 0.763604C4.53239 0.594821 4.76131 0.5 5 0.5Z"
                fill="#9597A6"
              />
            </svg>
          </Button>
          <Button className="w-4" onClick={_rowRemove}>
            <svg
              width="10"
              height="3"
              viewBox="0 0 10 3"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M0.5 1.20005C0.5 0.961354 0.594821 0.732436 0.763604 0.563653C0.932387 0.39487 1.16131 0.300049 1.4 0.300049H8.6C8.83869 0.300049 9.06761 0.39487 9.2364 0.563653C9.40518 0.732436 9.5 0.961354 9.5 1.20005C9.5 1.43874 9.40518 1.66766 9.2364 1.83644C9.06761 2.00523 8.83869 2.10005 8.6 2.10005H1.4C1.16131 2.10005 0.932387 2.00523 0.763604 1.83644C0.594821 1.66766 0.5 1.43874 0.5 1.20005Z"
                fill="#9597A6"
              />
            </svg>
          </Button>
        </Buttons>
      </div>
      {value &&
        value.map((entry, row) => (
          <div key={`div-${row}`} className={'mb-4 mr-1'}>
            <Component
              key={`component-${row}`}
              {...props}
              value={entry}
              onChange={_onChange(row)}
            />
          </div>
        ))}
    </div>
  );
}

// nestingNumber counts the depth of nested components
export function findComponent(
  registry: Registry,
  type: TypeDef,
  nestingNumber = 0
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
): React.ComponentType<ArgComponentProps<any>> {
  if (type.info === TypeDefInfo.Si) {
    return findComponent(registry, registry.lookup.getTypeDef(type.type));
  }

  if (type.info === TypeDefInfo.Option) {
    return (props: React.PropsWithChildren<ValidFormField<unknown>>) => (
      <Option
        component={findComponent(registry, type.sub as TypeDef)}
        registry={registry}
        typeDef={type}
        {...props}
      />
    );
  }

  if (type.info === TypeDefInfo.Enum) {
    return (props: React.PropsWithChildren<ValidFormField<Record<string, unknown>>>) => (
      <Enum
        components={(type.sub as TypeDef[]).map(enumVariant =>
          findComponent(registry, enumVariant)
        )}
        registry={registry}
        typeDef={type}
        {...props}
      />
    );
  }

  if (type.info === TypeDefInfo.Struct) {
    if (Array.isArray(type.sub)) {
      const components = type.sub.map(
        subtype =>
          ({
            Component: findComponent(registry, subtype, nestingNumber + 1),
            name: subtype.name,
          } as SubComponent)
      );
      return (props: ArgComponentProps<Record<string, unknown>>) =>
        SubForm({ ...props, components, nestingNumber, type });
    }
  }

  if (type.info === TypeDefInfo.Vec) {
    if (type.sub && !Array.isArray(type.sub)) {
      const Component = findComponent(registry, type.sub, nestingNumber + 1);
      return (props: ArgComponentProps<unknown[]>) =>
        Vector({ ...props, Component, nestingNumber, type });
    }
  }

  if (type.info === TypeDefInfo.Compact) {
    return findComponent(registry, type.sub as TypeDef);
  }

  switch (type.type) {
    case 'AccountId':
    case 'Address':
      return AddressSelect;

    case 'Balance':
      return InputBalance;

    case 'bool':
      return Bool;

    case 'u8':
    case 'i8':
    case 'i32':
    case 'u32':
    case 'i64':
    case 'u64':
    case 'BN':
      return InputNumber;

    default:
      return Input;
  }
}