fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
538 lines (472 loc) • 22.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _get = require('lodash/get');
var _get2 = _interopRequireDefault(_get);
var _isEqual = require('lodash/isEqual');
var _isEqual2 = _interopRequireDefault(_isEqual);
var _cloneDeep = require('lodash/cloneDeep');
var _cloneDeep2 = _interopRequireDefault(_cloneDeep);
var _Buttons = require('../Buttons');
var _SelectableList = require('../SelectableList');
var _SelectableList2 = _interopRequireDefault(_SelectableList);
var _styles = require('./styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
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 Grid = function (_React$Component) {
_inherits(Grid, _React$Component);
_createClass(Grid, null, [{
key: 'getColumnCount',
value: function getColumnCount(props) {
if (props.selectRow) {
return props.column.length + 1;
}
return props.column.length;
}
}]);
function Grid(props) {
_classCallCheck(this, Grid);
var _this = _possibleConstructorReturn(this, (Grid.__proto__ || Object.getPrototypeOf(Grid)).call(this, props));
_this.onSelectAllCheck = function (e, isCurrentPageSelected, isAllPagesSelected) {
var isSelect = isCurrentPageSelected;
if (e) {
isSelect = e.target.checked;
e.stopPropagation();
}
var ids = isSelect ? _this.getDataUniqueIds(_this.props.data) : {};
_this.setState({
selectedCheckBox: _extends({}, ids),
selectAllChecked: isSelect,
isAllPagesSelected: isAllPagesSelected
});
};
_this.onRowSelectorSelect = function (value) {
switch (value) {
case Grid.defaults.currentPageId:
_this.onSelectAllCheck(null, true, false);
break;
case Grid.defaults.allPagesId:
_this.onSelectAllCheck(null, true, true);
break;
default:
break;
}
};
_this.disableDetailsView = function () {
var gridStateInfo = {
showDetails: false,
selectedId: ''
};
_this.setState(gridStateInfo);
_this.props.onDetailsViewChange(gridStateInfo);
};
_this.toggleRowSelector = function () {
_this.setState(function (prevState) {
return {
isRowSelectorOpen: !prevState.isRowSelectorOpen
};
});
};
_this.onGridBodyRowHover = function (rowIdValue) {
return _this.props.onRowHover && _this.props.onRowHover(rowIdValue);
};
_this.state = {
isRowSelectorOpen: false,
isAllPagesSelected: false,
selectedCheckBox: {},
selectAllChecked: false,
showDetails: false,
detailsLeftPx: null,
selectedId: '',
sortApplied: {
sortColumn: '',
sortOrder: ''
},
columnLength: Grid.getColumnCount(_this.props)
};
return _this;
}
_createClass(Grid, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
if (this.state.detailsLeftPx == null) {
this.setState({
detailsLeftPx: this.computeDetailLeft()
});
}
this.intervalId = setInterval(function () {
var gridDetailHeaderDimensions = _this2.gridDetailHeaderRef.getBoundingClientRect();
var gridDetailContentDimensions = _this2.gridDetailContentRef.getBoundingClientRect();
_this2.tableRef.style['min-height'] = gridDetailHeaderDimensions.height + gridDetailContentDimensions.height + 'px';
}, 300);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
columnLength: Grid.getColumnCount(nextProps)
});
if (!(0, _isEqual2.default)(this.props.data, nextProps.data)) {
this.disableDetailsView();
}
if (nextProps.isClearSelection) {
this.setState({
selectedCheckBox: {},
selectAllChecked: false,
isAllPagesSelected: false
});
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
var leftDataPx = this.computeDetailLeft();
var isValueChanged = !(0, _isEqual2.default)(prevState.selectedCheckBox, this.state.selectedCheckBox) || prevState.isAllPagesSelected !== this.state.isAllPagesSelected;
if (isValueChanged && this.props.checkBoxOnchange) {
if (this.state.isAllPagesSelected) {
this.props.checkBoxOnchange(this.state.isAllPagesSelected);
} else {
this.props.checkBoxOnchange(Object.keys(this.state.selectedCheckBox));
}
}
if (this.state.detailsLeftPx !== leftDataPx) {
this.setState({
detailsLeftPx: leftDataPx
});
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
}
}, {
key: 'getDataUniqueIds',
value: function getDataUniqueIds(data) {
var _this3 = this;
return data.reduce(function (arr, obj) {
arr[(0, _get2.default)(obj, _this3.props.id)] = 'selected';
return arr;
}, {});
}
}, {
key: 'sortableColumn',
value: function sortableColumn(v, k) {
var TheadCellComp = v.highlight ? _styles.HighlightedTheadCell : _styles.TheadCell;
if (v.sortable) {
var icon = void 0;
if (this.state.sortApplied.sortColumn === v.id && this.state.sortApplied.sortOrder === 'ASC') {
icon = _react2.default.createElement(_styles.StyledIcon, { className: 'fa fa-sort-asc' });
} else if (this.state.sortApplied.sortColumn === v.id && this.state.sortApplied.sortOrder === 'DESC') {
icon = _react2.default.createElement(_styles.StyledIcon, { className: 'fa fa-sort-desc' });
} else {
icon = _react2.default.createElement(_styles.StyledIcon, { className: 'fa fa-sort' });
}
return _react2.default.createElement(
TheadCellComp,
{
key: k,
width: v.width,
className: 'clickable',
onClick: this.sortHandler.bind(this, v.id)
},
_react2.default.createElement(
_styles.TheadCellContentWrapper,
{ textAlign: v.textAlignment },
v.name,
icon
)
);
}
return _react2.default.createElement(
TheadCellComp,
{ key: k, width: v.width },
_react2.default.createElement(
_styles.TheadCellContentWrapper,
{ textAlign: v.textAlignment },
v.name
)
);
}
}, {
key: 'sortHandler',
value: function sortHandler(key) {
var _this4 = this;
this.setState(function (state) {
var sortApplied = {
sortColumn: key,
sortOrder: 'DESC'
};
if (state.sortApplied.sortColumn === key && state.sortApplied.sortOrder === 'DESC') {
sortApplied.sortOrder = 'ASC';
}
if (_this4.props.sortOnchange) {
_this4.props.sortOnchange(sortApplied);
}
return {
sortApplied: sortApplied
};
});
}
}, {
key: 'computeDetailLeft',
value: function computeDetailLeft() {
var ths = this.tableRef.querySelectorAll('th');
var width = 0;
var colToShow = this.props.colToShow || 1;
if (this.props.selectRow) ++colToShow;
[].concat(_toConsumableArray(Array(colToShow))).forEach(function (v, i) {
width += ths[i].offsetWidth;
});
width = this.tableRef.offsetWidth - width;
return width + 'px';
}
}, {
key: 'enableDetailsView',
value: function enableDetailsView(id, obj) {
var gridStateInfo = {
showDetails: true,
selectedId: id
};
this.setState(gridStateInfo);
this.props.onDetailsViewChange(gridStateInfo, obj);
}
}, {
key: 'checkBoxClickHandler',
value: function checkBoxClickHandler(id) {
this.setState(function (prev) {
var prevState = (0, _cloneDeep2.default)(prev);
prevState.selectAllChecked = false;
prevState.isAllPagesSelected = false;
if (prevState.selectedCheckBox[id]) {
delete prevState.selectedCheckBox[id];
} else {
prevState.selectedCheckBox[id] = 'checked';
}
return prevState;
});
}
}, {
key: 'getDetailsStatus',
value: function getDetailsStatus() {
if (typeof this.props.showDetails !== 'undefined') {
return this.props.showDetails;
}
return this.state.showDetails;
}
}, {
key: 'renderTableCell',
value: function renderTableCell(obj, k, col, i) {
var TbodyCellComp = col.highlight ? _styles.HighlightedTbodyCell : _styles.TbodyCell;
var renderCellValue = function renderCellValue(obj, row, column, columnData, cellRenderer) {
if (!columnData.key) {
return cellRenderer ? cellRenderer(obj, { row: row, column: column }, columnData) : JSON.stringify(obj);
}
var value = (0, _get2.default)(obj, columnData.key);
return cellRenderer ? cellRenderer(value, { row: row, column: column }, columnData) : value;
};
if (((0, _get2.default)(obj, col.key) || !col.key) && this.props.enableDetailsView && col.clickable) {
return _react2.default.createElement(
TbodyCellComp,
{
key: i,
className: 'clickable',
onClick: this.enableDetailsView.bind(this, (0, _get2.default)(obj, this.props.id), obj)
},
renderCellValue(obj, k, i, col, this.props.cellRenderer)
);
}
if ((0, _get2.default)(obj, col.key) || (0, _get2.default)(obj, col.key) === 0 || !col.key) {
return _react2.default.createElement(
TbodyCellComp,
{ key: i },
renderCellValue(obj, k, i, col, this.props.cellRenderer)
);
}
return _react2.default.createElement(
TbodyCellComp,
{ key: i },
_react2.default.createElement(_styles.Loader, null)
);
}
}, {
key: 'getDetailHeaderContent',
value: function getDetailHeaderContent() {
if (this.props.detailViewHeader) {
return this.props.detailViewHeader;
}
return _react2.default.createElement(
_styles.DetailHeaderContentWrapper,
null,
_react2.default.createElement(
_Buttons.SecondaryBtn,
{ onClick: this.disableDetailsView },
_react2.default.createElement(_styles.BackButtonStyledIcon, { className: 'fa fa-angle-left' }),
'Back to dashboard'
),
this.props.detailViewHeaderActions
);
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
return _react2.default.createElement(
_styles.GridContainer,
{ className: this.getDetailsStatus() ? 'visible' : '' },
_react2.default.createElement(
'div',
{
ref: function ref(el) {
_this5.tableRef = el;
}
},
_react2.default.createElement(
_styles.Table,
null,
_react2.default.createElement(
'thead',
null,
_react2.default.createElement(
'tr',
null,
this.props.selectRow && _react2.default.createElement(
_styles.TheadCheckboxCell,
{
onClick: this.toggleRowSelector
},
_react2.default.createElement('input', {
type: 'checkbox',
checked: this.state.selectAllChecked,
onClick: this.onSelectAllCheck
}),
this.props.isSelectAllPagesEnabled && _react2.default.createElement(_styles.SelectAllStyledIcon, { className: 'fa fa-sort-desc' }),
this.state.isRowSelectorOpen && _react2.default.createElement(
_styles.RowSelector,
null,
_react2.default.createElement(_SelectableList2.default, {
listData: Grid.defaults.rowSelectorMeta,
onChange: this.onRowSelectorSelect
})
)
),
this.props.column.map(this.sortableColumn.bind(this))
)
),
_react2.default.createElement(
'tbody',
{
onMouseLeave: function onMouseLeave() {
return _this5.onGridBodyRowHover(null);
}
},
this.props.data.map(function (obj, k) {
var rowIdValue = (0, _get2.default)(obj, _this5.props.id);
return _react2.default.createElement(
_styles.TableBodyTR,
{
className: _this5.state.selectedId === rowIdValue ? 'active' : '',
key: rowIdValue,
onMouseEnter: function onMouseEnter() {
return _this5.onGridBodyRowHover(rowIdValue);
}
},
_this5.props.selectRow && _react2.default.createElement(
_styles.TbodyCheckboxCell,
null,
_react2.default.createElement('input', {
checked: !!_this5.state.selectedCheckBox[(0, _get2.default)(obj, _this5.props.id)],
type: 'checkbox',
onClick: _this5.checkBoxClickHandler.bind(_this5, (0, _get2.default)(obj, _this5.props.id))
})
),
_this5.props.column.map(_this5.renderTableCell.bind(_this5, obj, k))
);
}),
this.props.data.length === 0 && _react2.default.createElement(
_styles.NoDataTr,
null,
_react2.default.createElement(
'td',
{ colSpan: this.state.columnLength },
this.props.noDataMessage
)
)
)
),
_react2.default.createElement(
_styles.GridDetailHider,
{
left: this.state.detailsLeftPx,
className: this.getDetailsStatus() ? 'visible' : ''
},
_react2.default.createElement(
_styles.GridDetail,
{
left: this.state.detailsLeftPx,
className: this.getDetailsStatus() ? 'visible' : ''
},
_react2.default.createElement(
_styles.DetailHeader,
{
innerRef: function innerRef(el) {
_this5.gridDetailHeaderRef = el;
}
},
this.getDetailHeaderContent()
),
_react2.default.createElement(
_styles.DetailContent,
{
innerRef: function innerRef(el) {
_this5.gridDetailContentRef = el;
}
},
this.getDetailsStatus() ? this.props.detailViewContent : ''
)
)
)
)
);
}
}]);
return Grid;
}(_react2.default.Component);
Grid.defaults = {
currentPageId: 'currentPage',
allPagesId: 'allPages',
rowSelectorMeta: [{
value: 'currentPage',
label: 'This Page'
}, {
value: 'allPages',
label: 'All Pages'
}]
};
Grid.propTypes = {
isSelectAllPagesEnabled: _propTypes.PropTypes.bool,
onDetailsViewChange: _propTypes.PropTypes.func,
onRowHover: _propTypes.PropTypes.func,
isClearSelection: _propTypes.PropTypes.bool,
noDataMessage: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node)])
};
Grid.defaultProps = {
onDetailsViewChange: function onDetailsViewChange() {},
onRowHover: function onRowHover() {},
isSelectAllPagesEnabled: false,
isClearSelection: false,
noDataMessage: 'No data to display'
};
exports.default = Grid;