phx-react
Version:
PHX REACT
151 lines • 24.6 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXCard = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Section_1 = tslib_1.__importDefault(require("./Section"));
var WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
var Footer_1 = tslib_1.__importDefault(require("./Footer"));
var types_1 = require("../types");
var Button_1 = require("../Button");
var solid_1 = require("@heroicons/react/24/solid");
var outline_1 = require("@heroicons/react/24/outline");
var react_2 = require("@headlessui/react");
var Badge_1 = require("../Badge");
var Loading_1 = require("../Loading");
var BannerWithCard_1 = require("../BannerWithCard/BannerWithCard");
var PHXCard = function Card(_a) {
var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, dropdownOnly = _a.dropdownOnly, secondaryFooterActions = _a.secondaryFooterActions, subSection = _a.subSection, dataListLi = _a.dataListLi, footerBulkAction = _a.footerBulkAction, isUpload = _a.isUpload, dataListLiDouble = _a.dataListLiDouble, dropdown = _a.dropdown, iconDetail = _a.iconDetail, isbuttonHeader = _a.isbuttonHeader, headerAction = _a.headerAction, dangerFooterAction = _a.dangerFooterAction, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.isHeaderDownload, isHeaderDownload = _c === void 0 ? false : _c, downloadLinkRef = _a.downloadLinkRef, hrefLink = _a.hrefLink, downloadText = _a.downloadText, badgeType = _a.badgeType, badgeText = _a.badgeText, _d = _a.fullSize, fullSize = _d === void 0 ? false : _d, cardType = _a.cardType, componentFist = _a.componentFist, componentLast = _a.componentLast, classNameFist = _a.classNameFist, classNameLast = _a.classNameLast, loadingSpinner = _a.loadingSpinner, bannerConfig = _a.bannerConfig, _e = _a.bannerPosition, bannerPosition = _e === void 0 ? 'top' : _e, subTitleConfig = _a.subTitleConfig, _f = _a.dowloadIcon, dowloadIcon = _f === void 0 ? false : _f;
var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (react_1["default"].createElement("div", { className: (0, types_1.classNames)(downloadLinkRef && hrefLink && downloadText ? 'flex items-center justify-between gap-x-3' : 'justify-end') },
react_1["default"].createElement("div", { className: (0, types_1.classNames)(downloadLinkRef && hrefLink && downloadText ? 'pl-5' : 'hidden') }, downloadLinkRef && hrefLink && downloadText && (react_1["default"].createElement("div", { className: 'flex gap-x-0.5' },
dowloadIcon && (react_1["default"].createElement("img", { src: 'https://sisv2-cdn.phx-smartschool.com/store/product/5-26-2025/dd47876a-398f-4f00-852b-ce6882925825-download-icon.png', alt: '', className: 'h-5 w-5' })),
react_1["default"].createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] hover:text-[#004299] hover:underline', href: hrefLink }, downloadText)))),
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'p-4' : 'px-5 py-3 sm:px-6', 'flex items-center justify-between gap-x-3') },
react_1["default"].createElement("div", null, footerBulkAction && footerBulkAction.content && (react_1["default"].createElement(Button_1.PHXButton, { danger: true, disabled: footerBulkAction.disabled, loading: footerBulkAction.loading, onClick: footerBulkAction.onClick, size: 'micro', submit: !!footerBulkAction.submit }, footerBulkAction.content))),
react_1["default"].createElement("div", { className: 'flex justify-end gap-x-3' },
secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (react_1["default"].createElement(Button_1.PHXButton, { secondary: true, size: 'micro', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
dangerFooterAction && dangerFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { danger: true, submit: dangerFooterAction.submit ? true : false, size: 'micro', onClick: dangerFooterAction.onClick, loading: dangerFooterAction.loading, disabled: dangerFooterAction.disabled }, dangerFooterAction.content)),
primaryFooterAction && primaryFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'micro', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled || primaryFooterAction.loading, loading: primaryFooterAction.loading }, primaryFooterAction.content)))))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
var HeaderActionMarkup = function (_a) {
var title = _a.title;
return primaryHeader ? (react_1["default"].createElement("div", null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'rounded-t-lg bg-[#F3F3F3] p-4' : 'px-4 pt-4', 'flex flex-col items-start justify-between gap-y-2 sm:flex-row sm:items-center sm:gap-y-0', type === 'title-with-badge' && 'gap-x-1') },
react_1["default"].createElement("span", { className: (0, types_1.classNames)('text-sm font-semibold leading-5 text-gray-900', type === 'title-with-badge' && 'flex-1 truncate') }, title),
headerAction &&
(isHeaderDownload ? (react_1["default"].createElement(Button_1.PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (react_1["default"].createElement(react_1["default"].Fragment, null,
headerAction.content && !dropdown && !isbuttonHeader && !isUpload ? (react_1["default"].createElement(react_1["default"].Fragment, null, headerAction.content === 'close' ? (react_1["default"].createElement("button", { type: 'button', className: "grid grid-cols-1 rounded-md p-0.5 text-gray-400 ".concat(type === 'modal' ? 'hover:bg-gray-200 hover:text-gray-500' : 'bg-white hover:bg-gray-100'), onClick: headerAction.onClick },
react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
react_1["default"].createElement(solid_1.XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' })))) : (react_1["default"].createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)))) : null,
headerAction.content && isbuttonHeader ? (react_1["default"].createElement("button", { onClick: headerAction.onClick, className: 'flex items-center rounded-lg border bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm hover:bg-slate-50 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
iconDetail && react_1["default"].createElement(outline_1.DocumentMagnifyingGlassIcon, { className: 'h-4 w-4' }),
isUpload && react_1["default"].createElement(solid_1.ArrowUpTrayIcon, { className: 'h-4 w-4' }))) : null,
dropdown && (react_1["default"].createElement("div", { className: 'flex items-center' },
!dropdownOnly && (react_1["default"].createElement("p", { "aria-hidden": true, className: 'mt-[1px] text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)),
react_1["default"].createElement("div", { className: 'ml-5' },
react_1["default"].createElement(react_2.Menu, { as: 'div', className: "relative inline-block text-left" },
react_1["default"].createElement("div", null,
react_1["default"].createElement(react_2.Menu.Button, null,
react_1["default"].createElement("div", { className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
react_1["default"].createElement("p", null, dropdown.title),
react_1["default"].createElement(solid_1.ChevronDownIcon, { className: 'ml-1 h-[13px] w-[13px]' })))),
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
react_1["default"].createElement(react_2.Menu.Items, { className: (0, types_1.classNames)('absolute right-0 z-10 mt-1.5 max-h-96 min-w-[5.2rem] overflow-y-auto whitespace-nowrap rounded-lg border bg-white px-2 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') },
react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: 'py-1' }, dropdown.data.map(function (item) { return (react_1["default"].createElement(react_2.Menu.Item, { key: item.content }, function (_a) {
var active = _a.active;
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)(active
? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
: 'text-gray-700', 'block px-2 py-1.5 text-xs'), onClick: item.onClick }, item.name));
})); })))))))))))),
type === 'title-with-badge' && (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(Badge_1.PHXBadge, { type: badgeType, text: badgeText })))),
subTitleConfig && (react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'rounded-t-lg bg-[#F3F3F3] p-4' : 'px-4 pt-2', "text-xs ".concat(subTitleConfig === null || subTitleConfig === void 0 ? void 0 : subTitleConfig.className)) }, subTitleConfig.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
};
var SubSectionHeader = function (_a) {
var _b;
var title = _a.title, headerAction = _a.headerAction;
return (title && (react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4', 'flex flex-col items-start justify-between gap-y-1 sm:flex-row sm:items-center') },
react_1["default"].createElement("span", { className: (0, types_1.classNames)('text-sm font-semibold leading-5 text-gray-900', type === 'title-with-badge' && 'flex-1 truncate', (headerAction === null || headerAction === void 0 ? void 0 : headerAction.content) !== 'pencil' &&
(headerAction === null || headerAction === void 0 ? void 0 : headerAction.content) !== 'pencil & remove' &&
'text-xs font-medium text-gray-900') }, title),
headerAction &&
(isHeaderDownload ? (react_1["default"].createElement(Button_1.PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (react_1["default"].createElement(react_1["default"].Fragment, null,
headerAction.content !== 'pencil' && headerAction.content !== 'pencil & remove' ? (react_1["default"].createElement(react_1["default"].Fragment, null, headerAction.content === 'close' ? (react_1["default"].createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick, type: 'button' },
react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
react_1["default"].createElement(solid_1.XMarkIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))) : (headerAction === null || headerAction === void 0 ? void 0 : headerAction.dropdown) ? (react_1["default"].createElement("div", { className: 'ml-0 sm:ml-5' },
react_1["default"].createElement(react_2.Menu, { as: 'div', className: 'relative inline-block text-left' },
react_1["default"].createElement("div", null,
react_1["default"].createElement(react_2.Menu.Button, null,
react_1["default"].createElement("div", { className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
react_1["default"].createElement("p", null, headerAction.content),
react_1["default"].createElement(solid_1.ChevronDownIcon, { className: 'ml-1 h-[13px] w-[13px]' })))),
react_1["default"].createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
react_1["default"].createElement(react_2.Menu.Items, { className: 'absolute left-0 z-50 mt-1.5 max-h-96 min-w-[5.2rem] overflow-y-auto whitespace-nowrap rounded-lg border bg-white px-2 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none sm:left-auto sm:right-0' },
react_1["default"].createElement("div", { className: 'py-1' }, (_b = headerAction === null || headerAction === void 0 ? void 0 : headerAction.dropdown) === null || _b === void 0 ? void 0 : _b.data.map(function (item) { return (react_1["default"].createElement(react_2.Menu.Item, { key: item.content }, function (_a) {
var active = _a.active;
return (react_1["default"].createElement("div", { className: (0, types_1.classNames)(active
? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
: 'text-gray-700', 'block px-2 py-1.5 text-xs'), onClick: item.onClick }, item.name));
})); }))))))) : (react_1["default"].createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)))) : null,
headerAction.content === 'pencil' && (react_1["default"].createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onClick, type: 'button' },
react_1["default"].createElement(outline_1.PencilIcon, { "aria-hidden": 'true', className: 'h-[15px] w-[15px] active:text-gray-600' }))),
headerAction.type === 'custom-link' && (react_1["default"].createElement("button", { type: 'button', onClick: headerAction.onClick, className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
react_1["default"].createElement("span", null, headerAction.text),
react_1["default"].createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', className: 'ml-1' },
react_1["default"].createElement("path", { d: 'M11.7143 4C11.2409 4 10.8571 4.38376 10.8571 4.85714C10.8571 5.33053 11.2409 5.71429 11.7143 5.71429H13.0735L9.96534 8.82248C9.6306 9.15721 9.6306 9.69993 9.96534 10.0347C10.3001 10.3694 10.8428 10.3694 11.1775 10.0347L14.2857 6.92647V8.28571C14.2857 8.7591 14.6695 9.14286 15.1429 9.14286C15.6162 9.14286 16 8.7591 16 8.28571V4.85714C16 4.38376 15.6162 4 15.1429 4H11.7143Z', fill: 'currentColor' }),
react_1["default"].createElement("path", { d: 'M15.4286 11.7143C15.4286 11.2409 15.0448 10.8571 14.5714 10.8571C14.098 10.8571 13.7143 11.2409 13.7143 11.7143V12.8571C13.7143 13.6461 13.0747 14.2857 12.2857 14.2857H7.14286C6.35388 14.2857 5.71429 13.6461 5.71429 12.8571L5.71429 7.71428C5.71429 6.92531 6.35388 6.28571 7.14286 6.28571L8.28571 6.28571C8.7591 6.28571 9.14286 5.90196 9.14286 5.42857C9.14286 4.95518 8.7591 4.57143 8.28571 4.57143L7.14286 4.57143C5.40711 4.57143 4 5.97853 4 7.71428V12.8571C4 14.5929 5.40711 16 7.14286 16H12.2857C14.0215 16 15.4286 14.5929 15.4286 12.8571V11.7143Z', fill: 'currentColor' })))),
headerAction.content === 'pencil & remove' && (react_1["default"].createElement("div", { className: 'flex' },
react_1["default"].createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onDelete, type: 'button' },
react_1["default"].createElement(outline_1.TrashIcon, { "aria-hidden": 'true', className: 'h-4 w-4 text-red-800 active:text-red-900' })),
react_1["default"].createElement("button", { className: 'ml-2 rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onClick, type: 'button' },
react_1["default"].createElement(outline_1.PencilIcon, { "aria-hidden": 'true', className: 'h-[15px] w-[15px] active:text-gray-600' }))))))))));
};
return (react_1["default"].createElement(react_1["default"].Fragment, null, cardType === 'card-component' ? (react_1["default"].createElement("div", { className: 'w-full' },
react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'divide-y divide-gray-200' : '', 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]') },
react_1["default"].createElement("div", { className: 'flex items-center justify-between px-4 pt-4' },
react_1["default"].createElement("span", { className: (0, types_1.classNames)('flex-1 truncate text-sm font-semibold leading-5 text-gray-900') }, title),
react_1["default"].createElement("div", null, loadingSpinner ? react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'mr-4 flex h-5 w-5 items-center justify-center' }) : ''),
react_1["default"].createElement("div", { className: classNameFist }, componentFist),
react_1["default"].createElement("div", { className: classNameLast }, componentLast)),
subSection
? subSection.map(function (item, index) { return (react_1["default"].createElement("div", { key: index, className: (0, types_1.classNames)(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
react_1["default"].createElement(SubSectionHeader, { headerAction: item.headerAction, index: index, title: item.title }),
item.component && (react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))); })
: null,
dataListLi && (react_1["default"].createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLi.map(function (item, index) { return (react_1["default"].createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))),
children ? (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') },
bannerPosition === 'top' && react_1["default"].createElement(BannerWithCard_1.PHXBannerWithCard, tslib_1.__assign({}, bannerConfig)),
children,
bannerPosition === 'bottom' && react_1["default"].createElement(BannerWithCard_1.PHXBannerWithCard, tslib_1.__assign({}, bannerConfig))))) : null,
footerActionMarkup)))) : (react_1["default"].createElement("div", { className: 'w-full' }, dataListLiDouble ? (react_1["default"].createElement("div", { className: 'rounded-lg shadow-[0rem_0.0625rem_0rem_#1a1a1a12]' },
react_1["default"].createElement("div", { className: 'rounded-t-lg border border-b-0 border-gray-200 bg-white' }, dataListLiDouble && (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(HeaderActionMarkup, { title: dataListLiDouble.top.title }),
react_1["default"].createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLiDouble.top.data.map(function (item, index) { return (react_1["default"].createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))))),
react_1["default"].createElement("div", { className: 'rounded-b-lg border border-t-0 border-gray-200 bg-gray-100' }, dataListLiDouble && (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(HeaderActionMarkup, { title: dataListLiDouble.bottom.title }),
react_1["default"].createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLiDouble.bottom.data.map(function (item, index) { return (react_1["default"].createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))))))) : (
// <div className='mx-auto max-w-3xl px-0 lg:max-w-full'>
react_1["default"].createElement("div", null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'divide-y divide-gray-200' : '', 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]') },
title && react_1["default"].createElement(HeaderActionMarkup, { title: title }),
subSection
? subSection.map(function (item, index) { return (react_1["default"].createElement("div", { key: index, className: (0, types_1.classNames)(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
react_1["default"].createElement(SubSectionHeader, { title: item.title, headerAction: item.headerAction, index: index }),
item.component && (react_1["default"].createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))); })
: null,
dataListLi && (react_1["default"].createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLi.map(function (item, index) { return (react_1["default"].createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))),
children ? (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') },
bannerPosition === 'top' && react_1["default"].createElement(BannerWithCard_1.PHXBannerWithCard, tslib_1.__assign({}, bannerConfig)),
children,
bannerPosition === 'bottom' && react_1["default"].createElement(BannerWithCard_1.PHXBannerWithCard, tslib_1.__assign({}, bannerConfig))))) : null,
footerActionMarkup)))))));
};
exports.PHXCard = PHXCard;
exports.PHXCard.Section = Section_1["default"];
exports.PHXCard.WrapSection = WrapSection_1["default"];
exports.PHXCard.Footer = Footer_1["default"];
//# sourceMappingURL=Card.js.map