@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
219 lines (211 loc) • 8.57 kB
JavaScript
;
var React = require('react');
var neetoIcons = require('@bigbinary/neeto-icons');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var Dropdown = require('./Dropdown.js');
var index = require('./index--BeRLo6L.js');
var zustand = require('zustand');
var useFuncDebounce = function useFuncDebounce(func) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
var timer = React.useRef(null);
var debouncedFunc = function debouncedFunc() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timer.current);
timer.current = setTimeout(function () {
return func.apply(void 0, args);
}, delay);
};
debouncedFunc.cancel = function () {
return clearTimeout(timer.current);
};
return debouncedFunc;
};
var URL_SORT_ORDERS = {
ascend: "asc",
descend: "desc"
};
var TABLE_SORT_ORDERS = {
asc: "ascend",
desc: "descend"
};
var COLUMN_ADD_DIRECTION = {
left: 0,
right: 1
};
var SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT = 57;
var SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT = 78;
var COLUMN_FIXED_VALUES = {
LEFT: "left",
RIGHT: "right"
};
var TABLE_PAGINATION_HEIGHT = 64;
var TABLE_DEFAULT_HEADER_HEIGHT = 40;
var TABLE_ROW_HEIGHT = 52;
var Menu = Dropdown.Menu,
MenuItem = Dropdown.MenuItem;
// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
var HeaderCellMenu = function HeaderCellMenu(_ref) {
var onSort = _ref.onSort,
_ref$column = _ref.column,
column = _ref$column === void 0 ? {} : _ref$column,
sortedInfo = _ref.sortedInfo,
isSortable = _ref.isSortable,
isAddEnabled = _ref.isAddEnabled,
isFixedColumn = _ref.isFixedColumn,
isColumnDeletable = _ref.isColumnDeletable,
isColumnFreezeEnabled = _ref.isColumnFreezeEnabled,
isHidable = _ref.isHidable,
onColumnHide = _ref.onColumnHide,
onAddColumn = _ref.onAddColumn,
onColumnDelete = _ref.onColumnDelete,
onColumnFreeze = _ref.onColumnFreeze,
hasMoreActions = _ref.hasMoreActions,
onMoreActionClick = _ref.onMoreActionClick,
_ref$moreActions = _ref.moreActions,
moreActions = _ref$moreActions === void 0 ? [] : _ref$moreActions;
var _useTranslation = reactI18next.useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
return /*#__PURE__*/React.createElement("div", {
onClick: function onClick(event) {
return event.stopPropagation();
}
}, /*#__PURE__*/React.createElement(Dropdown, {
appendTo: function appendTo() {
return document.body;
},
className: "neeto-ui-flex",
icon: neetoIcons.MenuHorizontal,
position: "bottom",
strategy: "fixed",
zIndex: 99999,
buttonProps: {
className: "neeto-ui-min-h-0 neeto-ui-flex-shrink-0",
style: "text",
size: "medium",
"data-testid": "column-menu-button",
"data-cy": "column-menu-button",
"data-dropdown-button-style": "more-dropdown"
}
}, /*#__PURE__*/React.createElement(Menu, {
className: "neeto-ui-cursor-auto",
onMouseDown: function onMouseDown(event) {
return event.preventDefault();
}
}, isSortable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-between",
"data-cy": "ascending-column-menu-button",
onClick: function onClick() {
return onSort({
column: column,
columnKey: column.key,
field: column.dataIndex || column.key,
order: TABLE_SORT_ORDERS.asc
});
}
}, /*#__PURE__*/React.createElement("span", null, index.getLocale(i18n, t, "neetoui.table.ascending")), sortedInfo.order === TABLE_SORT_ORDERS.asc && ramda.equals(sortedInfo.field, column.dataIndex) && /*#__PURE__*/React.createElement(neetoIcons.Check, {
className: "neeto-ui-text-success-500",
size: 20
})), /*#__PURE__*/React.createElement(MenuItem.Button, {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-between",
"data-cy": "descending-column-menu-button",
onClick: function onClick() {
return onSort({
column: column,
columnKey: column.key,
field: column.dataIndex,
order: TABLE_SORT_ORDERS.desc
});
}
}, /*#__PURE__*/React.createElement("span", null, index.getLocale(i18n, t, "neetoui.table.descending")), sortedInfo.order === TABLE_SORT_ORDERS.desc && ramda.equals(sortedInfo.field, column.dataIndex) && /*#__PURE__*/React.createElement(neetoIcons.Check, {
className: "neeto-ui-text-success-500",
size: 20
}))), isAddEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "insert-right-column-menu-button",
onClick: function onClick() {
return onAddColumn(COLUMN_ADD_DIRECTION.right);
}
}, index.getLocale(i18n, t, "neetoui.table.insertColRight")), /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "insert-left-column-menu-button",
onClick: function onClick() {
return onAddColumn(COLUMN_ADD_DIRECTION.left);
}
}, index.getLocale(i18n, t, "neetoui.table.insertColLeft"))), isHidable && /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "hide-column-menu-button",
onClick: function onClick() {
return onColumnHide(column);
}
}, index.getLocale(i18n, t, "neetoui.table.hideColumn")), isColumnDeletable && /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "delete-column-menu-button",
onClick: function onClick() {
return onColumnDelete(column.id);
}
}, index.getLocale(i18n, t, "neetoui.table.deleteColumn")), isColumnFreezeEnabled && /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "freeze-unfreeze-column-menu-button",
onClick: function onClick() {
return onColumnFreeze(isFixedColumn, column);
}
}, isFixedColumn ? index.getLocale(i18n, t, "neetoui.table.unFreezeColumn") : index.getLocale(i18n, t, "neetoui.table.freezeColumn")), hasMoreActions && moreActions.map(function (item, index$1) {
return /*#__PURE__*/React.createElement(MenuItem.Button, {
"data-cy": "".concat(index.hyphenize(item.label), "-column-menu-button"),
key: index$1,
onClick: function onClick() {
return onMoreActionClick(item.type, column);
}
}, item.label);
}))));
};
var HeaderCellMenu$1 = /*#__PURE__*/React.memo(HeaderCellMenu);
var useScrollStore = zustand.create(function (set) {
return {
scrollPositions: {},
setScrollPosition: function setScrollPosition(key, position) {
return set(ramda.assocPath(["scrollPositions", key], position));
}
};
});
var useRestoreScrollPosition = function useRestoreScrollPosition(_ref) {
var tableRef = _ref.tableRef,
scrollRef = _ref.scrollRef,
loading = _ref.loading;
var key = window.location.pathname;
var scrollPositions = useScrollStore(ramda.prop("scrollPositions"));
var setScrollPosition = useScrollStore(ramda.prop("setScrollPosition"));
React.useEffect(function () {
if (loading) {
setScrollPosition(key, 0);
return;
}
if (scrollRef.current === null || ramda.isNil(scrollPositions[key])) return;
setTimeout(function () {
var _scrollRef$current;
var position = scrollPositions[key];
var config = position === 0 ? {
index: 0
} : {
top: position
};
(_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo(config);
});
}, [key, tableRef, loading]);
var handleScroll = useFuncDebounce(function (event) {
setScrollPosition(key, parseInt(event.target.scrollTop));
});
return {
handleScroll: handleScroll
};
};
exports.COLUMN_FIXED_VALUES = COLUMN_FIXED_VALUES;
exports.HeaderCellMenu = HeaderCellMenu$1;
exports.SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT = SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT;
exports.SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT = SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT;
exports.TABLE_DEFAULT_HEADER_HEIGHT = TABLE_DEFAULT_HEADER_HEIGHT;
exports.TABLE_PAGINATION_HEIGHT = TABLE_PAGINATION_HEIGHT;
exports.TABLE_ROW_HEIGHT = TABLE_ROW_HEIGHT;
exports.TABLE_SORT_ORDERS = TABLE_SORT_ORDERS;
exports.URL_SORT_ORDERS = URL_SORT_ORDERS;
exports.useRestoreScrollPosition = useRestoreScrollPosition;
//# sourceMappingURL=useRestoreScrollPosition-PsoENtiB.js.map