phx-react
Version:
PHX REACT
145 lines • 9.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = QuickAction;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const icon_v3_1 = require("../assets/icon-v3");
const helper_1 = require("../helper");
const use_window_width_1 = require("../hooks/use-window-width");
const eventBus_1 = require("../utils/eventBus");
const types_1 = require("../../types");
const Card_1 = require("../../Card");
const getCookieSession_1 = tslib_1.__importDefault(require("../../Func/getCookieSession"));
const library_1 = tslib_1.__importDefault(require("./library"));
const __1 = require("../../..");
function QuickAction({ currSchoolName, perCodes }) {
const session = (0, getCookieSession_1.default)();
const actionPermisstions = session === null || session === void 0 ? void 0 : session.action_permission;
const [show, setShow] = (0, react_1.useState)(false);
const [showMore, setShowMore] = (0, react_1.useState)(false);
const wrapperRef = (0, react_1.useRef)(null);
const [selectedQuickAction, setSelectedQuickAction] = (0, react_1.useState)();
const windowWidth = (0, use_window_width_1.useWindowWidth)();
const [countShowItem, setCountShowItem] = (0, react_1.useState)(0);
const data = [
{
name: 'Thư viện tiểu học',
code: 'LIBRARY_TIEU_HOC',
moduleCode: 'LIBRARY',
quickActions: [
{
name: 'Mượn sách',
code: 'LIBRARY_TIEU_HOC_BORROW_TICKET_CREATE',
icon: 'LIBRARY_BORROW_TICKET_CREATE',
},
{
name: 'Trả sách',
code: 'LIBRARY_TIEU_HOC_BORROW_TICKET_RETURN',
icon: 'LIBRARY_BORROW_TICKET_RETURN',
},
],
},
{
name: 'Thư viện trung học',
code: 'LIBRARY_TRUNG_HOC',
moduleCode: 'LIBRARY',
quickActions: [
{
name: 'Mượn sách',
code: 'LIBRARY_TRUNG_HOC_BORROW_TICKET_CREATE',
icon: 'LIBRARY_BORROW_TICKET_CREATE',
},
{
name: 'Trả sách',
code: 'LIBRARY_TRUNG_HOC_BORROW_TICKET_RETURN',
icon: 'LIBRARY_BORROW_TICKET_RETURN',
},
],
},
];
(0, react_1.useEffect)(() => {
const handleClickOutside = (event) => {
var _a;
if (wrapperRef.current && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
setShowMore(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [wrapperRef]);
(0, react_1.useEffect)(() => {
// Phần này để tính toán lại khoảng trống còn lại cho hiển thị item của quick action
const breakPoint = 1024;
const itemWidth = 132;
const schoolNameLengthByPx = 7; // 1 chữ cái là 7px
const logoSectionWidth = 140;
const searchBarWidth = windowWidth >= breakPoint ? 300 : 0;
const buffer = 100;
const toltalItem = data.length;
const quickActionWidth = Math.round((windowWidth - logoSectionWidth - searchBarWidth) / (windowWidth >= breakPoint ? 2 : 1) -
currSchoolName.length * schoolNameLengthByPx -
buffer);
const toltalItemShowQuickAction = Math.round(quickActionWidth < 0 ? 0 : quickActionWidth / itemWidth);
setCountShowItem(toltalItemShowQuickAction > toltalItem ? toltalItem : toltalItemShowQuickAction);
}, [windowWidth]);
return perCodes.length > 0 && actionPermisstions ? (react_1.default.createElement("div", null,
react_1.default.createElement(library_1.default, null),
react_1.default.createElement("div", { className: 'flex h-[1.625rem] gap-1.5' },
data.slice(0, countShowItem).map((item) => {
// disabled khi ko có quyền module hoặc ko có quyền ở tất cả các action
const isDisabled = !(0, helper_1.enablePer)(item.code, perCodes) || item.quickActions.every((action) => !actionPermisstions[action.code]);
// @ts-ignore
const Icon = icon_v3_1.IconV3[item.code];
return (react_1.default.createElement("button", { key: item.code, className: (0, types_1.classNames)('inline-flex w-fit shrink-0 items-center gap-x-1 whitespace-nowrap rounded-lg px-2 text-xxs font-[450]', isDisabled
? 'cursor-not-allowed bg-[#F1F1F1] text-gray-400'
: 'cursor-pointer bg-[#F1F1F1] text-gray-600 hover:bg-white hover:text-gray-900'), onClick: () => {
if (!isDisabled) {
setSelectedQuickAction(item);
setShow(true);
}
}, type: 'button' },
react_1.default.createElement("span", { className: 'flex h-[0.875rem] w-[0.875rem] items-center justify-center' },
react_1.default.createElement(Icon, null)),
react_1.default.createElement("span", null, item.name)));
}),
countShowItem !== data.length && (react_1.default.createElement("div", { ref: wrapperRef, className: 'relative hidden h-full shrink-0 sm:block' },
react_1.default.createElement("button", { key: 'show_more', className: (0, types_1.classNames)('inline-flex h-full w-fit cursor-pointer items-center gap-x-1 whitespace-nowrap rounded-lg bg-[#F1F1F1] px-2 text-xxs font-[450] text-gray-600 hover:bg-white hover:text-gray-900', showMore ? 'bg-white' : ''), onClick: () => {
setShowMore(!showMore);
}, type: 'button' },
react_1.default.createElement("span", null, "Xem th\u00EAm"),
react_1.default.createElement("svg", { className: (0, types_1.classNames)(' transition-all', showMore ? '-rotate-180' : ''), fill: 'none', height: '16', viewBox: '0 0 16 16', width: '16', xmlns: 'http://www.w3.org/2000/svg' },
react_1.default.createElement("path", { clipRule: 'evenodd', d: 'M4.57576 6.77535C4.81007 6.54103 5.18997 6.54103 5.42429 6.77535L8.20002 9.55108L10.9758 6.77535C11.2101 6.54103 11.59 6.54103 11.8243 6.77535C12.0586 7.00966 12.0586 7.38956 11.8243 7.62387L8.62429 10.8239C8.38997 11.0582 8.01007 11.0582 7.77576 10.8239L4.57576 7.62387C4.34145 7.38956 4.34145 7.00966 4.57576 6.77535Z', fill: '#6B7280', fillRule: 'evenodd' }))),
showMore && (react_1.default.createElement("div", { className: 'absolute left-0 top-8 inline-block w-max' },
react_1.default.createElement(Card_1.PHXCard, { primaryHeader: true, title: 'Ch\u1ECDn nhanh' },
react_1.default.createElement("div", { className: 'flex max-h-[400px] flex-col gap-y-1 overflow-y-auto' }, data.slice(countShowItem).map((action) => {
// @ts-ignore
const IconAction = icon_v3_1.IconV3[action.code];
const isDisabled = !(0, helper_1.enablePer)(action.code, perCodes) ||
action.quickActions.every((item) => !actionPermisstions[item.code]);
return (react_1.default.createElement("button", { key: `${action.code}_more`, className: (0, types_1.classNames)('flex min-w-full items-center gap-x-1.5 rounded-lg px-2 py-1.5 text-xs ', isDisabled ? 'cursor-not-allowed text-gray-400' : 'text-gray-900 hover:bg-[#EBEBEB]'), onClick: () => {
if (!isDisabled) {
setSelectedQuickAction(action);
setShow(true);
setShowMore(false);
}
}, type: 'button' },
react_1.default.createElement("span", { className: 'h-[1.125rem] w-[1.125rem]' },
react_1.default.createElement(IconAction, null)),
react_1.default.createElement("span", null, action.name)));
})))))))),
react_1.default.createElement(__1.PHXBottomAction, { actions: (selectedQuickAction === null || selectedQuickAction === void 0 ? void 0 : selectedQuickAction.quickActions.filter((action) => actionPermisstions[action.code]).map((action) => {
// @ts-ignore
const IconAction = icon_v3_1.IconV3[action.icon];
return {
name: action.name,
onClick: () => {
eventBus_1.eventBus.emit(selectedQuickAction.moduleCode, action);
setShow(false);
},
icon: react_1.default.createElement(IconAction, null),
};
})) || [], name: (selectedQuickAction === null || selectedQuickAction === void 0 ? void 0 : selectedQuickAction.name) || '', onHide: () => setShow(false), show: show }))) : (react_1.default.createElement(react_1.default.Fragment, null));
}
//# sourceMappingURL=quick-action.js.map