feat:对于 widget-sdk 复用 datasheet 的前端组件的经验分享

[ChildWangWorld]

感谢vika团队开源了这么棒的项目，在我开发widget的时候发现，很多在datasheet存在的组件，在widget中无法使用，因为在widget-sdk中不存在，widget-sdk中有个ui目录，放了很少的组件，无法满足业务需求，例如我再datasheet中增加了对自定义字段的filter支撑，如果改造widget-sdk中的filter组件需要copy很多代码进去，工作量很大，后来我使用了另一种讨巧的方式。

以FilterModal 这么组件为例，我现在是这么操作的：

1. 在widget-sdk中增加一个注册表

import { IFilterModalProps } from './filter_modal';

class Registry<Components extends IComponentMap> {
  private readonly map = new Map<keyof Components, Components[keyof Components]>();

  public add<K extends keyof Components>(name: K, item: Components[K]) {
    if (!this.map.has(name)) {
      this.map.set(name, item);
    }
  }

  public get<K extends keyof Components>(name: K): Components[K] {
    if (!this.map.has(name)) {
      throw new Error(`Component ${String(name)} does not exist.`);
    }
    return this.map.get(name) as Components[K];
  }
}

export interface IComponentMap {
  FilterModal: React.ComponentType<IFilterModalProps>;
}

export const UIRegistry = new Registry();

2. 在widget-sdk中声明一个代理组件，封装内部逻辑，方便widget使用

export interface IFilterModalProps extends IModalProps {
  title: React.ReactNode;
  handleCancel: () => void;
  datasheetId: string;
  handleOk: (value: any) => void;
  okBtnDisabled?: boolean;
  className?: string;
  filterInfo?: IFilterInfo;
  view?: IViewPropertyBase,
}

const FilterModalBase = (props: IFilterModalProps) => {
  const Dynamic = UIRegistry.get('FilterModal')!;

  return <Dynamic {...props} />;
};

export const FilterModal = React.memo(FilterModalBase);

3. 在datasheet的 _app.tsx 中注册 FilterModal 组件

(() => {
  if (!process.env.SSR) {
    UIRegistry.add('FilterModal', FilterModal);
  }
})();

4、现在就可以在widget中使用这个组件了，和使用其他组件没有区别。

//部分代码
{showModal && <FilterModal
        title='筛选设置'
        cancelText='取消'
        okText='确认'
        width={800}
        handleCancel={() => setShowModal(false)}
        handleOk={onConfirm}
        filterInfo={value}
        datasheetId={datasheetId}
        view={view}
      />}

这样的好处是不需要大面积修改代码，即可实现一个组件的服用。
不过需要测试下，组件最好是无状态的，需要状态时从外部传入，尤其是避免组件产生副作用，因为 datasheet 和 widget 下的ReduxStore是不同的实例。

虽然不是太优雅（例如需要把datasheet中的props interface复制到widget-sdk中），但是能解决我的问题。

如果有更好的方案建议，感谢留言。

另外不知道出于什么考虑，widget-sdk 中的 IFilterInfo,FieldType 和 core中的不一样，导致我在widget中使用datasheet的组件时
需要重复的转换，其实建议如果在 core 已经存在定义，在 widget-sdk 直接 export 即可（单纯从我使用便利性出发，可能vika有其他的考虑）。

[ranglang]

IFilterInfo,FieldType 和 core中的不一样，导致我在widget中使用datasheet的组件时
需要重复的转换，其实建议如果在 core 已经存在定义，在 widget-sdk 直接 export 即可

Welcome to propose a code change.

[ranglang]

datasheet中增加了对自定义字段的filter支撑

widget-sdk's filter should depend on a generic field types, rather then a specific field.

Ideally,  a new field is added , and  **FilterModel ** will still work well because of it's options:  filter types, operations ... . 

[ranglang]

widget-sdk中增加一个注册表, ReduxStore

In my opinion , it's a good solution, ReduxStore should be roughly the same between in main thread and workers

[ranglang]

It looks like there hasn't been a reply in 3 weeks, so I'm closing this issue.
Thank you for your contribution.