Initial commit

assets/js/hooks/Mapper/components/ui-kit/WdCheckbox/WdCheckbox.tsx

@@ -0,0 +1,64 @@
+import classes from './WdCheckbox.module.scss';
+import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
+import { WithClassName } from '@/hooks/Mapper/types/common';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+let counter = 0;
+
+export interface WdCheckboxProps {
+  label: string;
+  classNameLabel?: string;
+  value: boolean;
+  labelSide?: 'left' | 'right';
+  onChange?: (event: CheckboxChangeEvent) => void;
+  size?: 'xs' | 'm' | 'normal';
+}
+
+export const WdCheckbox = ({
+  label,
+  className,
+  classNameLabel,
+  value,
+  onChange,
+  labelSide = 'right',
+  size = 'normal',
+}: WdCheckboxProps & WithClassName) => {
+  const id = useMemo(() => (++counter).toString(), []);
+
+  const labelElement = (
+    <label
+      htmlFor={id}
+      className={clsx(
+        classes.Label,
+        'select-none',
+        {
+          ['ml-1']: labelSide === 'right' && size === 'xs',
+          ['mr-1']: labelSide === 'left' && size === 'xs',
+          ['ml-1.5']: labelSide === 'right' && (size === 'normal' || size === 'm'),
+          ['mr-1.5']: labelSide === 'left' && (size === 'normal' || size === 'm'),
+        },
+        classNameLabel,
+      )}
+    >
+      {label}
+    </label>
+  );
+
+  return (
+    <div className={clsx(className, 'flex items-center')}>
+      {labelSide === 'left' && labelElement}
+      <Checkbox
+        inputId={id}
+        className={clsx(classes.CheckboxRoot, {
+          [classes.SizeNormal]: size === 'normal',
+          [classes.SizeM]: size === 'm',
+          [classes.SizeXS]: size === 'xs',
+        })}
+        onChange={onChange}
+        checked={value}
+      />
+      {labelSide === 'right' && labelElement}
+    </div>
+  );
+};