design-system-simplefi
Version:
Design System for SimpleFi Applications
51 lines • 4.37 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, { useRef, useState } from 'react';
import styled, { css } from 'styled-components';
import { FlexContainer, Inline } from '../layout';
import { useDropdown } from '../../hooks/useDropdown';
import { Text } from '../typography';
import { getColor, pxToRem } from '../../utils';
import { ControlDropdownPlacements } from '../ControlDropdown/ControlDropdown.enums';
var OptionSelectorSt = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 50px;\n border-radius: 5px;\n border: 1px solid ", ";\n text-transform: uppercase;\n padding: 4px;\n font-weight: 300;\n cursor: pointer;\n display: flex;\n justify-content: center;\n ", "\n\n p {\n all: unset;\n margin: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"], ["\n width: 50px;\n border-radius: 5px;\n border: 1px solid ", ";\n text-transform: uppercase;\n padding: 4px;\n font-weight: 300;\n cursor: pointer;\n display: flex;\n justify-content: center;\n ", "\n\n p {\n all: unset;\n margin: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.colors.midPurple;
}, function (_a) {
var isOpen = _a.isOpen;
return !!isOpen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: none;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "], ["\n border-bottom: none;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "])));
});
var FlexContainerSt = styled(FlexContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 0 0 5px 5px;\n p {\n padding: ", ";\n text-transform: uppercase;\n font-weight: 300;\n white-space: nowrap;\n cursor: pointer;\n &:hover {\n font-weight: 400;\n }\n }\n"], ["\n border: 1px solid ", ";\n border-radius: 0 0 5px 5px;\n p {\n padding: ", ";\n text-transform: uppercase;\n font-weight: 300;\n white-space: nowrap;\n cursor: pointer;\n &:hover {\n font-weight: 400;\n }\n }\n"])), getColor('midPurple'), pxToRem(5));
var OptionSelector = function (_a) {
var selectionList = _a.selectionList, onSelect = _a.onSelect, selected = _a.selected, title = _a.title, _b = _a.position, position = _b === void 0 ? ControlDropdownPlacements.bottom : _b, _c = _a.size, size = _c === void 0 ? 'lg' : _c, _d = _a.paneWidth, paneWidth = _d === void 0 ? 50 : _d;
var anchorElRef = useRef(null);
var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
var _f = useDropdown(anchorElRef, {
defaultIsPaneDisplayed: isOpen,
onClickOut: function () { return setIsOpen(false); },
paneWidth: paneWidth,
onShow: function () {
if (isPaneDisplayed) {
setIsOpen(false);
}
else {
setIsOpen(true);
}
},
onHide: function () { return setIsOpen(false); },
placement: position,
isElevated: false,
hasInternalShowHide: false,
}), isPaneDisplayed = _f.isPaneDisplayed, Pane = _f.Pane;
return (React.createElement("div", null,
React.createElement(Inline, { align: "center", gap: "sm" },
React.createElement(Text, { size: size, variant: "primary" }, title),
React.createElement(OptionSelectorSt, { ref: anchorElRef, isOpen: isOpen, onClick: function () { return setIsOpen(!isOpen); } },
React.createElement("p", null, selected),
isOpen && (React.createElement(Pane, null,
React.createElement(FlexContainerSt, { alignItems: "center", flexDirection: "column", justifyContent: "center" }, selectionList.map(function (item) { return (React.createElement("p", { key: item, onClick: function () { return onSelect(item); } }, item)); }))))))));
};
export default OptionSelector;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=SettingSelector.js.map