1 | import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _createClass from 'babel-runtime/helpers/createClass';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 | import classnames from 'classnames';
|
7 | import React from 'react';
|
8 | import TouchFeedback from 'rmc-feedback';
|
9 |
|
10 | var SegmentedControl = function (_React$Component) {
|
11 | _inherits(SegmentedControl, _React$Component);
|
12 |
|
13 | function SegmentedControl(props) {
|
14 | _classCallCheck(this, SegmentedControl);
|
15 |
|
16 | var _this = _possibleConstructorReturn(this, (SegmentedControl.__proto__ || Object.getPrototypeOf(SegmentedControl)).call(this, props));
|
17 |
|
18 | _this.state = {
|
19 | selectedIndex: props.selectedIndex
|
20 | };
|
21 | return _this;
|
22 | }
|
23 |
|
24 | _createClass(SegmentedControl, [{
|
25 | key: 'componentWillReceiveProps',
|
26 | value: function componentWillReceiveProps(nextProps) {
|
27 | if (nextProps.selectedIndex !== this.state.selectedIndex) {
|
28 | this.setState({
|
29 | selectedIndex: nextProps.selectedIndex
|
30 | });
|
31 | }
|
32 | }
|
33 | }, {
|
34 | key: 'onClick',
|
35 | value: function onClick(e, index, value) {
|
36 | var _props = this.props,
|
37 | disabled = _props.disabled,
|
38 | onChange = _props.onChange,
|
39 | onValueChange = _props.onValueChange;
|
40 |
|
41 | if (!disabled && this.state.selectedIndex !== index) {
|
42 |
|
43 | e.nativeEvent = e.nativeEvent ? e.nativeEvent : {};
|
44 | e.nativeEvent.selectedSegmentIndex = index;
|
45 | e.nativeEvent.value = value;
|
46 | if (onChange) {
|
47 | onChange(e);
|
48 | }
|
49 | if (onValueChange) {
|
50 | onValueChange(value);
|
51 | }
|
52 | this.setState({
|
53 | selectedIndex: index
|
54 | });
|
55 | }
|
56 | }
|
57 | }, {
|
58 | key: 'renderSegmentItem',
|
59 | value: function renderSegmentItem(idx, value, selected) {
|
60 | var _this2 = this;
|
61 |
|
62 | var _props2 = this.props,
|
63 | prefixCls = _props2.prefixCls,
|
64 | disabled = _props2.disabled,
|
65 | tintColor = _props2.tintColor;
|
66 |
|
67 | var itemCls = classnames(prefixCls + '-item', _defineProperty({}, prefixCls + '-item-selected', selected));
|
68 | var itemStyle = {
|
69 | color: selected ? '#fff' : tintColor,
|
70 | backgroundColor: selected ? tintColor : 'transparent',
|
71 | borderColor: tintColor
|
72 | };
|
73 | var activeInnerStyle = tintColor ? {
|
74 | backgroundColor: tintColor
|
75 | } : {};
|
76 | return React.createElement(
|
77 | TouchFeedback,
|
78 | { key: idx, disabled: disabled, activeClassName: prefixCls + '-item-active' },
|
79 | React.createElement(
|
80 | 'div',
|
81 | { className: itemCls, style: itemStyle, role: 'tab', 'aria-selected': selected && !disabled, 'aria-disabled': disabled, onClick: disabled ? undefined : function (e) {
|
82 | return _this2.onClick(e, idx, value);
|
83 | } },
|
84 | React.createElement('div', { className: prefixCls + '-item-inner', style: activeInnerStyle }),
|
85 | value
|
86 | )
|
87 | );
|
88 | }
|
89 | }, {
|
90 | key: 'render',
|
91 | value: function render() {
|
92 | var _this3 = this;
|
93 |
|
94 | var _props3 = this.props,
|
95 | className = _props3.className,
|
96 | prefixCls = _props3.prefixCls,
|
97 | style = _props3.style,
|
98 | disabled = _props3.disabled,
|
99 | _props3$values = _props3.values,
|
100 | values = _props3$values === undefined ? [] : _props3$values;
|
101 |
|
102 | var wrapCls = classnames(className, prefixCls, _defineProperty({}, prefixCls + '-disabled', disabled));
|
103 | return React.createElement(
|
104 | 'div',
|
105 | { className: wrapCls, style: style, role: 'tablist' },
|
106 | values.map(function (value, idx) {
|
107 | return (
|
108 |
|
109 | _this3.renderSegmentItem(idx, value, idx === _this3.state.selectedIndex)
|
110 | );
|
111 | })
|
112 | );
|
113 | }
|
114 | }]);
|
115 |
|
116 | return SegmentedControl;
|
117 | }(React.Component);
|
118 |
|
119 | export default SegmentedControl;
|
120 |
|
121 | SegmentedControl.defaultProps = {
|
122 | prefixCls: 'am-segment',
|
123 | selectedIndex: 0,
|
124 | disabled: false,
|
125 | values: [],
|
126 | onChange: function onChange() {},
|
127 | onValueChange: function onValueChange() {},
|
128 |
|
129 | style: {},
|
130 | tintColor: ''
|
131 | }; |
\ | No newline at end of file |