forked from JedWatson/react-select
/
CustomRender.js
57 lines (56 loc) · 1.74 KB
/
CustomRender.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
import Highlighter from 'react-highlight-words';
var DisabledUpsellOptions = createClass({
displayName: 'DisabledUpsellOptions',
propTypes: {
label: PropTypes.string,
},
getInitialState () {
return {};
},
setValue (value) {
this.setState({ value });
if (value) {
console.log('Support level selected:', value.label);
}
},
renderLink: function() {
return <a style={{ marginLeft: 5 }} href="/upgrade" target="_blank">Upgrade here!</a>;
},
renderOption: function(option) {
return (
<Highlighter
searchWords={[this._inputValue]}
textToHighlight={option.label}
/>
);
},
renderValue: function(option) {
return <strong style={{ color: option.color }}>{option.label}</strong>;
},
render: function() {
var options = [
{ label: 'Basic customer support', value: 'basic', color: '#E31864' },
{ label: 'Premium customer support', value: 'premium', color: '#6216A3' },
{ label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() },
];
return (
<div className="section">
<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/CustomRender.js">(Source)</a></h3>
<Select
onInputChange={(inputValue) => this._inputValue = inputValue}
options={options}
optionRenderer={this.renderOption}
onChange={this.setValue}
value={this.state.value}
valueRenderer={this.renderValue}
/>
<div className="hint">This demonstates custom render methods and links in disabled options</div>
</div>
);
}
});
module.exports = DisabledUpsellOptions;