@brizy/ui
Version:
React elements in Brizy style
22 lines (21 loc) • 1.48 kB
JavaScript
import React from "react";
import { ifElse } from "ramda";
import { Tooltip } from "../Tooltip";
import { Icon } from "../Icon";
import { getColorStyles } from "./utils";
import { emptyStyles, isString } from "../utils";
import { BRZ_PREFIX } from "../constants";
export const NavListButton = (props) => {
const { items, active, backgroundColor, onChange } = props;
const makeColor = ifElse(isString, getColorStyles, emptyStyles);
return (React.createElement("div", { className: `${BRZ_PREFIX}-navlist-wrapper`, style: makeColor(backgroundColor) },
React.createElement("div", { className: `${BRZ_PREFIX}-navlist-button` }, items.map(({ id, text, icon, tooltipText }) => active === id ? (React.createElement("div", { key: id, className: `${BRZ_PREFIX}-navlist-button__item ${BRZ_PREFIX}-navlist-button__item--active`, onClick: () => {
onChange(id);
} },
React.createElement(Icon, { source: icon, color: "white", hoverColor: "white", size: "19px" }),
React.createElement("span", { className: `${BRZ_PREFIX}-navlist-button__item-text` }, text))) : (React.createElement(Tooltip, { key: id, title: tooltipText || text.toUpperCase() },
React.createElement("div", { className: `${BRZ_PREFIX}-navlist-button__item`, onClick: () => {
onChange(id);
} },
React.createElement(Icon, { source: icon, color: "dark", hoverColor: "dark", size: "19px" }))))))));
};