選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

TableHeaderColumn.js 6.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _Tooltip = require('../internal/Tooltip');
  26. var _Tooltip2 = _interopRequireDefault(_Tooltip);
  27. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  28. function getStyles(props, context) {
  29. var tableHeaderColumn = context.muiTheme.tableHeaderColumn;
  30. return {
  31. root: {
  32. fontWeight: 'normal',
  33. fontSize: 12,
  34. paddingLeft: tableHeaderColumn.spacing,
  35. paddingRight: tableHeaderColumn.spacing,
  36. height: tableHeaderColumn.height,
  37. textAlign: 'left',
  38. whiteSpace: 'nowrap',
  39. textOverflow: 'ellipsis',
  40. color: tableHeaderColumn.textColor,
  41. position: 'relative'
  42. },
  43. tooltip: {
  44. boxSizing: 'border-box',
  45. marginTop: tableHeaderColumn.height / 2
  46. }
  47. };
  48. }
  49. var TableHeaderColumn = function (_Component) {
  50. (0, _inherits3.default)(TableHeaderColumn, _Component);
  51. function TableHeaderColumn() {
  52. var _ref;
  53. var _temp, _this, _ret;
  54. (0, _classCallCheck3.default)(this, TableHeaderColumn);
  55. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  56. args[_key] = arguments[_key];
  57. }
  58. return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableHeaderColumn.__proto__ || (0, _getPrototypeOf2.default)(TableHeaderColumn)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
  59. hovered: false
  60. }, _this.onMouseEnter = function () {
  61. if (_this.props.tooltip !== undefined) {
  62. _this.setState({ hovered: true });
  63. }
  64. }, _this.onMouseLeave = function () {
  65. if (_this.props.tooltip !== undefined) {
  66. _this.setState({ hovered: false });
  67. }
  68. }, _this.onClick = function (event) {
  69. if (_this.props.onClick) {
  70. _this.props.onClick(event, _this.props.columnNumber);
  71. }
  72. }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  73. }
  74. (0, _createClass3.default)(TableHeaderColumn, [{
  75. key: 'render',
  76. value: function render() {
  77. var _props = this.props,
  78. children = _props.children,
  79. className = _props.className,
  80. columnNumber = _props.columnNumber,
  81. hoverable = _props.hoverable,
  82. onClick = _props.onClick,
  83. onHover = _props.onHover,
  84. onHoverExit = _props.onHoverExit,
  85. style = _props.style,
  86. tooltip = _props.tooltip,
  87. tooltipStyle = _props.tooltipStyle,
  88. other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'columnNumber', 'hoverable', 'onClick', 'onHover', 'onHoverExit', 'style', 'tooltip', 'tooltipStyle']);
  89. var prepareStyles = this.context.muiTheme.prepareStyles;
  90. var styles = getStyles(this.props, this.context);
  91. var handlers = {
  92. onMouseEnter: this.onMouseEnter,
  93. onMouseLeave: this.onMouseLeave,
  94. onClick: this.onClick
  95. };
  96. var tooltipNode = void 0;
  97. if (tooltip !== undefined) {
  98. tooltipNode = _react2.default.createElement(_Tooltip2.default, {
  99. label: tooltip,
  100. show: this.state.hovered,
  101. style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyle)
  102. });
  103. }
  104. return _react2.default.createElement(
  105. 'th',
  106. (0, _extends3.default)({
  107. className: className,
  108. style: prepareStyles((0, _simpleAssign2.default)(styles.root, style))
  109. }, handlers, other),
  110. tooltipNode,
  111. children
  112. );
  113. }
  114. }]);
  115. return TableHeaderColumn;
  116. }(_react.Component);
  117. TableHeaderColumn.contextTypes = {
  118. muiTheme: _propTypes2.default.object.isRequired
  119. };
  120. TableHeaderColumn.propTypes = process.env.NODE_ENV !== "production" ? {
  121. children: _propTypes2.default.node,
  122. /**
  123. * The css class name of the root element.
  124. */
  125. className: _propTypes2.default.string,
  126. /**
  127. * Number to identify the header row. This property
  128. * is automatically populated when used with TableHeader.
  129. */
  130. columnNumber: _propTypes2.default.number,
  131. /**
  132. * @ignore
  133. * Not used here but we need to remove it from the root element.
  134. */
  135. hoverable: _propTypes2.default.bool,
  136. /** @ignore */
  137. onClick: _propTypes2.default.func,
  138. /**
  139. * @ignore
  140. * Not used here but we need to remove it from the root element.
  141. */
  142. onHover: _propTypes2.default.func,
  143. /**
  144. * @ignore
  145. * Not used here but we need to remove it from the root element.
  146. */
  147. onHoverExit: _propTypes2.default.func,
  148. /**
  149. * Override the inline-styles of the root element.
  150. */
  151. style: _propTypes2.default.object,
  152. /**
  153. * The string to supply to the tooltip. If not
  154. * string is supplied no tooltip will be shown.
  155. */
  156. tooltip: _propTypes2.default.string,
  157. /**
  158. * Additional styling that can be applied to the tooltip.
  159. */
  160. tooltipStyle: _propTypes2.default.object
  161. } : {};
  162. exports.default = TableHeaderColumn;