hooray-table
Version:
A table standard for hooray services base on ant design
407 lines (364 loc) • 13.6 kB
JavaScript
import React from 'react';
import { Menu, Dropdown, Space, Button, ConfigProvider, Row, Col, Table as Table$1, Input } from 'antd';
import classNames from 'classnames';
import styled from 'styled-components';
import get from 'lodash-es/get';
import thTH$1 from 'antd/lib/locale/th_TH';
import enUS$1 from 'antd/lib/locale/en_US';
import omitBy from 'lodash-es/omitBy';
import isNull from 'lodash-es/isNull';
import mapValues from 'lodash-es/mapValues';
function _extends() {
_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;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var _templateObject;
var _excluded = ["iconName", "size", "className"];
var FontAwesomeIcon = function FontAwesomeIcon(_ref) {
var iconName = _ref.iconName,
size = _ref.size,
className = _ref.className,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var iconClassName = "fa-icon fas fa-" + iconName + " ant-menu-item-icon";
return React.createElement(Icon, Object.assign({
className: classNames(iconClassName, className),
size: size
}, props));
};
var Icon = /*#__PURE__*/styled.i(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n font-size: ", ";\n"])), function (p) {
return p.size === 'sm' ? '12px' : p.size === 'lg' ? '24px' : '16px';
});
var DropDown = function DropDown(_ref) {
var type = _ref.type,
menuList = _ref.menuList,
onDropDownMenuClick = _ref.onDropDownMenuClick;
var existingMenuList = menuList.filter(function (item) {
return item.type !== 'primary';
});
var primaryMenu = menuList.find(function (item) {
return item.type === 'primary';
}) || existingMenuList[0];
var menu = React.createElement(Menu, {
onClick: onDropDownMenuClick
}, existingMenuList.map(function (item) {
return React.createElement(Menu.Item, {
key: item.key,
icon: item.icon ? React.createElement(FontAwesomeIcon, {
iconName: item.icon
}) : undefined
}, item.label);
}));
return React.createElement(Dropdown.Button, {
type: type,
onClick: primaryMenu == null ? void 0 : primaryMenu.onClick,
overlay: menu,
trigger: ['click']
}, primaryMenu == null ? void 0 : primaryMenu.label);
};
var selectedRow = "Selected";
var totalItem = {
plural: "Total items",
regular: "Total item"
};
var item = {
plural: "items",
regular: "item"
};
var filterDropDown = {
searchInputPlaceholder: "Search...",
searchButton: "Search",
resetButton: "Reset",
filterButton: "Filter"
};
var enUS = {
selectedRow: selectedRow,
totalItem: totalItem,
item: item,
filterDropDown: filterDropDown
};
var selectedRow$1 = "เลือก";
var totalItem$1 = {
plural: "รายการทั้งหมด",
regular: "รายการทั้งหมด"
};
var item$1 = {
plural: "รายการ",
regular: "รายการ"
};
var filterDropDown$1 = {
searchInputPlaceholder: "ค้นหา...",
searchButton: "ค้นหา",
resetButton: "รีเซ็ต",
filterButton: "กรอง"
};
var thTH = {
selectedRow: selectedRow$1,
totalItem: totalItem$1,
item: item$1,
filterDropDown: filterDropDown$1
};
var locales = {
enUS: enUS,
thTH: thTH
};
var localeCode = {
enUS: 'enUS',
thTH: 'thTH'
};
var localeEn = locales.enUS;
var localeTh = locales.thTH;
var keyWithPlural = function keyWithPlural(key, type, plural) {
if (type === void 0) {
type = 'DEFAULT';
}
if (type === 'PLURAL') {
if (plural) {
return key + '.plural';
}
return key + '.regular';
}
return key;
};
var translation = function translation(key, lang, options) {
if (lang === void 0) {
lang = 'thTH';
}
var localeIsEn = lang === localeCode.enUS;
var withPlural = keyWithPlural(key, options == null ? void 0 : options.type, options == null ? void 0 : options.plural);
if (localeIsEn) {
return get(localeEn, withPlural);
}
return get(localeTh, withPlural);
};
var RowSelectorAction = function RowSelectorAction(_ref) {
var locale = _ref.locale,
hasSelected = _ref.hasSelected,
_ref$selectedRowCount = _ref.selectedRowCount,
selectedRowCount = _ref$selectedRowCount === void 0 ? 0 : _ref$selectedRowCount,
_ref$menuList = _ref.menuList,
menuList = _ref$menuList === void 0 ? [] : _ref$menuList,
onDropDownMenuClick = _ref.onDropDownMenuClick;
return React.createElement(Space, null, React.createElement(DropDown, {
menuList: menuList,
onDropDownMenuClick: onDropDownMenuClick
}), hasSelected && React.createElement("span", null, translation('selectedRow', locale), " ", selectedRowCount, ' ', translation('item', locale, {
type: 'PLURAL',
plural: selectedRowCount > 1
})));
};
var _excluded$1 = ["label", "icon"];
var ActionButton = function ActionButton(_ref) {
var menuList = _ref.menuList,
_ref$buttonDisplayLim = _ref.buttonDisplayLimit,
buttonDisplayLimit = _ref$buttonDisplayLim === void 0 ? 5 : _ref$buttonDisplayLim,
onDropDownMenuClick = _ref.onDropDownMenuClick;
if (menuList.length < buttonDisplayLimit) {
var sortMenuByButtonType = menuList.sort(function (a) {
if (a.type === 'primary') {
return 1;
}
return -1;
});
return React.createElement(Space, {
size: "small"
}, sortMenuByButtonType.map(function (_ref2) {
var label = _ref2.label,
icon = _ref2.icon,
props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
return React.createElement(Button, Object.assign({}, props, {
icon: icon ? React.createElement(FontAwesomeIcon, {
iconName: icon
}) : undefined
}), label);
}));
}
return React.createElement(DropDown, {
type: "primary",
menuList: menuList,
onDropDownMenuClick: onDropDownMenuClick
});
};
var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
var _excluded$2 = ["title", "locale", "antdConfig", "pagination", "hidePagination", "rowSelectorActionProps", "rowSelectorExtraActionProps", "setSortInfo", "setPaginationInfo", "setFilterDropDownInfo"];
var Table = function Table(_ref) {
var title = _ref.title,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'thTH' : _ref$locale,
antdConfig = _ref.antdConfig,
pagination = _ref.pagination,
hidePagination = _ref.hidePagination,
rowSelectorActionProps = _ref.rowSelectorActionProps,
rowSelectorExtraActionProps = _ref.rowSelectorExtraActionProps,
setSortInfo = _ref.setSortInfo,
setPaginationInfo = _ref.setPaginationInfo,
setFilterDropDownInfo = _ref.setFilterDropDownInfo,
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
var tablePagination = _extends({
showSizeChanger: true,
showTotal: function showTotal(total) {
return React.createElement("span", null, translation('totalItem', locale, {
type: 'PLURAL',
plural: total > 1
}), ": ", total);
}
}, pagination);
return React.createElement(ConfigProvider, Object.assign({}, antdConfig, {
locale: locale === 'enUS' ? enUS$1 : thTH$1
}), React.createElement(Space, {
style: {
width: '100%'
},
direction: "vertical",
size: "small"
}, React.createElement(TableTitle, null, title), React.createElement(TableContainer, null, (rowSelectorActionProps == null ? void 0 : rowSelectorActionProps.hasSelected) && React.createElement("div", {
style: {
borderTop: '1px solid #eee',
padding: '16px 0'
}
}, React.createElement(Row, {
gutter: [16, 16],
align: "middle"
}, React.createElement(Col, {
span: 12
}, React.createElement(LeftComponentContainer, null, React.createElement(RowSelectorAction, Object.assign({}, rowSelectorActionProps, {
locale: locale
})))), rowSelectorExtraActionProps != null && rowSelectorExtraActionProps.menuList && rowSelectorExtraActionProps.menuList.length > 0 ? React.createElement(Col, {
span: 12
}, React.createElement(RightComponentContainer, null, React.createElement(ActionButton, Object.assign({}, rowSelectorExtraActionProps)))) : undefined)), React.createElement(Table$1, Object.assign({}, props, {
pagination: !hidePagination ? tablePagination : false,
onChange: function onChange(pagination, filter, sorter) {
var sort = Array.isArray(sorter) ? sorter[0] : sorter;
var filterOutNullValue = omitBy(filter, isNull);
var convertValueToString = mapValues(filterOutNullValue, function (item) {
return item == null ? void 0 : item[0];
});
setSortInfo == null ? void 0 : setSortInfo(sort);
setPaginationInfo == null ? void 0 : setPaginationInfo(pagination);
setFilterDropDownInfo == null ? void 0 : setFilterDropDownInfo(convertValueToString);
}
})), (rowSelectorActionProps == null ? void 0 : rowSelectorActionProps.hasSelected) && React.createElement(BottomActionRowSelectionContainer, null, React.createElement(RowSelectorAction, Object.assign({}, rowSelectorActionProps, {
locale: locale
}))))));
};
var TableContainer = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid #eee;\n position: relative;\n"])));
var TableTitle = /*#__PURE__*/styled.h2(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 24px;\n margin: 0;\n"])));
var BottomActionRowSelectionContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 16px;\n"])));
var LeftComponentContainer = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-start;\n"])));
var RightComponentContainer = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n"])));
var TableFilterDropDown = function TableFilterDropDown(_ref) {
var _ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'thTH' : _ref$locale,
selectedKeys = _ref.selectedKeys,
confirm = _ref.confirm,
clearFilters = _ref.clearFilters,
setSelectedKeys = _ref.setSelectedKeys,
setDropDownFilterType = _ref.setDropDownFilterType;
return React.createElement("div", {
style: {
padding: 8
}
}, React.createElement(Input, {
placeholder: translation('filterDropDown.searchInputPlaceholder', locale),
value: selectedKeys[0],
onChange: function onChange(e) {
return setSelectedKeys(e.target.value ? [e.target.value] : []);
},
onPressEnter: function onPressEnter() {
return confirm();
},
style: {
marginBottom: 8,
display: 'block'
}
}), React.createElement(Space, {
size: "small"
}, React.createElement(Button, {
type: "primary",
onClick: function onClick() {
confirm();
setDropDownFilterType == null ? void 0 : setDropDownFilterType('SEARCH');
},
icon: React.createElement(FontAwesomeIcon, {
iconName: "search"
}),
size: "small",
style: {
width: 90
}
}, translation('filterDropDown.searchButton', locale)), React.createElement(Button, {
onClick: clearFilters,
size: "small",
style: {
width: 90
}
}, translation('filterDropDown.resetButton', locale)), React.createElement(Button, {
type: "link",
size: "small",
onClick: function onClick() {
confirm({
closeDropdown: false
});
setDropDownFilterType == null ? void 0 : setDropDownFilterType('FILTER');
}
}, translation('filterDropDown.filterButton', locale))));
};
var _excluded$3 = ["prefixCls", "filters", "visible"];
var getColumnSearchProps = function getColumnSearchProps(options) {
return {
filterDropdown: function filterDropdown(_ref) {
var props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
return React.createElement(TableFilterDropDown, Object.assign({}, props, {
locale: options.locale,
setDropDownFilterType: options.setDropDownFilterType
}));
},
filterIcon: function filterIcon(filtered) {
return React.createElement(FontAwesomeIcon, {
iconName: "search",
style: {
color: filtered ? '#1890ff' : undefined
}
});
},
sorter: true
};
};
var getSorterNumber = function getSorterNumber(order) {
if (order === 'descend') {
return -1;
} else if (order === 'ascend') {
return 1;
}
return undefined;
};
export { ActionButton, DropDown, RowSelectorAction, Table, TableFilterDropDown, getColumnSearchProps, getSorterNumber };
//# sourceMappingURL=hooray-table.esm.js.map