more-slots

Author: tripolskypetr

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-declarative-mantine",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "The Mantine ui kit bindings for react-declarative",
   "private": false,
   "author": {

package.json

@@ -12,6 +12,9 @@ import Date from './components/Date';
 import Tree from './components/Tree';
 import Time from './components/Time';
 import ComboArray from './components/ComboArray';
+import Switch from './components/Switch';
+import Radio from './components/Radio';
+import CheckBox from './components/CheckBox';
 
 interface IOneSlotFactoryProps {
     children: React.ReactNode;
@@ -28,6 +31,9 @@ export const defaultSlots = {
     Time,
     Tree,
     YesNo,
+    Switch,
+    Radio,
+    CheckBox,
 };
 
 export const OneSlotFactory = ({

src/OneSlotFactory/OneSlotFactory.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Checkbox as UiCheckBox } from '@mantine/core';
+
+import { ICheckBoxSlot } from 'react-declarative';
+
+export const CheckBox = ({
+    disabled,
+    onChange,
+    title,
+    value,
+}: ICheckBoxSlot) => (
+    <UiCheckBox
+        size="md"
+        disabled={disabled}
+        checked={Boolean(value)}
+        onChange={() => onChange(!value)}
+        label={title}
+    />
+);
+
+export default CheckBox;

src/OneSlotFactory/components/CheckBox.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { Radio as UiRadio } from '@mantine/core';
+
+import { useOneRadio, useActualValue, IRadioSlot } from 'react-declarative';
+
+export const Radio = ({
+    disabled,
+    onChange,
+    title,
+    radioValue,
+    value,
+    name = '',
+}: IRadioSlot) => {
+    const [radioMap, setRadioMap] = useOneRadio();
+    const radioMap$ = useActualValue(radioMap);
+
+    const checked = useMemo(() => {
+        return radioMap[name] === radioValue;
+    }, [radioMap]);
+
+    const setValue = useCallback((value: string | null) => setRadioMap((prevRadioMap) => ({
+        ...prevRadioMap,
+        [name]: value,
+    })), []);
+
+    const handleChange = useCallback((value: string | null) => {
+        setValue(value);
+        onChange(value);
+    }, []);
+
+    useEffect(() => {
+        const { current: radioMap } = radioMap$;
+        if (value !== radioMap[name]) {
+            setValue(value);
+        }
+    }, [value]);
+
+    return (
+        <UiRadio
+            size="md"
+            checked={checked}
+            disabled={disabled}
+            onChange={() => handleChange(radioValue || null)}
+            label={title}
+        />
+    );
+};
+
+export default Radio;

src/OneSlotFactory/components/Radio.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { Switch as UiSwitch } from '@mantine/core';
+
+import { ISwitchSlot } from 'react-declarative';
+
+export const Switch = ({
+  disabled,
+  value,
+  onChange,
+  title,
+}: ISwitchSlot) => {
+  return (
+    <UiSwitch
+      size="md"
+      checked={Boolean(value)}
+      disabled={disabled}
+      onChange={() => onChange(!value)}
+      label={title}
+    />
+  );
+};
+
+export default Switch;