1  import React from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import { AppState } from 'features/reducers';
 5  import * as selectors from 'features/selectors';
 6  import { transactionFieldsActions } from 'features/transaction';
 7  import { Query } from 'components/renderCbs';
 8  import { DataInput } from './DataInputFactory';
 9  
10  export interface CallBackProps {
11    data: AppState['transaction']['fields']['data'];
12    validData: boolean;
13    readOnly: boolean;
14    onChange(ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>): void;
15  }
16  interface DispatchProps {
17    isEtherTransaction: boolean;
18    inputData: transactionFieldsActions.TInputData;
19  }
20  interface OwnProps {
21    data: string | null;
22    withProps(props: CallBackProps): React.ReactElement<any> | null;
23  }
24  interface StateProps {
25    isEtherTransaction: boolean;
26  }
27  
28  type Props = DispatchProps & OwnProps & StateProps;
29  
30  class DataFieldClass extends React.Component<Props> {
31    public componentDidMount() {
32      const { data } = this.props;
33      if (data) {
34        this.props.inputData(data);
35      }
36    }
37  
38    public render() {
39      return this.props.isEtherTransaction ? (
40        <DataInput onChange={this.setData} withProps={this.props.withProps} />
41      ) : null;
42    }
43  
44    private setData = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
45      const { value } = ev.currentTarget;
46      this.props.inputData(value);
47    };
48  }
49  
50  const DataField = connect(
51    (state: AppState) => ({ isEtherTransaction: selectors.isEtherTransaction(state) }),
52    { inputData: transactionFieldsActions.inputData }
53  )(DataFieldClass);
54  
55  interface DefaultDataFieldProps {
56    withProps(props: CallBackProps): React.ReactElement<any> | null;
57  }
58  const DefaultDataField: React.SFC<DefaultDataFieldProps> = ({ withProps }) => (
59    /* TODO: check query param of tokens too */
60  
61    <Query
62      params={['data']}
63      withQuery={({ data }) => <DataField data={data} withProps={withProps} />}
64    />
65  );
66  
67  export { DefaultDataField as DataFieldFactory };