1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React, { Component } from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import Checkbox from '../../checkbox';
|
11 | import Radio from '../../radio';
|
12 | import { func, obj, KEYCODE, htmlId } from '../../util';
|
13 | import Item from './item';
|
14 |
|
15 | var noop = {};
|
16 | var bindCtx = func.bindCtx;
|
17 | var pickOthers = obj.pickOthers;
|
18 | var CheckableItem = (_temp = _class = function (_Component) {
|
19 | _inherits(CheckableItem, _Component);
|
20 |
|
21 | function CheckableItem(props) {
|
22 | _classCallCheck(this, CheckableItem);
|
23 |
|
24 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
25 |
|
26 | bindCtx(_this, ['stopPropagation', 'handleKeyDown', 'handleClick']);
|
27 | _this.id = htmlId.escapeForId('checkable-item-' + (props.id || props._key));
|
28 | return _this;
|
29 | }
|
30 |
|
31 | CheckableItem.prototype.stopPropagation = function stopPropagation(e) {
|
32 | e.stopPropagation();
|
33 | };
|
34 |
|
35 | CheckableItem.prototype.handleCheck = function handleCheck(e) {
|
36 | var _props = this.props,
|
37 | checkType = _props.checkType,
|
38 | checked = _props.checked,
|
39 | onChange = _props.onChange;
|
40 |
|
41 | if (!(checkType === 'radio' && checked)) {
|
42 | onChange(!checked, e);
|
43 | }
|
44 | };
|
45 |
|
46 | CheckableItem.prototype.handleKeyDown = function handleKeyDown(e) {
|
47 | if (e.keyCode === KEYCODE.SPACE && !this.props.checkDisabled) {
|
48 | this.handleCheck(e);
|
49 | }
|
50 |
|
51 | this.props.onKeyDown && this.props.onKeyDown(e);
|
52 | };
|
53 |
|
54 | CheckableItem.prototype.handleClick = function handleClick(e) {
|
55 | this.handleCheck(e);
|
56 |
|
57 | this.props.onClick && this.props.onClick(e);
|
58 | };
|
59 |
|
60 | CheckableItem.prototype.renderCheck = function renderCheck() {
|
61 | var _props2 = this.props,
|
62 | root = _props2.root,
|
63 | checked = _props2.checked,
|
64 | indeterminate = _props2.indeterminate,
|
65 | disabled = _props2.disabled,
|
66 | checkType = _props2.checkType,
|
67 | checkDisabled = _props2.checkDisabled,
|
68 | onChange = _props2.onChange;
|
69 | var labelToggleChecked = root.props.labelToggleChecked;
|
70 |
|
71 | var Check = checkType === 'radio' ? Radio : Checkbox;
|
72 |
|
73 | var checkProps = {
|
74 | tabIndex: '-1',
|
75 | checked: checked,
|
76 | disabled: disabled || checkDisabled
|
77 | };
|
78 | if (checkType === 'checkbox') {
|
79 | checkProps.indeterminate = indeterminate;
|
80 | }
|
81 | if (!labelToggleChecked) {
|
82 | checkProps.onChange = onChange;
|
83 | checkProps.onClick = this.stopPropagation;
|
84 | }
|
85 |
|
86 | return React.createElement(Check, _extends({ 'aria-labelledby': this.id }, checkProps));
|
87 | };
|
88 |
|
89 | CheckableItem.prototype.render = function render() {
|
90 | var _props3 = this.props,
|
91 | _key = _props3._key,
|
92 | root = _props3.root,
|
93 | checked = _props3.checked,
|
94 | disabled = _props3.disabled,
|
95 | onClick = _props3.onClick,
|
96 | helper = _props3.helper,
|
97 | children = _props3.children;
|
98 | var _root$props = root.props,
|
99 | prefix = _root$props.prefix,
|
100 | labelToggleChecked = _root$props.labelToggleChecked;
|
101 |
|
102 | var others = pickOthers(Object.keys(CheckableItem.propTypes), this.props);
|
103 |
|
104 | var newProps = _extends({
|
105 | _key: _key,
|
106 | root: root,
|
107 | disabled: disabled,
|
108 | type: 'item',
|
109 | onClick: onClick,
|
110 | onKeyDown: this.handleKeyDown
|
111 | }, others);
|
112 | if (labelToggleChecked && !disabled) {
|
113 | newProps.onClick = this.handleClick;
|
114 | }
|
115 |
|
116 | var title = void 0;
|
117 | if (typeof children === 'string') {
|
118 | title = children;
|
119 | }
|
120 |
|
121 | return React.createElement(
|
122 | Item,
|
123 | _extends({ 'aria-checked': checked, title: title }, newProps),
|
124 | this.renderCheck(),
|
125 | React.createElement(
|
126 | 'span',
|
127 | { className: prefix + 'menu-item-text', id: this.id },
|
128 | children
|
129 | ),
|
130 | helper ? React.createElement(
|
131 | 'div',
|
132 | { className: prefix + 'menu-item-helper' },
|
133 | helper
|
134 | ) : null
|
135 | );
|
136 | };
|
137 |
|
138 | return CheckableItem;
|
139 | }(Component), _class.propTypes = {
|
140 | _key: PropTypes.string,
|
141 | root: PropTypes.object,
|
142 | disabled: PropTypes.bool,
|
143 | inlineIndent: PropTypes.number,
|
144 | checked: PropTypes.bool,
|
145 | indeterminate: PropTypes.bool,
|
146 | onChange: PropTypes.func,
|
147 | checkType: PropTypes.oneOf(['checkbox', 'radio']),
|
148 | checkDisabled: PropTypes.bool,
|
149 | helper: PropTypes.node,
|
150 | children: PropTypes.node,
|
151 | onKeyDown: PropTypes.func,
|
152 | onClick: PropTypes.func,
|
153 | id: PropTypes.string
|
154 | }, _class.defaultProps = {
|
155 | disabled: false,
|
156 | checked: false,
|
157 | indeterminate: false,
|
158 | checkType: 'checkbox',
|
159 | checkDisabled: false,
|
160 | onChange: noop
|
161 | }, _temp);
|
162 | CheckableItem.displayName = 'CheckableItem';
|
163 | export { CheckableItem as default }; |
\ | No newline at end of file |