UNPKG

7 kBJavaScriptView Raw
1function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2
3function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
4
5function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
6
7function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
8
9function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
10
11function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
12
13function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
14
15function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
16
17function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
19/* eslint jsx-a11y/no-noninteractive-element-to-interactive-role: 0 */
20import React, { Component } from 'react';
21import PropTypes from 'prop-types';
22import ReactDom from 'react-dom';
23import classNames from 'classnames';
24
25var scrollTo = function scrollTo(element, to, duration) {
26 var requestAnimationFrame = window.requestAnimationFrame || function requestAnimationFrameTimeout() {
27 return setTimeout(arguments[0], 10); // eslint-disable-line
28 }; // jump to target if duration zero
29
30
31 if (duration <= 0) {
32 element.scrollTop = to;
33 return;
34 }
35
36 var difference = to - element.scrollTop;
37 var perTick = difference / duration * 10;
38 requestAnimationFrame(function () {
39 element.scrollTop += perTick;
40 if (element.scrollTop === to) return;
41 scrollTo(element, to, duration - 10);
42 });
43};
44
45var Select =
46/*#__PURE__*/
47function (_Component) {
48 _inherits(Select, _Component);
49
50 function Select() {
51 var _getPrototypeOf2;
52
53 var _this;
54
55 _classCallCheck(this, Select);
56
57 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
58 args[_key] = arguments[_key];
59 }
60
61 _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Select)).call.apply(_getPrototypeOf2, [this].concat(args)));
62
63 _defineProperty(_assertThisInitialized(_this), "state", {
64 active: false
65 });
66
67 _defineProperty(_assertThisInitialized(_this), "onSelect", function (value) {
68 var _this$props = _this.props,
69 onSelect = _this$props.onSelect,
70 type = _this$props.type;
71 onSelect(type, value);
72 });
73
74 _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (e) {
75 var onMouseEnter = _this.props.onMouseEnter;
76
77 _this.setState({
78 active: true
79 });
80
81 onMouseEnter(e);
82 });
83
84 _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
85 _this.setState({
86 active: false
87 });
88 });
89
90 _defineProperty(_assertThisInitialized(_this), "saveList", function (node) {
91 _this.list = node;
92 });
93
94 return _this;
95 }
96
97 _createClass(Select, [{
98 key: "componentDidMount",
99 value: function componentDidMount() {
100 // jump to selected option
101 this.scrollToSelected(0);
102 }
103 }, {
104 key: "componentDidUpdate",
105 value: function componentDidUpdate(prevProps) {
106 var selectedIndex = this.props.selectedIndex; // smooth scroll to selected option
107
108 if (prevProps.selectedIndex !== selectedIndex) {
109 this.scrollToSelected(120);
110 }
111 }
112 }, {
113 key: "getOptions",
114 value: function getOptions() {
115 var _this2 = this;
116
117 var _this$props2 = this.props,
118 options = _this$props2.options,
119 selectedIndex = _this$props2.selectedIndex,
120 prefixCls = _this$props2.prefixCls;
121 return options.map(function (item, index) {
122 var _classNames;
123
124 var cls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-select-option-selected"), selectedIndex === index), _defineProperty(_classNames, "".concat(prefixCls, "-select-option-disabled"), item.disabled), _classNames));
125 var onClick = item.disabled ? undefined : function () {
126 _this2.onSelect(item.value);
127 };
128 return React.createElement("li", {
129 role: "button",
130 onClick: onClick,
131 className: cls,
132 key: index,
133 disabled: item.disabled
134 }, item.value);
135 });
136 }
137 }, {
138 key: "scrollToSelected",
139 value: function scrollToSelected(duration) {
140 // move to selected item
141 var selectedIndex = this.props.selectedIndex;
142 var select = ReactDom.findDOMNode(this);
143 var list = ReactDom.findDOMNode(this.list);
144
145 if (!list) {
146 return;
147 }
148
149 var index = selectedIndex;
150
151 if (index < 0) {
152 index = 0;
153 }
154
155 var topOption = list.children[index];
156 var to = topOption.offsetTop;
157 scrollTo(select, to, duration);
158 }
159 }, {
160 key: "render",
161 value: function render() {
162 var _this$props3 = this.props,
163 prefixCls = _this$props3.prefixCls,
164 options = _this$props3.options;
165 var active = this.state.active;
166
167 if (options.length === 0) {
168 return null;
169 }
170
171 var cls = classNames("".concat(prefixCls, "-select"), _defineProperty({}, "".concat(prefixCls, "-select-active"), active));
172 return React.createElement("div", {
173 className: cls,
174 onMouseEnter: this.handleMouseEnter,
175 onMouseLeave: this.handleMouseLeave
176 }, React.createElement("ul", {
177 ref: this.saveList
178 }, this.getOptions()));
179 }
180 }]);
181
182 return Select;
183}(Component);
184
185_defineProperty(Select, "propTypes", {
186 prefixCls: PropTypes.string,
187 options: PropTypes.array,
188 selectedIndex: PropTypes.number,
189 type: PropTypes.string,
190 onSelect: PropTypes.func,
191 onMouseEnter: PropTypes.func
192});
193
194export default Select;
\No newline at end of file