CB-3891 feat: inverse git sync data (#1965)

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx

@@ -19,6 +19,7 @@ export interface CheckboxBaseProps {
   mod?: CheckboxMod[];
   ripple?: boolean;
   indeterminate?: boolean;
+  inverse?: boolean;
   style?: ComponentStyle;
 }
 
@@ -62,6 +63,7 @@ export const Checkbox: CheckboxType = observer(function Checkbox({
   checked,
   defaultChecked,
   children,
+  inverse,
   mod,
   ripple,
   className,
@@ -77,6 +79,7 @@ export const Checkbox: CheckboxType = observer(function Checkbox({
     defaultChecked,
     state,
     name,
+    inverse,
     onChange,
   });
 

webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx

@@ -27,6 +27,7 @@ const switchMod = {
 interface IBaseProps {
   mod?: Array<keyof typeof switchMod>;
   description?: React.ReactNode;
+  inverse?: boolean;
 }
 
 interface SwitchType {
@@ -45,10 +46,11 @@ export const Switch: SwitchType = observer(function Switch({
   defaultChecked,
   className,
   children,
-  onChange,
+  inverse,
   mod = [],
   autoHide,
   disabled,
+  onChange,
   ...rest
 }: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const checkboxState = useCheckboxState({
@@ -58,6 +60,7 @@ export const Switch: SwitchType = observer(function Switch({
     defaultChecked,
     state,
     name,
+    inverse,
     onChange,
   });
   rest = filterLayoutFakeProps(rest);

webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts

@@ -17,6 +17,7 @@ export type CheckboxStateOptions<TKey extends string> = {
   defaultValue: string | undefined;
   checked: boolean | undefined;
   defaultChecked: boolean | undefined;
+  inverse: boolean | undefined;
 } & (
   | {
       state: undefined;
@@ -56,12 +57,20 @@ export function useCheckboxState<TKey extends string>(options: CheckboxStateOpti
     }
   }
 
+  if (options.inverse) {
+    checked = !checked;
+  }
+
   return useObjectRef<ICheckboxState>(
     () => ({
       checked,
       change(event: React.ChangeEvent<HTMLInputElement>) {
-        const { state, name, value, onChange, count, context } = optionsRef;
-        const checked = event.target.checked;
+        const { inverse, state, name, value, onChange, count, context } = optionsRef;
+        let checked = event.target.checked;
+
+        if (inverse) {
+          checked = !checked;
+        }
 
         if (state !== undefined && name !== undefined) {
           const currentState = state[name as TKey];