design-system-simplefi
Version:
Design System for SimpleFi Applications
55 lines • 3.89 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, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { includes } from 'ramda';
import { IconTypes, SFIIconsNames } from '../../theme/icons/icons.enums';
import { getBorderRadius, getColor, pxToRem } from '../../utils';
import { FlexContainer } from '../layout/FlexContainer';
import { Icon } from '../Icon';
import { Strong, Text } from '../typography';
import { TextSizes } from '../typography/Text/Text.enums';
var Header = styled(FlexContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n padding: ", ";\n cursor: pointer;\n"], ["\n width: 100%;\n height: ", ";\n padding: ", ";\n cursor: pointer;\n"])), pxToRem(60), pxToRem(0, 26));
var Content = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: ", ";\n border-top: 1px solid ", ";\n"], ["\n padding: ", ";\n border-top: 1px solid ", ";\n"])), pxToRem(26), getColor('black'));
var Container = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: ", ";\n ", "\n"], ["\n border: 1px solid ", ";\n border-radius: ", ";\n ", "\n"])), getColor('black'), getBorderRadius, function (_a) {
var withBackground = _a.withBackground;
return withBackground && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), getColor('white'));
});
var Subject = styled(Strong)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-top: ", ";\n"], ["\n display: block;\n margin-top: ", ";\n"])), pxToRem(4));
var StyledIcon = styled(Icon).withConfig({
shouldForwardProp: function (property) { return !includes(property, ['isRotated']); },
})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n transition: transform 200ms;\n ", "\n"], ["\n margin-right: ", ";\n transition: transform 200ms;\n ", "\n"])), pxToRem(26), function (_a) {
var isRotated = _a.isRotated;
return isRotated && 'transform: rotate(90deg);';
});
var Collapsible = function (_a) {
var children = _a.children, className = _a.className, _b = _a.defaultIsOpened, defaultIsOpened = _b === void 0 ? false : _b, subject = _a.subject, title = _a.title, onOpen = _a.onOpen;
var _c = useState(defaultIsOpened), isOpen = _c[0], setOpen = _c[1];
var handleHeaderClick = function () {
var willOpen = !isOpen;
setOpen(willOpen);
if (typeof onOpen === 'function' && willOpen) {
onOpen();
}
};
return (React.createElement(Container, { className: className, withBackground: isOpen },
React.createElement(Header, { alignItems: "center", onClick: handleHeaderClick },
React.createElement(StyledIcon, { isRotated: isOpen, name: SFIIconsNames.chevronRight, type: IconTypes.sfi }),
React.createElement("div", null,
React.createElement(Text, { size: TextSizes.md }, title),
React.createElement(Subject, null, subject))),
isOpen && (React.createElement(Content, { as: "div", size: TextSizes.md }, children))));
};
Collapsible.propTypes = {
subject: PropTypes.string.isRequired,
title: PropTypes.node.isRequired,
className: PropTypes.string,
defaultIsOpened: PropTypes.bool,
onOpen: PropTypes.func,
};
export default Collapsible;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=Collapsible.js.map