UNPKG

@shopify/polaris

Version:

Shopify’s product component library

82 lines (77 loc) 3.75 kB
import React$1 from 'react'; import { useFeatures } from '../../utilities/features/hooks.js'; import { useI18n } from '../../utilities/i18n/hooks.js'; import { classNames } from '../../utilities/css.js'; import { Popover as Popover$1 } from '../Popover/Popover.js'; import { ActionList as ActionList$1 } from '../ActionList/ActionList.js'; import { Button as Button$1 } from '../Button/Button.js'; import { buttonFrom } from '../Button/utils.js'; import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js'; import { WithinContentContext } from '../../utilities/within-content-context.js'; import { ButtonGroup as ButtonGroup$1 } from '../ButtonGroup/ButtonGroup.js'; import styles from './Card.scss.js'; import { Header as Header$1 } from './components/Header/Header.js'; import { Section as Section$1 } from './components/Section/Section.js'; import { Subsection as Subsection$1 } from './components/Subsection/Subsection.js'; // TypeScript can't generate types that correctly infer the typing of // subcomponents so explicitly state the subcomponents in the type definition. // Letting this be implicit works in this project but fails in projects that use // generated *.d.ts files. var Card = function Card({ children, title, subdued, sectioned, actions, primaryFooterAction, secondaryFooterActions, secondaryFooterActionsDisclosureText, footerActionAlignment = 'right' }) { var i18n = useI18n(); var { newDesignLanguage } = useFeatures(); var { value: secondaryActionsPopoverOpen, toggle: toggleSecondaryActionsPopoverOpen } = useToggle$1(false); var className = classNames(styles.Card, subdued && styles.subdued, newDesignLanguage && styles.newDesignLanguage); var headerMarkup = title || actions ? /*#__PURE__*/React$1.createElement(Header$1, { actions: actions, title: title }) : null; var content = sectioned ? /*#__PURE__*/React$1.createElement(Section$1, null, children) : children; var primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, { primary: true }) : null; var secondaryFooterActionsMarkup = null; if (secondaryFooterActions && secondaryFooterActions.length) { if (secondaryFooterActions.length === 1) { secondaryFooterActionsMarkup = buttonFrom(secondaryFooterActions[0]); } else { secondaryFooterActionsMarkup = /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Popover$1, { active: secondaryActionsPopoverOpen, activator: /*#__PURE__*/React$1.createElement(Button$1, { disclosure: true, onClick: toggleSecondaryActionsPopoverOpen }, secondaryFooterActionsDisclosureText || i18n.translate('Polaris.Common.more')), onClose: toggleSecondaryActionsPopoverOpen }, /*#__PURE__*/React$1.createElement(ActionList$1, { items: secondaryFooterActions }))); } } var footerMarkup = primaryFooterActionMarkup || secondaryFooterActionsMarkup ? /*#__PURE__*/React$1.createElement("div", { className: classNames(styles.Footer, footerActionAlignment === 'left' && styles.LeftJustified) }, footerActionAlignment === 'right' ? /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, secondaryFooterActionsMarkup, primaryFooterActionMarkup) : /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, primaryFooterActionMarkup, secondaryFooterActionsMarkup)) : null; return /*#__PURE__*/React$1.createElement(WithinContentContext.Provider, { value: true }, /*#__PURE__*/React$1.createElement("div", { className: className }, headerMarkup, content, footerMarkup)); }; Card.Header = Header$1; Card.Section = Section$1; Card.Subsection = Subsection$1; export { Card };