react-smtc-ui-utils
Version:
react-smtc-ui-utils React component
930 lines (904 loc) • 33.5 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import { Checkbox, Icon, Table } from 'semantic-ui-react';
import PropTypes from "prop-types";
import { NoPaginationUserFooter, PaginationFooter, PaginationFooterSecondary } from "./PublicTableFooters";
import { getRandomNumber, isStringEmpty } from "../static/ObjectsUtils";
import _ from 'lodash';
import ResizeDetector from "../ReactResizeDetector";
import DefaultResponsiveTableBody from "./DefaultResponsiveTableBody";
//import update from "immutability-helper";
/**
*
* @author:RockyChen
*
* @abstract:
* Universal table element
*
* @style:
* 3.unstackable: PropTypes.bool,
* 4.celled: PropTypes.bool,
* 5.basic: PropTypes.string,//very
* 6.collapsing:
* 7.compact : a table may sometimes need to be more compact to make more rows visible at a time.
* 8.definition :A table may be formatted to emphasize a first column that defines a rows content.
* 9.inverted: A table's colors can be inverted.
* 10.fixed.bool: A table may sometimes need to be more padded for legibility.
* 11.singleLine: A table can specify that its cell contents should remain on a single line and not wrap.
* 12.sortable : A table may allow a user to sort contents by clicking on a table header.
* 13.stackable: A table can specify how it stacks table content responsively.
*
*
*
* @checkOptions:
* 1.checkOptions.showAllCheck=true // show "check all" button on the header, default = false;
* 2.checkOptions.checkOnSelect=true // unimplemented --- wait for spare time
* 3.checkOptions.checkedCallBackFunction = ()=>void(0)
*
* @pagination : boolean, if true, just show the pagination bar and re-calculate the data set
*
* @onRowClickFunc : call back function of click a row, give back the data of clicking row.
*/
var PublicTables = /*#__PURE__*/function (_React$Component) {
function PublicTables(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "onResize", function (width, height) {
_this.setState({
tableWidth: width,
tableHeight: height
});
});
_defineProperty(_this, "handlePageSizeChange", function (value) {
_this.setState({
pageSize: parseInt(value, 10)
});
});
// onPageChange
_defineProperty(_this, "handlePageClick", function (data) {
//console.log(data);
_this.setState({
currentPage: data
}, function () {
if (_this.props.onPageClickGetDataCallBack) {
_this.props.onPageClickGetDataCallBack(_this.TablePagination(_this.state.sortedData));
}
});
if (_this.props.onPageChangeCallBack) {
_this.props.onPageChangeCallBack(data);
}
});
/* check all button click
using given accessor
*/
_defineProperty(_this, "toggleCheckAll", function (accessor, dataSet) {
var _this$state = _this.state,
allChecked = _this$state.allChecked,
checkedIds = _this$state.checkedIds;
var notCheckableCondition = _this.props.notCheckableCondition;
//console.log(accessor)
_this.setState({
allChecked: !allChecked
});
//let currentPageList = dataSet;
//notCheckableCondition
if (!allChecked === true) {
for (var i = 0; i < dataSet.length; i++) {
if (notCheckableCondition) {
var notCheck = notCheckableCondition(dataSet[i][accessor], dataSet[i]);
if (notCheck) continue;
}
checkedIds.push(dataSet[i][accessor]);
}
_this.setState({
checkedIds: checkedIds
});
//if call back function is not undefined , call it
if (_this.props.checkedCallBackFunction) {
_this.props.checkedCallBackFunction(checkedIds);
}
} else {
_this.setState({
checkedIds: []
});
//if call back function is not undefined , call it
if (_this.props.checkedCallBackFunction) {
_this.props.checkedCallBackFunction([]);
}
}
});
var pageSize = getPageDefaultSize(props);
_this.state = {
data: props.data,
sortedData: props.data,
showAllCheck: props.showAllCheck === undefined ? false : props.showAllCheck,
pagination: props.pagination === undefined ? false : props.pagination,
pageSize: pageSize,
allChecked: false,
checkedIds: props.defaultCheckedIds === undefined ? [] : props.defaultCheckedIds,
currentPage: 1,
column: null,
direction: null,
key: getRandomNumber(1000000000),
bodyKey: getRandomNumber(1000000000),
tableWidth: -1,
tableHeight: -1
};
return _this;
}
_inheritsLoose(PublicTables, _React$Component);
var _proto = PublicTables.prototype;
_proto.componentDidMount = function componentDidMount() {
if (this.props.onPageClickGetDataCallBack) {
this.props.onPageClickGetDataCallBack(this.TablePagination(this.state.sortedData));
}
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
var _this$props = this.props,
data = _this$props.data,
defaultCheckedIds = _this$props.defaultCheckedIds,
fakePagination = _this$props.fakePagination,
currentPage = _this$props.currentPage;
if (data !== prevProps.data) {
this.setState({
data: data,
sortedData: data
});
if (fakePagination) {
// if is fake Pagination, means need to refresh the body of table
this.setState({
bodyKey: getRandomNumber(1000000000)
});
} else {
this.setState({
// otherwise need to refresh everything
key: getRandomNumber(1000000000)
});
}
}
if (defaultCheckedIds !== prevProps.defaultCheckedIds) {
this.setState({
checkedIds: defaultCheckedIds
});
}
if (currentPage !== prevProps.currentPage) {
this.setState({
currentPage: currentPage
});
}
// if sort data changed, and need the call back
if (this.state.sortedData !== prevState.sortedData) {
if (this.props.onPageClickGetDataCallBack) {
this.props.onPageClickGetDataCallBack(this.TablePagination(this.state.sortedData));
}
}
}
//modify the checked list
;
_proto.modifyCheckedArray = function modifyCheckedArray(id) {
//console.log(id)
var checkedIds = this.state.checkedIds;
var index = checkedIds.indexOf(id);
if (index < 0) {
checkedIds.push(id);
} else {
checkedIds.splice(index, 1);
}
this.setState({
checkedIds: checkedIds
});
//if call back function is not undefined , call it
if (this.props.checkedCallBackFunction) {
this.props.checkedCallBackFunction(checkedIds);
}
}
/*
* currentPage*pageSize is the beginning of a page
* (currentPage+1)*pageSize is the end of a page
*
* currentPage provided by semantic is beginning from 1
* but array index of javascript is beginning from 0
* that is why I use (currentPage-1)
*/;
_proto.TablePagination = function TablePagination(ParamArr) {
var _this$state2 = this.state,
currentPage = _this$state2.currentPage,
pageSize = _this$state2.pageSize;
var totalPage = Math.ceil((ParamArr === undefined ? 1 : ParamArr.length) / pageSize);
//in case total page is less than current page
var currentByTotal = totalPage < currentPage ? 1 : currentPage;
return ParamArr.slice((currentByTotal - 1) * pageSize, currentByTotal * pageSize);
};
//onRowSelectAndClick
_proto.onRowSelectCallBack = function onRowSelectCallBack(column) {
if (this.props.onRowSelectCallBack) {
this.props.onRowSelectCallBack(column);
}
};
_proto.onHeaderClickCallBack = function onHeaderClickCallBack(clickedColumn, sortable, _onHeaderClickCallBack, notSortableColumn) {
if (sortable && !notSortableColumn) {
// sort it anyway
this.handleSort(clickedColumn, sortable);
}
if (_onHeaderClickCallBack) {
// then we decide whether we have to use this callback
_onHeaderClickCallBack(clickedColumn);
}
};
_proto.handleSort = function handleSort(clickedColumn, sortable) {
if (sortable) {
var _this$state3 = this.state,
column = _this$state3.column,
sortedData = _this$state3.sortedData,
direction = _this$state3.direction;
if (column !== clickedColumn) {
this.setState({
column: clickedColumn,
sortedData: _.sortBy(sortedData, [clickedColumn]),
direction: 'ascending'
});
return;
}
this.setState({
sortedData: sortedData.reverse(),
direction: direction === 'ascending' ? 'descending' : 'ascending'
});
}
};
_proto.onCellSelected = function onCellSelected(elm, value, column) {
//console.log(elm.props.onCellSelectCallBack)
if (elm.props.onCellSelectCallBack) {
elm.props.onCellSelectCallBack(value, column);
}
};
_proto.render = function render() {
var _this2 = this;
var _this$state4 = this.state,
sortedData = _this$state4.sortedData,
pageSize = _this$state4.pageSize,
key = _this$state4.key,
allChecked = _this$state4.allChecked,
showAllCheck = _this$state4.showAllCheck,
pagination = _this$state4.pagination,
currentPage = _this$state4.currentPage,
direction = _this$state4.direction,
bodyKey = _this$state4.bodyKey,
tableWidth = _this$state4.tableWidth;
var colCount = 0; // calculate the total columns
var headerMap = []; //headerMap, check props
var hiddenHeaderMap = [];
var footerMap = [];
var dataSet = Object.assign([], sortedData); //always assign to a new Array to avoid pointer issue.
React.Children.forEach(this.props.children, function (column, i) {
//console.log(column, column.type.name);
// type should be PublicTableHeaders tableHeader, if cannot read element type , read default props
var tableElementType = column.props.tableElementType;
if (column.type.name === "PublicTableHeaders" || tableElementType === "PublicTableHeaders") {
/*
* TODO: customization filter function using loadash needed:
* give a dataSet as arg[], give a dataSet Back, that means can write
* customized filters such as :
* 1 using 'greater than' or 'less than',
* 2 filterText === colVal || something || something
*/
var _column$props = column.props,
accessor = _column$props.accessor,
filterContext = _column$props.filterContext,
isHidden = _column$props.isHidden;
//filter dataSet by accessor and filterContext
if (filterContext !== undefined && filterContext !== null && filterContext !== '') {
//console.log(filterContext)
if (_.isFunction(filterContext)) {
var returnArr = filterContext(dataSet);
if (_.isArray(returnArr)) {
dataSet = returnArr;
}
} else {
dataSet = filterDataByFilterContext(accessor, filterContext, dataSet);
}
}
//only push not hidden element
if (isHidden !== true) {
headerMap.push(column); // push unhidden columns in array for looping
colCount += 1; //calculate total unhidden columns
} else {
hiddenHeaderMap.push(column);
}
}
// type should be CustomizedFooter , if cannot read element type , read default props
if (column.type.name === "CustomizedFooter" || tableElementType === "CustomizedFooter") {
React.Children.forEach(column.props.children, function (foot, i) {
footerMap.push(foot);
});
}
});
var paginationProps = this.props.paginationProps;
//console.log(headerMap, footerMap);
// pagination footer if is false don't show it
var paginationFooter = /*#__PURE__*/React.createElement(Table.Row, null);
if (!_.includes([true, "primary", "secondary"], pagination) && footerMap.length > 0) {
paginationFooter = /*#__PURE__*/React.createElement(NoPaginationUserFooter, {
colCount: colCount,
footerMap: footerMap
});
}
var _this$props2 = this.props,
fakePagination = _this$props2.fakePagination,
fakeDataSum = _this$props2.fakeDataSum;
if (fakePagination) {
// fake pagination don't need to manipulate data inside of this table utils
//if need pagination or pagination type is primary,
//add new footer include pagination menu and calculate data set
if (pagination === true || pagination === "primary" || pagination === "secondary") {
paginationFooter = /*#__PURE__*/React.createElement(PaginationFooterSecondary, {
colCount: colCount,
dataCount: fakeDataSum,
pageSize: pageSize,
currentPage: currentPage,
handlePageClick: function handlePageClick(val) {
return _this2.handlePageClick(val);
},
footerMap: footerMap,
paginationProps: paginationProps
});
// dataSet = this.TablePagination(dataSet)
}
} else {
//if need pagination or pagination type is primary,
//add new footer include pagination menu and calculate data set
if (pagination === true || pagination === "primary") {
paginationFooter = /*#__PURE__*/React.createElement(PaginationFooter, {
colCount: colCount,
dataCount: dataSet.length,
pageSize: pageSize,
currentPage: currentPage,
handlePageClick: function handlePageClick(val) {
return _this2.handlePageClick(val);
},
onPageSizeChange: function onPageSizeChange(val) {
return _this2.handlePageSizeChange(val);
},
footerMap: footerMap,
paginationProps: paginationProps
});
//dataSet pagination, based on current page
dataSet = this.TablePagination(dataSet);
} else if (pagination === "secondary") {
paginationFooter = /*#__PURE__*/React.createElement(PaginationFooterSecondary, {
colCount: colCount,
dataCount: dataSet.length,
pageSize: pageSize,
currentPage: currentPage,
handlePageClick: function handlePageClick(val) {
return _this2.handlePageClick(val);
},
footerMap: footerMap,
paginationProps: paginationProps
});
dataSet = this.TablePagination(dataSet);
}
}
var _this$props3 = this.props,
selectable = _this$props3.selectable,
color = _this$props3.color,
unstackable = _this$props3.unstackable,
celled = _this$props3.celled,
basic = _this$props3.basic,
collapsing = _this$props3.collapsing,
compact = _this$props3.compact,
definition = _this$props3.definition,
inverted = _this$props3.inverted,
fixed = _this$props3.fixed,
padded = _this$props3.padded,
singleLine = _this$props3.singleLine,
sortable = _this$props3.sortable,
stackable = _this$props3.stackable,
verticalAlign = _this$props3.verticalAlign,
tableSize = _this$props3.tableSize,
attached = _this$props3.attached,
style = _this$props3.style,
columns = _this$props3.columns,
striped = _this$props3.striped,
showPaginationAtTopAndBottom = _this$props3.showPaginationAtTopAndBottom,
notCheckableCondition = _this$props3.notCheckableCondition,
hideHeading = _this$props3.hideHeading; // most common styles of semantic ui
return /*#__PURE__*/React.createElement(Table, {
key: key,
celled: celled,
attached: attached,
unstackable: unstackable,
selectable: selectable,
color: color,
basic: basic,
collapsing: collapsing,
compact: compact,
definition: definition,
inverted: inverted,
fixed: fixed,
padded: padded,
singleLine: singleLine,
sortable: true,
stackable: stackable,
verticalAlign: verticalAlign,
size: tableSize,
style: style,
columns: columns,
striped: striped
}, !hideHeading && /*#__PURE__*/React.createElement(Table.Header, null, showPaginationAtTopAndBottom ? /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.HeaderCell, {
colSpan: colCount
}, paginationFooter)) : null, /*#__PURE__*/React.createElement(Table.Row, null, headerMap.map(function (column, i) {
var _column$props2 = column.props,
accessor = _column$props2.accessor,
colAsCheckBox = _column$props2.colAsCheckBox,
textAlign = _column$props2.textAlign,
collapsing = _column$props2.collapsing,
customizeText = _column$props2.customizeText,
onHeaderClickCallBack = _column$props2.onHeaderClickCallBack,
notSortable = _column$props2.notSortable;
var header = column.props.header === undefined ? 'undefined' : column.props.header;
//TODO: structured table : const rowSpan = column.props.rowSpan;
// if customizeText is not none, call this function
if (customizeText) {
//call back function send header value and row object
header = customizeText(header, column);
}
/*
if and only if this column is shown as a check box and header shown as check all
return the header as a checked all
*/
if (showAllCheck === true && colAsCheckBox === true) {
return /*#__PURE__*/React.createElement(Table.HeaderCell, {
collapsing: true,
key: i
}, /*#__PURE__*/React.createElement(Checkbox, {
onChange: function onChange() {
return _this2.toggleCheckAll(accessor, dataSet);
},
checked: allChecked
}));
} else {
//if this column can be sorted
return /*#__PURE__*/React.createElement(Table.HeaderCell, {
key: i,
collapsing: collapsing,
textAlign: textAlign,
sorted: column === accessor ? direction : null,
onClick: function onClick() {
return _this2.onHeaderClickCallBack(accessor, sortable, onHeaderClickCallBack, notSortable);
}
}, header, " ", notSortable || !sortable ? null : /*#__PURE__*/React.createElement(Icon, {
name: "sort"
}));
}
}))), /*#__PURE__*/React.createElement(Table.Body, {
key: bodyKey
},
//first loop for rendering rows
dataSet.map(function (column, i) {
//console.log(i, column)
var checkedIds = _this2.state.checkedIds;
var _this2$props = _this2.props,
rowHighLightFunction = _this2$props.rowHighLightFunction,
rowRenderCallback = _this2$props.rowRenderCallback,
defaultResponsiveParam = _this2$props.defaultResponsiveParam;
var isHighLight = false;
var newRow = "";
if (rowHighLightFunction) {
isHighLight = rowHighLightFunction(column);
}
/*
* if we set a default responsive param
*
* return a <Item/> instead of table
*/
if (!_.isEmpty(defaultResponsiveParam)) {
var widthThreshold = defaultResponsiveParam.widthThreshold;
var minimumWidth = isStringEmpty(widthThreshold) ? 480 : _.parseInt(widthThreshold, 10);
// if the size less than equals the threshold
if (tableWidth <= minimumWidth) {
return /*#__PURE__*/React.createElement(Table.Row, {
key: i
}, /*#__PURE__*/React.createElement(Table.Cell, {
colSpan: colCount
}, /*#__PURE__*/React.createElement(DefaultResponsiveTableBody, _extends({}, _this2.props, {
headerMap: headerMap,
dataSet: column,
hiddenHeaderMap: hiddenHeaderMap,
checkedIds: checkedIds,
modifyCheckedArray: function modifyCheckedArray(val) {
return _this2.modifyCheckedArray(val);
}
}))));
}
}
/*
* the call back is the whole row.
*
* if have not return anything, when do not re-render this
*
* if have something, we re-render
*
*/
if (rowRenderCallback) {
newRow = rowRenderCallback(column, i);
if (!isStringEmpty(newRow)) {
return newRow;
}
}
return /*#__PURE__*/React.createElement(Table.Row, {
key: i,
onClick: function onClick() {
return _this2.onRowSelectCallBack(column);
},
positive: isHighLight
},
//second loop for rendering cells
headerMap.map(function (elm, j) {
var _elm$props = elm.props,
checkBoxStyle = _elm$props.checkBoxStyle,
selectable = _elm$props.selectable,
accessor = _elm$props.accessor,
columnAlign = _elm$props.columnAlign,
colAsCheckBox = _elm$props.colAsCheckBox,
columnFormat = _elm$props.columnFormat,
filterContext = _elm$props.filterContext,
highLightFilterText = _elm$props.highLightFilterText;
//get value by accessor
var value = column[accessor] === undefined ? '' : column[accessor];
// if formatter is not none, call this function
if (columnFormat) {
//call back function send cell value and row object
value = columnFormat(value, column);
} else {
if (highLightFilterText) {
value = getHighlightedText(value, filterContext);
}
}
//if not check-able should display nothing
if (notCheckableCondition && colAsCheckBox) {
var notCheck = notCheckableCondition(value, column);
if (notCheck === true) {
return /*#__PURE__*/React.createElement(Table.Cell, {
collapsing: true,
key: j,
textAlign: columnAlign,
selectable: false
});
}
}
// if this column is set to be a check box ,then return a check box
if (colAsCheckBox === true) {
return /*#__PURE__*/React.createElement(Table.Cell, {
collapsing: true,
key: j,
textAlign: columnAlign,
selectable: false
}, /*#__PURE__*/React.createElement(ColumnCheckBox, {
id: value,
checkBoxStyle: checkBoxStyle,
checked: _.includes(checkedIds, value),
getCallBackId: function getCallBackId(val) {
return _this2.modifyCheckedArray(val);
}
}));
} else {
// if it is not a check box column, return as a simple column
return /*#__PURE__*/React.createElement(Table.Cell, {
key: j,
textAlign: columnAlign,
selectable: selectable,
onClick: function onClick() {
return _this2.onCellSelected(elm, value, column);
}
}, value);
}
}));
})), /*#__PURE__*/React.createElement(Table.Footer, null, paginationFooter), /*#__PURE__*/React.createElement(Table.Footer, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, {
colSpan: colCount
}, /*#__PURE__*/React.createElement(ResizeDetector, {
onResizeCallback: this.onResize
})))));
};
return PublicTables;
}(React.Component);
export { PublicTables as default };
PublicTables.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* data format is JSON array
* [ {name:"Tom"},{age:16} ]
*/
data: PropTypes.array.isRequired,
/**
* first header cell shown as a select all check box
*/
showAllCheck: PropTypes.bool,
/**
* pass the value of internal onCheckBoxChange
* <PublicTables data={dummy_data} checkedCallBackFunction={(val) => console.log(val)}>
*/
checkedCallBackFunction: PropTypes.func,
/**
* pass the selected row data
*/
onRowSelectCallBack: PropTypes.func,
/**
* 2 different type of pagination bar
*/
pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(["primary", "secondary", "tertiary"])]),
/**
* currently only support hard-coded : 10 ,20 , 50
*/
pageSize: PropTypes.PropTypes.number,
/**
* should combine with function onRowSelectCallBack
* <PublicTables selectable onRowSelectCallBack={(row)=>console.log(row)}>
*/
selectable: PropTypes.bool,
/**
* semantic-ui builtin prop
* using Lodash sort method.
*/
sortable: PropTypes.bool,
/**
* semantic-ui builtin prop
* red,orange,yellow,olive,green,teal,blue,violet,purple,pink,brown,grey,black
*/
color: PropTypes.PropTypes.oneOf(["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "black"]),
/**
* semantic-ui builtin prop
* small,large
*/
tableSize: PropTypes.PropTypes.oneOf(["small", "large"]),
/**
* semantic-ui builtin prop
*/
unstackable: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
celled: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
basic: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
//"very"
/**
* semantic-ui builtin prop
*/
collapsing: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
compact: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
//"very"
/**
* semantic-ui builtin prop
*/
definition: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
inverted: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
attached: PropTypes.PropTypes.oneOf(["top", "bottom"]),
fixed: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
padded: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/**
* semantic-ui builtin prop
*/
singleLine: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
stackable: PropTypes.bool,
/**
* semantic-ui builtin prop
*/
verticalAlign: PropTypes.oneOf(['bottom', 'middle', 'top']),
/**
* not done yet
*/
structured: PropTypes.bool,
/**
* checkBox default values , should be an array
*/
defaultCheckedIds: PropTypes.array,
/**
* set particular as green color to highlight
* param is the data of each row
*
* rowHighLightFunction(rowData){
* return row.id === "some id"
* }
* return true, then set the row to green color
*/
rowHighLightFunction: PropTypes.func,
/**
* this will disable pagination,
* so we can use our database pagination
* to saving time
*/
fakePagination: PropTypes.bool,
/**
* pagination call back function
*/
onPageChangeCallBack: PropTypes.func,
/**
* fake pagination need a data sum count
*/
fakeDataSum: PropTypes.number,
/**
* sometimes, we have to re-render the row
*/
rowRenderCallback: PropTypes.func,
/**
* we can set responsive param to re-render the table body
*/
defaultResponsiveParam: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
/**
* we can add props of pagination bar
*/
paginationProps: PropTypes.object,
striped: PropTypes.any,
showPaginationAtTopAndBottom: PropTypes.bool,
// return the data of current page, when clicking the page button
onPageClickGetDataCallBack: PropTypes.func,
notCheckableCondition: PropTypes.func,
hideHeading: PropTypes.bool
} : {};
export var PublicTableFooter = /*#__PURE__*/function (_React$Component2) {
function PublicTableFooter(props) {
var _this3;
_this3 = _React$Component2.call(this, props) || this;
_this3.state = {};
return _this3;
}
_inheritsLoose(PublicTableFooter, _React$Component2);
var _proto2 = PublicTableFooter.prototype;
_proto2.render = function render() {
var _this$props4 = this.props,
header = _this$props4.header,
accessor = _this$props4.accessor,
textAlign = _this$props4.textAlign,
collapsing = _this$props4.collapsing;
return /*#__PURE__*/React.createElement("div", {
header: header,
accessor: accessor,
textAlign: textAlign,
collapsing: collapsing
});
};
return PublicTableFooter;
}(React.Component);
PublicTableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
header: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
} : {};
export var ColumnCheckBox = /*#__PURE__*/function (_React$Component3) {
function ColumnCheckBox(props) {
var _this4;
_this4 = _React$Component3.call(this, props) || this;
_defineProperty(_this4, "toggle", function () {
var _this4$state = _this4.state,
checked = _this4$state.checked,
id = _this4$state.id;
_this4.setState({
checked: !checked
});
_this4.props.getCallBackId(id);
});
_this4.state = {
checked: props.checked,
checkBoxStyle: props.checkBoxStyle,
id: props.id
};
return _this4;
}
_inheritsLoose(ColumnCheckBox, _React$Component3);
var _proto3 = ColumnCheckBox.prototype;
_proto3.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
//console.log(nextProps)
var _this$props5 = this.props,
id = _this$props5.id,
checked = _this$props5.checked;
if (id !== prevProps.id) {
this.setState({
id: id
});
}
if (checked !== prevProps.checked) {
this.setState({
checked: checked
});
}
};
_proto3.render = function render() {
var _this$state5 = this.state,
checked = _this$state5.checked,
checkBoxStyle = _this$state5.checkBoxStyle;
//styles¬:[slider,toggle,radio];
var isSlider = false;
var isRadio = false;
var isToggle = false;
//set check box style.
if (checkBoxStyle !== undefined) {
switch (checkBoxStyle) {
case "slider":
isSlider = true;
break;
case "radio":
isRadio = true;
break;
case "toggle":
isToggle = true;
break;
default:
isSlider = false;
isRadio = false;
isToggle = false;
break;
}
}
return /*#__PURE__*/React.createElement(Checkbox, {
slider: isSlider,
radio: isRadio,
toggle: isToggle,
onChange: this.toggle,
checked: checked
});
};
return ColumnCheckBox;
}(React.Component);
//filter the column by given params
ColumnCheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
id: PropTypes.any,
checked: PropTypes.bool.isRequired,
getCallBackId: PropTypes.func.isRequired,
checkBoxStyle: PropTypes.string
} : {};
function filterDataByFilterContext(columnAccessor, filterContext, dataSet) {
return _.filter(dataSet, function (ele) {
//always using toSting() to simplify the compare
var origin = _.lowerCase(_.toString(ele[columnAccessor])); //"string" === typeof ele[columnAccessor] ? ele[columnAccessor] : ele[columnAccessor].toString();
var filter = _.lowerCase(_.toString(filterContext)); //"string" === typeof filterContext ? filterContext : filterContext.toString();
//console.log(origin,filter)
return _.includes(origin, filter); //origin.includes(filter);
});
}
function getPageDefaultSize(props) {
var pagination = props.pagination,
pageSize = props.pageSize;
if (pagination === "secondary") {
return isStringEmpty(pageSize) ? 20 : pageSize;
} else {
return isStringEmpty(pageSize) || ![10, 20, 50].includes(props.pageSize) ? 20 : props.pageSize;
}
}
/**
* highlight search text
*
* @param text
* @param highlight
* @returns {*}
*/
function getHighlightedText(text, highlight) {
var parts = _.split(text, new RegExp("(" + highlight + ")", 'gi'));
return /*#__PURE__*/React.createElement("span", null, parts.map(function (part, i) {
return /*#__PURE__*/React.createElement("span", {
key: i,
style: _.toLower(part) === _.toLower(highlight) ? {
fontWeight: 'bold',
backgroundColor: "yellow"
} : {}
}, part);
}));
}