CSVConfiguration.tsx 7.12 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
import * as React from 'react';
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
2
import {translate} from 'react-i18next';
Maxym Borodenko's avatar
Maxym Borodenko committed
3 4 5

import { ICsvConfiguration } from 'utilities/CSV';

Matija Obreza's avatar
Matija Obreza committed
6 7 8 9 10 11 12 13 14
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
Maxym Borodenko's avatar
Maxym Borodenko committed
15 16 17 18 19 20 21 22 23 24 25 26
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';

class CSVConfig implements ICsvConfiguration {
  public separator: string;
  public quote: string;
  public escape: string;
  public autodetect: boolean;
}

interface ICSVConfigurationProps extends React.ClassAttributes<any> {
    config: CSVConfig;
    onChange: (value: CSVConfig) => void;
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
27
    t: any;
Maxym Borodenko's avatar
Maxym Borodenko committed
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
}

class CSVConfiguration extends React.Component<ICSVConfigurationProps, any> {

    public constructor(props, context) {
        super(props, context);

        this.state = {
            separatorValue: 'tab',
            separatorInputValue: null,
            quote: props.config.quote || '"',
            escape: props.config.escape || '\\',
            autodetect: props.config.autodetect || true,
        };
    }

    private handleChangeSeparator = (event, value) => {
        let separator = null;
        switch (value) {
            case 'tab': { separator = '\t'; break; }
            case 'comma': { separator = ','; break; }
            case 'semicolon': { separator = ';'; break; }
            case 'space': { separator = ' '; break; }
            default: { break; }
        }
        this.setState({ ...this.state, separatorValue: value, separator });
        const config: CSVConfig = this.toConfig();
        this.props.onChange({ ...config, separator });
    }

    private handleInputSeparator = (event) => {
        this.setState({ ...this.state, separatorInputValue: event.target.value });
        const config: CSVConfig = this.toConfig();
        this.props.onChange({ ...config, separator: event.target.value });
    }

    private handleInputQuote = (event) => {
        this.setState({ ...this.state, quote: event.target.value });
        const config: CSVConfig = this.toConfig();
        this.props.onChange({ ...config, quote: event.target.value });
    }

    private handleInputEscape = (event) => {
      this.setState({ ...this.state, escape: event.target.value });
      const config: CSVConfig = this.toConfig();
      this.props.onChange({ ...config, escape: event.target.value });
    }


    private handleAutodetect = (event, checked) => {
      this.setState({ ...this.state, autodetect: checked });
      const config: CSVConfig = this.toConfig();
      this.props.onChange({ ...config, autodetect: checked });
    }

    private toConfig(): CSVConfig {
      return {
        quote: this.state.quote,
        escape: this.state.escape,
        separator: this.state.separator,
        autodetect: this.state.autodetect,
      };
    }

    public render() {
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
93
        const {t} = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
94 95
        return (
            <div style={ { marginTop: '1rem' } }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
96
              <CollapsibleComponentSearch collapsed title={ t('common:csv.configuration') }>
Maxym Borodenko's avatar
Maxym Borodenko committed
97 98 99
                <Grid container>
                  <Grid item xs={ 12 } lg={ 3 }>
                    <FormControl fullWidth>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
100
                        <FormLabel>{ t('common:csv.autoDetect') }</FormLabel>
Maxym Borodenko's avatar
Maxym Borodenko committed
101
                        <FormControlLabel
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
102
                            label={ t('common:csv.autoDetectLabel') }
Maxym Borodenko's avatar
Maxym Borodenko committed
103 104 105
                            control={
                                <Checkbox onChange={ this.handleAutodetect } />
                            }
Oleksii Savran's avatar
Oleksii Savran committed
106
                            className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
107 108 109 110 111
                        />
                    </FormControl>
                  </Grid>
                  <Grid item xs={ 12 } md={ 8 } lg={ 7 }>
                    <FormControl fullWidth>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
112
                        <FormLabel>{ t('common:csv.separator') }</FormLabel>
Maxym Borodenko's avatar
Maxym Borodenko committed
113 114 115 116 117 118
                        <RadioGroup row
                                    value={ this.state.separatorValue }
                                    onChange={ this.handleChangeSeparator }
                        >
                            <FormControlLabel
                                value="tab"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
119
                                label={ t('common:csv.tab') }
Maxym Borodenko's avatar
Maxym Borodenko committed
120
                                control={ <Radio/> }
Oleksii Savran's avatar
Oleksii Savran committed
121
                                className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
122 123 124
                            />
                            <FormControlLabel
                                value="comma"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
125
                                label={ t('common:csv.comma') }
Maxym Borodenko's avatar
Maxym Borodenko committed
126
                                control={ <Radio/> }
Oleksii Savran's avatar
Oleksii Savran committed
127
                                className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
128 129 130
                            />
                            <FormControlLabel
                                value="semicolon"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
131
                                label={ t('common:csv.semicolon') }
Maxym Borodenko's avatar
Maxym Borodenko committed
132
                                control={ <Radio/> }
Oleksii Savran's avatar
Oleksii Savran committed
133
                                className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
134 135 136
                            />
                            <FormControlLabel
                                value="space"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
137
                                label={ t('common:csv.space') }
Maxym Borodenko's avatar
Maxym Borodenko committed
138
                                control={ <Radio/> }
Oleksii Savran's avatar
Oleksii Savran committed
139
                                className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
140 141 142
                            />
                            <FormControlLabel
                                value="other"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
143
                                label={ t('common:csv.other') }
Maxym Borodenko's avatar
Maxym Borodenko committed
144
                                control={ <Radio/> }
Oleksii Savran's avatar
Oleksii Savran committed
145
                                className="mr-1rem"
Maxym Borodenko's avatar
Maxym Borodenko committed
146 147 148
                            />
                            <FormControlLabel
                                label=""
Oleksii Savran's avatar
Oleksii Savran committed
149
                                className="pl-1rem"
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
150
                                control={ <Input placeholder={ t('common:csv.typeYourSeparator') } onBlur={ this.handleInputSeparator } /> }
Maxym Borodenko's avatar
Maxym Borodenko committed
151 152 153 154 155 156
                            />
                        </RadioGroup>
                    </FormControl>
                  </Grid>
                  <Grid item xs={ 6 } md={ 2 } lg={ 1 }>
                    <FormControl style={ { display: 'block' } }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
157 158
                        <InputLabel>{ t('common:csv.escapeCharacter') }</InputLabel>
                        <Input placeholder={ t('common:csv.typeYourEscapeCharacter') } value={ this.state.escape } onBlur={ this.handleInputEscape } />
Maxym Borodenko's avatar
Maxym Borodenko committed
159 160 161 162
                    </FormControl>
                  </Grid>
                  <Grid item xs={ 6 } md={ 2 } lg={ 1 }>
                    <FormControl style={ { display: 'block' } }>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
163 164
                        <InputLabel>{ t('common:csv.quoteCharacter') }</InputLabel>
                        <Input placeholder={ t('common:csv.typeYourQuoteCharacter') } value={ this.state.quote } onBlur={ this.handleInputQuote } />
Maxym Borodenko's avatar
Maxym Borodenko committed
165 166 167 168 169 170 171 172 173
                    </FormControl>
                  </Grid>
                </Grid>
              </CollapsibleComponentSearch>
            </div>
        );
    }
}

Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
174 175
const translatedCSV = translate()(CSVConfiguration);
export { translatedCSV as default, CSVConfig };