@shopify/polaris
Version:
Shopify’s product component library
82 lines (77 loc) • 3.75 kB
JavaScript
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 };