Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  6. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  7. var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
  8. var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
  9. var _typeof2 = require('babel-runtime/helpers/typeof');
  10. var _typeof3 = _interopRequireDefault(_typeof2);
  11. var _extends2 = require('babel-runtime/helpers/extends');
  12. var _extends3 = _interopRequireDefault(_extends2);
  13. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  14. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  15. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  16. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  17. var _createClass2 = require('babel-runtime/helpers/createClass');
  18. var _createClass3 = _interopRequireDefault(_createClass2);
  19. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  20. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  21. var _inherits2 = require('babel-runtime/helpers/inherits');
  22. var _inherits3 = _interopRequireDefault(_inherits2);
  23. var _simpleAssign = require('simple-assign');
  24. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  25. var _react = require('react');
  26. var _react2 = _interopRequireDefault(_react);
  27. var _propTypes = require('prop-types');
  28. var _propTypes2 = _interopRequireDefault(_propTypes);
  29. var _Checkbox = require('../Checkbox');
  30. var _Checkbox2 = _interopRequireDefault(_Checkbox);
  31. var _TableRowColumn = require('./TableRowColumn');
  32. var _TableRowColumn2 = _interopRequireDefault(_TableRowColumn);
  33. var _ClickAwayListener = require('../internal/ClickAwayListener');
  34. var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
  35. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  36. var TableBody = function (_Component) {
  37. (0, _inherits3.default)(TableBody, _Component);
  38. function TableBody() {
  39. var _ref;
  40. var _temp, _this, _ret;
  41. (0, _classCallCheck3.default)(this, TableBody);
  42. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  43. args[_key] = arguments[_key];
  44. }
  45. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableBody.__proto__ || (0, _getPrototypeOf2.default)(TableBody)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  46. selectedRows: []
  47. }, _this.isControlled = false, _this.handleClickAway = function () {
  48. if (_this.props.deselectOnClickaway && _this.state.selectedRows.length > 0) {
  49. var selectedRows = [];
  50. _this.setState({ selectedRows: selectedRows });
  51. if (_this.props.onRowSelection) {
  52. _this.props.onRowSelection(selectedRows);
  53. }
  54. }
  55. }, _this.onRowClick = function (event, rowNumber) {
  56. event.stopPropagation();
  57. if (_this.props.selectable) {
  58. // Prevent text selection while selecting rows.
  59. if (window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects.length > 0) {
  60. window.getSelection().removeAllRanges();
  61. }
  62. _this.processRowSelection(event, rowNumber);
  63. }
  64. }, _this.onCellClick = function (event, rowNumber, columnNumber) {
  65. event.stopPropagation();
  66. if (_this.props.onCellClick) {
  67. _this.props.onCellClick(rowNumber, _this.getColumnId(columnNumber), event);
  68. }
  69. }, _this.onCellHover = function (event, rowNumber, columnNumber) {
  70. if (_this.props.onCellHover) {
  71. _this.props.onCellHover(rowNumber, _this.getColumnId(columnNumber), event);
  72. }
  73. _this.onRowHover(event, rowNumber);
  74. }, _this.onCellHoverExit = function (event, rowNumber, columnNumber) {
  75. if (_this.props.onCellHoverExit) {
  76. _this.props.onCellHoverExit(rowNumber, _this.getColumnId(columnNumber), event);
  77. }
  78. _this.onRowHoverExit(event, rowNumber);
  79. }, _this.onRowHover = function (event, rowNumber) {
  80. if (_this.props.onRowHover) {
  81. _this.props.onRowHover(rowNumber);
  82. }
  83. }, _this.onRowHoverExit = function (event, rowNumber) {
  84. if (_this.props.onRowHoverExit) {
  85. _this.props.onRowHoverExit(rowNumber);
  86. }
  87. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  88. }
  89. (0, _createClass3.default)(TableBody, [{
  90. key: 'componentWillMount',
  91. value: function componentWillMount() {
  92. if (this.props.preScanRows) {
  93. this.setState({
  94. selectedRows: this.getSelectedRows(this.props)
  95. });
  96. }
  97. }
  98. }, {
  99. key: 'componentDidMount',
  100. value: function componentDidMount() {
  101. if (!this.props.preScanRows) {
  102. this.setState({ // eslint-disable-line react/no-did-mount-set-state
  103. selectedRows: this.getSelectedRows(this.props)
  104. });
  105. }
  106. }
  107. }, {
  108. key: 'componentWillReceiveProps',
  109. value: function componentWillReceiveProps(nextProps) {
  110. if (this.props.allRowsSelected !== nextProps.allRowsSelected) {
  111. if (!nextProps.allRowsSelected) {
  112. this.setState({
  113. selectedRows: []
  114. });
  115. return;
  116. }
  117. }
  118. this.setState({
  119. selectedRows: this.getSelectedRows(nextProps)
  120. });
  121. }
  122. }, {
  123. key: 'createRows',
  124. value: function createRows() {
  125. var _this2 = this;
  126. var numChildren = _react2.default.Children.count(this.props.children);
  127. var rowNumber = 0;
  128. var handlers = {
  129. onCellClick: this.onCellClick,
  130. onCellHover: this.onCellHover,
  131. onCellHoverExit: this.onCellHoverExit,
  132. onRowHover: this.onRowHover,
  133. onRowHoverExit: this.onRowHoverExit,
  134. onRowClick: this.onRowClick
  135. };
  136. return _react2.default.Children.map(this.props.children, function (child) {
  137. if (_react2.default.isValidElement(child)) {
  138. var props = {
  139. hoverable: _this2.props.showRowHover,
  140. selected: _this2.isRowSelected(rowNumber),
  141. striped: _this2.props.stripedRows && rowNumber % 2 === 0,
  142. rowNumber: rowNumber++
  143. };
  144. if (rowNumber === numChildren) {
  145. props.displayBorder = false;
  146. }
  147. var children = [_this2.createRowCheckboxColumn(props)];
  148. _react2.default.Children.forEach(child.props.children, function (child) {
  149. children.push(child);
  150. });
  151. return _react2.default.cloneElement(child, (0, _extends3.default)({}, props, handlers), children);
  152. }
  153. });
  154. }
  155. }, {
  156. key: 'createRowCheckboxColumn',
  157. value: function createRowCheckboxColumn(rowProps) {
  158. if (!this.props.displayRowCheckbox) {
  159. return null;
  160. }
  161. var name = rowProps.rowNumber + '-cb';
  162. var disabled = !this.props.selectable;
  163. return _react2.default.createElement(
  164. _TableRowColumn2.default,
  165. {
  166. key: name,
  167. columnNumber: 0,
  168. style: {
  169. width: 24,
  170. cursor: disabled ? 'default' : 'inherit'
  171. }
  172. },
  173. _react2.default.createElement(_Checkbox2.default, {
  174. name: name,
  175. value: 'selected',
  176. disabled: disabled,
  177. checked: rowProps.selected
  178. })
  179. );
  180. }
  181. }, {
  182. key: 'getSelectedRows',
  183. value: function getSelectedRows(props) {
  184. var _this3 = this;
  185. var selectedRows = [];
  186. if (props.selectable) {
  187. var index = 0;
  188. _react2.default.Children.forEach(props.children, function (child) {
  189. if (_react2.default.isValidElement(child)) {
  190. if (child.props.selected !== undefined) {
  191. _this3.isControlled = true;
  192. }
  193. if (child.props.selected && (selectedRows.length === 0 || props.multiSelectable)) {
  194. selectedRows.push(index);
  195. }
  196. index++;
  197. }
  198. });
  199. }
  200. return selectedRows;
  201. }
  202. }, {
  203. key: 'isRowSelected',
  204. value: function isRowSelected(rowNumber) {
  205. var _this4 = this;
  206. if (this.props.allRowsSelected) {
  207. return true;
  208. }
  209. return this.state.selectedRows.some(function (row) {
  210. if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object') {
  211. if (_this4.isValueInRange(rowNumber, row)) {
  212. return true;
  213. }
  214. } else {
  215. if (row === rowNumber) {
  216. return true;
  217. }
  218. }
  219. return false;
  220. });
  221. }
  222. }, {
  223. key: 'isValueInRange',
  224. value: function isValueInRange(value, range) {
  225. if (!range) return false;
  226. if (range.start <= value && value <= range.end || range.end <= value && value <= range.start) {
  227. return true;
  228. }
  229. return false;
  230. }
  231. }, {
  232. key: 'processRowSelection',
  233. value: function processRowSelection(event, rowNumber) {
  234. var selectedRows = [].concat((0, _toConsumableArray3.default)(this.state.selectedRows));
  235. if (event.shiftKey && this.props.multiSelectable && selectedRows.length > 0) {
  236. var lastIndex = selectedRows.length - 1;
  237. var lastSelection = selectedRows[lastIndex];
  238. if ((typeof lastSelection === 'undefined' ? 'undefined' : (0, _typeof3.default)(lastSelection)) === 'object') {
  239. lastSelection.end = rowNumber;
  240. } else {
  241. selectedRows.splice(lastIndex, 1, {
  242. start: lastSelection,
  243. end: rowNumber
  244. });
  245. }
  246. } else if ((event.ctrlKey && !event.metaKey || event.metaKey && !event.ctrlKey) && this.props.multiSelectable) {
  247. var idx = selectedRows.indexOf(rowNumber);
  248. if (idx < 0) {
  249. var foundRange = false;
  250. for (var i = 0; i < selectedRows.length; i++) {
  251. var range = selectedRows[i];
  252. if ((typeof range === 'undefined' ? 'undefined' : (0, _typeof3.default)(range)) !== 'object') continue;
  253. if (this.isValueInRange(rowNumber, range)) {
  254. var _selectedRows;
  255. foundRange = true;
  256. var values = this.splitRange(range, rowNumber);
  257. (_selectedRows = selectedRows).splice.apply(_selectedRows, [i, 1].concat((0, _toConsumableArray3.default)(values)));
  258. }
  259. }
  260. if (!foundRange) selectedRows.push(rowNumber);
  261. } else {
  262. selectedRows.splice(idx, 1);
  263. }
  264. } else {
  265. if (selectedRows.length === 1 && selectedRows[0] === rowNumber) {
  266. selectedRows = [];
  267. } else {
  268. selectedRows = [rowNumber];
  269. }
  270. }
  271. if (!this.isControlled) {
  272. this.setState({ selectedRows: selectedRows });
  273. }
  274. if (this.props.onRowSelection) {
  275. this.props.onRowSelection(this.flattenRanges(selectedRows));
  276. }
  277. }
  278. }, {
  279. key: 'splitRange',
  280. value: function splitRange(range, splitPoint) {
  281. var splitValues = [];
  282. var startOffset = range.start - splitPoint;
  283. var endOffset = range.end - splitPoint;
  284. // Process start half
  285. splitValues.push.apply(splitValues, (0, _toConsumableArray3.default)(this.genRangeOfValues(splitPoint, startOffset)));
  286. // Process end half
  287. splitValues.push.apply(splitValues, (0, _toConsumableArray3.default)(this.genRangeOfValues(splitPoint, endOffset)));
  288. return splitValues;
  289. }
  290. }, {
  291. key: 'genRangeOfValues',
  292. value: function genRangeOfValues(start, offset) {
  293. var values = [];
  294. var dir = offset > 0 ? -1 : 1; // This forces offset to approach 0 from either direction.
  295. while (offset !== 0) {
  296. values.push(start + offset);
  297. offset += dir;
  298. }
  299. return values;
  300. }
  301. }, {
  302. key: 'flattenRanges',
  303. value: function flattenRanges(selectedRows) {
  304. var _this5 = this;
  305. return selectedRows.reduce(function (rows, row) {
  306. if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object') {
  307. var values = _this5.genRangeOfValues(row.end, row.start - row.end);
  308. rows.push.apply(rows, [row.end].concat((0, _toConsumableArray3.default)(values)));
  309. } else {
  310. rows.push(row);
  311. }
  312. return rows;
  313. }, []).sort();
  314. }
  315. }, {
  316. key: 'getColumnId',
  317. value: function getColumnId(columnNumber) {
  318. return columnNumber - 1;
  319. }
  320. }, {
  321. key: 'render',
  322. value: function render() {
  323. var _props = this.props,
  324. style = _props.style,
  325. allRowsSelected = _props.allRowsSelected,
  326. multiSelectable = _props.multiSelectable,
  327. onCellClick = _props.onCellClick,
  328. onCellHover = _props.onCellHover,
  329. onCellHoverExit = _props.onCellHoverExit,
  330. onRowHover = _props.onRowHover,
  331. onRowHoverExit = _props.onRowHoverExit,
  332. onRowSelection = _props.onRowSelection,
  333. selectable = _props.selectable,
  334. deselectOnClickaway = _props.deselectOnClickaway,
  335. showRowHover = _props.showRowHover,
  336. stripedRows = _props.stripedRows,
  337. displayRowCheckbox = _props.displayRowCheckbox,
  338. preScanRows = _props.preScanRows,
  339. other = (0, _objectWithoutProperties3.default)(_props, ['style', 'allRowsSelected', 'multiSelectable', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowHover', 'onRowHoverExit', 'onRowSelection', 'selectable', 'deselectOnClickaway', 'showRowHover', 'stripedRows', 'displayRowCheckbox', 'preScanRows']);
  340. var prepareStyles = this.context.muiTheme.prepareStyles;
  341. return _react2.default.createElement(
  342. _ClickAwayListener2.default,
  343. { onClickAway: this.handleClickAway },
  344. _react2.default.createElement(
  345. 'tbody',
  346. (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, other),
  347. this.createRows()
  348. )
  349. );
  350. }
  351. }]);
  352. return TableBody;
  353. }(_react.Component);
  354. TableBody.muiName = 'TableBody';
  355. TableBody.defaultProps = {
  356. allRowsSelected: false,
  357. deselectOnClickaway: true,
  358. displayRowCheckbox: true,
  359. multiSelectable: false,
  360. preScanRows: true,
  361. selectable: true,
  362. style: {}
  363. };
  364. TableBody.contextTypes = {
  365. muiTheme: _propTypes2.default.object.isRequired
  366. };
  367. TableBody.propTypes = process.env.NODE_ENV !== "production" ? {
  368. /**
  369. * @ignore
  370. * Set to true to indicate that all rows should be selected.
  371. */
  372. allRowsSelected: _propTypes2.default.bool,
  373. /**
  374. * Children passed to table body.
  375. */
  376. children: _propTypes2.default.node,
  377. /**
  378. * The css class name of the root element.
  379. */
  380. className: _propTypes2.default.string,
  381. /**
  382. * Controls whether or not to deselect all selected
  383. * rows after clicking outside the table.
  384. */
  385. deselectOnClickaway: _propTypes2.default.bool,
  386. /**
  387. * Controls the display of the row checkbox. The default value is true.
  388. */
  389. displayRowCheckbox: _propTypes2.default.bool,
  390. /**
  391. * @ignore
  392. * If true, multiple table rows can be selected.
  393. * CTRL/CMD+Click and SHIFT+Click are valid actions.
  394. * The default value is false.
  395. */
  396. multiSelectable: _propTypes2.default.bool,
  397. /**
  398. * @ignore
  399. * Callback function for when a cell is clicked.
  400. */
  401. onCellClick: _propTypes2.default.func,
  402. /**
  403. * @ignore
  404. * Called when a table cell is hovered. rowNumber
  405. * is the row number of the hovered row and columnId
  406. * is the column number or the column key of the cell.
  407. */
  408. onCellHover: _propTypes2.default.func,
  409. /**
  410. * @ignore
  411. * Called when a table cell is no longer hovered.
  412. * rowNumber is the row number of the row and columnId
  413. * is the column number or the column key of the cell.
  414. */
  415. onCellHoverExit: _propTypes2.default.func,
  416. /**
  417. * @ignore
  418. * Called when a table row is hovered.
  419. * rowNumber is the row number of the hovered row.
  420. */
  421. onRowHover: _propTypes2.default.func,
  422. /**
  423. * @ignore
  424. * Called when a table row is no longer
  425. * hovered. rowNumber is the row number of the row
  426. * that is no longer hovered.
  427. */
  428. onRowHoverExit: _propTypes2.default.func,
  429. /**
  430. * @ignore
  431. * Called when a row is selected. selectedRows is an
  432. * array of all row selections. If all rows have been selected,
  433. * the string "all" will be returned instead to indicate that
  434. * all rows have been selected.
  435. */
  436. onRowSelection: _propTypes2.default.func,
  437. /**
  438. * Controls whether or not the rows are pre-scanned to determine
  439. * initial state. If your table has a large number of rows and
  440. * you are experiencing a delay in rendering, turn off this property.
  441. */
  442. preScanRows: _propTypes2.default.bool,
  443. /**
  444. * @ignore
  445. * If true, table rows can be selected. If multiple
  446. * row selection is desired, enable multiSelectable.
  447. * The default value is true.
  448. */
  449. selectable: _propTypes2.default.bool,
  450. /**
  451. * If true, table rows will be highlighted when
  452. * the cursor is hovering over the row. The default
  453. * value is false.
  454. */
  455. showRowHover: _propTypes2.default.bool,
  456. /**
  457. * If true, every other table row starting
  458. * with the first row will be striped. The default value is false.
  459. */
  460. stripedRows: _propTypes2.default.bool,
  461. /**
  462. * Override the inline-styles of the root element.
  463. */
  464. style: _propTypes2.default.object
  465. } : {};
  466. exports.default = TableBody;