mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Add and use clsx (classnames alternative) (#2249)
Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
parent
1484c5a63b
commit
b50c54f855
18 changed files with 108 additions and 72 deletions
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue