opendash
Version:
open.DASH data visualization framework
40 lines • 4.06 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 * as React from "react";
import { Icon as LegacyIcon } from "@ant-design/compatible";
import { Tooltip } from "antd";
import styled from "styled-components";
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n border: 1px solid rgb(217, 217, 217);\n /* border-bottom: none; */\n border-radius: 4px;\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);\n margin-bottom: 24px;\n background: white;\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n border: 1px solid rgb(217, 217, 217);\n /* border-bottom: none; */\n border-radius: 4px;\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);\n margin-bottom: 24px;\n background: white;\n"])));
var Option = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* border: 1px solid ", "; */\n width: calc(100%/", ");\n padding: 10px;\n\n text-align: center;\n color: ", ";\n user-select: none; \n\n cursor: pointer;\n\n &:not(:nth-child(", "n)) {\n border-right: 1px solid rgb(217, 217, 217);\n }\n\n &:not(:nth-last-child(-n+", ")) {\n border-bottom: 1px solid rgb(217, 217, 217);\n }\n\n &:hover {\n background: rgba(0, 0, 0, 0.02);\n }\n\n ", "\n"], ["\n /* border: 1px solid ", "; */\n width: calc(100%/", ");\n padding: 10px;\n\n text-align: center;\n color: ",
";\n user-select: none; \n\n cursor: pointer;\n\n &:not(:nth-child(", "n)) {\n border-right: 1px solid rgb(217, 217, 217);\n }\n\n &:not(:nth-last-child(-n+", ")) {\n border-bottom: 1px solid rgb(217, 217, 217);\n }\n\n &:hover {\n background: rgba(0, 0, 0, 0.02);\n }\n\n ", "\n"])), function (props) { return (props.active ? "#1890ff" : "grey"); }, function (props) { return props.size; }, function (props) {
return props.disabled
? "rgba(0, 0, 0, 0.45)"
: props.active
? "#1890ff"
: "inherit";
}, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.disabled && "cursor: not-allowed;"; });
var IconHolder = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 3em;\n font-size: calc(9em / ", ");\n padding-bottom: 5px;\n"], ["\n font-size: 3em;\n font-size: calc(9em / ", ");\n padding-bottom: 5px;\n"])), function (props) { return props.size; });
var LabelHolder = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
export var Select = function (_a) {
var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 3 : _b;
var actualValue = value || options[0].value;
React.useEffect(function () {
var _a, _b;
if (!value && ((_b = (_a = options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value)) {
onChange(options[0].value);
}
}, [value]);
return (React.createElement(Container, null, options.map(function (option) { return (React.createElement(Tooltip, { title: option.tooltip, placement: "bottom", key: option.value },
React.createElement(Option, { key: option.value, active: actualValue === option.value, disabled: option.disabled, size: size, onClick: function () {
if (!option.disabled && actualValue !== option.value) {
onChange(option.value);
}
} },
React.createElement(IconHolder, { size: size },
React.createElement(LegacyIcon, { type: option.icon })),
React.createElement(LabelHolder, null, option.label)))); })));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=select.js.map