@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
195 lines (170 loc) • 8.42 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactVirtualized = require('react-virtualized');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Table = function (_PureComponent) {
_inherits(Table, _PureComponent);
function Table() {
_classCallCheck(this, Table);
return _possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).apply(this, arguments));
}
_createClass(Table, [{
key: 'render',
value: function render() {
var _props = this.props,
schema = _props.schema,
items = _props.items,
indexColumn = _props.indexColumn,
indexColumnLabel = _props.indexColumnLabel,
disableHeader = _props.disableHeader,
_onRowClick = _props.onRowClick,
_onRowMouseOver = _props.onRowMouseOver,
_onRowMouseOut = _props.onRowMouseOut;
var properties = Object.keys(schema.properties);
// hydrate items with index when 'indexColumn' prop is true
var newItems = indexColumn ? items.map(function (item, index) {
return Object.assign({}, item, {
_reactVirtualizedIndex: index + 1
});
}) : items;
return _react2.default.createElement(
'div',
{ className: 'vh-50' },
_react2.default.createElement(
_reactVirtualized.AutoSizer,
null,
function (_ref) {
var width = _ref.width,
height = _ref.height;
return _react2.default.createElement(
_reactVirtualized.Table,
{
width: width,
height: height,
headerHeight: 40,
rowHeight: 50,
rowCount: newItems.length,
rowGetter: function rowGetter(_ref2) {
var index = _ref2.index;
return newItems[index];
},
className: 'flex flex-column',
headerClassName: 'b pv4',
disableHeader: disableHeader,
onRowClick: function onRowClick(_ref3) {
var event = _ref3.event,
index = _ref3.index,
rowData = _ref3.rowData;
_onRowClick({ event: event, index: index, rowData: rowData });
},
onRowMouseOver: function onRowMouseOver(_ref4) {
var event = _ref4.event,
index = _ref4.index,
rowData = _ref4.rowData;
_onRowMouseOver({ event: event, index: index, rowData: rowData });
},
onRowMouseOut: function onRowMouseOut(_ref5) {
var event = _ref5.event,
index = _ref5.index,
rowData = _ref5.rowData;
_onRowMouseOut({ event: event, index: index, rowData: rowData });
},
rowClassName: function rowClassName(_ref6) {
var index = _ref6.index;
return 'flex flex-row items-center pv4 ' + (index === -1 ? 'bt bb' : 'bb') + ' b--light-gray';
}
},
indexColumn ? _react2.default.createElement(_reactVirtualized.Column, {
headerRenderer: function headerRenderer() {
return _react2.default.createElement(
'span',
{ className: 'ph4' },
indexColumnLabel || 'Index'
);
},
cellRenderer: function cellRenderer(_ref7) {
var cellData = _ref7.cellData;
return _react2.default.createElement(
'span',
{ className: 'ph4' },
cellData
);
},
dataKey: '_reactVirtualizedIndex',
label: indexColumnLabel,
width: width / 10 // 10%
}) : null,
properties.map(function (key, index) {
var label = schema.properties[key].title;
var cellWidthPercent = schema.properties[key].width || 25;
var cellWidth = width * cellWidthPercent / 100;
var headerRenderer = schema.properties[key].headerRenderer;
var cellRenderer = schema.properties[key].cellRenderer;
return _react2.default.createElement(_reactVirtualized.Column, {
key: index,
headerRenderer: headerRenderer || function (_ref8) {
var label = _ref8.label;
return _react2.default.createElement(
'div',
{ className: 'truncate ph4' },
label
);
},
cellRenderer: cellRenderer || function (_ref9) {
var cellData = _ref9.cellData;
return _react2.default.createElement(
'div',
{ className: 'truncate ph4' },
cellData
);
},
dataKey: key,
label: label,
width: cellWidth
});
})
);
}
)
);
}
}]);
return Table;
}(_react.PureComponent);
Table.defaultProps = {
indexColumn: false,
indexColumnLabel: 'Index',
disableHeader: false,
onRowClick: function onRowClick() {},
onRowMouseOut: function onRowMouseOut() {},
onRowMouseOver: function onRowMouseOver() {}
};
Table.propTypes = {
/** Array of objects with data */
items: _propTypes2.default.array.isRequired,
/** Json Schema data model for the items (example: https://jsonschema.net/) for custom examples see code from custom components */
schema: _propTypes2.default.object.isRequired,
/** Should first column be row index */
indexColumn: _propTypes2.default.bool,
/** Row index column label */
indexColumnLabel: _propTypes2.default.string,
/** Do not render the table header (only the rows) */
disableHeader: _propTypes2.default.bool,
/** Callback invoked when a user clicks on a table row. ({ event: Event, index: number, rowData: any }): void */
onRowClick: _propTypes2.default.func,
/** Callback invoked when a user moves the mouse over a table row. ({ event: Event, index: number, rowData: any }): void */
onRowMouseOver: _propTypes2.default.func,
/** Callback invoked when the mouse leaves a table row. ({ event: Event, index: number, rowData: any }): void */
onRowMouseOut: _propTypes2.default.func
};
exports.default = Table;