UNPKG

6.29 kBJavaScriptView Raw
1'use strict';
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6
7var _react = require('react');
8
9var _react2 = _interopRequireDefault(_react);
10
11var _propTypes = require('prop-types');
12
13var _propTypes2 = _interopRequireDefault(_propTypes);
14
15var _classnames = require('classnames');
16
17var _classnames2 = _interopRequireDefault(_classnames);
18
19function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
20
21function _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
23function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
24
25function _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
27function _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
29var propTypes = {
30 placeholder: _propTypes2["default"].string,
31 options: _propTypes2["default"].any,
32 onClick: _propTypes2["default"].func
33};
34var defaultProps = {
35 placeholder: '请输入信息',
36 options: null
37};
38var tem = []; //用于临时存储点击的节点
39var textStr = []; //存储选择的节点
40var parentVal = void 0; //存储parent的value
41var listArr = [];
42var restoreClick = void 0; //记录点击的名字
43
44var 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;
203Cascader.propTypes = propTypes;
204Cascader.defaultProps = defaultProps;
205exports["default"] = Cascader;
206module.exports = exports['default'];
\No newline at end of file