phx-react
Version:
PHX REACT
116 lines • 17.9 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 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, 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;
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("span", null,
react_1["default"].createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] underline hover:text-[#004299]', 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 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 }, 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", { className: (0, types_1.classNames)(type === 'modal' ? 'p-4 bg-[#F3F3F3] rounded-t-lg' : 'px-4 pt-4', 'flex justify-between items-center', 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-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline text-xs', onClick: headerAction.onClick }, headerAction.content)))) : null,
headerAction.content && isbuttonHeader ? (react_1["default"].createElement("button", { onClick: headerAction.onClick, className: 'px-2 py-1 flex items-center text-xs rounded-lg active:pt-[0.3rem] active:pb-[0.2rem] border bg-white font-normal text-gray-900 shadow-sm hover:bg-slate-50 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: 'text-blue-600 mt-[1px] hover:cursor-pointer hover:text-blue-800 hover:underline text-xs', 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-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline text-xs' },
react_1["default"].createElement("p", null, dropdown.title),
react_1["default"].createElement(solid_1.ChevronDownIcon, { className: 'h-[13px] w-[13px] ml-1' })))),
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)('whitespace-nowrap border px-2 py-1 absolute right-0 z-10 max-h-96 overflow-y-auto mt-1.5 min-w-[5.2rem] rounded-lg bg-white focus:outline-none shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)]') },
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
? 'bg-gray-100 text-gray-900 rounded-lg cursor-pointer'
: '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 }))))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
};
var SubSectionHeader = function (_a) {
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', 'flex justify-between items-center px-4') },
react_1["default"].createElement("span", { className: 'text-xs font-semibold leading-5 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", { type: 'button', className: 'rounded-md p-1 bg-white text-gray-400 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-4 w-4', "aria-hidden": 'true' })))) : (react_1["default"].createElement("p", { "aria-hidden": true, className: 'text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline text-xs', onClick: headerAction.onClick }, headerAction.content)))) : null,
headerAction.content === 'pencil' && (react_1["default"].createElement("button", { type: 'button', className: 'rounded-md p-1 bg-white text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onClick },
react_1["default"].createElement(outline_1.PencilIcon, { className: 'h-[15px] w-[15px] active:text-gray-600', "aria-hidden": 'true' }))),
headerAction.content === 'pencil & remove' && (react_1["default"].createElement("div", { className: 'flex' },
react_1["default"].createElement("button", { type: 'button', className: 'rounded-md p-1 bg-white text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onDelete },
react_1["default"].createElement(outline_1.TrashIcon, { className: 'h-4 w-4 text-red-800 active:text-red-900', "aria-hidden": 'true' })),
react_1["default"].createElement("button", { type: 'button', className: 'rounded-md p-1 bg-white text-gray-400 hover:bg-gray-100 ml-2 active:bg-gray-200', onClick: headerAction.onClick },
react_1["default"].createElement(outline_1.PencilIcon, { className: 'h-[15px] w-[15px] active:text-gray-600', "aria-hidden": 'true' }))))))))));
};
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') }, children))) : null,
footerActionMarkup)))) : (react_1["default"].createElement("div", { className: 'w-full' }, dataListLiDouble ? (react_1["default"].createElement("div", { className: 'shadow-[0rem_0.0625rem_0rem_#1a1a1a12] rounded-lg' },
react_1["default"].createElement("div", { className: 'rounded-t-lg bg-white border border-gray-200 border-b-0' }, 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: 'text-xs px-6 pt-3 pb-4' }, 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 bg-gray-100 border border-gray-200 border-t-0' }, 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: 'text-xs px-6 pt-3 pb-4' }, dataListLiDouble.bottom.data.map(function (item, index) { return (react_1["default"].createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))))))) : (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' : '', 'shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200') },
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' ? 'py-3 px-5' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))); })
: null,
dataListLi && (react_1["default"].createElement("div", { className: 'text-xs px-6 pt-3 pb-4' }, 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') }, children))) : 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