feat: add custom checkbox icons (#7608)

Добавляет возможность прокидывать в Checkbox альтернативные иконки
VKCOM · Sep 17, 2024 · 90ef7d9 · 90ef7d9
1 parent e038ab0
commit 90ef7d9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx b/packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx
@@ -16,6 +16,12 @@ import { RootComponent } from '../../RootComponent/RootComponent';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './CheckboxInput.module.css';
 
+type VendorIconType = typeof Icon20CheckBoxOn;
+
+export type CheckboxInputIconType =
+  | React.ComponentType<React.SVGProps<SVGSVGElement>>
+  | VendorIconType;
+
 function setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {
   el.indeterminate = indeterminate;
 }
@@ -26,6 +32,11 @@ export interface CheckboxInputProps
     HasRef<HTMLInputElement> {
   indeterminate?: boolean;
   defaultIndeterminate?: boolean;
+  IconOnCompact?: CheckboxInputIconType;
+  IconOnRegular?: CheckboxInputIconType;
+  IconOffCompact?: CheckboxInputIconType;
+  IconOffRegular?: CheckboxInputIconType;
+  IconIndeterminate?: CheckboxInputIconType;
 }
 
 const warn = warnOnce('Checkbox');
@@ -38,6 +49,11 @@ export function CheckboxInput({
   indeterminate,
   defaultIndeterminate,
   onChange,
+  IconOnCompact = Icon20CheckBoxOn,
+  IconOnRegular = Icon24CheckBoxOn,
+  IconOffCompact = Icon20CheckBoxOff,
+  IconOffRegular = Icon24CheckBoxOff,
+  IconIndeterminate = Icon20CheckBoxIndetermanate,
   ...restProps
 }: CheckboxInputProps) {
   const inputRef = useExternRef(getRef);
@@ -100,19 +116,19 @@ export function CheckboxInput({
         getRootRef={inputRef}
       />
       {platform === 'vkcom' ? (
-        <Icon20CheckBoxOn className={styles['CheckboxInput__icon--on']} />
+        <IconOnCompact className={styles['CheckboxInput__icon--on']} />
       ) : (
         <React.Fragment>
           {adaptiveSizeY.compact && (
-            <Icon20CheckBoxOn
+            <IconOnCompact
               className={classNames(
                 styles['CheckboxInput__icon--on'],
                 adaptiveSizeY.compact.className,
               )}
             />
           )}
           {adaptiveSizeY.regular && (
-            <Icon24CheckBoxOn
+            <IconOnRegular
               className={classNames(
                 styles['CheckboxInput__icon--on'],
                 adaptiveSizeY.regular.className,
@@ -122,19 +138,19 @@ export function CheckboxInput({
         </React.Fragment>
       )}
       {platform === 'vkcom' ? (
-        <Icon20CheckBoxOff className={styles['CheckboxInput__icon--off']} />
+        <IconOffCompact className={styles['CheckboxInput__icon--off']} />
       ) : (
         <React.Fragment>
           {adaptiveSizeY.compact && (
-            <Icon20CheckBoxOff
+            <IconOffCompact
               className={classNames(
                 styles['CheckboxInput__icon--off'],
                 adaptiveSizeY.compact.className,
               )}
             />
           )}
           {adaptiveSizeY.regular && (
-            <Icon24CheckBoxOff
+            <IconOffRegular
               className={classNames(
                 styles['CheckboxInput__icon--off'],
                 adaptiveSizeY.regular.className,
@@ -144,15 +160,15 @@ export function CheckboxInput({
         </React.Fragment>
       )}
       {platform === 'vkcom' ? (
-        <Icon20CheckBoxIndetermanate
+        <IconIndeterminate
           width={20}
           height={20}
           className={styles['CheckboxInput__icon--indeterminate']}
         />
       ) : (
         <React.Fragment>
           {adaptiveSizeY.compact && (
-            <Icon20CheckBoxIndetermanate
+            <IconIndeterminate
               className={classNames(
                 styles['CheckboxInput__icon--indeterminate'],
                 adaptiveSizeY.compact.className,
@@ -162,7 +178,7 @@ export function CheckboxInput({
             />
           )}
           {adaptiveSizeY.regular && (
-            <Icon20CheckBoxIndetermanate
+            <IconIndeterminate
               className={classNames(
                 styles['CheckboxInput__icon--indeterminate'],
                 adaptiveSizeY.regular.className,

diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
@@ -310,6 +310,7 @@ export { RadioGroup } from './components/RadioGroup/RadioGroup';
 export type { RadioGroupProps } from './components/RadioGroup/RadioGroup';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export type { CheckboxProps } from './components/Checkbox/Checkbox';
+export type { CheckboxInputIconType } from './components/Checkbox/CheckboxInput/CheckboxInput';
 export { Select } from './components/Select/Select';
 export { SelectMimicry } from './components/SelectMimicry/SelectMimicry';
 export type { SelectMimicryProps } from './components/SelectMimicry/SelectMimicry';