phx-react
Version:
PHX REACT
147 lines • 24.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXCard = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Section_1 = tslib_1.__importDefault(require("./Section"));
const WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
const Footer_1 = tslib_1.__importDefault(require("./Footer"));
const types_1 = require("../types");
const Button_1 = require("../Button");
const solid_1 = require("@heroicons/react/24/solid");
const outline_1 = require("@heroicons/react/24/outline");
const react_2 = require("@headlessui/react");
const Badge_1 = require("../Badge");
const Loading_1 = require("../Loading");
const BannerWithCard_1 = require("../BannerWithCard/BannerWithCard");
const PHXCard = function Card({ children, title, primaryFooterAction, primaryHeader, dropdownOnly, secondaryFooterActions, subSection, dataListLi, footerBulkAction, isUpload, dataListLiDouble, dropdown, iconDetail, isbuttonHeader, headerAction, secondaryAction, dangerFooterAction, type = 'default', isHeaderDownload = false, downloadLinkRef, hrefLink, downloadText, badgeType, badgeText, fullSize = false, cardType, componentFist, componentLast, classNameFist, classNameLast, loadingSpinner, bannerConfig, bannerPosition = 'top', subTitleConfig, dowloadIcon = false, border = true, }) {
const 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' : 'p-4 pt-2', '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));
const HeaderActionMarkup = ({ 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),
react_1.default.createElement("div", { className: 'flex items-baseline gap-x-3' },
(secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: secondaryAction.onClick }, secondaryAction.content)),
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 ${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(react_1.default.Fragment, null,
!dropdownOnly && !(secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (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)),
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, { className: 'p-0' },
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((item) => (react_1.default.createElement(react_2.Menu.Item, { key: item.content }, ({ active }) => (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 ${subTitleConfig === null || subTitleConfig === void 0 ? void 0 : subTitleConfig.className}`) }, subTitleConfig.content)))) : (react_1.default.createElement(react_1.default.Fragment, null));
};
const SubSectionHeader = ({ title, headerAction, secondaryAction, isNormalTitle }) => {
var _a;
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)(isNormalTitle ? 'text-xs' : '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' &&
!isNormalTitle &&
'text-xs font-medium text-gray-900') }, title),
(secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline sm:ml-auto sm:mr-3', onClick: secondaryAction.onClick }, secondaryAction.content)),
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' }, (_a = headerAction === null || headerAction === void 0 ? void 0 : headerAction.dropdown) === null || _a === void 0 ? void 0 : _a.data.map((item) => (react_1.default.createElement(react_2.Menu.Item, { key: item.content }, ({ active }) => (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 bg-white ', border &&
'shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)]') },
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((item, index) => (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, secondaryAction: item.secondaryAction, title: item.title, isNormalTitle: item.isNormalTitle }),
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((item, index) => (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, { ...bannerConfig }),
children,
bannerPosition === 'bottom' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...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((item, index) => (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((item, index) => (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 bg-white', border &&
'shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)]') },
title && react_1.default.createElement(HeaderActionMarkup, { title: title }),
subSection
? subSection.map((item, index) => (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, secondaryAction: item.secondaryAction, isNormalTitle: item.isNormalTitle }),
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((item, index) => (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, { ...bannerConfig }),
children,
bannerPosition === 'bottom' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...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