Fix Option isDisabled rendering (#5728)

This commit is contained in:
Jaco 2021-06-30 18:03:00 +03:00 committed by GitHub
parent 44c21902d3
commit 63ad91e646
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions

View File

@ -4,18 +4,28 @@
import type { TypeDef } from '@polkadot/types/types';
import type { Props } from '../types';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import { Toggle } from '@polkadot/react-components';
import { Option } from '@polkadot/types';
import { useTranslation } from '../translate';
import Param from './index';
function Option ({ className = '', defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive } }: Props): React.ReactElement<Props> {
function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive } }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const [isActive, setIsActive] = useState(withOptionActive || false);
const defaultValue = useMemo(
() => isDisabled
? _defaultValue && _defaultValue.value instanceof Option && _defaultValue.value.isSome
? { isValid: _defaultValue.isValid, value: _defaultValue.value.unwrap() }
: { isValid: _defaultValue.isValid, value: undefined }
: _defaultValue,
[_defaultValue, isDisabled]
);
useEffect((): void => {
!isActive && onChange && onChange({
isValid: true,
@ -49,6 +59,6 @@ function Option ({ className = '', defaultValue, isDisabled, name, onChange, onE
);
}
export default React.memo(styled(Option)`
export default React.memo(styled(OptionDisplay)`
position: relative;
`);

View File

@ -19,9 +19,9 @@ function Param ({ className = '', defaultValue, isDisabled, isInOption, isOption
const label = useMemo(
() => isUndefined(name)
? encodeTypeDef(type)
: `${name}: ${encodeTypeDef(type)}`,
[name, type]
? `${isDisabled && isInOption ? 'Option<' : ''}${encodeTypeDef(type)}${isDisabled && isInOption ? '>' : ''}`
: `${name}: ${isDisabled && isInOption ? 'Option<' : ''}${encodeTypeDef(type)}${isDisabled && isInOption ? '>' : ''}`,
[isDisabled, isInOption, name, type]
);
if (!Component) {