@foundbyte/fast-blend-pkg

v2.0.0-alpha.6

Published

9 months ago

数据可视化

Downloads

0High
0Medium
0Low

fast-blend-pkg

官方组件包

组件开发

情参考 fast-blend-pkg 内的示例

├── settings-form               // 组件表单配置包示例（如需修改请修新建目录）
├── custom-pkg                  // 用于开发的组件包
└── fast-blend-pkg                 // 组件包示例（开发请使用 ./custom-pkg 新建目录）
    └── src
          ├── index.ts          // 导出组件包
          └── widgets           // 组件包
              ├── index.ts      // 导出组件分类
              └── Chart        // 组件分类（如：常用工具、可视化组件）
                    ├── index.ts// 注册组件及分组（如：布局工具、文字）
                    ├── Bar     // 组件
                    └── ...     // 组件

组件通常包含以下内容

├── Bar
      ├── config.tsx            // 组件的默认配置
      ├── editor.tsx            // 组件的编辑器（推荐使用formilyjs编写）
      ├── schema.ts             // formilyjs 的配置
      ├── type.ts               // 一些内部ts类型
      ├── index.tsx             // 组件源码
      └── style                 // 组件样式

样式

Font Demo

为了让官方组件的样式可以被覆盖，方便在业务中灵活修改，所以未使用 hash 类名。为保证样式命名唯一，官方组件包建议样式以 'fb-tool-xxx' 命名。

建议使用如下方式命名

const namespace = 'fb-tool-font';
...
 <div className={namespace}>
  <div className={`${namespace}-xxx`}></div>
 </div>
...

构建和发布

请修改 ./fast-blend-pkg/package.json 中的包名

"name": "your widgets package name",

构建命令

cd ./custom-pkg

npm run build

发布请联系管理员

[email protected]

在项目中引用

├── src
      └── decorate
            └── widgets // 引入的组件包和配置

import { Widgets } from '@foundbyte/fast-blend-pkg';
import { ICompPackage } from '@foundbyte/fast-blend/es/types';
// 内部组件
import G2 from './G2';

// 注册组件包
const { Chart, Tool } = Widgets;

/** 左侧工具栏显示的组件 */
const components = {
  // 导入组件
  packages: {
    Tool,
    Chart,
    // G2,
  },
  // 导入配置
  config: [
    Tool.config,
    Chart.config,
    // G2.config
  ] as ICompPackage[],
};

/** 顶部工具栏显示的组件 */
const tool = {
  packages: {
    // Tool,
  },
  config: [
    // { ...(Tool.config as object), ...{ visible: true } }
  ] as ICompPackage[],
};

export { components, tool };

如果向使用路径映射，请修改 ./webpack.config.js 配置

// 如
import { Widgets } from '@foundbyte/fast-blend-pkg';

// 相当于
"@foundbyte/fast-blend-pkg": path.join(__dirname, "./fast-blend-pkg/src"),

./webpack.config.js

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      ...config.alias,
      "@foundbyte/fast-blend-pkg": path.join(__dirname, "./fast-blend-pkg/src"),
      "@foundbyte/custom-pkg": path.join(__dirname, "./custom-pkg/src"),
      "@foundbyte/settings-form": path.join(__dirname, "./settings-form/src"),
      // 添加你的组件包路径
      ...
      "@": path.join(__dirname, "./src"),
    },
  },
  ...
}

自定义布局工具

Tabs Demo

接收标准参数参考 IWidgetProps, 其中有几个关键属性

import { IWidgetProps } from '@foundbyte/core';

const Demo: React.FC<IWidgetProps> = (props) => {
  const {
    id,           // 当前组件唯一id
    refresh,      // 强制刷新
    member = [],  // 内部组件
    packages,     // 当前编辑器使用的组件包配置
    editable,     // 是否是编辑（预览）模式
    activeWidget  // 编辑面板变化
  } = props;

  // 强制刷新（当出现嵌套容器时，为了减少组件刷新频率，可能会通知你进行主动刷新）
  useEffect(() => {
    ...
  }, [refresh]);

  // 监听布局工具内的组件变化（建议不要直接使用，member进行渲染）
  useEffect(() => {
    ...
  }, [member]);

  // 监听编辑面板编辑的变化
  useEffect(() => {
    ...
  }, [activeWidget]);
  return <>...</>
}

使用 WidgetBoard 组件包裹

import { WidgetBoard, IWidgetBoardRef } from '@foundbyte/core';

const Demo: React.FC<IWidgetProps> = (props) => {
  // IWidgetBoardRef 包含必要的操作内部组件方法
  const boardRef = useRef<IWidgetBoardRef>(null);

  return <WidgetBoard {...props} ref={boardRef}>
    ...
  </WidgetBoard>
}

事件上下文

用于处理事件调用的上下文

packages/fast-blend/src/hooks/index.ts

export function useTileContext(extra: (ctx: any) => Record<string, unknown>, deps: any[] = []) {
  const history = useHistory()
  const match = useRouteMatch()
  const cbk = useCallback(extra, deps)

  const his = useRef(history)
  const mth = useRef(match)

  const OnGlobalWidget = (id: string, visible: boolean, params?: Record<string, any>) => {
    const call = useCall(id)
    const data: TWidgetCll = {
      type: EWidgetCllType.visible,
      payload: {
        visible,
        params,
      },
    }
    call(data)
  }

  const event: IWidgetEventType = {
    openGlobalWidget(id: string, params?: Record<string, any>) {
      OnGlobalWidget(id, true, params)
    },
    closeGlobalWidget(id: string, params?: Record<string, any>) {
      OnGlobalWidget(id, false, params)
    },
  }

  return useMemo(() => {
    const context = {
      ...event,
      storage: contextStorage,
      location: his.current.location,
      history: his.current,
      match: mth.current,
    }
    return Object.assign({}, context, cbk(context))
  }, [...deps, his, mth, cbk])
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme