1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _react = require('react');
|
8 |
|
9 | var _react2 = _interopRequireDefault(_react);
|
10 |
|
11 | var _propTypes = require('prop-types');
|
12 |
|
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
14 |
|
15 | var _classnames = require('classnames');
|
16 |
|
17 | var _classnames2 = _interopRequireDefault(_classnames);
|
18 |
|
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
20 |
|
21 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
22 |
|
23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
24 |
|
25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
26 |
|
27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
28 |
|
29 | var propTypes = {
|
30 | placeholder: _propTypes2["default"].string,
|
31 | options: _propTypes2["default"].any,
|
32 | onClick: _propTypes2["default"].func
|
33 | };
|
34 | var defaultProps = {
|
35 | placeholder: '请输入信息',
|
36 | options: null
|
37 | };
|
38 | var tem = [];
|
39 | var textStr = [];
|
40 | var parentVal = void 0;
|
41 | var listArr = [];
|
42 | var restoreClick = void 0;
|
43 |
|
44 | var Cascader = function (_Component) {
|
45 | _inherits(Cascader, _Component);
|
46 |
|
47 | function Cascader(props) {
|
48 | _classCallCheck(this, Cascader);
|
49 |
|
50 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
51 |
|
52 | var options = _this.props.options;
|
53 | for (var i = options.length - 1; i >= 0; i--) {
|
54 | options[i]['parent'] = true;
|
55 | }
|
56 | _this.state = {
|
57 | option: options,
|
58 | origin: null,
|
59 | ulArr: null,
|
60 | textStr: []
|
61 | };
|
62 | _this.formatData = _this.formatData.bind(_this);
|
63 | _this.clickHandler = _this.clickHandler.bind(_this);
|
64 | _this.focusHandler = _this.focusHandler.bind(_this);
|
65 | _this.clear = _this.clear.bind(_this);
|
66 | _this.uniqueID = _this.uniqueID.bind(_this);
|
67 | return _this;
|
68 | }
|
69 |
|
70 | Cascader.prototype.uniqueID = function uniqueID() {
|
71 | function s4() {
|
72 | return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
73 | }
|
74 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
|
75 | };
|
76 |
|
77 | Cascader.prototype.formatData = function formatData() {
|
78 | var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.option;
|
79 |
|
80 | var option = data;
|
81 | var liArr = [],
|
82 | ulArr = [];
|
83 | for (var i = option.length - 1; i >= 0; i--) {
|
84 | if ('children' in option[i]) {
|
85 | liArr.push(_react2["default"].createElement(
|
86 | 'li',
|
87 | { 'data-parent': option[i]['parent'], onClick: this.clickHandler, key: this.uniqueID(), 'data-id': i },
|
88 | option[i]['value'],
|
89 | _react2["default"].createElement(
|
90 | 'i',
|
91 | { className: 'icon uf' },
|
92 | '\uE611'
|
93 | )
|
94 | ));
|
95 | } else {
|
96 | liArr.push(_react2["default"].createElement(
|
97 | 'li',
|
98 | { 'data-parent': option[i]['parent'], onClick: this.clickHandler, key: this.uniqueID(), 'data-id': i },
|
99 | option[i]['value']
|
100 | ));
|
101 | }
|
102 | }
|
103 | var ulStr = _react2["default"].createElement(
|
104 | 'ul',
|
105 | { key: this.uniqueID() },
|
106 | liArr
|
107 | );
|
108 | listArr.push(ulStr);
|
109 | this.setState({
|
110 | ulArr: listArr
|
111 | });
|
112 | };
|
113 |
|
114 | Cascader.prototype.focusHandler = function focusHandler(e) {
|
115 | e.stopPropagation();
|
116 | e.preventDefault();
|
117 | textStr = [];
|
118 |
|
119 | if (this.state.ulArr) {
|
120 | var firstUl = this.state.ulArr[0];
|
121 | listArr = [];
|
122 | listArr.push(firstUl);
|
123 | this.setState({
|
124 | ulArr: listArr
|
125 | });
|
126 | }
|
127 | tem = [];
|
128 | listArr = [];
|
129 | this.setState({
|
130 | textStr: textStr
|
131 | });
|
132 | if (!this.state.ulArr) {
|
133 | this.formatData();
|
134 | }
|
135 | };
|
136 |
|
137 | Cascader.prototype.clickHandler = function clickHandler(e) {
|
138 | e.stopPropagation();
|
139 | e.preventDefault();
|
140 | var i = e.currentTarget.dataset.id;
|
141 | if (!parentVal) parentVal = this.state.option[i].value;
|
142 | var data = tem[i] || this.state.option[i].parent && this.state.option[i];
|
143 | if (e.currentTarget.dataset.parent) {
|
144 | parentVal = e.currentTarget.innerText;
|
145 | var urlArr = this.state.ulArr[0];
|
146 | data = this.state.option[i];
|
147 | textStr = [];
|
148 | tem = [];
|
149 | listArr = [];
|
150 | listArr.push(urlArr);
|
151 | this.setState({
|
152 | ulArr: listArr
|
153 | });
|
154 | }
|
155 | if (restoreClick != e.currentTarget.innerText) {
|
156 | restoreClick = e.currentTarget.innerText;
|
157 | textStr.push(data.value);
|
158 | this.setState({
|
159 | textStr: textStr
|
160 | });
|
161 | if (data.children) {
|
162 | tem = data.children;
|
163 | this.formatData(data.children);
|
164 | } else {
|
165 | this.clear();
|
166 | }
|
167 | }
|
168 | if (this.props.onClick) {
|
169 | this.props.onClick(textStr);
|
170 | }
|
171 | };
|
172 |
|
173 | Cascader.prototype.clear = function clear() {
|
174 | tem = [];
|
175 | listArr = [];
|
176 | this.setState({
|
177 | ulArr: null
|
178 | });
|
179 | };
|
180 |
|
181 | Cascader.prototype.render = function render() {
|
182 | var va = this.state.textStr.join('/');
|
183 | return _react2["default"].createElement(
|
184 | 'div',
|
185 | { className: (0, _classnames2["default"])("cascader-container", this.props.className) },
|
186 | _react2["default"].createElement(
|
187 | 'div',
|
188 | { className: 'cascader-header' },
|
189 | _react2["default"].createElement('input', { onFocus: this.focusHandler, type: 'text', placeholder: this.props.placeholder, value: va })
|
190 | ),
|
191 | _react2["default"].createElement(
|
192 | 'div',
|
193 | { className: 'cascader-content' },
|
194 | this.state.ulArr
|
195 | )
|
196 | );
|
197 | };
|
198 |
|
199 | return Cascader;
|
200 | }(_react.Component);
|
201 |
|
202 | ;
|
203 | Cascader.propTypes = propTypes;
|
204 | Cascader.defaultProps = defaultProps;
|
205 | exports["default"] = Cascader;
|
206 | module.exports = exports['default']; |
\ | No newline at end of file |