[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;
return (
<div className="row form-group">
<div className="col-xs-11">
<Query
params={['readOnly']}
withQuery={({ readOnly }) =>
withProps({
currentScheduleTimestamp,
isValid,
onChange,
readOnly: !!readOnly || this.props.isResolving
})
}
/>
</div>
<div className="form-group">
<Query
params={['readOnly']}
withQuery={({ readOnly }) =>
withProps({
currentScheduleTimestamp,
isValid,
onChange,
readOnly: !!readOnly || this.props.isResolving
})
}
/>
</div>
);
}

View File

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

View File

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

View File

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

View File

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