ghost-portal/packages/app-storage/src/Selection/Modules.tsx
2019-02-13 22:49:10 +01:00

132 lines
3.3 KiB
TypeScript

// Copyright 2017-2019 @polkadot/app-storage 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 { TypeDef, getTypeDef } from '@polkadot/types';
import { StorageFunction } from '@polkadot/types/StorageKey';
import { I18nProps } from '@polkadot/ui-app/types';
import { RawParams } from '@polkadot/ui-params/types';
import { ApiProps } from '@polkadot/ui-api/types';
import { ComponentProps } from '../types';
import React from 'react';
import { Button, InputStorage } from '@polkadot/ui-app/index';
import Params from '@polkadot/ui-params/index';
import { withApi, withMulti } from '@polkadot/ui-api/index';
import { isUndefined } from '@polkadot/util';
import translate from '../translate';
type Props = ComponentProps & ApiProps & I18nProps;
type State = {
isValid: boolean,
key: StorageFunction,
values: RawParams,
params: Array<{ type: TypeDef }>
};
class Modules extends React.PureComponent<Props, State> {
private defaultValue: any;
state: State;
constructor (props: Props) {
super(props);
const { api } = this.props;
this.defaultValue = api.query.timestamp.now;
this.state = {
isValid: true,
key: this.defaultValue,
values: [],
params: []
};
}
render () {
const { t } = this.props;
const { isValid, key: { method, section }, params } = this.state;
return (
<section className='storage--actionrow'>
<div className='storage--actionrow-value'>
<InputStorage
defaultValue={this.defaultValue}
label={t('selected state query')}
onChange={this.onChangeKey}
/>
<Params
key={`${section}.${method}:params` /* force re-render on change */}
onChange={this.onChangeParams}
params={params}
/>
</div>
<div className='storage--actionrow-buttons'>
<Button
icon='plus'
isDisabled={!isValid}
isPrimary
onClick={this.onAdd}
/>
</div>
</section>
);
}
private nextState (newState: State): void {
this.setState(
(prevState: State) => {
const { key = prevState.key, values = prevState.values } = newState;
const hasParam = key.meta.type.isMap;
const isValid = values.length === (hasParam ? 1 : 0) &&
values.reduce((isValid, value) =>
isValid &&
!isUndefined(value) &&
!isUndefined(value.value) &&
value.isValid,
true
);
return {
isValid,
key,
values,
params: hasParam
? [{ type: getTypeDef(key.meta.type.asMap.key.toString()) }]
: []
};
}
);
}
private onAdd = (): void => {
const { onAdd } = this.props;
const { key, values } = this.state;
onAdd({
key,
params: values
});
}
private onChangeKey = (key: StorageFunction): void => {
this.nextState({
isValid: false,
key,
values: [],
params: []
});
}
private onChangeParams = (values: RawParams = []): void => {
this.nextState({ values } as State);
}
}
export default withMulti(
Modules,
translate,
withApi
);