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
304 lines (276 loc) • 11.2 kB
JavaScript
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; };
/**
* Created by sarunathan.s
*/
import React from 'react';
import _ from 'lodash';
import Icon from '../StyleComponents/icon';
import { SecondaryBtn } from '../Fields';
import { Table, TheadCell, TbodyCell, GridDetail, GridContainer, DetailHeader, DetailContent, NoDataTr, Loader } from './style.js';
import { colors } from '../colorCodes';
const loaderMinWidth = 60;
const loaderMaxWidth = 110;
class Grid extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedCheckBox: {},
showDetails: false,
detailsLeftPx: null,
selectedId: ""
};
}
componentDidMount() {
if (this.state.detailsLeftPx == null) {
this.setState({
detailsLeftPx: this.computeDetailLeft()
});
}
}
componentWillReceiveProps(nextProps) {
this.props.selectRow && this.resetSelectedHandler(nextProps.data); // When data changes if the new id is not in render remove from selected array
if (!_.isEqual(this.props.data, nextProps.data)) {
this.disableDetailsView();
}
}
componentDidUpdate(prevProps, prevState) {
if (!_.isEqual(prevState.selectedCheckBox, this.state.selectedCheckBox) && this.props.checkBoxOnchange) {
this.props.checkBoxOnchange(Object.keys(this.state.selectedCheckBox));
}
}
getDataUniqueIds(data) {
return data.reduce((arr, obj) => {
arr[_.get(obj, this.props.id)] = 'selected';
return arr;
}, {});
}
sortableColumn(v, k) {
if (this.props.sortableColumn && this.props.sortableColumn.indexOf(v.name) !== -1) {
let icon;
if (this.state.sortApplied && this.state.sortApplied[v.name] && this.state.sortApplied[v.name] == "ascending") {
icon = React.createElement(Icon, { className: 'fa fa-sort-asc clickable', width: '15px', height: '15px' });
} else if (this.state.sortApplied && this.state.sortApplied[v.name] && this.state.sortApplied[v.name] == "descending") {
icon = React.createElement(Icon, { className: 'fa fa-sort-desc clickable', width: '15px', height: '15px' });
} else {
icon = React.createElement(Icon, { className: 'fa fa-sort clickable', width: '15px', height: '15px' });
}
return React.createElement(
TheadCell,
{ key: k, className: 'clickable', onClick: this.sortHandler.bind(this, v.name) },
v.name,
icon
);
}
return React.createElement(
TheadCell,
{ key: k },
v.name
);
}
sortHandler(key) {
this.setState(state => {
const sortApplied = {};
if (state.sortApplied && !state.sortApplied[key]) {
sortApplied[key] = 'descending';
this.props.sortOnchange && this.props.sortOnchange(sortApplied);
return {
sortApplied
};
}
if (state.sortApplied && state.sortApplied[key] == 'ascending') {
sortApplied[key] = 'descending';
} else {
sortApplied[key] = 'ascending';
}
this.props.sortOnchange && this.props.sortOnchange(sortApplied);
return {
sortApplied
};
});
}
resetSelectedHandler(data) {
const ids = this.getDataUniqueIds(data);
this.setState(prev => {
Object.keys(prev.selectedCheckBox).filter(id => !ids[id]).forEach(id => {
delete prev.selectedCheckBox[id];
});
return prev;
});
}
selectAllCheckbox(e) {
const isSelect = e.target.checked;
let ids = this.getDataUniqueIds(this.props.data);
this.tableRef.querySelectorAll('.child-checkbox').forEach(o => {
o.checked = e.target.checked;
});
this.setState(prev => {
if (!isSelect) ids = {}; // return empty ids to state on deselect;
return _extends({}, prev, {
selectedCheckBox: _extends({}, ids)
});
});
}
computeDetailLeft() {
const ths = this.tableRef.querySelectorAll('th');
let width = 0;
let colToShow = this.props.colToShow || 1;
if (this.props.selectRow) ++colToShow;
[...Array(colToShow)].forEach((v, i) => {
width += ths[i].offsetWidth;
});
width = this.tableRef.offsetWidth / 2 - width;
return `${width}px`;
}
enableDetailsView(id) {
this.setState({
showDetails: true,
selectedId: id
});
}
disableDetailsView() {
this.setState({
showDetails: false,
selectedId: ""
});
}
chechBoxClickHandler(id) {
this.setState(prev => {
const prevState = _.cloneDeep(prev);
if (prevState.selectedCheckBox[id]) {
delete prevState.selectedCheckBox[id];
} else {
prevState.selectedCheckBox[id] = 'selected';
}
return prevState;
});
}
renderTableCell(obj, k, col, i) {
if ((_.get(obj, col.key) || !col.key) && this.props.enableDetailsView && col.clickable) {
return React.createElement(
TbodyCell,
{ key: i, className: 'clickable', onClick: this.enableDetailsView.bind(this, _.get(obj, col.key)) },
this.props.cellRenderer ? this.props.cellRenderer(_.get(obj, col.key), { row: k, column: i }) : _.get(obj, col.key)
);
}
if (_.get(obj, col.key) || !col.key) {
return React.createElement(
TbodyCell,
{ key: i },
this.props.cellRenderer ? this.props.cellRenderer(_.get(obj, col.key), { row: k, column: i }) : _.get(obj, col.key)
);
}
return React.createElement(
TbodyCell,
{ key: i },
this.renderLoader()
);
}
renderLoader() {
const width = Math.random() * (loaderMaxWidth - loaderMinWidth) + loaderMinWidth;
return React.createElement(Loader /*width={width+'px'}*/, null);
}
render() {
return React.createElement(
GridContainer,
{ left: this.state.detailsLeftPx },
React.createElement(
'div',
{
className: 'grid-container', style: { width: "200%" },
ref: el => {
this.tableRef = el;
}
},
React.createElement(
Table,
null,
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
this.props.selectRow && React.createElement(
TheadCell,
{ className: 'checkbox-td' },
React.createElement('input', {
type: 'checkbox',
onClick: this.selectAllCheckbox.bind(this)
})
),
this.props.column.map(this.sortableColumn.bind(this))
)
),
React.createElement(
'tbody',
null,
this.props.data.map((obj, k) => React.createElement(
'tr',
{
className: this.state.selectedId === _.get(obj, this.props.id) ? 'active' : '',
key: _.get(obj, this.props.id)
},
this.props.selectRow && React.createElement(
TbodyCell,
{ className: 'checkbox-td' },
React.createElement('input', {
className: 'child-checkbox',
type: 'checkbox',
onClick: this.chechBoxClickHandler.bind(this, _.get(obj, this.props.id))
})
),
this.props.column.map(this.renderTableCell.bind(this, obj, k))
)),
this.props.data.length === 0 && React.createElement(
NoDataTr,
null,
React.createElement(
'td',
{ colSpan: '5' },
'No data to display'
)
)
)
),
React.createElement(
GridDetail,
{
className: this.state.showDetails ? 'grid-detail' : ''
},
React.createElement(
DetailHeader,
null,
React.createElement(
SecondaryBtn,
{
cursor: 'pointer',
padding: '6px 10px',
textALign: 'left',
width: '151px',
height: '30px',
onClick: this.disableDetailsView.bind(this)
},
React.createElement(Icon, {
className: 'fa fa-angle-left clickable',
color: colors.brandBlue,
style: { fontSize: '15px' },
width: '10px',
height: '9px'
}),
'Back to dashboard'
),
this.props.detailViewHeader
),
React.createElement(
DetailContent,
null,
this.state.showDetails ? this.props.detailViewContent : ""
)
),
React.createElement('div', { style: { clear: "both" } })
)
);
}
}
export default Grid;
//# sourceMappingURL=index.js.map