mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-10 11:05:47 +00:00
[FEATURE] Time/block switch functionality
* Implemented time/block switcher fuctionality
This commit is contained in:
parent
68cc3182ca
commit
7097fd3940
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user