design-system-simplefi
Version:
Design System for SimpleFi Applications
23 lines • 2.2 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React from 'react';
import styled, { css } from 'styled-components';
import { SortButton } from '../../../SortButton';
import { Icon } from '../../../Icon';
import { FlexContainer } from '../../../layout';
var HeaderButtonSt = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline;\n z-index: 2;\n font-size: inherit;\n cursor: pointer;\n letter-spacing: 1px;\n text-align: center;\n white-space: nowrap;\n appearance: none;\n background: none;\n border: none;\n margin: none;\n text-transform: capitalize;\n\n ", ";\n"], ["\n display: inline;\n z-index: 2;\n font-size: inherit;\n cursor: pointer;\n letter-spacing: 1px;\n text-align: center;\n white-space: nowrap;\n appearance: none;\n background: none;\n border: none;\n margin: none;\n text-transform: capitalize;\n\n ", ";\n"])), function (_a) {
var filterable = _a.filterable;
return !filterable && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: default;\n outline: none;\n "], ["\n cursor: default;\n outline: none;\n "])));
});
var HeadingButton = function (_a) {
var onClick = _a.onClick, filterable = _a.filterable, children = _a.children, activeFilter = _a.activeFilter, sortable = _a.sortable, onSortClick = _a.onSortClick, activeSort = _a.activeSort;
return (React.createElement(FlexContainer, { alignItems: "center", flexDirection: "row", justifyContent: "space-evenly" },
sortable && (React.createElement(SortButton, { direction: activeSort || null, onClick: onSortClick })),
React.createElement(HeaderButtonSt, { filterable: filterable, type: "button", onClick: filterable ? onClick : null }, children),
filterable && (React.createElement(Icon, { color: !activeFilter ? 'lightGrey' : 'lightPurple', name: "filter" }))));
};
export default HeadingButton;
var templateObject_1, templateObject_2;
//# sourceMappingURL=HeadingButton.js.map