Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

202 righe
7.0 KiB

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