Add and use clsx (classnames alternative) (#2249)

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Danila 2020-10-19 17:14:28 +03:00 committed by GitHub
parent 1484c5a63b
commit b50c54f855
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 108 additions and 72 deletions

View file

@ -1,6 +1,7 @@
import "./ToolIcon.scss";
import React from "react";
import clsx from "clsx";
type ToolIconSize = "s" | "m";
@ -45,15 +46,18 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
if (props.type === "button") {
return (
<button
className={`ToolIcon_type_button ${
!props.hidden ? "ToolIcon" : ""
} ${sizeCn}${props.selected ? " ToolIcon--selected" : ""} ${
props.className
} ${
className={clsx(
"ToolIcon_type_button",
sizeCn,
props.className,
props.visible && !props.hidden
? "ToolIcon_type_button--show"
: "ToolIcon_type_button--hide"
}`}
: "ToolIcon_type_button--hide",
{
ToolIcon: !props.hidden,
"ToolIcon--selected": props.selected,
},
)}
hidden={props.hidden}
title={props.title}
aria-label={props["aria-label"]}
@ -78,7 +82,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
}
return (
<label className={`ToolIcon ${props.className ?? ""}`} title={props.title}>
<label className={clsx("ToolIcon", props.className)} title={props.title}>
<input
className={`ToolIcon_type_radio ${sizeCn}`}
type="radio"