feat: add some db datasources and comp methods

Author: sarike

client/packages/openblocks-comps/package.json

@@ -7,6 +7,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
+    "mermaid": "^10.0.2",
     "openblocks-cli": "workspace:^",
     "openblocks-sdk": "workspace:^",
     "react": "17",

client/packages/openblocks-comps/src/comps/mermaidComp/index.tsx

@@ -8,10 +8,11 @@ import {
   withMethodExposing,
 } from "openblocks-sdk";
 
-import Mermaid from "./mermaid"
+import Mermaid from "./mermaid";
 
 const childrenMap = {
-  code: stringExposingStateControl("code",
+  code: stringExposingStateControl(
+    "code",
     `graph LR
    Start --> Stop`
   ),
@@ -26,22 +27,18 @@ const childrenMap = {
 
 const CompBase = new UICompBuilder(childrenMap, (props: any) => {
   const code = props.code.value;
-  return (
-    <Mermaid code={code}/>
-  );
-}).setPropertyViewFn((children: any) => {
-  return (
-    <>
-      <Section name="Basic">
-        {children.code.propertyView({ label: "code" })}
-      </Section>
-      <Section name="Interaction">{children.onEvent.propertyView()}</Section>
-    </>
-  );
-}).build();
+  return <Mermaid code={code} />;
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">{children.code.propertyView({ label: "code" })}</Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
 
 const AppViewCompTemp = withMethodExposing(CompBase, []);
 
-export const MermaidComp = withExposingConfigs(AppViewCompTemp, [
-  new NameConfig("code", ""),
-]);
+export const MermaidComp = withExposingConfigs(AppViewCompTemp, [new NameConfig("code", "")]);

client/packages/openblocks-comps/src/comps/mermaidComp/mermaid.tsx

@@ -1,29 +1,29 @@
-import React, { useEffect, useState } from "react"
-import mermaid from "mermaid"
+import React, { useEffect, useState } from "react";
+import mermaid from "mermaid";
 
 function escape(str: string): string {
-  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: "\"" }
-  return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
-    return entries[t]
-  }).trim()
+  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
+  return str
+    .replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
+      return entries[t];
+    })
+    .trim();
 }
 
 export default ({ id = "graphDiv", code = "" }) => {
-  const [svg, setSvg] = useState('')
+  const [svg, setSvg] = useState("");
 
   useEffect(() => {
-    mermaid.initialize({ startOnLoad: false })
-  }, [])
+    mermaid.initialize({ startOnLoad: false });
+  }, []);
 
   useEffect(() => {
-    if (!code) return
+    if (!code) return;
 
-    mermaid.mermaidAPI.render(id, escape(code)).then(res => {
-      setSvg(res.svg)
-    })
-  }, [code, setSvg])
+    mermaid.mermaidAPI.render(id, escape(code)).then((res) => {
+      setSvg(res.svg);
+    });
+  }, [code, setSvg]);
 
-  return (
-    <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>
-  )
-}
+  return <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>;
+};

client/packages/openblocks-comps/src/index.ts

@@ -1,9 +1,7 @@
 import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
 import { ImageEditorComp } from "./comps/imageEditorComp/index";
-import {MermaidComp} from "./comps/mermaidComp";
 
 export default {
   chart: ChartCompWithDefault,
   imageEditor: ImageEditorComp,
-  mermaid: MermaidComp,
 };

client/packages/openblocks-design/src/icons/icon-query-OceanBase.svg

@@ -205,7 +205,6 @@ export { ReactComponent as MSSQLIcon } from "./icon-query-mssql.svg";
 export { ReactComponent as SMTPIcon } from "./icon-query-SMTP.svg";
 export { ReactComponent as OracleIcon } from "./icon-query-OracleDB.svg";
 export { ReactComponent as ClickHouseIcon } from "./icon-query-ClickHouse.svg";
-export { ReactComponent as OceanBaseIcon } from "./icon-query-OceanBase.svg";
 export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
 export { ReactComponent as EditIcon } from "./icon-edit.svg";
 export { ReactComponent as EditableIcon } from "./icon-editable.svg";

client/packages/openblocks-design/src/icons/index.ts

@@ -16,9 +16,13 @@ import styled from "styled-components";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { IForm } from "../formComp/formDataConstants";
 import { SimpleNameComp } from "../simpleNameComp";
-import { Button100, ButtonCompWrapper, ButtonStyleControl } from "./buttonCompConstants";
+import {
+  Button100,
+  ButtonCompWrapper,
+  buttonRefMethods,
+  ButtonStyleControl,
+} from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
-import { refMethods } from "comps/generators/withMethodExposing";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -177,7 +181,7 @@ const ButtonTmpComp = (function () {
         <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       </>
     ))
-    .setExposeMethodConfigs(refMethods(["focus", "blur", "click"]))
+    .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();
 

client/packages/openblocks/src/comps/comps/buttonComp/buttonComp.tsx

@@ -4,6 +4,8 @@ import { ButtonStyleType, ButtonStyle } from "comps/controls/styleControlConstan
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import styled, { css } from "styled-components";
 import { genActiveColor, genHoverColor } from "openblocks-design";
+import { refMethods } from "comps/generators/withMethodExposing";
+import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
 export function getButtonStyle(buttonStyle: ButtonStyleType) {
   const hoverColor = genHoverColor(buttonStyle.background);
@@ -84,3 +86,9 @@ function fixOldData(oldData: any) {
 }
 const ButtonTmpStyleControl = styleControl(ButtonStyle);
 export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
+
+export const buttonRefMethods = refMethods<HTMLElement>([
+  focusWithOptions,
+  blurMethod,
+  clickMethod,
+]);

client/packages/openblocks/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -1,5 +1,5 @@
 import { Button } from "antd";
-import { ButtonCompWrapper } from "comps/comps/buttonComp/buttonCompConstants";
+import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -19,7 +19,6 @@ import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { RefControl } from "comps/controls/refControl";
-import { refMethods } from "comps/generators/withMethodExposing";
 
 const Link = styled(Button)<{ $style: LinkStyleType }>`
   ${(props) => `color: ${props.$style.text};`}
@@ -110,7 +109,7 @@ const LinkTmpComp = (function () {
         </>
       );
     })
-    .setExposeMethodConfigs(refMethods(["focus", "blur", "click"]))
+    .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();
 

client/packages/openblocks/src/comps/comps/buttonComp/linkComp.tsx

@@ -1,5 +1,9 @@
 import { Button, Dropdown, Menu, Skeleton } from "antd";
-import { Button100, ButtonCompWrapper } from "comps/comps/buttonComp/buttonCompConstants";
+import {
+  Button100,
+  ButtonCompWrapper,
+  buttonRefMethods,
+} from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -16,7 +20,6 @@ import { arrayStringExposingStateControl } from "comps/controls/codeStateControl
 import { BoolControl } from "comps/controls/boolControl";
 import { ItemType } from "antd/lib/menu/hooks/useItems";
 import { RefControl } from "comps/controls/refControl";
-import { refMethods } from "comps/generators/withMethodExposing";
 
 const Error = styled.div`
   color: #f5222d;
@@ -222,7 +225,7 @@ const ScannerTmpComp = (function () {
         </>
       );
     })
-    .setExposeMethodConfigs(refMethods(["focus", "blur", "click"]))
+    .setExposeMethodConfigs(buttonRefMethods)
     .build();
 })();