phx-react
Version:
PHX REACT
111 lines • 15.8 kB
JavaScript
import React, { Fragment } from 'react';
import Section from './Section';
import WrapSection from './WrapSection';
import Footer from './Footer';
import { classNames } from '../types';
import { PHXButton } from '../Button';
import { ArrowUpTrayIcon, ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { DocumentMagnifyingGlassIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { Menu, Transition } from '@headlessui/react';
import { PHXBadge } from '../Badge';
import { PHXSpinner } from '../Loading';
export 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.createElement("div", { className: classNames(downloadLinkRef && hrefLink && downloadText ? 'flex items-center justify-between gap-x-3' : 'justify-end') },
React.createElement("div", { className: classNames(downloadLinkRef && hrefLink && downloadText ? ' pl-5' : 'hidden') }, downloadLinkRef && hrefLink && downloadText && (React.createElement("span", null,
React.createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] underline hover:text-[#004299]', href: hrefLink }, downloadText)))),
React.createElement("div", { className: 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.createElement(PHXButton, { secondary: true, size: 'micro', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
dangerFooterAction && dangerFooterAction.content && (React.createElement(PHXButton, { danger: true, submit: dangerFooterAction.submit ? true : false, size: 'micro', onClick: dangerFooterAction.onClick, loading: dangerFooterAction.loading }, dangerFooterAction.content)),
primaryFooterAction && primaryFooterAction.content && (React.createElement(PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'micro', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled || primaryFooterAction.loading, loading: primaryFooterAction.loading }, primaryFooterAction.content))))) : (React.createElement(React.Fragment, null));
var HeaderActionMarkup = function (_a) {
var title = _a.title;
return primaryHeader ? (React.createElement("div", { className: 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.createElement("span", { className: classNames('text-sm font-semibold leading-5 text-gray-900', type === 'title-with-badge' && 'flex-1 truncate') }, title),
headerAction &&
(isHeaderDownload ? (React.createElement(PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (React.createElement(React.Fragment, null,
headerAction.content && !dropdown && !isbuttonHeader && !isUpload ? (React.createElement(React.Fragment, null, headerAction.content === 'close' ? (React.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.createElement(React.Fragment, null,
React.createElement("span", { className: 'sr-only' }, "Close"),
React.createElement(XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' })))) : (React.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.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.createElement(DocumentMagnifyingGlassIcon, { className: 'h-4 w-4' }),
isUpload && React.createElement(ArrowUpTrayIcon, { className: 'h-4 w-4 ' }))) : null,
dropdown && (React.createElement("div", { className: 'flex items-center' },
!dropdownOnly && (React.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.createElement("div", { className: 'ml-5' },
React.createElement(Menu, { as: 'div', className: "relative inline-block text-left" },
React.createElement("div", null,
React.createElement(Menu.Button, null,
React.createElement("div", { className: 'flex items-center text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline text-xs' },
React.createElement("p", null, dropdown.title),
React.createElement(ChevronDownIcon, { className: 'h-[13px] w-[13px] ml-1' })))),
React.createElement(Transition, { as: 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.createElement(Menu.Items, { className: 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.createElement(React.Fragment, null,
React.createElement("div", { className: 'py-1' }, dropdown.data.map(function (item) { return (React.createElement(Menu.Item, { key: item.content }, function (_a) {
var active = _a.active;
return (React.createElement("div", { className: 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.createElement(React.Fragment, null,
React.createElement(PHXBadge, { type: badgeType, text: badgeText }))))) : (React.createElement(React.Fragment, null));
};
var SubSectionHeader = function (_a) {
var title = _a.title, headerAction = _a.headerAction;
return (title && (React.createElement("div", { className: classNames(type === 'modal' && 'px-5 py-3', 'flex justify-between items-center px-4') },
React.createElement("span", { className: 'text-xs font-semibold leading-5 text-gray-900' }, title),
headerAction &&
(isHeaderDownload ? (React.createElement(PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (React.createElement(React.Fragment, null,
headerAction.content !== 'pencil' && headerAction.content !== 'pencil & remove' ? (React.createElement(React.Fragment, null, headerAction.content === 'close' ? (React.createElement("button", { type: 'button', className: 'rounded-md p-1 bg-white text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick },
React.createElement(React.Fragment, null,
React.createElement("span", { className: 'sr-only' }, "Close"),
React.createElement(XMarkIcon, { className: 'h-4 w-4', "aria-hidden": 'true' })))) : (React.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.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.createElement(PencilIcon, { className: 'h-[15px] w-[15px] active:text-gray-600', "aria-hidden": 'true' }))),
headerAction.content === 'pencil & remove' && (React.createElement("div", { className: 'flex' },
React.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.createElement(TrashIcon, { className: 'h-4 w-4 text-red-800 active:text-red-900', "aria-hidden": 'true' })),
React.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.createElement(PencilIcon, { className: 'h-[15px] w-[15px] active:text-gray-600', "aria-hidden": 'true' }))))))))));
};
return (React.createElement(React.Fragment, null, cardType === 'card-component' ? (React.createElement("div", { className: 'w-full' },
React.createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
React.createElement("div", { className: classNames(type === 'modal' ? 'divide-y divide-gray-200' : '', 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]') },
React.createElement("div", { className: 'flex items-center justify-between px-4 pt-4' },
React.createElement("span", { className: classNames('flex-1 truncate text-sm font-semibold leading-5 text-gray-900') }, title),
React.createElement("div", null, loadingSpinner ? React.createElement(PHXSpinner, { className: 'mr-4 flex h-5 w-5 items-center justify-center' }) : ''),
React.createElement("div", { className: classNameFist }, componentFist),
React.createElement("div", { className: classNameLast }, componentLast)),
subSection
? subSection.map(function (item, index) { return (React.createElement("div", { key: index, className: classNames(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
React.createElement(SubSectionHeader, { headerAction: item.headerAction, index: index, title: item.title }),
item.component && (React.createElement("div", { className: classNames(type === 'modal' ? 'px-5 py-3' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))); })
: null,
dataListLi && (React.createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLi.map(function (item, index) { return (React.createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))),
children ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: classNames(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') }, children))) : null,
footerActionMarkup)))) : (React.createElement("div", { className: 'w-full' }, dataListLiDouble ? (React.createElement("div", { className: 'shadow-[0rem_0.0625rem_0rem_#1a1a1a12] rounded-lg' },
React.createElement("div", { className: 'rounded-t-lg bg-white border border-gray-200 border-b-0' }, dataListLiDouble && (React.createElement(React.Fragment, null,
React.createElement(HeaderActionMarkup, { title: dataListLiDouble.top.title }),
React.createElement("div", { className: 'text-xs px-6 pt-3 pb-4' }, dataListLiDouble.top.data.map(function (item, index) { return (React.createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))))),
React.createElement("div", { className: 'rounded-b-lg bg-gray-100 border border-gray-200 border-t-0' }, dataListLiDouble && (React.createElement(React.Fragment, null,
React.createElement(HeaderActionMarkup, { title: dataListLiDouble.bottom.title }),
React.createElement("div", { className: 'text-xs px-6 pt-3 pb-4' }, dataListLiDouble.bottom.data.map(function (item, index) { return (React.createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))))))) : (React.createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
React.createElement("div", { className: classNames(type === 'modal' ? 'divide-y divide-gray-200' : '', 'shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200') },
title && React.createElement(HeaderActionMarkup, { title: title }),
subSection
? subSection.map(function (item, index) { return (React.createElement("div", { key: index, className: classNames(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
React.createElement(SubSectionHeader, { title: item.title, headerAction: item.headerAction, index: index }),
item.component && (React.createElement("div", { className: classNames(type === 'modal' ? 'py-3 px-5' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))); })
: null,
dataListLi && (React.createElement("div", { className: 'text-xs px-6 pt-3 pb-4' }, dataListLi.map(function (item, index) { return (React.createElement("li", { key: index, className: 'mb-[6px]' }, item.name)); }))),
children ? (React.createElement(React.Fragment, null,
React.createElement("div", { className: classNames(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') }, children))) : null,
footerActionMarkup)))))));
};
PHXCard.Section = Section;
PHXCard.WrapSection = WrapSection;
PHXCard.Footer = Footer;
//# sourceMappingURL=Card.js.map