@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
208 lines (201 loc) • 8.38 kB
JavaScript
import React__default, { useRef, useEffect } from 'react';
import { MenuHorizontal, Check } from '@bigbinary/neeto-icons';
import { equals, assocPath, prop, isNil } from 'ramda';
import { useTranslation } from 'react-i18next';
import Dropdown from './Dropdown.js';
import { g as getLocale, h as hyphenize } from './index-Dxaw6gl9.js';
import { create } from 'zustand';
var useFuncDebounce = function useFuncDebounce(func) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
var timer = 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 = useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
return /*#__PURE__*/React__default.createElement("div", {
onClick: function onClick(event) {
return event.stopPropagation();
}
}, /*#__PURE__*/React__default.createElement(Dropdown, {
appendTo: function appendTo() {
return document.body;
},
className: "neeto-ui-flex",
icon: 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__default.createElement(Menu, {
className: "neeto-ui-cursor-auto",
onMouseDown: function onMouseDown(event) {
return event.preventDefault();
}
}, isSortable && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.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__default.createElement("span", null, getLocale(i18n, t, "neetoui.table.ascending")), sortedInfo.order === TABLE_SORT_ORDERS.asc && equals(sortedInfo.field, column.dataIndex) && /*#__PURE__*/React__default.createElement(Check, {
className: "neeto-ui-text-success-500",
size: 20
})), /*#__PURE__*/React__default.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__default.createElement("span", null, getLocale(i18n, t, "neetoui.table.descending")), sortedInfo.order === TABLE_SORT_ORDERS.desc && equals(sortedInfo.field, column.dataIndex) && /*#__PURE__*/React__default.createElement(Check, {
className: "neeto-ui-text-success-500",
size: 20
}))), isAddEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "insert-right-column-menu-button",
onClick: function onClick() {
return onAddColumn(COLUMN_ADD_DIRECTION.right);
}
}, getLocale(i18n, t, "neetoui.table.insertColRight")), /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "insert-left-column-menu-button",
onClick: function onClick() {
return onAddColumn(COLUMN_ADD_DIRECTION.left);
}
}, getLocale(i18n, t, "neetoui.table.insertColLeft"))), isHidable && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "hide-column-menu-button",
onClick: function onClick() {
return onColumnHide(column);
}
}, getLocale(i18n, t, "neetoui.table.hideColumn")), isColumnDeletable && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "delete-column-menu-button",
onClick: function onClick() {
return onColumnDelete(column.id);
}
}, getLocale(i18n, t, "neetoui.table.deleteColumn")), isColumnFreezeEnabled && /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "freeze-unfreeze-column-menu-button",
onClick: function onClick() {
return onColumnFreeze(isFixedColumn, column);
}
}, isFixedColumn ? getLocale(i18n, t, "neetoui.table.unFreezeColumn") : getLocale(i18n, t, "neetoui.table.freezeColumn")), hasMoreActions && moreActions.map(function (item, index) {
return /*#__PURE__*/React__default.createElement(MenuItem.Button, {
"data-cy": "".concat(hyphenize(item.label), "-column-menu-button"),
key: index,
onClick: function onClick() {
return onMoreActionClick(item.type, column);
}
}, item.label);
}))));
};
var HeaderCellMenu$1 = /*#__PURE__*/React__default.memo(HeaderCellMenu);
var useScrollStore = create(function (set) {
return {
scrollPositions: {},
setScrollPosition: function setScrollPosition(key, position) {
return set(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(prop("scrollPositions"));
var setScrollPosition = useScrollStore(prop("setScrollPosition"));
useEffect(function () {
if (loading) {
setScrollPosition(key, 0);
return;
}
if (scrollRef.current === null || 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
};
};
export { COLUMN_FIXED_VALUES as C, HeaderCellMenu$1 as H, SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT as S, TABLE_SORT_ORDERS as T, URL_SORT_ORDERS as U, TABLE_PAGINATION_HEIGHT as a, TABLE_ROW_HEIGHT as b, SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT as c, TABLE_DEFAULT_HEADER_HEIGHT as d, useRestoreScrollPosition as u };
//# sourceMappingURL=useRestoreScrollPosition-C1NSANQW.js.map