mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-27 08:39:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): fix the bug of chakra/checkbox with correct way

Browse Source
This commit is contained in:
BugMaker.Huang 2022-08-01 19:52:26 +08:00
parent 86205162fb
commit 20b52c74bb
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/chakra-ui-lib/src/components/Checkbox.tsx
View File

@ -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);
}
});
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>

16
packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
View File

@ -137,10 +137,7 @@ export class EditorMaskManager {
};
private getMaskPosition(id: string) {
let rect = this.eleMap.get(id)?.getBoundingClientRect();
if (this.eleMap.get(id)?.classList.contains('chakra-checkbox__input')) {
rect = this.eleMap.get(id)?.parentElement?.getBoundingClientRect();
}
const rect = this.eleMap.get(id)?.getBoundingClientRect();
if (!this.maskContainerRect || !rect) return null;
return {
id,
@ -182,7 +179,7 @@ export class EditorMaskManager {
// check all the parents of hoverElement, until find a sunmao component's element
let curr = hoverElement;
while (!this.elementIdMap.has(curr) && !curr.classList.contains('chakra-checkbox')) {
while (!this.elementIdMap.has(curr)) {
if (curr !== root && curr.parentElement) {
curr = curr.parentElement;
} else {
@ -191,14 +188,7 @@ export class EditorMaskManager {
}
this.lastHoverElement = hoverElement;
if (curr.classList.contains('chakra-checkbox')) {
this.setHoverComponentId(
this.elementIdMap.get(curr.querySelector('.chakra-checkbox__input') as Element) ||
''
);
} else {
this.setHoverComponentId(this.elementIdMap.get(curr) || '');
}
this.setHoverComponentId(this.elementIdMap.get(curr) || '');
}
private refreshMaskPosition() {