bi-sdk-react 0.0.1

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

@@ -0,0 +1,75 @@
+import { Input, type InputProps } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type InputRenderProps = {
+  var?: string;
+  placeholder?: string;
+  prefix?: React.ReactNode | string;
+  suffix?: React.ReactNode | string;
+  size?: InputProps['size']
+  allowClear?: boolean;
+  search?: boolean;
+  item?: SchemaItemType;
+  value?: string;
+  onChange?: (v: string) => void;
+  onSearch?: (v: string) => void;
+} & HtmlBaseProps;
+
+export const InputRender: React.FC<InputRenderProps> = ({
+  id,
+  var: varName = "",
+  placeholder = "",
+  prefix,
+  suffix,
+  size,
+  allowClear = false,
+  search = false,
+  item,
+  value,
+  onChange,
+  onSearch,
+  style = {},
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const change = (v: string) => {
+    if (onChange) onChange(v);
+    if (env && item && varName) setVar(env, item, varName, v);
+  };
+  const searchClick = () => {
+    if (onSearch) onSearch(value || "");
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  if (search) {
+    return (
+      <Input.Search
+        id={id}
+        value={value}
+        size={size}
+        allowClear={allowClear}
+        placeholder={placeholder}
+        onChange={(e) => change(e.target.value)}
+        onSearch={searchClick}
+        style={{ ...style }}
+        className={className}
+      />
+    );
+  }
+  return (
+    <Input
+      id={id}
+      value={value}
+      size={size}
+      allowClear={allowClear}
+      placeholder={placeholder}
+      prefix={typeof prefix === "string" ? undefined : prefix}
+      suffix={typeof suffix === "string" ? undefined : suffix}
+      onChange={(e) => change(e.target.value)}
+      style={{ ...style }}
+      className={className}
+    />
+  );
+};

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

@@ -0,0 +1,227 @@
+import React, { MouseEventHandler, useMemo } from "react";
+import { Avatar, Pagination } from "antd";
+import styled, { css } from "styled-components";
+import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
+
+type DataItem = {
+  title?: string;
+  description?: string;
+  href?: string;
+  avatar?: string;
+};
+
+export type ListRenderProps = {
+  pageSize?: number;
+  bordered?: boolean;
+  size?: "small" | "default";
+  item: any;
+  itemLayout?: "horizontal" | "vertical";
+  split?: boolean;
+} & HtmlBaseProps;
+
+const ListWrapper = styled.div<{
+  $bordered?: boolean;
+  $split?: boolean;
+  $size?: string;
+  $itemLayout?: string;
+}>`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+
+  ${(props) =>
+    props.$bordered &&
+    css`
+      border: 1px solid #d9d9d9;
+      border-radius: 2px;
+    `}
+
+  ${(props) =>
+    props.$itemLayout === "vertical" &&
+    css`
+      flex-direction: column;
+    `}
+`;
+
+const ListItemWrapper = styled.div<{ $split?: boolean; $padding?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${(props) => props.$padding || "12px 0"};
+  color: rgba(0, 0, 0, 0.85);
+
+  ${(props) =>
+    props.$split &&
+    css`
+      border-bottom: 1px solid #f0f0f0;
+      &:last-child {
+        border-bottom: none;
+      }
+    `}
+`;
+
+const ItemMeta = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  max-width: 100%;
+`;
+
+const ItemMetaAvatar = styled.div`
+  margin-right: 16px;
+`;
+
+const ItemMetaContent = styled.div`
+  flex: 1 0;
+  width: 0;
+  color: rgba(0, 0, 0, 0.85);
+`;
+
+const ItemTitle = styled.h4`
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  margin-top: 0;
+
+  > a {
+    color: rgba(0, 0, 0, 0.85);
+    transition: all 0.3s;
+    text-decoration: none;
+    cursor: pointer;
+    &:hover {
+      color: #1890ff;
+    }
+  }
+`;
+
+const ItemDescription = styled.div`
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  line-height: 1.5715;
+`;
+
+const PaginationWrapper = styled.div<{ $bordered?: boolean }>`
+  margin-top: 16px;
+  text-align: right;
+  padding: ${(props) => (props.$bordered ? "0 24px 24px" : "0")};
+`;
+
+const Item: React.FC<{
+  item: DataItem;
+  split?: boolean;
+  padding?: string;
+}> = ({ item, split, padding }) => {
+  return (
+    <ListItemWrapper $split={split} $padding={padding}>
+      <ItemMeta>
+        {item.avatar && (
+          <ItemMetaAvatar>
+            <Avatar src={item.avatar} />
+          </ItemMetaAvatar>
+        )}
+        <ItemMetaContent>
+          {item.title && (
+            <ItemTitle>
+              {item.href ? <a href={item.href}>{item.title}</a> : item.title}
+            </ItemTitle>
+          )}
+          {item.description && (
+            <ItemDescription>{item.description}</ItemDescription>
+          )}
+        </ItemMetaContent>
+      </ItemMeta>
+    </ListItemWrapper>
+  );
+};
+
+const List: React.FC<
+  {
+    list: Array<DataItem>;
+    split?: boolean;
+    bordered?: boolean;
+    size?: string;
+    itemLayout?: string;
+  } & HtmlBaseProps
+> = ({ list = [], split, bordered, size, itemLayout, style, className }) => {
+  const padding = useMemo(() => {
+    if (size === "small") return "8px 16px";
+    if (bordered) return "12px 24px";
+    return "12px 0";
+  }, [size, bordered]);
+
+  return (
+    <ListWrapper
+      $bordered={bordered}
+      $split={split}
+      $size={size}
+      style={style}
+      $itemLayout={itemLayout}
+      className={className}
+    >
+      {list.map((item, index) => (
+        <Item key={String(index)} item={item} split={split} padding={padding} />
+      ))}
+    </ListWrapper>
+  );
+};
+
+export const ListRender: React.FC<ListRenderProps> = ({
+  id,
+  pageSize = 10,
+  bordered = true,
+  size = "default",
+  itemLayout = "horizontal",
+  item,
+  split = true,
+  style = {},
+  className,
+}) => {
+  const datasource = useDatasource(id, item.datasource);
+  const list = datasource || [];
+  const pagination = useMemo(() => {
+    if (!pageSize || pageSize <= list.length) return false;
+    return {
+      total: list.length,
+      pageSize,
+      size: size === "default" ? undefined : size,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      hideOnSinglePage: true,
+      pageSizeOptions: ["10", "20", "30", "40"],
+      showTotal: (total: number, range: [number, number]) =>
+        `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`,
+    };
+  }, [pageSize, list.length, size]);
+  const classes = [
+    "p-list",
+    itemLayout ? `p-list--${itemLayout}` : undefined,
+    size ? `p-list--${size}` : undefined,
+    split ? "p-list--split" : undefined,
+    bordered ? "p-list--bordered" : undefined,
+    className,
+  ];
+  return (
+    <div
+      id={id}
+      style={{ display: "flex", flexDirection: "column", ...style }}
+      className={classes.filter(Boolean).join(" ")}
+    >
+      <List
+        list={list}
+        split={split}
+        bordered={bordered}
+        size={size}
+        itemLayout={itemLayout}
+      />
+      {pagination && <Pagination {...pagination} />}
+    </div>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { HtmlBaseProps } from "../../../typing";
+
+export type PageHeaderRenderProps = {
+  title?: string;
+  subTitle?: string;
+  item: any;
+} & HtmlBaseProps;
+
+const Header = styled.div`
+  width: 100%;
+  padding: 0 12px;
+  border-bottom: solid 1px #e8e8e8;
+  background: #ffffff;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    display: flex;
+    flex-direction: column;
+  }
+  .title .main {
+    font-size: 14px;
+  }
+  .title .sub {
+    color: #999;
+    font-size: 12px;
+  }
+`;
+
+export const PageHeaderRender: React.FC<PageHeaderRenderProps> = ({
+  id,
+  title,
+  subTitle,
+  item,
+  style = {},
+  className,
+}) => {
+  const extraSlot = useMemo(() => {
+    if (!item.children || Array.isArray(item.children)) return null;
+    if (typeof item.children !== "object") return null;
+    return item.children.extra || [];
+  }, [item]);
+
+  const [extraList, setExtraList] = useState(extraSlot || []);
+
+  const onExtraListChange = (list: any[]) => {
+    const newList = [...list];
+    item.children.extra = newList;
+    setExtraList(newList);
+  };
+
+  return (
+    <Header
+      id={id}
+      style={{ ...style }}
+      className={className}
+    >
+      <div className="title">
+        <span className="main">{title}</span>
+        {subTitle && <span className="sub">{subTitle}</span>}
+      </div>
+      <div>
+        <DropContainer
+          list={extraList}
+          onListChange={onExtraListChange}
+        />
+      </div>
+    </Header>
+  );
+};

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

@@ -0,0 +1,47 @@
+import { Row } from "antd";
+import React, { useContext, useState } from "react";
+import { DropContainer } from "../../../dnd/DropContainer";
+import { HtmlBaseProps } from "../../../typing";
+import { DesignerContext } from "../../../context/DesignerContext";
+
+export type RowRenderProps = {
+  gutter?: number | [number, number];
+  item: any;
+} & HtmlBaseProps;
+
+/**
+ * RowRender 组件
+ * 翻译自 RowRender.vue
+ * 功能：渲染行布局，支持拖拽排序（designable模式下）
+ * 不使用 DragContainer 组件
+ */
+export const RowRender: React.FC<RowRenderProps> = ({
+  id,
+  gutter,
+  item,
+  style,
+  className,
+}) => {
+  const { designable } = useContext(DesignerContext);
+  const [localChildren, setLocalChildren] = useState(item.children || []);
+
+  const onLocalChildrenChange = (list: any[]) => {
+    item.children = list;
+    setLocalChildren(list);
+  };
+
+  return (
+    <DropContainer
+      rootComponent={Row}
+      rootData={{
+        id,
+        gutter,
+        style: item.style || style,
+        className: item.className || className,
+      }}
+      list={localChildren}
+      item={item}
+      onListChange={onLocalChildrenChange}
+    />
+  );
+};

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

@@ -0,0 +1,53 @@
+import { Select, type SelectProps } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type SelectRenderProps = {
+  var?: string;
+  size?: SelectProps['size'];
+  placeholder?: string;
+  allowClear?: boolean;
+  multiple?: boolean;
+  options?: { label: string; value: any }[];
+  item?: SchemaItemType;
+  value?: any;
+  onChange?: (v: any) => void;
+} & HtmlBaseProps;
+
+export const SelectRender: React.FC<SelectRenderProps> = ({
+  id,
+  var: varName = "",
+  size,
+  placeholder = "请选择",
+  allowClear = false,
+  multiple = false,
+  options = [],
+  item,
+  value,
+  onChange,
+  style = {},
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const change = (v: any) => {
+    if (onChange) onChange(v);
+    if (env && item && varName) setVar(env, item, varName, v);
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  return (
+    <Select
+      id={id}
+      value={value}
+      size={size}
+      placeholder={placeholder}
+      allowClear={allowClear}
+      mode={multiple ? "multiple" : undefined}
+      options={options}
+      onChange={change}
+      style={{ width: "100%", ...style }}
+      className={className}
+    />
+  );
+};

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

@@ -0,0 +1,54 @@
+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 { type SizeType } from "antd/es/config-provider/SizeContext";
+
+export type SpaceRenderProps = {
+  align?: "start" | "end" | "center" | "baseline";
+  size?: SizeType;
+  direction?: "horizontal" | "vertical";
+  item: any;
+} & HtmlBaseProps;
+
+export const SpaceRender: React.FC<SpaceRenderProps> = ({
+  id,
+  align = "start",
+  size = "small",
+  direction = "horizontal",
+  item,
+  style = {},
+  className,
+}) => {
+  const { designable } = useContext(DesignerContext);
+  const [localChildren, setLocalChildren] = useState(item.children || []);
+
+  const onLocalChildrenChange = (list: any[]) => {
+    item.children = list;
+    setLocalChildren(list);
+  };
+  const realStyle = useMemo(
+    () => ({
+      ...style,
+      ...(item.style || {}),
+      alignItems: align,
+      flexDirection: direction,
+      gap: size,
+    }),
+    [item, align, size, direction]
+  );
+  return (
+    <DropContainer
+      rootComponent={Space}
+      rootData={{
+        id,
+        style: realStyle,
+        className,
+      }}
+      list={localChildren}
+      item={item}
+      onListChange={onLocalChildrenChange}
+    />
+  );
+};

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

@@ -0,0 +1,52 @@
+import { Switch, type SwitchProps } from "antd";
+import React, { useContext } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { EnvContext } from "../../../context/EnvContext";
+import { handleCallback, setVar } from "../../../utils";
+
+export type SwitchRenderProps = {
+  var?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  size?: SwitchProps["size"];
+  checkedChildren?: string;
+  unCheckedChildren?: string;
+  item?: SchemaItemType;
+  onChange?: (checked: boolean) => void;
+} & HtmlBaseProps;
+
+export const SwitchRender: React.FC<SwitchRenderProps> = ({
+  id,
+  var: varName = "",
+  checked,
+  disabled,
+  size = "default",
+  checkedChildren,
+  unCheckedChildren,
+  item,
+  onChange,
+  style = {},
+  className,
+}) => {
+  const { env, callbacks } = useContext(EnvContext);
+  const change = (v: boolean) => {
+    if (onChange) onChange(v);
+    if (env && item && varName) setVar(env, item, varName, v);
+    if (env && item && callbacks) handleCallback(env, item, callbacks);
+  };
+  return (
+    <span>
+      <Switch
+        id={id}
+        checked={checked}
+        disabled={disabled}
+        size={size === "small" ? "small" : undefined}
+        checkedChildren={checkedChildren}
+        unCheckedChildren={unCheckedChildren}
+        onChange={(v) => change(v)}
+        style={style}
+        className={className}
+      />
+    </span>
+  );
+};

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

@@ -0,0 +1,99 @@
+import React from "react";
+import { Table, type TableProps } from "antd";
+import { HtmlBaseProps } from "../../../typing";
+
+export type TableRenderProps = {
+  dataSource?: any[];
+  columns?: any[];
+  pageSize?: number;
+  bordered?: boolean;
+  size?: TableProps["size"];
+  showHeader?: boolean;
+} & HtmlBaseProps;
+
+export const TableRender: React.FC<TableRenderProps> = ({
+  id,
+  dataSource = [],
+  columns = [],
+  pageSize = 10,
+  bordered = true,
+  size,
+  showHeader = true,
+  style = {},
+  className,
+}) => {
+  const pagination =
+    !pageSize || pageSize <= dataSource.length
+      ? false
+      : {
+          total: dataSource.length,
+          pageSize,
+          size,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ["10", "20", "30", "40"],
+          showTotal: (total: number, range: [number, number]) =>
+            `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`,
+        };
+  const realColumns = columns.map((item: any) => ({
+    ...item,
+    render:
+      !item.customRender ||
+      (typeof item.customRender === "string" && item.customRender.trim() === "")
+        ? item.render
+        : (text: any, record: any, index: number) => {
+            const safeEval = new Function(
+              "console",
+              "Math",
+              "Date",
+              "Array",
+              "Object",
+              "String",
+              "Number",
+              "Boolean",
+              "text",
+              "record",
+              "index",
+              `
+              "use strict";
+              const window = undefined;
+              const document = undefined;
+              const global = undefined;
+              const process = undefined;
+              const require = undefined;
+              const module = undefined;
+              const exports = undefined;
+              ${item.customRender}
+            `
+            );
+            return (safeEval as any)(
+              console,
+              Math,
+              Date,
+              Array,
+              Object,
+              String,
+              Number,
+              Boolean,
+              text,
+              record,
+              index
+            );
+          },
+  }));
+  return (
+    <Table
+      id={id}
+      dataSource={dataSource}
+      columns={realColumns as any}
+      pagination={pagination as any}
+      bordered={bordered}
+      size={size}
+      showHeader={typeof showHeader === "boolean" ? showHeader : true}
+      rowKey={(_, index) => String(index)}
+      style={{ padding: 1, ...style }}
+      className={className}
+    />
+  );
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { HtmlBaseProps } from "../../../typing";
+
+export type TextRenderProps = {
+  text?: string;
+  item?: { style?: React.CSSProperties };
+} & HtmlBaseProps;
+
+export const TextRender: React.FC<TextRenderProps> = ({
+  id,
+  text,
+  item,
+  style = {},
+  className,
+}) => {
+  return (
+    <span
+      id={id}
+      style={{ ...(item?.style || {}), ...style }}
+      className={className}
+    >
+      {text}
+    </span>
+  );
+};