iModel Hooks

一个在 iModel 项目中使用的 react hook。

为了避免多重嵌套，重复创建 connection，自动获取 child，在组件卸载时自动销毁实例。

使用方法

1. 引入 ImodelFrame 作为初始化 iframe 以及 context 的容器

// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';

const App = () => {
  return (
    <Wrapper>
      <ImodelFrame>
        <Father>
          <Son />
        </Father>
      </ImodelFrame>
    </Wrapper>
  );
};

2. 在 ImodelFrame 内（请注意一定要在该组件内）任意级别的子组件内使用 useImodel 来获取 child ，方便快捷的调用 iModel Frame 提供的 API。

// Son.tsx
import React from 'react';
import { useImodel } from '@sidri/imodel-hooks';

const Son = () => {
  const { child } = useImodel();

  return (
    <div
      onClick={() => {
        child?.test('42');
      }}
    >
      don't panic
    </div>
  );
};

export default Son;

3. ImodelFrame 接受的主要参数如下图所示（另外接受的参数包含 iframe 作为 element 的所有属性）：

注：为了避免嵌套，此 hooks 已经将 onCompleted 集成在内部，不再需要使用方监听

// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';

const App = () => {
  return (
    <Wrapper>
      <ImodelFrame
        onError={(error) => {
          // `error` 为握手时发生的错误
        }}
        methods={{
          // 具体请参考 iModel Frame 的 API 文档
          onLeftClick(info) {
            console.log(info);
          },
          onToolChange(toolName) {
            console.log(toolName);
          },
        }}
        // 是否展示调试日志（默认为否）
        debug={false}
        // 握手的超时时间，默认为 10000（单位：毫秒）
        timeout={10000}
        // 以下常用 props 就不再赘述了
        className={}
        style={}
      >
        <Father>
          <Son />
        </Father>
      </ImodelFrame>
    </Wrapper>
  );
};

引入方法

1. 使用 nrm 或者 cgr 之类的工具将 npm 源切换为 http://10.190.44.202:4444 (内网用户)

yarn add @sidri-fe/imodel-hooks

2. 直接使用 tgz 包（内网用户）

{
  "dependencies": {
    "@sidri-fe/imodel-hooks": "http://10.190.44.202:4444/@sidri-fe/imodel-hooks/-/imodel-hooks-0.1.1.tgz"
  }
}

3. 从 npm 市场下载（非内网用户），请注意：最新的 patch 会优先发布在内网

yarn add @sidri-fe/imodel-hooks