You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

пре 3 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  6. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  7. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  8. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  9. var _createClass2 = require('babel-runtime/helpers/createClass');
  10. var _createClass3 = _interopRequireDefault(_createClass2);
  11. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  12. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  13. var _inherits2 = require('babel-runtime/helpers/inherits');
  14. var _inherits3 = _interopRequireDefault(_inherits2);
  15. var _simpleAssign = require('simple-assign');
  16. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  17. var _react = require('react');
  18. var _react2 = _interopRequireDefault(_react);
  19. var _propTypes = require('prop-types');
  20. var _propTypes2 = _interopRequireDefault(_propTypes);
  21. var _warning = require('warning');
  22. var _warning2 = _interopRequireDefault(_warning);
  23. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  24. function getStyles(props, context) {
  25. var _context$muiTheme = context.muiTheme,
  26. baseTheme = _context$muiTheme.baseTheme,
  27. table = _context$muiTheme.table;
  28. return {
  29. root: {
  30. backgroundColor: table.backgroundColor,
  31. width: '100%',
  32. borderCollapse: 'collapse',
  33. borderSpacing: 0,
  34. tableLayout: 'fixed',
  35. fontFamily: baseTheme.fontFamily
  36. },
  37. bodyTable: {
  38. height: props.fixedHeader || props.fixedFooter ? props.height : 'auto',
  39. overflowX: 'hidden',
  40. overflowY: 'auto'
  41. },
  42. tableWrapper: {
  43. height: props.fixedHeader || props.fixedFooter ? 'auto' : props.height,
  44. overflow: 'auto'
  45. }
  46. };
  47. }
  48. var Table = function (_Component) {
  49. (0, _inherits3.default)(Table, _Component);
  50. function Table() {
  51. var _ref;
  52. var _temp, _this, _ret;
  53. (0, _classCallCheck3.default)(this, Table);
  54. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  55. args[_key] = arguments[_key];
  56. }
  57. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Table.__proto__ || (0, _getPrototypeOf2.default)(Table)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  58. allRowsSelected: false
  59. }, _this.onCellClick = function (rowNumber, columnNumber, event) {
  60. if (_this.props.onCellClick) _this.props.onCellClick(rowNumber, columnNumber, event);
  61. }, _this.onCellHover = function (rowNumber, columnNumber, event) {
  62. if (_this.props.onCellHover) _this.props.onCellHover(rowNumber, columnNumber, event);
  63. }, _this.onCellHoverExit = function (rowNumber, columnNumber, event) {
  64. if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(rowNumber, columnNumber, event);
  65. }, _this.onRowHover = function (rowNumber) {
  66. if (_this.props.onRowHover) _this.props.onRowHover(rowNumber);
  67. }, _this.onRowHoverExit = function (rowNumber) {
  68. if (_this.props.onRowHoverExit) _this.props.onRowHoverExit(rowNumber);
  69. }, _this.onRowSelection = function (selectedRows) {
  70. if (_this.state.allRowsSelected) {
  71. _this.setState({ allRowsSelected: false });
  72. }
  73. if (_this.props.onRowSelection) {
  74. _this.props.onRowSelection(selectedRows);
  75. }
  76. }, _this.onSelectAll = function () {
  77. if (_this.props.onRowSelection) {
  78. if (!_this.state.allRowsSelected) {
  79. _this.props.onRowSelection('all');
  80. } else {
  81. _this.props.onRowSelection('none');
  82. }
  83. }
  84. _this.setState({ allRowsSelected: !_this.state.allRowsSelected });
  85. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  86. }
  87. (0, _createClass3.default)(Table, [{
  88. key: 'componentWillMount',
  89. value: function componentWillMount() {
  90. if (this.props.allRowsSelected) {
  91. this.setState({ allRowsSelected: true });
  92. }
  93. }
  94. }, {
  95. key: 'componentWillReceiveProps',
  96. value: function componentWillReceiveProps(nextProps) {
  97. if (this.props.allRowsSelected !== nextProps.allRowsSelected) {
  98. this.setState({ allRowsSelected: nextProps.allRowsSelected });
  99. }
  100. }
  101. }, {
  102. key: 'isScrollbarVisible',
  103. value: function isScrollbarVisible() {
  104. var tableDivHeight = this.refs.tableDiv.clientHeight;
  105. var tableBodyHeight = this.refs.tableBody.clientHeight;
  106. return tableBodyHeight > tableDivHeight;
  107. }
  108. }, {
  109. key: 'createTableHeader',
  110. value: function createTableHeader(base) {
  111. return _react2.default.cloneElement(base, {
  112. enableSelectAll: base.props.enableSelectAll && this.props.selectable && this.props.multiSelectable,
  113. onSelectAll: this.onSelectAll,
  114. selectAllSelected: this.state.allRowsSelected
  115. });
  116. }
  117. }, {
  118. key: 'createTableBody',
  119. value: function createTableBody(base) {
  120. return _react2.default.cloneElement(base, {
  121. allRowsSelected: this.state.allRowsSelected,
  122. multiSelectable: this.props.multiSelectable,
  123. onCellClick: this.onCellClick,
  124. onCellHover: this.onCellHover,
  125. onCellHoverExit: this.onCellHoverExit,
  126. onRowHover: this.onRowHover,
  127. onRowHoverExit: this.onRowHoverExit,
  128. onRowSelection: this.onRowSelection,
  129. selectable: this.props.selectable
  130. });
  131. }
  132. }, {
  133. key: 'createTableFooter',
  134. value: function createTableFooter(base) {
  135. return base;
  136. }
  137. }, {
  138. key: 'render',
  139. value: function render() {
  140. var _this2 = this;
  141. var _props = this.props,
  142. children = _props.children,
  143. className = _props.className,
  144. fixedFooter = _props.fixedFooter,
  145. fixedHeader = _props.fixedHeader,
  146. style = _props.style,
  147. wrapperStyle = _props.wrapperStyle,
  148. headerStyle = _props.headerStyle,
  149. bodyStyle = _props.bodyStyle,
  150. footerStyle = _props.footerStyle;
  151. var prepareStyles = this.context.muiTheme.prepareStyles;
  152. var styles = getStyles(this.props, this.context);
  153. var tHead = void 0;
  154. var tFoot = void 0;
  155. var tBody = void 0;
  156. _react2.default.Children.forEach(children, function (child) {
  157. if (!_react2.default.isValidElement(child)) return;
  158. var muiName = child.type.muiName;
  159. if (muiName === 'TableBody') {
  160. tBody = _this2.createTableBody(child);
  161. } else if (muiName === 'TableHeader') {
  162. tHead = _this2.createTableHeader(child);
  163. } else if (muiName === 'TableFooter') {
  164. tFoot = _this2.createTableFooter(child);
  165. } else {
  166. process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Children of the Table component must be TableBody or TableHeader or TableFooter.\n Nothing is rendered.') : void 0;
  167. }
  168. });
  169. // If we could not find a table-header and a table-body, do not attempt to display anything.
  170. if (!tBody && !tHead) return null;
  171. var mergedTableStyle = (0, _simpleAssign2.default)(styles.root, style);
  172. var headerTable = void 0;
  173. var footerTable = void 0;
  174. var inlineHeader = void 0;
  175. var inlineFooter = void 0;
  176. if (fixedHeader) {
  177. headerTable = _react2.default.createElement(
  178. 'div',
  179. { style: prepareStyles((0, _simpleAssign2.default)({}, headerStyle)) },
  180. _react2.default.createElement(
  181. 'table',
  182. { className: className, style: mergedTableStyle },
  183. tHead
  184. )
  185. );
  186. } else {
  187. inlineHeader = tHead;
  188. }
  189. if (tFoot !== undefined) {
  190. if (fixedFooter) {
  191. footerTable = _react2.default.createElement(
  192. 'div',
  193. { style: prepareStyles((0, _simpleAssign2.default)({}, footerStyle)) },
  194. _react2.default.createElement(
  195. 'table',
  196. { className: className, style: prepareStyles(mergedTableStyle) },
  197. tFoot
  198. )
  199. );
  200. } else {
  201. inlineFooter = tFoot;
  202. }
  203. }
  204. return _react2.default.createElement(
  205. 'div',
  206. { style: prepareStyles((0, _simpleAssign2.default)(styles.tableWrapper, wrapperStyle)) },
  207. headerTable,
  208. _react2.default.createElement(
  209. 'div',
  210. { style: prepareStyles((0, _simpleAssign2.default)(styles.bodyTable, bodyStyle)), ref: 'tableDiv' },
  211. _react2.default.createElement(
  212. 'table',
  213. { className: className, style: mergedTableStyle, ref: 'tableBody' },
  214. inlineHeader,
  215. inlineFooter,
  216. tBody
  217. )
  218. ),
  219. footerTable
  220. );
  221. }
  222. }]);
  223. return Table;
  224. }(_react.Component);
  225. Table.defaultProps = {
  226. allRowsSelected: false,
  227. fixedFooter: true,
  228. fixedHeader: true,
  229. height: 'inherit',
  230. multiSelectable: false,
  231. selectable: true
  232. };
  233. Table.contextTypes = {
  234. muiTheme: _propTypes2.default.object.isRequired
  235. };
  236. Table.propTypes = process.env.NODE_ENV !== "production" ? {
  237. /**
  238. * Set to true to indicate that all rows should be selected.
  239. */
  240. allRowsSelected: _propTypes2.default.bool,
  241. /**
  242. * Override the inline-styles of the body's table element.
  243. */
  244. bodyStyle: _propTypes2.default.object,
  245. /**
  246. * Children passed to table.
  247. */
  248. children: _propTypes2.default.node,
  249. /**
  250. * The css class name of the root element.
  251. */
  252. className: _propTypes2.default.string,
  253. /**
  254. * If true, the footer will appear fixed below the table.
  255. * The default value is true.
  256. */
  257. fixedFooter: _propTypes2.default.bool,
  258. /**
  259. * If true, the header will appear fixed above the table.
  260. * The default value is true.
  261. */
  262. fixedHeader: _propTypes2.default.bool,
  263. /**
  264. * Override the inline-styles of the footer's table element.
  265. */
  266. footerStyle: _propTypes2.default.object,
  267. /**
  268. * Override the inline-styles of the header's table element.
  269. */
  270. headerStyle: _propTypes2.default.object,
  271. /**
  272. * The height of the table.
  273. */
  274. height: _propTypes2.default.string,
  275. /**
  276. * If true, multiple table rows can be selected.
  277. * CTRL/CMD+Click and SHIFT+Click are valid actions.
  278. * The default value is false.
  279. */
  280. multiSelectable: _propTypes2.default.bool,
  281. /**
  282. * Called when a row cell is clicked.
  283. * rowNumber is the row number and columnId is
  284. * the column number or the column key.
  285. */
  286. onCellClick: _propTypes2.default.func,
  287. /**
  288. * Called when a table cell is hovered.
  289. * rowNumber is the row number of the hovered row
  290. * and columnId is the column number or the column key of the cell.
  291. */
  292. onCellHover: _propTypes2.default.func,
  293. /**
  294. * Called when a table cell is no longer hovered.
  295. * rowNumber is the row number of the row and columnId
  296. * is the column number or the column key of the cell.
  297. */
  298. onCellHoverExit: _propTypes2.default.func,
  299. /**
  300. * Called when a table row is hovered.
  301. * rowNumber is the row number of the hovered row.
  302. */
  303. onRowHover: _propTypes2.default.func,
  304. /**
  305. * Called when a table row is no longer hovered.
  306. * rowNumber is the row number of the row that is no longer hovered.
  307. */
  308. onRowHoverExit: _propTypes2.default.func,
  309. /**
  310. * Called when a row is selected.
  311. * selectedRows is an array of all row selections.
  312. * IF all rows have been selected, the string "all"
  313. * will be returned instead to indicate that all rows have been selected.
  314. */
  315. onRowSelection: _propTypes2.default.func,
  316. /**
  317. * If true, table rows can be selected.
  318. * If multiple row selection is desired, enable multiSelectable.
  319. * The default value is true.
  320. */
  321. selectable: _propTypes2.default.bool,
  322. /**
  323. * Override the inline-styles of the root element.
  324. */
  325. style: _propTypes2.default.object,
  326. /**
  327. * Override the inline-styles of the table's wrapper element.
  328. */
  329. wrapperStyle: _propTypes2.default.object
  330. } : {};
  331. exports.default = Table;