@lingxiteam/ebe-utils 0.5.6 → 0.5.7

package/lib/public/src/components/pcfactory/src/RemoteComponent/components/FishRender.tsx

@@ -0,0 +1,31 @@
+import { ReactLoadFish } from '@lingxiteam/load-framework';
+import { LingXiFC } from '@lingxiteam/types';
+import { Empty, Spin } from 'antd';
+
+export interface FishRenderProps {
+  url: string;
+  customProps: any;
+  engineType: 'editor' | 'engine';
+}
+
+const FishRender: LingXiFC<FishRenderProps> = (props) => {
+  const { customProps, getEngineApis, engineType, ...restProps } = props;
+  const { getLocale = () => 'Fish远程组件加载失败' } = getEngineApis?.() || {};
+  return (
+    <ReactLoadFish
+      {...restProps}
+      lxApi={{ getEngineApis, engineType }}
+      moduleProps={customProps}
+      onError={console.log}
+      loading={() => <Spin />}
+      fallback={() => (
+        <Empty
+          description={getLocale?.('RemoteComponent.fail')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
+    />
+  );
+};
+
+export default FishRender;

package/lib/public/src/components/pcfactory/src/RemoteComponent/components/ReactRender.tsx

@@ -0,0 +1,55 @@
+import { LingXiFC } from '@lingxiteam/types';
+import { createRequires } from '@paciolan/remote-component/dist/createRequires';
+import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
+import { Empty, Spin } from 'antd';
+import { useDynamicData } from '../../utils';
+import RemoteCompConfig from '../remote-component.config';
+
+export const getUseRemoteComponent = (config: any) => {
+  const requires = createRequires(() => config.resolve);
+  return createUseRemoteComponent({ requires });
+};
+const useRemoteComponent = getUseRemoteComponent(RemoteCompConfig);
+export interface MyRemoteComponentProps {
+  url?: string;
+  customProps: any;
+  useRemoteComponent?: any; // 自定义组件调用依赖的模块，可由调用方传入
+}
+
+// const prefixCls = 'remoteComponent';
+const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
+  const { url, customProps, getEngineApis, ...restProps } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const useRemoteComponentInst = props.useRemoteComponent || useRemoteComponent;
+
+  const dynamicDataContext = useDynamicData();
+
+  const [loading, err, Component] = useRemoteComponentInst(url);
+
+  if (loading) {
+    return <Spin />;
+  }
+
+  if (!Component || err) {
+    if (err) {
+      console.warn('自定义组件报错:', err);
+    }
+    return (
+      <Empty
+        description={engineApis?.getLocale?.('RemoteComponent.fail')}
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+      />
+    );
+  }
+  return (
+    <Component
+      {...restProps}
+      {...customProps}
+      $lxApi={{ form: dynamicDataContext.form }}
+    />
+  );
+};
+
+export default RemoteComponent;

package/lib/public/src/components/pcfactory/src/RemoteComponent/components/VueRender.tsx

@@ -0,0 +1,32 @@
+import { ReactLoadVue } from '@lingxiteam/load-framework';
+import { LingXiFC } from '@lingxiteam/types';
+import { Empty, Spin } from 'antd';
+
+export interface VueRenderProps {
+  url: string;
+  customProps: any;
+  engineType: 'editor' | 'engine';
+}
+
+const VueRender: LingXiFC<VueRenderProps> = (props) => {
+  const { url, customProps, engineType, getEngineApis, ...restProps } = props;
+  const { getLocale = () => 'Fish远程组件加载失败' } = getEngineApis?.() || {};
+  return (
+    <ReactLoadVue
+      {...restProps}
+      url={url}
+      lxApi={{ getEngineApis, engineType }}
+      moduleProps={customProps}
+      onError={console.log}
+      loading={() => <Spin />}
+      fallback={() => (
+        <Empty
+          description={getLocale?.('RemoteComponent.fail')}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
+    />
+  );
+};
+
+export default VueRender;

package/lib/public/src/components/pcfactory/src/RemoteComponent/constant.ts

@@ -0,0 +1,9 @@
+import FishRender from './components/FishRender';
+import ReactRender from './components/ReactRender';
+import VueRender from './components/VueRender';
+
+export const RemoteComponentMap = {
+  React: ReactRender,
+  Vue: VueRender,
+  Fish: FishRender,
+};

package/lib/public/src/components/pcfactory/src/RemoteComponent/index.tsx

@@ -0,0 +1,82 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { createRequires } from '@paciolan/remote-component/dist/createRequires';
+import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
+import { useImperativeHandle, useState } from 'react';
+import { useListenProps } from '../utils';
+import { useDeepCompareEffect } from '../utils/ahooks';
+import { RemoteComponentMap } from './constant';
+
+export const getUseRemoteComponent = (config: any) => {
+  const requires = createRequires(() => config.resolve);
+  return createUseRemoteComponent({ requires });
+};
+export interface MyRemoteComponentProps {
+  url?: string;
+  fileCode?: string;
+  customProps: any;
+  useRemoteComponent?: any; // 自定义组件调用依赖的模块，可由调用方传入
+  associatedType: any; // 关联组件
+  visible: boolean;
+  type?: 'React' | 'Vue' | 'Fish';
+}
+
+const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>(
+  (props, ref) => {
+    const {
+      url,
+      customProps: myProps,
+      fileCode,
+      associatedType = 'file',
+      getEngineApis,
+      visible = true,
+      type = 'React',
+      ...restProps
+    } = props;
+
+    const engineApis = getEngineApis?.() || {};
+
+    const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
+
+    const [customProps, setProps] = useListenProps<any>(myProps);
+
+    useImperativeHandle(ref, () => ({
+      setCompProps: (params: any) => {
+        setProps({ ...customProps, ...params });
+      },
+      setSrc: (src: string) => {
+        if (src.startsWith('http')) {
+          setRemoteUrl(src);
+        } else {
+          // 怀疑是文件id
+          setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
+        }
+      },
+    }));
+    useDeepCompareEffect(() => {
+      // 如果是远程服务组件
+      if (fileCode && associatedType === 'file') {
+        setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
+      } else if (url && associatedType === 'url') {
+        setRemoteUrl(url);
+      }
+    }, [url, fileCode]);
+
+    if (!visible) {
+      return <></>;
+    }
+
+    const Component = RemoteComponentMap[type];
+
+    return (
+      <Component
+        engineType="engine"
+        {...restProps}
+        customProps={customProps}
+        url={remoteUrl}
+        getEngineApis={getEngineApis}
+      />
+    );
+  },
+);
+
+export default RemoteComponent;

package/lib/public/src/components/pcfactory/src/RemoteComponent/remote-component.config.ts

@@ -0,0 +1,12 @@
+/* eslint-disable global-require */
+export default {
+  resolve: {
+    react: require('react'),
+    React: require('react'),
+    classnames: require('classnames'),
+    antd: require('antd'),
+    lodash: require('lodash'),
+    ReactDOM: require('react-dom'),
+    'react-dom': require('react-dom'),
+  },
+};

package/lib/public/src/components/pcfactory/src/Result/index.tsx

@@ -0,0 +1,27 @@
+import { Result as AntdResult } from 'antd';
+import React from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface MyResultProps {
+  status: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
+  title: string;
+  subTitle: string;
+  style?: any;
+  visible: boolean;
+}
+
+const Result: React.FC<MyResultProps> = (props) => {
+  const { status, title, subTitle, visible, style, ...restProps } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  return (
+    <AntdResult
+      status={status}
+      title={title}
+      subTitle={subTitle}
+      style={finalStyle}
+      {...restProps}
+    />
+  );
+};
+
+export default Result;

package/lib/public/src/components/pcfactory/src/RichTextEditor/LcdpUeditorMain.tsx

@@ -0,0 +1,105 @@
+import LcdpUeditor from '@lingxiteam/lcdp-ueditor-react';
+import { ILcdpUeditorInst } from '@lingxiteam/lcdp-ueditor-react/es/type';
+import { LingXiFC } from '@lingxiteam/types';
+import { useMemo, useRef } from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import { renderRichText } from '../utils/renderReadOnly';
+
+const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
+  const { value, onChange, style, className, rootRef: ref } = props;
+  const editorRef = useRef<ILcdpUeditorInst | null>(null);
+
+  const engineApis = props.getEngineApis();
+  const { getLocale, lang } = useLocale(engineApis);
+
+  const { disabled, required, readOnly, formFieldsRef } =
+    useCommonImperativeHandle(ref, props, {
+      setValue: (val: string) => {
+        if (editorRef.current) {
+          editorRef.current.setContent(val);
+        }
+      },
+    });
+
+  const finalRules = useMemo(
+    () => [
+      {
+        required,
+        message: getLocale?.('notEmpty', { name }),
+      },
+    ],
+    [required, name, lang],
+  );
+
+  const getLang = useMemo<any>(() => {
+    const langStr = lang.toLowerCase();
+    switch (langStr) {
+      case 'zh-hk':
+        return 'zh-tw';
+      case 'en-us':
+        return 'en';
+      default:
+        return 'zh-cn';
+    }
+  }, [lang]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      trigger="onChange"
+      required={required}
+      disabled={disabled as any}
+      readOnly={readOnly}
+      rules={finalRules}
+      render={renderRichText}
+    >
+      <LcdpUeditor
+        lang={getLang}
+        style={style}
+        onMount={(inst) => {
+          editorRef.current = inst;
+        }}
+        className={className}
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        config={{
+          imageType: props.imageType,
+          height: props.height,
+        }}
+        uploadFunction={async (file) => {
+          const formData = new FormData();
+          formData.append('attach', file, file.name);
+          const res: any = await engineApis?.service?.uploadFileByFetch(
+            formData,
+          );
+          if (res?.fileId) {
+            const link = engineApis?.getAppFileUrlById(res?.fileId);
+            console.log(link, res.fileId);
+            return new Promise((resolve, reject) => {
+              resolve({
+                state: 'SUCCESS',
+                url: link,
+                title: file.name,
+                original: file.name,
+              });
+            });
+          }
+          return new Promise((resolve, reject) => {
+            resolve({
+              state: 'FAIL',
+            });
+          });
+        }}
+      />
+    </FormFields>
+  );
+};
+
+export default LcdpUeditorMain;

package/lib/public/src/components/pcfactory/src/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,234 @@
+import RichText from '@lingxiteam/richtext';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import type { FormItemProps } from 'antd/lib/form';
+import classnames from 'classnames';
+import React, { CSSProperties, useMemo } from 'react';
+import { FormFields, getFieldsProps } from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import { renderRichText } from '../utils/renderReadOnly';
+
+export interface MyRichTextEditorProps extends FormItemProps {
+  visible?: boolean;
+  disabled?: boolean;
+  value?: string;
+  height?: any;
+  getCompPropMapState?: any;
+  compId?: any;
+  onChange?: (value: string) => void;
+  onValueRelease?: (value: string) => void;
+  className?: any;
+  name?: string;
+  fieldName?: string;
+  required: boolean;
+  regexp?: any;
+  hidden?: boolean;
+  message?: string;
+  selfSpan?: number;
+  colSpan?: number;
+  imageType?: string;
+  titleTip?: any;
+  tipIcon?: any;
+  tipLocation?: any;
+  tipContent?: any;
+  tipPlacement?: any;
+  style?: React.CSSProperties;
+  isFormChild?: boolean | undefined;
+  heightType?: string;
+  maxHeight?: string | number;
+  minHeight?: string | number;
+  readOnly: boolean;
+  rules: any[];
+  tipSize?: string; // 文字提示
+  tipWidth?: string; // 提示自定义的宽度
+  tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
+  formFieldsRef: any; // 懒加载ref
+  richTextRef: any; // 富文本Ref
+  language: string;
+}
+
+interface BaseRichTextEditorPropsType {
+  value?: string;
+  //   disabled?: boolean;
+  className: string;
+  imageType?: string;
+  heightStyle?: CSSProperties;
+  heightType: string;
+  minHeight?: string | number;
+  maxHeight?: string | number;
+  height?: number;
+  engineApis: any;
+  onChange?: Function;
+  language: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  richTextRef: any;
+}
+
+const richTextEditorPrefix = 'ued-richText-editor';
+
+const BaseRichTextEditor = React.forwardRef(
+  (props: BaseRichTextEditorPropsType, ref) => {
+    const {
+      value,
+      imageType,
+      className,
+      heightType,
+      minHeight,
+      maxHeight,
+      height,
+      engineApis,
+      onChange,
+      language,
+      disabled,
+      style,
+      richTextRef,
+    } = props;
+    engineApis;
+
+    const heightStyle = useMemo(
+      () =>
+        heightType === 'auto'
+          ? {
+              minHeight: minHeight ? `${minHeight}px` : '',
+              maxHeight: maxHeight ? `${maxHeight}px` : '',
+              height: 'auto',
+            }
+          : { height: height ? `${height}px` : '' },
+      [heightType, height, maxHeight, minHeight],
+    );
+    const richTextProps: any = {};
+    if (onChange) {
+      richTextProps.onChange = onChange;
+    }
+
+    const isBase64 = (src: string) => {
+      // 检查是否以 base64 数据格式开始
+      return src.startsWith('data:image/');
+    };
+
+    const getQueryParams = (url: string) => {
+      const queryParams: any = {};
+      // 使用 URLSearchParams 解析查询字符串
+      const urlParams = new URLSearchParams(url.split('?')[1]);
+
+      // 遍历所有查询参数，添加到结果对象中
+      for (const [key, value] of urlParams) {
+        queryParams[key] = value;
+      }
+
+      return queryParams;
+    };
+
+    return (
+      <div
+        className={classnames(richTextEditorPrefix, className)}
+        style={style}
+      >
+        <RichText
+          ref={richTextRef}
+          {...richTextProps}
+          {...heightStyle}
+          autofocus={!disabled}
+          disabled={disabled}
+          value={value ?? ''}
+          language={language}
+          antPrefix="pcfactory"
+          style={style}
+          customImgUrl={(imgUrl: string) => {
+            if (!isBase64(imgUrl)) {
+              const urlParams = getQueryParams(imgUrl);
+              if (urlParams.fileId) {
+                const url = engineApis?.getAppFileUrlById(urlParams.fileId);
+                return url;
+              }
+            }
+            return imgUrl;
+          }}
+          addImageBlobHook={async (blob, callback) => {
+            if (imageType !== 'base64') {
+              const formData = new FormData();
+              formData.append('attach', blob, 'tmpfile');
+              const res = await engineApis?.service?.uploadFileByFetch(
+                formData,
+              );
+              if (res?.fileId) {
+                const link = engineApis?.getAppFileUrlById(res?.fileId);
+                callback(link, '');
+              }
+            } else {
+              const reader = new FileReader();
+
+              reader.onload = ({ target }) =>
+                callback(target!.result as string);
+              reader.readAsDataURL(blob);
+            }
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+const RichTextEditor = LingxiForwardRef<any, MyRichTextEditorProps>(
+  (props, ref) => {
+    const {
+      height,
+      onChange,
+      className,
+      imageType,
+      heightType = 'fixed',
+      maxHeight,
+      minHeight,
+      getEngineApis,
+      name,
+      disabled,
+      required,
+      readOnly,
+      formFieldsRef,
+      language,
+      style,
+      richTextRef,
+    } = props;
+    const engineApis = getEngineApis?.() || {};
+    const { getLocale, lang } = useLocale(engineApis);
+
+    const finalRules = useMemo(
+      () => [
+        {
+          required,
+          message: getLocale?.('notEmpty', { name }),
+        },
+      ],
+      [required, name, lang],
+    );
+    return (
+      <FormFields
+        {...getFieldsProps(props)}
+        ref={formFieldsRef}
+        trigger="onChange"
+        required={required}
+        disabled={disabled as any}
+        readOnly={readOnly}
+        rules={finalRules}
+        render={renderRichText}
+      >
+        <BaseRichTextEditor
+          richTextRef={richTextRef}
+          engineApis={engineApis}
+          className={className}
+          imageType={imageType}
+          height={height}
+          heightType={heightType}
+          maxHeight={maxHeight}
+          minHeight={minHeight}
+          onChange={onChange}
+          language={language}
+          style={style}
+        />
+      </FormFields>
+    );
+  },
+);
+
+export default RichTextEditor;

package/lib/public/src/components/pcfactory/src/RichTextEditor/RichTextEditorMain.tsx

@@ -0,0 +1,41 @@
+import { useRef } from 'react';
+import { useCommonImperativeHandle } from '../utils';
+import RichTextEditorLoad from './loader';
+
+import { LingXiFC } from '@lingxiteam/types';
+
+export interface RichTextEditorProps {
+  height: number;
+  rootRef: any;
+}
+
+const RichTextEditorMain: LingXiFC<RichTextEditorProps> = (props) => {
+  const { rootRef: ref } = props;
+  const gridViewRef = useRef<any>(null);
+  const richTextRef = useRef<any>(null);
+  const { disabled, required, readOnly, formFieldsRef } =
+    useCommonImperativeHandle(ref, props, {
+      setValue: (val: string) => {
+        if (richTextRef.current) {
+          richTextRef.current.setHTML(val);
+        }
+      },
+    });
+
+  const language = props.getEngineApis().getLocaleEnv();
+
+  return (
+    <RichTextEditorLoad
+      {...props}
+      disabled={disabled}
+      language={language}
+      required={required}
+      readOnly={readOnly}
+      formFieldsRef={formFieldsRef}
+      ref={gridViewRef}
+      richTextRef={richTextRef}
+    />
+  );
+};
+
+export default RichTextEditorMain;

package/lib/public/src/components/pcfactory/src/RichTextEditor/index.tsx

@@ -0,0 +1,33 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React from 'react';
+import LcdpUeditorMain from './LcdpUeditorMain';
+import RichTextEditorMain from './RichTextEditorMain';
+
+class RichTextEditor extends React.Component<any, {}> {
+  state = {
+    isError: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    this.setState({
+      isError: true,
+    });
+  }
+
+  render(): React.ReactNode {
+    if (this.state.isError) {
+      // @ts-ignore
+      return <RichTextEditorMain {...this.props} />;
+    }
+    // @ts-ignore
+    return <LcdpUeditorMain {...this.props} />;
+  }
+}
+
+export default LingxiForwardRef<any, any>((props, ref) => {
+  return <RichTextEditor {...props} rootRef={ref} />;
+});

package/lib/public/src/components/pcfactory/src/RichTextEditor/loader.ts

@@ -0,0 +1,12 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const GanttLoader = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: 'pcFactory-RichTextEditor' */ './RichTextEditor'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default GanttLoader;