MyCrypto/common/components/DataFieldFactory/DataInputFactory.tsx

41 lines
1.2 KiB
TypeScript

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { isHexString } from 'ethereumjs-util';
import { AppState } from 'features/reducers';
import { transactionFieldsSelectors } from 'features/transaction';
import { CallBackProps } from 'components/DataFieldFactory';
import { Query } from 'components/renderCbs';
interface OwnProps {
withProps(props: CallBackProps): React.ReactElement<any> | null;
onChange(ev: React.FormEvent<HTMLInputElement>): void;
}
interface StateProps {
data: AppState['transaction']['fields']['data'];
validData: boolean;
}
type Props = OwnProps & StateProps;
class DataInputClass extends Component<Props> {
public render() {
const { data, onChange, validData } = this.props;
return (
<Query
params={['readOnly']}
withQuery={({ readOnly }) =>
this.props.withProps({ data, onChange, readOnly: !!readOnly, validData })
}
/>
);
}
}
export const DataInput = connect((state: AppState) => ({
data: transactionFieldsSelectors.getData(state),
validData:
transactionFieldsSelectors.getData(state).raw === '' ||
isHexString(transactionFieldsSelectors.getData(state).raw)
}))(DataInputClass);