bi-sdk-react 0.0.8 → 0.0.10

package/src/components/panel/DatasourcePanel.tsx

@@ -18,7 +18,7 @@ import {
 } from "antd";
 import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
-import { DesignerContext } from "../context/DesignerContext";
+import { PageContext } from "../context/PageContext";
 import { IconFont } from "../icon/IconFont";
 import { PaneHeader } from "./PaneHeader";
 import { uuid } from "../utils";
@@ -64,7 +64,7 @@ const Root = styled.div`
 `;
 
 export const DatasourcePanel: React.FC = () => {
-  const { schema, setSchema } = useContext(DesignerContext);
+  const { schema, setSchema } = useContext(PageContext);
 
   const [apiVisible, setApiVisible] = useState(false);
   const [sqlVisible, setSqlVisible] = useState(false);

package/src/components/panel/LayerPanel.tsx

@@ -2,7 +2,7 @@ import { MinusSquareOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { Space, Tooltip, Tree } from "antd";
 import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
-import { DesignerContext } from "../context/DesignerContext";
+import { PageContext } from "../context/PageContext";
 import { uuid } from "../utils";
 import { PaneHeader } from "./PaneHeader";
 
@@ -39,7 +39,7 @@ export const LayerPanel: React.FC = () => {
     selectedItem,
     setSelectedItem: onSelect,
     plugins,
-  } = useContext(DesignerContext);
+  } = useContext(PageContext);
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const selectedKeys = useMemo(
     () => (selectedItem ? [selectedItem.id!] : []),

package/src/components/panel/PropertiesPanel.tsx

@@ -19,7 +19,7 @@ import {
 } from "antd";
 import React, { useContext, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import { DesignerContext } from "../context/DesignerContext";
+import { PageContext } from "../context/PageContext";
 import { IconFont } from "../icon/IconFont";
 import { PaneHeader } from "./PaneHeader";
 import { DataSetOutput, SchemaItemType, FieldType } from "../typing";
@@ -82,7 +82,7 @@ export const PropertiesPanel: React.FC<{
     schema,
     setSchema,
     datasetSelector,
-  } = useContext(DesignerContext);
+  } = useContext(PageContext);
   const refCustomDatasource = useRef<any>(null);
   const [selectedTab, setSelectedTab] = useState<"1" | "2">("1");
   const items = useMemo(() => computeItems(schema?.items || []), [schema]);

package/src/components/panel/ScriptPanel.tsx

@@ -5,7 +5,7 @@ import { PaneHeader } from "./PaneHeader";
 import styled from "styled-components";
 import { IconFont } from "../icon/IconFont";
 import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
-import { DesignerContext } from "../context/DesignerContext";
+import { PageContext } from "../context/PageContext";
 import { ScriptItem } from "../typing";
 
 
@@ -51,7 +51,7 @@ const Root = styled.div`
 `;
 
 export const ScriptPanel: React.FC = () => {
-  const {schema, setSchema} = useContext(DesignerContext);
+  const {schema, setSchema} = useContext(PageContext);
   const [visible, setVisible] = React.useState(false);
   const [editIndex, setEditIndex] = React.useState(-1);
   const [form] = Form.useForm<ScriptItem>();

package/src/components/panel/VariablesPanel.tsx

@@ -4,7 +4,7 @@ import { Table, Button, Space, Popconfirm, Modal, Form, Input } from "antd";
 import { PaneHeader } from "./PaneHeader";
 import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
 import { IconFont } from "../icon/IconFont";
-import { DesignerContext } from "../context/DesignerContext";
+import { PageContext } from "../context/PageContext";
 import { VariableItem } from "../typing";
 
 
@@ -22,7 +22,7 @@ const Root = styled.div`
 `;
 
 export const VariablesPanel: React.FC = () => {
-  const {schema, setSchema} = useContext(DesignerContext);
+  const {schema, setSchema} = useContext(PageContext);
   const [visible, setVisible] = React.useState(false);
   const [editIndex, setEditIndex] = React.useState(-1);
   const [form] = Form.useForm<VariableItem>();

package/src/components/plugins/@antd/item-props/HtmlProps.tsx

@@ -1,18 +1,18 @@
 import React, { useRef } from "react";
-import { Form } from "antd";
+import { Form, Select } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
 import { IconFont } from "../../../icon/IconFont";
 
-export type HtmlModel = { template: string };
+export type HtmlModel = { template: string; classNames?: string[] };
 
 export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
   model,
   onChange,
 }) => {
   const ref = useRef<any>(null);
-  const setTemplate = (v?: string) =>
-    onChange && onChange({ ...model, template: v || "" });
+  const triggerModel = (key: keyof HtmlModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
   const format = () => {
     const editor = (ref.current as any)?.editor;
     editor?.getAction("editor.action.formatDocument")?.run();
@@ -20,6 +20,14 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
   return (
     <div>
       <Form layout="vertical">
+        <Form.Item label="类名">
+          <Select
+            size="small"
+            value={model.classNames}
+            mode="tags"
+            onChange={(value) => triggerModel("classNames", value)}
+          />
+        </Form.Item>
         <Form.Item
           label={
             <>
@@ -45,7 +53,7 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
               height="300px"
               defaultLanguage="html"
               value={model.template}
-              onChange={(v) => setTemplate(v || "")}
+              onChange={(v) => triggerModel("template", v || "")}
               options={{
                 minimap: { enabled: false },
                 scrollBeyondLastLine: false,

package/src/components/plugins/@antd/items/CardRender.tsx

@@ -2,7 +2,7 @@ import { Card, CardProps } from "antd";
 import React, { useContext, useMemo, useState } from "react";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { HtmlBaseProps } from "../../../typing";
-import { DesignerContext } from "../../../context/DesignerContext";
+import { PageContext } from "../../../context/PageContext";
 
 export type CardRenderProps = {
   bordered?: boolean;

package/src/components/plugins/@antd/items/ColRender.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo, useState } from "react";
 import { PageItem } from "../../../layout/PageItem";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { HtmlBaseProps } from "../../../typing";
-import { DesignerContext } from "../../../context/DesignerContext";
+import { PageContext } from "../../../context/PageContext";
 import { EnvContext } from "../../../context/EnvContext";
 
 export type ColRenderProps = {
@@ -30,7 +30,7 @@ export const ColRender: React.FC<ColRenderProps> = ({
   style = {},
   className,
 }) => {
-  const { designable } = useContext(DesignerContext);
+  const { designable } = useContext(PageContext);
   const { deviceWidth } = useContext(EnvContext);
   const [localChildren, setLocalChildren] = useState(item.children || []);
 

package/src/components/plugins/@antd/items/HtmlRender.tsx

@@ -9,6 +9,7 @@ export type HtmlRenderProps = {
   template?: string;
   style?: React.CSSProperties;
   item: any;
+  classNames?: string[];
 } & HtmlBaseProps;
 
 /**
@@ -28,6 +29,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   item,
   style,
   className,
+  classNames = [],
 }) => {
   const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
@@ -79,7 +81,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     <div
       id={id}
       style={style}
-      className={className}
+      className={(classNames || []).join(" ") + (" " + className || "")}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   );

package/src/components/plugins/@antd/items/RowRender.tsx

@@ -2,7 +2,7 @@ import { Row } from "antd";
 import React, { useContext, useState } from "react";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { HtmlBaseProps } from "../../../typing";
-import { DesignerContext } from "../../../context/DesignerContext";
+import { PageContext } from "../../../context/PageContext";
 
 export type RowRenderProps = {
   gutter?: number | [number, number];
@@ -22,7 +22,7 @@ export const RowRender: React.FC<RowRenderProps> = ({
   style,
   className,
 }) => {
-  const { designable } = useContext(DesignerContext);
+  const { designable } = useContext(PageContext);
   const [localChildren, setLocalChildren] = useState(item.children || []);
 
   const onLocalChildrenChange = (list: any[]) => {

package/src/components/plugins/@antd/items/SpaceRender.tsx

@@ -2,7 +2,7 @@ import { Space } from "antd";
 import React, { useContext, useMemo, useState } from "react";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { HtmlBaseProps } from "../../../typing";
-import { DesignerContext } from "../../../context/DesignerContext";
+import { PageContext } from "../../../context/PageContext";
 import { type SizeType } from "antd/es/config-provider/SizeContext";
 
 export type SpaceRenderProps = {
@@ -21,7 +21,7 @@ export const SpaceRender: React.FC<SpaceRenderProps> = ({
   style = {},
   className,
 }) => {
-  const { designable } = useContext(DesignerContext);
+  const { designable } = useContext(PageContext);
   const [localChildren, setLocalChildren] = useState(item.children || []);
 
   const onLocalChildrenChange = (list: any[]) => {

package/src/components/utils.ts

@@ -36,8 +36,6 @@ export const handleCallback = (
 
 export const uuid = () => v4();
 
-
-
 export const formatTime = (dateStr: string) => {
   if (!dateStr) return "";
   const date = new Date(dateStr);
@@ -74,4 +72,22 @@ export const formatTime = (dateStr: string) => {
 
   const YYYY = date.getFullYear();
   return `${YYYY}-${MM}-${DD} ${HH}:${mm}`;
-};
+};
+
+export const isMobile = () => {
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "iPhone",
+    "iPad",
+    "Windows Phone",
+    "BlackBerry",
+    "Opera Mini",
+    "Symbian",
+    "Kindle",
+    "Mobile",
+  ];
+
+  const regex = new RegExp(mobileKeywords.join("|"), "i");
+  return regex.test(userAgent);
+};