DescriptorListPicker.tsx 6.2 KB
Newer Older
1
2
3
4
5
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import {DescriptorList} from 'model/descriptor.model';
6
import {autocomplete, promiseDescriptorList} from 'actions/descriptorList';
7
8

import { Field } from 'redux-form';
9
import Menu, { MenuItem } from 'material-ui/Menu';
10
import Input from 'material-ui/Input';
11
import TextField from 'material-ui/TextField';
12
13
14
15
16
17
18
import FormControl from 'ui/common/forms/FormControl';
import Select from 'material-ui/Select';
import Markdown from 'ui/catalog/markdown';

interface ISelectDescriptorListInternal extends React.ClassAttributes<any> {
    input: any;
    listDescriptorLists: DescriptorList[];
19
20
    autocomplete: (term: string) => Promise<DescriptorList[]>;
    loadDescriptorList: (uuid: string) => Promise<DescriptorList>;
21
22
23
24
25
26
27
28
29
    label: string;
    meta?: any;
}

class SelectDescriptorListInternal extends React.Component<ISelectDescriptorListInternal, any> {

    private constructor(props, context) {
        super(props, context);
        this.state = {
30
31
32
33
34
            pickerList: null,
            open: false,
            anchorEl: null,
            searchText: '',
            suggestions: [],
35
36
37
        };
    }

38
39
40
41
42
43
44
45
46
47
48
49
50
    public componentWillMount() {
        // const { initialValues } = this.props;
        // if (initialValues && initialValues.list && initialValues.list.uuid && initialValues.list.uuid.length > 0) {
        //     this.props.loadDescriptorList(initialValues.list.uuid[0]).then((dl) => {
        //         this.setState({pickerList: { uuid: dl.uuid, title: dl.title }});
        //     });
        // }

        this.props.autocomplete('').then((data) => {
            this.setState({suggestions: data});
        });
    }

51
    public componentWillReceiveProps(nextProps) {
52
53
54
55
56
57
58
59
60
61
        if (nextProps.input.value && nextProps.input.value.uuid && nextProps.input.value.uuid.length > 0) {
            const uuid = nextProps.input.value.uuid[0];
            const descriptorList = this.state.suggestions.find((dl) => dl.uuid === uuid);
            if (descriptorList) {
                this.setState({pickerList: { uuid: descriptorList.uuid, title: descriptorList.title }});
            } else {
                this.props.loadDescriptorList(uuid).then((dl) => {
                    this.setState({pickerList: { uuid: dl.uuid, title: dl.title }});
                });
            }
62
        } else {
63
            this.setState({pickerList: null});
64
65
66
        }
    }

67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    protected handleInputChange = (event) => {
        this.setState({searchText: event.target.value});
        this.props.autocomplete(event.target.value).then((suggestions) => {
            this.setState({suggestions});
        });
    }

    protected handleClick = (event) => {
        this.setState({ open: true, anchorEl: event.currentTarget });
    }

    protected handleRequestClose = () => {
        this.setState({ open: false });
    }

    protected select = (value) => (event) => {
        const { input } = this.props;
        const descriptorList = this.state.suggestions.find((dl) => dl.uuid === value);
85
        if (descriptorList) {
86
87
88
89
90
            input.onChange({ uuid: [ descriptorList.uuid ]});
            this.setState({
                open: false,
                pickerList: { uuid: descriptorList.uuid, title: descriptorList.title },
            });
91
92
        } else {
            input.onChange('');
93
94
95
96
            this.setState({
                open: false,
                pickerList: null,
            });
97
98
99
100
        }
    }

    public render() {
101
102
        const { label, meta } = this.props;
        const inputValue = this.state.pickerList && this.state.pickerList.uuid ? this.state.pickerList.uuid : '';
103
104
105
        return (
            <FormControl fullWidth meta={ meta } label={ label }>
                <Select
106
107
                    onClick={ this.handleClick }
                    value={ inputValue }
108
                    input={ <Input /> }
109
110
111
                    MenuProps={ {
                        open: false,
                    } }
112
113
                >
                    {
114
115
116
117
                        this.state.pickerList ? (
                            <MenuItem value={ inputValue }>
                                <Markdown basic source={ this.state.pickerList.title } />
                            </MenuItem>) : null
118
119
                    }
                </Select>
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
                <Menu
                    anchorEl={ this.state.anchorEl }
                    open={ this.state.open }
                    onClose={ this.handleRequestClose }
                >
                    <MenuItem >
                        <TextField fullWidth
                            value={ this.state.searchText }
                            label="Search..."
                            onChange={ this.handleInputChange }
                        />
                    </MenuItem>
                    {
                        this.state.suggestions.map((dl, index) => (
                            <MenuItem onClick={ this.select(dl.uuid) } key={ `descriptor-list-${index}` }>
                                <Markdown basic source={ dl.title } />
                            </MenuItem>
                        ))
                    }
                </Menu>
140
141
142
143
144
145
146
147
148
            </FormControl>
        );
    }
}

interface IDescriptorListPicker extends React.ClassAttributes<any> {
    name: string;
    label: string;
    className?: string;
149
150
    autocomplete: (term: string) => Promise<DescriptorList[]>;
    promiseDescriptorList: (uuid: string) => Promise<DescriptorList>;
151
152
153
154
155
}

class DescriptorListPicker extends React.Component<IDescriptorListPicker, any> {

    public render() {
156
157
        const { name , label, className, autocomplete, promiseDescriptorList } = this.props;

158
159
160
161
162
163
        return (
            <div className={ className }>
                <Field
                    name={ name }
                    component={ SelectDescriptorListInternal }
                    label={ label }
164
165
                    autocomplete={ autocomplete }
                    loadDescriptorList={ promiseDescriptorList }
166
167
168
169
170
171
172
                />
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => bindActionCreators({
173
174
    autocomplete,
    promiseDescriptorList,
175
176
177
}, dispatch);

export default connect(null, mapDispatchToProps)(DescriptorListPicker);