Merge pull request #555 from FriedRiceNoodles/fix/chakra-checkbox-mask

fix(editor): fix a bug which will cause the mask of chakra-ui/checkbo…

packages/chakra-ui-lib/src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Static, Type } from '@sinclair/typebox';
 import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/react';
 import { implementRuntimeComponent, Text, TextPropertySpec } from '@sunmao-ui/runtime';
@@ -116,7 +116,7 @@ export default implementRuntimeComponent({
     colorScheme,
     mergeState,
     customStyle,
-    elementRef,
+    getElement,
   }) => {
     const groupContext = useCheckboxGroupContext();
     let _defaultIsChecked = false;
@@ -127,6 +127,8 @@ export default implementRuntimeComponent({
     }
     const [checked, setChecked] = useState(_defaultIsChecked);
 
+    const ref = useRef<HTMLInputElement>(null);
+
     useEffect(() => {
       mergeState({ text: text.raw });
     }, [mergeState, text.raw]);
@@ -143,6 +145,12 @@ export default implementRuntimeComponent({
       setChecked(!!defaultIsChecked);
     }, [setChecked, defaultIsChecked]);
 
+    useEffect(() => {
+      if (getElement && ref.current) {
+        getElement(ref.current.parentElement as HTMLElement);
+      }
+    }, [getElement, ref]);
+
     const args: {
       colorScheme?: Static<ReturnType<typeof getColorSchemePropertySpec>>;
       size?: Static<typeof SizePropertySpec>;
@@ -170,7 +178,7 @@ export default implementRuntimeComponent({
         className={css`
           ${customStyle?.content}
         `}
-        ref={elementRef}
+        ref={ref}
       >
         <Text value={text} />
       </BaseCheckbox>