neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render KV Array with non-overlapping keys (#1154)

Browse Source
This commit is contained in:
Jaco Greeff 2019-05-20 14:33:06 +02:00 committed by GitHub
parent 35b5381c33
commit 7a8d868272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 90 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui-app/src/Dropdown.tsx
View File

@ -30,6 +30,7 @@ type Props<Option> = BareProps & {
renderLabel?: (item: any) => any,
transform?: (value: any) => any,
value?: any,
withEllipsis?: boolean,
withLabel?: boolean
};
@ -60,7 +61,7 @@ export default class Dropdown<Option> extends React.PureComponent<Props<Option>>
}
render () {
const { allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isMultiple, label, onSearch, options, placeholder, renderLabel, style, withLabel, value } = this.props;
const { allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isMultiple, label, onSearch, options, placeholder, renderLabel, style, withEllipsis, withLabel, value } = this.props;
const dropdown = (
<SUIDropdown
allowAdditions={allowAdd}
@ -98,6 +99,7 @@ export default class Dropdown<Option> extends React.PureComponent<Props<Option>>
help={help}
label={label}
style={style}
withEllipsis={withEllipsis}
withLabel={withLabel}
>
{dropdown}

6
packages/ui-app/src/Input.tsx
View File

@ -39,7 +39,8 @@ type Props = BareProps & {
tabIndex?: number,
type?: Input$Type,
value?: any,
withLabel?: boolean
withLabel?: boolean,
withEllipsis?: boolean
};
type State = {
@ -93,7 +94,7 @@ export default class Input extends React.PureComponent<Props, State> {
};
render () {
const { autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, maxLength, min, name, placeholder, style, tabIndex, type = 'text', value, withLabel } = this.props;
const { autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, maxLength, min, name, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel } = this.props;
return (
<Labelled
@ -101,6 +102,7 @@ export default class Input extends React.PureComponent<Props, State> {
help={help}
label={label}
style={style}
withEllipsis={withEllipsis}
withLabel={withLabel}
>
<SUIInput

4
packages/ui-app/src/InputAddress/index.tsx
View File

@ -34,6 +34,7 @@ type Props = BareProps & {
placeholder?: string,
type?: KeyringOption$Type,
value?: string | Uint8Array | Array<string>,
withEllipsis?: boolean,
withLabel?: boolean
};
@ -121,7 +122,7 @@ class InputAddress extends React.PureComponent<Props, State> {
}
render () {
const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withLabel } = this.props;
const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withEllipsis, withLabel } = this.props;
const { value } = this.state;
const hasOptions = (options && options.length !== 0) || (optionsAll && Object.keys(optionsAll[type]).length !== 0);
@ -180,6 +181,7 @@ class InputAddress extends React.PureComponent<Props, State> {
? undefined
: value
}
withEllipsis={withEllipsis}
withLabel={withLabel}
/>
);

4
packages/ui-app/src/InputBalance.tsx
View File

@ -20,6 +20,7 @@ type Props = BareProps & {
onChange?: (value?: BN) => void,
placeholder?: string,
value?: BN | string,
withEllipsis?: boolean,
withLabel?: boolean,
withMax?: boolean
};
@ -28,7 +29,7 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
export default class InputBalance extends React.PureComponent<Props> {
render () {
const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withLabel, withMax } = this.props;
const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
return (
<InputNumber
@ -46,6 +47,7 @@ export default class InputBalance extends React.PureComponent<Props> {
placeholder={placeholder}
style={style}
value={value}
withEllipsis={withEllipsis}
withLabel={withLabel}
withMax={withMax}
/>

4
packages/ui-app/src/InputFile.tsx
View File

@ -23,6 +23,7 @@ type Props = BareProps & WithTranslation & {
label: React.ReactNode,
onChange?: (contents: Uint8Array, name: string) => void,
placeholder?: React.ReactNode | null,
withEllipsis?: boolean,
withLabel?: boolean
};
@ -43,13 +44,14 @@ class InputFile extends React.PureComponent<Props, State> {
state: State = {};
render () {
const { accept, className, clearContent, help, isDisabled, isError = false, label, placeholder, t, withLabel } = this.props;
const { accept, className, clearContent, help, isDisabled, isError = false, label, placeholder, t, withEllipsis, withLabel } = this.props;
const { file } = this.state;
return (
<Labelled
help={help}
label={label}
withEllipsis={withEllipsis}
withLabel={withLabel}
>
<Dropzone

3
packages/ui-app/src/InputNumber.tsx
View File

@ -30,6 +30,7 @@ type Props = BareProps & I18nProps & {
onChange?: (value?: BN) => void,
placeholder?: string,
value?: BN | string,
withEllipsis?: boolean,
withLabel?: boolean,
withMax?: boolean
};
@ -108,8 +109,8 @@ class InputNumber extends React.PureComponent<Props, State> {
onPaste={this.onPaste}
placeholder={t('Positive number')}
style={style}
value={value}
type='text'
value={value}
>
{(withMax && !!maxValue) && this.renderMaxButton()}
{isSi && this.renderSiDropdown()}

67
packages/ui-app/src/Labelled.tsx
View File

@ -18,7 +18,8 @@ type Props = BareProps & {
isSmall?: boolean,
label?: React.ReactNode,
children: React.ReactNode,
withLabel?: boolean
withLabel?: boolean,
withEllipsis?: boolean
};
type State = {
@ -32,6 +33,12 @@ const defaultLabel: any = (// node?
const Wrapper = styled.div`
display: block;
.withEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
> label {
margin: 0.25rem 0 0 0;
padding-right: 0.5rem;
@ -88,32 +95,6 @@ export default class Labelled extends React.PureComponent<Props, State> {
};
}
toggleTooltip () {
const { tooltipOpen } = this.state;
this.setState({ tooltipOpen: !tooltipOpen });
}
renderLabel () {
const { help, label = defaultLabel } = this.props;
const { tooltipOpen } = this.state;
return help
? <label className='with-help' >
{label}
<Icon
name='help circle'
data-tip
data-for='controlled-trigger'
onMouseOver={() => this.toggleTooltip()}
onMouseOut={() => this.toggleTooltip()}
/>
{tooltipOpen && (
<Tooltip trigger={'controlled-trigger'}>
{help}
</Tooltip>)}
</label>
: <label>{label}</label>;
}
render () {
const { className, children, isSmall, isHidden, style, withLabel = true } = this.props;
@ -137,4 +118,36 @@ export default class Labelled extends React.PureComponent<Props, State> {
</Wrapper>
);
}
private renderLabel () {
const { help, label = defaultLabel, withEllipsis } = this.props;
const { tooltipOpen } = this.state;
const displayLabel = withEllipsis
? <div className='withEllipsis'>{label}</div>
: label;
return help
? <label className='with-help' >
{displayLabel}
<Icon
name='help circle'
data-tip
data-for='controlled-trigger'
onMouseOver={this.toggleTooltip}
onMouseOut={this.toggleTooltip}
/>
{tooltipOpen && (
<Tooltip trigger='controlled-trigger'>
{help}
</Tooltip>
)}
</label>
: <label>{displayLabel}</label>;
}
private toggleTooltip = () => {
this.setState(({ tooltipOpen }: State) => ({
tooltipOpen: !tooltipOpen
}));
}
}

1
packages/ui-params/src/Param/Account.tsx
View File

@ -29,6 +29,7 @@ export default class Account extends React.PureComponent<Props> {
label={label}
onChange={this.onChange}
placeholder='5...'
withEllipsis
withLabel={withLabel}
/>
</Bare>

1
packages/ui-params/src/Param/Amount.tsx
View File

@ -41,6 +41,7 @@ export default class Amount extends React.PureComponent<Props> {
? 'text'
: 'number'
}
withEllipsis
withLabel={withLabel}
/>
</Bare>

1
packages/ui-params/src/Param/Balance.tsx
View File

@ -29,6 +29,7 @@ class Balance extends React.PureComponent<Props> {
isError={isError}
label={label}
onChange={this.onChange}
withEllipsis
withLabel={withLabel}
/>
</Bare>

1
packages/ui-params/src/Param/Base.tsx
View File

@ -30,6 +30,7 @@ export default class Base extends React.PureComponent<Props> {
<Labelled
className={isDisabled ? 'full' : size}
label={label}
withEllipsis
withLabel={withLabel}
>
{children}

1
packages/ui-params/src/Param/BaseBytes.tsx
View File

@ -48,6 +48,7 @@ export default class BaseBytes extends React.PureComponent<Props> {
onChange={this.onChange}
placeholder='0x...'
type='text'
withEllipsis
withLabel={withLabel}
>
{children}

1
packages/ui-params/src/Param/Bool.tsx
View File

@ -34,6 +34,7 @@ export default class BoolParam extends React.PureComponent<Props> {
label={label}
options={options}
onChange={this.onChange}
withEllipsis
withLabel={withLabel}
/>
</Bare>

1
packages/ui-params/src/Param/File.tsx
View File

@ -34,6 +34,7 @@ export default class File extends React.PureComponent<Props> {
label={label}
onChange={onChange}
placeholder={placeholder}
withEllipsis
withLabel={withLabel}
/>
</Bare>

45
packages/ui-params/src/Param/KeyValueArray.tsx
View File

@ -73,27 +73,32 @@ class KeyValueArray extends React.PureComponent<Props, State> {
const pairs = value as Vector<Pair>;
return (
<Base
className={className}
label={label}
size='full'
style={style}
>
{pairs.map(({ key, value }) => {
const keyHex = u8aToHex(key.toU8a(true));
<>
<Base
className={className}
label={label}
size='full'
style={style}
>
<div />
</Base>
<div className='ui--Params'>
{pairs.map(({ key, value }) => {
const keyHex = u8aToHex(key.toU8a(true));
return (
<Bytes
defaultValue={{ value } as RawParam}
isDisabled
key={keyHex}
label={keyHex}
name={keyHex}
type={BYTES_TYPE}
/>
);
})}
</Base>
return (
<Bytes
defaultValue={{ value } as RawParam}
isDisabled
key={keyHex}
label={keyHex}
name={keyHex}
type={BYTES_TYPE}
/>
);
})}
</div>
</>
);
}