@guardian/threads
Version:
77 lines • 4.14 kB
JavaScript
import { __assign, __extends } from "tslib";
import React, { Fragment, Component } from 'react';
import { MdKeyboardArrowUp, MdKeyboardArrowDown, MdMoreVert, } from 'react-icons/md';
import { WithContextMenu } from '../composables/WithContextMenu/WithContextMenu';
import { WithDropdownMenu } from '../composables/WithDropdownMenu/WithDropdownMenu';
import { WithToolbar } from '../composables/WithToolbar/WithToolbar';
import { MenuItem } from '../Menu/MenuItem';
import { MenuSeparator } from '../Menu/MenuSeparator';
import { Button } from '../Button/Button';
import { WithExpander } from '../composables/WithExpander/WithExpander';
import styles from './Card.module.css';
import { getAccentColor } from '../../utils/AccentUtils';
var Menu = function (_a) {
var menuItems = _a.contextMenuItems, onDelete = _a.onDelete;
return menuItems || onDelete ? (React.createElement(Fragment, null,
menuItems &&
menuItems.map(function (_a) {
var label = _a.label, func = _a.func;
return (React.createElement(MenuItem, __assign({ key: label, onClick: func }, { label: label })));
}),
menuItems && React.createElement(MenuSeparator, null),
onDelete && (React.createElement(MenuItem, { onClick: function () {
onDelete();
}, label: "Delete" })))) : null;
};
var ToolbarWithMenu = function (_a) {
var toolbar = _a.toolbar, menu = _a.menu;
return (React.createElement(React.Fragment, null,
toolbar,
(menu.props.contextMenuItems || menu.props.onDelete) && (React.createElement(WithDropdownMenu, { proxy: React.createElement(Button, { icon: React.createElement(MdMoreVert, null), appearance: "transparent" }) }, menu))));
};
var Card = /** @class */ (function (_super) {
__extends(Card, _super);
function Card() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: true,
deleting: false,
};
_this.setOpen = function (isOpen) {
_this.setState({
isOpen: isOpen,
});
};
return _this;
}
Card.prototype.flipCollapseState = function () {
this.setState(function (s) { return ({
isOpen: !s.isOpen,
}); });
};
Card.prototype.render = function () {
var _this = this;
var _a = this.props, title = _a.title, children = _a.children, onDelete = _a.onDelete, draggable = _a.draggable, accent = _a.accent, compact = _a.compact, contextMenuItems = _a.contextMenuItems, toolbar = _a.toolbar;
var isOpen = this.state.isOpen;
var menu = React.createElement(Menu, __assign({}, { contextMenuItems: contextMenuItems, onDelete: onDelete }));
var Title = function (_a) {
var onToggle = _a.onToggle;
return (React.createElement(WithContextMenu, { menu: menu },
React.createElement(WithToolbar, { className: styles.title, toolbar: React.createElement(ToolbarWithMenu, __assign({}, { toolbar: toolbar, menu: menu })) },
React.createElement(Button, { className: styles.titleButton, appearance: "invisible", onClick: function () {
onToggle();
}, icon: isOpen ? React.createElement(MdKeyboardArrowUp, null) : React.createElement(MdKeyboardArrowDown, null) }, typeof title === 'string' ? React.createElement("div", null, title) : title))));
};
return (React.createElement("div", { draggable: !!draggable, className: compact ? styles.cardCompact : styles.card, "data-with-accent": accent !== null, style: { borderLeftColor: accent ? getAccentColor(accent) : 'black' } },
React.createElement(WithExpander, { isOpen: isOpen, Header: Title, onToggle: function () {
_this.flipCollapseState();
} },
React.createElement("div", { className: styles.contents }, children))));
};
Card.defaultProps = {
title: 'Title',
};
return Card;
}(Component));
export { Card };
//# sourceMappingURL=Card.js.map