Add and use clsx (classnames alternative) (#2249)
Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
@ -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"
|
||||
|
Reference in New Issue
Block a user