add ref to chakra-ui components

2025-02-17 17:40:31 +08:00 · 2022-02-10 15:32:12 +08:00 · 2022-02-10 15:32:12 +08:00 · f40c42fa8a
commit f40c42fa8a
parent cb3d7e9dd2
26 changed files with 79 additions and 41 deletions
--- a/packages/chakra-ui-lib/src/components/Box.tsx
+++ b/packages/chakra-ui-lib/src/components/Box.tsx
@ -295,7 +295,7 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ customStyle, slotsElements, ...restProps }) => {
+})(({ customStyle, slotsElements, $ref, ...restProps }) => {
  const styleProps = pick(restProps, StyleProps);
  return (
    <BaseBox
@ -309,6 +309,7 @@ export default implementRuntimeComponent({
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    >
      {slotsElements.content}
    </BaseBox>
--- a/packages/chakra-ui-lib/src/components/Checkbox.tsx
+++ b/packages/chakra-ui-lib/src/components/Checkbox.tsx
@ -80,6 +80,7 @@ export default implementRuntimeComponent({
    colorScheme,
    mergeState,
    customStyle,
+    $ref,
  }) => {
    const groupContext = useCheckboxGroupContext();
    let _defaultIsChecked = false;
@ -133,6 +134,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        <Text value={text} />
      </BaseCheckbox>
--- a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Type } from '@sinclair/typebox';
-import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
+import { Box, CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { SizePropertySchema, IsDisabledSchema } from './Checkbox';

@ -40,20 +40,22 @@ export default implementRuntimeComponent({
    styleSlots: [],
    events: [],
  },
-})(({ size, defaultValue, isDisabled, slotsElements, mergeState }) => {
+})(({ size, defaultValue, isDisabled, slotsElements, mergeState, $ref }) => {
  const [value, setValue] = useState(defaultValue);
  useEffect(() => {
    mergeState({ value });
  }, [mergeState, value]);

  return (
-    <BaseCheckboxGroup
-      size={size}
-      defaultValue={defaultValue}
-      isDisabled={isDisabled}
-      onChange={val => setValue(val)}
-    >
-      {slotsElements.content}
-    </BaseCheckboxGroup>
+    <Box ref={$ref}>
+      <BaseCheckboxGroup
+        size={size}
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        onChange={val => setValue(val)}
+      >
+        {slotsElements.content}
+      </BaseCheckboxGroup>
+    </Box>
  );
 });
--- a/packages/chakra-ui-lib/src/components/Dialog.tsx
+++ b/packages/chakra-ui-lib/src/components/Dialog.tsx
@ -75,6 +75,7 @@ export default implementRuntimeComponent({
      colorScheme: 'blue',
    },
    customStyle,
+    $ref,
  }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [title, setTitle] = useState(customerTitle || '');
@ -129,6 +130,7 @@ export default implementRuntimeComponent({
          <AlertDialogContent
            className={`${customStyle?.content}`}
            {...(containerRef.current ? dialogContentProps : {})}
+            ref={$ref}
          >
            <AlertDialogHeader>{title}</AlertDialogHeader>
            <AlertDialogBody>{slotsElements.content}</AlertDialogBody>
--- a/packages/chakra-ui-lib/src/components/Divider.tsx
+++ b/packages/chakra-ui-lib/src/components/Divider.tsx
@ -25,12 +25,13 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ customStyle }) => {
+})(({ customStyle, $ref }) => {
  return (
    <Divider
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    />
  );
 });
--- a/packages/chakra-ui-lib/src/components/Form/Form.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/Form.tsx
@ -48,6 +48,7 @@ export default implementRuntimeComponent({
    slotsElements,
    childrenMap,
    component,
+    $ref,
  }) => {
    const [invalidArray, setInvalidArray] = useState<boolean[]>([]);
    const [isFormInvalid, setIsFormInvalid] = useState<boolean>(false);
@ -151,6 +152,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        {slotsElements.content}
        {hideSubmit ? undefined : (
--- a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
+++ b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx
@ -69,6 +69,7 @@ export default implementRuntimeComponent({
    slotsElements,
    childrenMap,
    component,
+    $ref,
  }) => {
    const [inputValue, setInputValue] = useState('');
    // don't show Invalid state on component mount
@ -147,6 +148,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        <HStack width="full">
          <FormLabel flex="0 0 auto" width="33%" margin="auto 0">
--- a/packages/chakra-ui-lib/src/components/Image.tsx
+++ b/packages/chakra-ui-lib/src/components/Image.tsx
@ -129,6 +129,7 @@ export default implementRuntimeComponent({
    crossOrigin,
    callbackMap,
    customStyle,
+    $ref,
  }) => {
    const style = boxSize
      ? css`
@ -154,6 +155,7 @@ export default implementRuntimeComponent({
        ignoreFallback={ignoreFallback}
        borderRadius={borderRadius}
        fallbackSrc={fallbackSrc}
+        ref={$ref}
      />
    );
  }
--- a/packages/chakra-ui-lib/src/components/Kbd.tsx
+++ b/packages/chakra-ui-lib/src/components/Kbd.tsx
@ -39,7 +39,7 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ text, mergeState, customStyle }) => {
+})(({ text, mergeState, customStyle, $ref }) => {
  useEffect(() => {
    mergeState({ value: text.raw });
  }, [mergeState, text.raw]);
@ -49,6 +49,7 @@ export default implementRuntimeComponent({
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    >
      <Text value={text} />
    </BaseKbd>
--- a/packages/chakra-ui-lib/src/components/Link.tsx
+++ b/packages/chakra-ui-lib/src/components/Link.tsx
@ -37,7 +37,7 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ text, href, isExternal, customStyle }) => {
+})(({ text, href, isExternal, customStyle, $ref }) => {
  return (
    <Link
      href={href}
@ -46,6 +46,7 @@ export default implementRuntimeComponent({
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    >
      <Text value={text} />
    </Link>
--- a/packages/chakra-ui-lib/src/components/List.tsx
+++ b/packages/chakra-ui-lib/src/components/List.tsx
@ -56,7 +56,7 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ listData, template, app, services, customStyle }) => {
+})(({ listData, template, app, services, customStyle, $ref }) => {
  if (!listData) {
    return null;
  }
@ -88,6 +88,7 @@ export default implementRuntimeComponent({
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    >
      {listItems}
    </BaseList>
--- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx
+++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx
@ -96,6 +96,7 @@ export default implementRuntimeComponent({
    variant,
    mergeState,
    customStyle,
+    $ref,
  }) => {
    useEffect(() => {
      const newValue = (defaultValue || []).map(o => o.value);
@ -113,6 +114,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        <BaseMultiSelect
          isMulti
--- a/packages/chakra-ui-lib/src/components/NumberInput.tsx
+++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx
@ -86,6 +86,7 @@ export default implementRuntimeComponent({
    mergeState,
    subscribeMethods,
    customStyle,
+    $ref,
  }) => {
    const [value, setValue] = useState(defaultValue);
    const onChange = (_: string, valueAsNumber: number) => setValue(valueAsNumber || 0);
@ -125,6 +126,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        <NumberInputField />
        <NumberInputStepper>
--- a/packages/chakra-ui-lib/src/components/Radio.tsx
+++ b/packages/chakra-ui-lib/src/components/Radio.tsx
@ -74,6 +74,7 @@ export default implementRuntimeComponent({
    colorScheme,
    mergeState,
    customStyle,
+    $ref,
  }) => {
    useEffect(() => {
      mergeState({ value: text.raw });
@ -99,6 +100,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        <Text value={text} />
      </BaseRadio>
--- a/packages/chakra-ui-lib/src/components/RadioGroup.tsx
+++ b/packages/chakra-ui-lib/src/components/RadioGroup.tsx
@ -38,7 +38,7 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ defaultValue, isNumerical, slotsElements, mergeState, customStyle }) => {
+})(({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, $ref }) => {
  const [value, setValue] = useState(defaultValue);

  useEffect(() => {
@ -56,6 +56,7 @@ export default implementRuntimeComponent({
      className={css`
        ${customStyle?.content}
      `}
+      ref={$ref}
    >
      {slotsElements.content}
    </BaseRadioGroup>
--- a/packages/chakra-ui-lib/src/components/Root.tsx
+++ b/packages/chakra-ui-lib/src/components/Root.tsx
@ -24,7 +24,7 @@ export default implementRuntimeComponent({
    styleSlots: [],
    events: [],
  },
-})(({ slotsElements }) => {
+})(({ slotsElements, $ref }) => {
  return (
    <ChakraProvider
      theme={extendTheme({
@ -32,7 +32,7 @@ export default implementRuntimeComponent({
        useSystemColorMode: false,
      })}
    >
-      <>{slotsElements.root}</>
+      <div ref={$ref}>{slotsElements.root}</div>
    </ChakraProvider>
  );
 });
--- a/packages/chakra-ui-lib/src/components/Select.tsx
+++ b/packages/chakra-ui-lib/src/components/Select.tsx
@ -95,6 +95,7 @@ export default implementRuntimeComponent({
    variant,
    mergeState,
    customStyle,
+    $ref,
  }) => {
    const [value, setValue] = useState<string | undefined>(defaultValue);

@ -123,6 +124,7 @@ export default implementRuntimeComponent({
        className={css`
          ${customStyle?.content}
        `}
+        ref={$ref}
      >
        {options.map(opt => (
          <option key={opt.value} value={opt.value}>
--- a/packages/chakra-ui-lib/src/components/Stack.tsx
+++ b/packages/chakra-ui-lib/src/components/Stack.tsx
@ -70,9 +70,9 @@ export default implementRuntimeComponent({
    styleSlots: [],
    events: [],
  },
-})(({ direction, wrap, align, justify, spacing, slotsElements }) => {
+})(({ direction, wrap, align, justify, spacing, slotsElements, $ref }) => {
  return (
-    <BaseStack {...{ direction, wrap, align, justify, spacing }}>
+    <BaseStack {...{ direction, wrap, align, justify, spacing }} ref={$ref}>
      {slotsElements.content}
    </BaseStack>
  );
--- a/packages/chakra-ui-lib/src/components/Table/Table.tsx
+++ b/packages/chakra-ui-lib/src/components/Table/Table.tsx
@ -32,6 +32,7 @@ export const TableImpl = implementTable(
    mergeState,
    services,
    app,
+    $ref,
  }) => {
    const [selectedItem, setSelectedItem] = useState<Record<string, any> | undefined>();
    const [selectedItems, setSelectedItems] = useState<Array<Record<string, any>>>([]);
@ -86,7 +87,7 @@ export const TableImpl = implementTable(
        let newSelectedItems;
        if (isItemSelected(item)) {
          newSelectedItems = selectedItems.filter(
-            selectedItem => selectedItem[majorKey] != item[majorKey]
+            selectedItem => selectedItem[majorKey] !== item[majorKey]
          );
        } else {
          newSelectedItems = selectedItems.concat(item);
@ -115,7 +116,7 @@ export const TableImpl = implementTable(
            isIndeterminate={isIndeterminate}
            checked={isAllChecked}
            onChange={onChange}
-          ></Checkbox>
+          />
        </Th>
      );
    }, [data, isMultiSelect, selectedItems.length, updateSelectedItems]);
@ -169,7 +170,7 @@ export const TableImpl = implementTable(
                  key="$checkbox"
                  onClick={onClickCheckbox}
                >
-                  <Checkbox size="lg" isChecked={isSelected}></Checkbox>
+                  <Checkbox size="lg" isChecked={isSelected} />
                </Td>
              );

@ -222,6 +223,7 @@ export const TableImpl = implementTable(
        borderColor="gray.200"
        borderRadius="base"
        overflow="auto"
+        ref={$ref}
      >
        {!data ? loadingSpinner : tableContent}
      </Box>
--- a/packages/chakra-ui-lib/src/components/Tabs.tsx
+++ b/packages/chakra-ui-lib/src/components/Tabs.tsx
@ -47,7 +47,7 @@ export default implementRuntimeComponent({
    events: [],
  },
 })(props => {
-  const { tabNames, mergeState, initialSelectedTabIndex, customStyle, slotsElements } =
+  const { tabNames, mergeState, initialSelectedTabIndex, customStyle, slotsElements, $ref } =
    props;
  const [selectedTabIndex, setSelectedTabIndex] = useState(initialSelectedTabIndex ?? 0);

@ -62,6 +62,7 @@ export default implementRuntimeComponent({
    <BaseTabs
      defaultIndex={initialSelectedTabIndex}
      onChange={idx => setSelectedTabIndex(idx)}
+      ref={$ref}
    >
      <TabList>
        {tabNames.map((name, idx) => (
--- a/packages/chakra-ui-lib/src/components/Tooltip.tsx
+++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx
@ -68,6 +68,7 @@ export default implementRuntimeComponent({
    isDisabled,
    defaultIsOpen,
    slotsElements,
+    $ref,
  }) => {
    return (
      /* 
@ -82,6 +83,7 @@ export default implementRuntimeComponent({
        isDisabled={isDisabled}
        defaultIsOpen={defaultIsOpen}
        shouldWrapChildren={shouldWrapChildren}
+        ref={$ref}
      >
        {slotsElements.content}
      </Tooltip>
--- a/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
+++ b/packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
@ -124,8 +124,8 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {

  const getMaskPosition = useCallback(
    (componentId: string) => {
-      if (!wrapperRect.current) return;
      const rect = rects[componentId];
+      if (!wrapperRect.current || !rect) return;
      return {
        id: componentId,
        style: {
--- a/packages/runtime/src/components/_internal/ModuleRenderer.tsx
+++ b/packages/runtime/src/components/_internal/ModuleRenderer.tsx
@ -8,10 +8,14 @@ import {
  RuntimeApplication,
  RuntimeComponentSchema,
 } from '@sunmao-ui/core';
-import { UIServices, ModuleSchema } from '../../types';
 import { ImplWrapper } from './ImplWrapper';
 import { watch } from '../../utils/watchReactivity';
-import { ImplementedRuntimeModule, EventHandlerSchema } from '../../types';
+import {
+  ImplementedRuntimeModule,
+  EventHandlerSchema,
+  UIServices,
+  ModuleSchema,
+} from '../../types';
 import { resolveChildrenMap } from '../../utils/resolveChildrenMap';

 type Props = Static<typeof ModuleSchema> & {
@ -20,19 +24,20 @@ type Props = Static<typeof ModuleSchema> & {
  app?: RuntimeApplication;
 };

-export const ModuleRenderer: React.FC<Props> = props => {
+export const ModuleRenderer = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
  const { type, services } = props;
  try {
    const moduleSpec = services.registry.getModuleByType(type);
    return <ModuleRendererContent {...props} moduleSpec={moduleSpec} />;
  } catch {
-    return <span>Cannot find Module {type}.</span>;
+    return <div ref={ref}>Cannot find Module {type}.</div>;
  }
-};
+});

-const ModuleRendererContent: React.FC<
+const ModuleRendererContent = React.forwardRef<
+  HTMLDivElement,
  Props & { moduleSpec: ImplementedRuntimeModule }
-> = props => {
+>((props, ref) => {
  const { moduleSpec, properties, handlers, evalScope, services, app } = props;
  const moduleId = services.stateManager.maskedEval(props.id, true, evalScope) as string;

@ -159,8 +164,8 @@ const ModuleRendererContent: React.FC<
    });
  }, [evaledModuleTemplate, services, app]);

-  return <>{result}</>;
-};
+  return <div ref={ref}>{result}</div>;
+});

 function parseTypeComponents(
  c: Application['spec']['components'][0]
--- a/packages/runtime/src/components/_internal/Text.tsx
+++ b/packages/runtime/src/components/_internal/Text.tsx
@ -1,3 +1,4 @@
+import React from 'react';
 import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
 import { Static, Type } from '@sinclair/typebox';
@ -17,14 +18,14 @@ export type TextProps = {
  cssStyle?: string;
 };

-const Text: React.FC<TextProps> = ({ value, cssStyle }) => {
+const Text = React.forwardRef<HTMLDivElement, TextProps>(({ value, cssStyle }, ref) => {
  const text = typeof value.raw === 'string' ? value.raw : `${value.raw}`;
  if (value.format === 'md') {
    const Div = styled.div`
      ${cssStyle}
    `;
    return (
-      <Div>
+      <Div ref={ref}>
        <ReactMarkdown>{text}</ReactMarkdown>
      </Div>
    );
@ -34,7 +35,7 @@ const Text: React.FC<TextProps> = ({ value, cssStyle }) => {
  const Span = styled.span`
    ${cssStyle}
  `;
-  return <Span>{text}</Span>;
-};
+  return <Span ref={ref}>{text}</Span>;
+});

 export default Text;
--- a/packages/runtime/src/components/core/ModuleContainer.tsx
+++ b/packages/runtime/src/components/core/ModuleContainer.tsx
@ -27,7 +27,7 @@ export default implementRuntimeComponent({
    styleSlots: [],
    events: [],
  },
-})(({ id, type, properties, handlers, services, app }) => {
+})(({ id, type, properties, handlers, services, app, $ref }) => {
  if (!type) {
    return <span>Please choose a module to render.</span>;
  }
@ -43,6 +43,7 @@ export default implementRuntimeComponent({
      handlers={handlers}
      services={services}
      app={app}
+      ref={$ref}
    />
  );
 });
--- a/packages/runtime/src/components/core/Text.tsx
+++ b/packages/runtime/src/components/core/Text.tsx
@ -37,6 +37,6 @@ export default implementRuntimeComponent({
    styleSlots: ['content'],
    events: [],
  },
-})(({ value, customStyle }) => {
-  return <_Text value={value} cssStyle={customStyle?.content} />;
+})(({ value, customStyle, $ref }) => {
+  return <_Text value={value} cssStyle={customStyle?.content} ref={$ref} />;
 });