[FEATURE] Time/block switch functionality

* Implemented time/block switcher fuctionality
This commit is contained in:
Joseph Bagaric 2018-03-29 16:24:21 +02:00 committed by Bagaric
parent 68cc3182ca
commit 7097fd3940
5 changed files with 53 additions and 49 deletions

View File

@ -50,20 +50,18 @@ class ScheduleTimestampInputFactoryClass extends Component<Props> {
const { currentScheduleTimestamp, onChange, isValid, withProps } = this.props; const { currentScheduleTimestamp, onChange, isValid, withProps } = this.props;
return ( return (
<div className="row form-group"> <div className="form-group">
<div className="col-xs-11"> <Query
<Query params={['readOnly']}
params={['readOnly']} withQuery={({ readOnly }) =>
withQuery={({ readOnly }) => withProps({
withProps({ currentScheduleTimestamp,
currentScheduleTimestamp, isValid,
isValid, onChange,
onChange, readOnly: !!readOnly || this.props.isResolving
readOnly: !!readOnly || this.props.isResolving })
}) }
} />
/>
</div>
</div> </div>
); );
} }

View File

@ -9,15 +9,19 @@ interface Props {
export const WindowSizeField: React.SFC<Props> = ({ isReadOnly }) => ( export const WindowSizeField: React.SFC<Props> = ({ isReadOnly }) => (
<WindowSizeFieldFactory <WindowSizeFieldFactory
withProps={({ currentWindowSize, isValid, onChange, readOnly }) => ( withProps={({ currentWindowSize, currentScheduleType, isValid, onChange, readOnly }) => (
<div className="input-group-wrapper"> <div className="input-group-wrapper">
<label className="input-group"> <label className="input-group">
<div className="input-group-header">{translate('SCHEDULE_WINDOW_SIZE_BLOCKS')}</div> <div className="input-group-header">
{currentScheduleType.value === 'time'
? translate('SCHEDULE_WINDOW_SIZE_TIME')
: translate('SCHEDULE_WINDOW_SIZE_BLOCKS')}
</div>
<Input <Input
className={`input-group-input ${isValid ? '' : 'invalid'}`} className={`input-group-input ${isValid ? '' : 'invalid'}`}
type="text" type="text"
value={currentWindowSize.raw} value={currentWindowSize.raw}
placeholder={translateRaw('SCHEDULE_WINDOW_SIZE_BLOCKS_PLACEHOLDER')} placeholder={translateRaw('SCHEDULE_WINDOW_SIZE_PLACEHOLDER')}
readOnly={!!(isReadOnly || readOnly)} readOnly={!!(isReadOnly || readOnly)}
spellCheck={false} spellCheck={false}
onChange={onChange} onChange={onChange}

View File

@ -3,7 +3,7 @@ import { setCurrentWindowSize, TSetCurrentWindowSize } from 'actions/transaction
import { WindowSizeInputFactory } from './WindowSizeInputFactory'; import { WindowSizeInputFactory } from './WindowSizeInputFactory';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ICurrentWindowSize } from 'selectors/transaction'; import { ICurrentWindowSize, ICurrentScheduleType } from 'selectors/transaction';
interface DispatchProps { interface DispatchProps {
setCurrentWindowSize: TSetCurrentWindowSize; setCurrentWindowSize: TSetCurrentWindowSize;
@ -15,9 +15,10 @@ interface OwnProps {
} }
export interface CallbackProps { export interface CallbackProps {
currentWindowSize: ICurrentWindowSize;
currentScheduleType: ICurrentScheduleType;
isValid: boolean; isValid: boolean;
readOnly: boolean; readOnly: boolean;
currentWindowSize: ICurrentWindowSize;
onChange(ev: React.FormEvent<HTMLInputElement>): void; onChange(ev: React.FormEvent<HTMLInputElement>): void;
} }

View File

@ -3,7 +3,9 @@ import { Query } from 'components/renderCbs';
import { import {
getCurrentWindowSize, getCurrentWindowSize,
ICurrentWindowSize, ICurrentWindowSize,
isValidCurrentWindowSize isValidCurrentWindowSize,
getCurrentScheduleType,
ICurrentScheduleType
} from 'selectors/transaction'; } from 'selectors/transaction';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { AppState } from 'reducers'; import { AppState } from 'reducers';
@ -11,6 +13,7 @@ import { getResolvingDomain } from 'selectors/ens';
import { CallbackProps } from './WindowSizeFieldFactory'; import { CallbackProps } from './WindowSizeFieldFactory';
interface StateProps { interface StateProps {
currentScheduleType: ICurrentScheduleType;
currentWindowSize: ICurrentWindowSize; currentWindowSize: ICurrentWindowSize;
isValid: boolean; isValid: boolean;
isResolving: boolean; isResolving: boolean;
@ -25,23 +28,22 @@ type Props = OwnProps & StateProps;
class WindowSizeInputFactoryClass extends Component<Props> { class WindowSizeInputFactoryClass extends Component<Props> {
public render() { public render() {
const { currentWindowSize, onChange, isValid, withProps } = this.props; const { currentWindowSize, currentScheduleType, onChange, isValid, withProps } = this.props;
return ( return (
<div className="row form-group"> <div className="form-group">
<div className="col-xs-11"> <Query
<Query params={['readOnly']}
params={['readOnly']} withQuery={({ readOnly }) =>
withQuery={({ readOnly }) => withProps({
withProps({ currentWindowSize,
currentWindowSize, currentScheduleType,
isValid, isValid,
onChange, onChange,
readOnly: !!readOnly || this.props.isResolving readOnly: !!readOnly || this.props.isResolving
}) })
} }
/> />
</div>
</div> </div>
); );
} }
@ -49,6 +51,7 @@ class WindowSizeInputFactoryClass extends Component<Props> {
export const WindowSizeInputFactory = connect((state: AppState) => ({ export const WindowSizeInputFactory = connect((state: AppState) => ({
currentWindowSize: getCurrentWindowSize(state), currentWindowSize: getCurrentWindowSize(state),
currentScheduleType: getCurrentScheduleType(state),
isResolving: getResolvingDomain(state), isResolving: getResolvingDomain(state),
isValid: isValidCurrentWindowSize(state) isValid: isValidCurrentWindowSize(state)
}))(WindowSizeInputFactoryClass); }))(WindowSizeInputFactoryClass);

View File

@ -28,20 +28,18 @@ class WindowStartInputFactoryClass extends Component<Props> {
const { currentWindowStart, onChange, isValid, withProps } = this.props; const { currentWindowStart, onChange, isValid, withProps } = this.props;
return ( return (
<div className="row form-group"> <div className="form-group">
<div className="col-xs-11"> <Query
<Query params={['readOnly']}
params={['readOnly']} withQuery={({ readOnly }) =>
withQuery={({ readOnly }) => withProps({
withProps({ currentWindowStart,
currentWindowStart, isValid,
isValid, onChange,
onChange, readOnly: !!readOnly || this.props.isResolving
readOnly: !!readOnly || this.props.isResolving })
}) }
} />
/>
</div>
</div> </div>
); );
} }