@lingxiteam/ebe-utils 0.5.0 → 0.5.2

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

@@ -0,0 +1,76 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import IconPlaceholder from './assets/placeholder.png';
+
+export interface PictureVerifyCodeProps {
+  digit?: number;
+  onClick?: (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+  style?: React.CSSProperties;
+  visible?: boolean;
+  getEngineApis?: any;
+}
+const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef(
+  (props, ref) => {
+    const { digit, onClick, style, visible, getEngineApis, ...restProps } =
+      props;
+
+    const engineApis = getEngineApis?.() || {};
+
+    const [imgSrc, setImgSrc] = useState(IconPlaceholder);
+
+    const getPicVerifyCode = () => {
+      const newTimestamp = new Date().getTime();
+      if (digit && newTimestamp) {
+        try {
+          (async () => {
+            const params = {
+              validateCodeCount: `${digit}`,
+              t: `${newTimestamp}`,
+            };
+            const url = await engineApis.getValidateCodePicture(params);
+            setImgSrc(url);
+          })();
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    };
+    useEffect(() => {
+      getPicVerifyCode();
+    }, []);
+    useImperativeHandle(ref, () => ({
+      refreshPictureVeriryCode: () => {
+        getPicVerifyCode();
+      },
+    }));
+    const targetStyle = useMemo(() => {
+      return { ...style, cursor: 'pointer' };
+    }, [style]);
+    if (!visible) {
+      return null;
+    }
+    return (
+      <img
+        alt=""
+        {...restProps}
+        style={targetStyle}
+        src={imgSrc}
+        onClick={(e) => {
+          if (onClick) {
+            onClick(e);
+          } else {
+            // 点击事件如果有自定义则执行自定义事件，反之默认刷新验证码
+            getPicVerifyCode();
+          }
+        }}
+      />
+    );
+  },
+);
+
+export default PictureVerifyCode;

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

@@ -0,0 +1,3 @@
+import c from '../ReactECharts';
+
+export default c;

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

@@ -0,0 +1,155 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Progress } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo } from 'react';
+import { useListenProps } from '../utils';
+import { useUpdateEffect } from '../utils/ahooks';
+
+export interface MyProgressProps {
+  visible?: boolean;
+  value?: any;
+  percent?: any;
+  onValueRelease?: any;
+  title?: string;
+  style?: any;
+  type?: any;
+  placement?: any;
+  showInfo?: boolean;
+  showTitle?: boolean;
+  color?: any;
+  fontSize?: any;
+  lineHeight?: any;
+  fontWeight?: any;
+  valueColor?: any;
+  valueFontSize?: any;
+  valueLineHeight?: any;
+  valueFontWeight?: any;
+  onChange?: any;
+}
+
+const prefixCls = 'ued-progress';
+
+const MyProgress = LingxiForwardRef<any, MyProgressProps>((props, ref) => {
+  const {
+    visible = true,
+    onValueRelease,
+    title,
+    style,
+    placement,
+    type,
+    showTitle,
+    color,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    showInfo,
+    valueColor,
+    valueFontSize,
+    valueLineHeight,
+    valueFontWeight,
+    ...restProps
+  } = props;
+  const { width, height, ...restStyle } = style || {};
+
+  const [compValue, setCompValue] = useListenProps(props.value);
+
+  useEffect(() => {
+    // 更新值到value中
+    props?.onChange(props.value ?? props.percent);
+  }, []);
+
+  useUpdateEffect(() => {
+    // 数据源变化更新数据
+    setCompValue(props.percent);
+  }, [props.percent]);
+
+  // 标题
+  const renderTitle = useMemo(
+    () =>
+      showTitle && type === 'line' ? (
+        <div
+          className={`${prefixCls}-title`}
+          style={{
+            color,
+            fontSize,
+            lineHeight,
+            fontWeight,
+          }}
+        >
+          {title}
+        </div>
+      ) : null,
+    [showTitle, title, type, color, fontSize, lineHeight, fontWeight],
+  );
+  // 数值
+  const renderValue = useMemo(
+    () =>
+      showInfo ? (
+        <div
+          className={`${prefixCls}-value`}
+          style={{
+            color: valueColor,
+            fontSize:
+              type === 'line'
+                ? restStyle?.fontSize || valueFontSize
+                : valueFontSize,
+            lineHeight: valueLineHeight,
+            fontWeight: valueFontWeight,
+          }}
+        >
+          {`${compValue ?? ''}%`}
+        </div>
+      ) : null,
+    [
+      showInfo,
+      compValue,
+      type,
+      valueColor,
+      valueLineHeight,
+      valueFontWeight,
+      valueFontSize,
+      restStyle?.fontSize,
+    ],
+  );
+
+  // 进度条
+  const renderProgress = () => (
+    <Progress
+      {...restProps}
+      percent={+compValue}
+      type={type}
+      showInfo={type === 'line' ? false : showInfo}
+      format={type !== 'line' ? () => renderValue : undefined}
+      style={restStyle}
+    />
+  );
+
+  return visible ? (
+    <div
+      className={classNames({
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-wrapper-vertical`]:
+          placement === 'vertical' && type === 'line',
+      })}
+      style={{ ...restStyle, width, height }}
+    >
+      {placement === 'vertical' && type === 'line' ? (
+        <>
+          <div className={`${prefixCls}-context`}>
+            {renderTitle}
+            {renderValue}
+          </div>
+          {renderProgress()}
+        </>
+      ) : (
+        <>
+          {renderTitle}
+          {renderProgress()}
+          {type === 'line' && renderValue}
+        </>
+      )}
+    </div>
+  ) : null;
+});
+
+export default MyProgress;

package/lib/public/src/components/pcfactory/src/QRCode/const.ts

@@ -0,0 +1,5 @@
+export const logoSizeTrans: any = {
+  large: 0.2,
+  default: 0.15,
+  small: 0.1,
+};

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

@@ -0,0 +1,146 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import QrCodeWithLogo from 'qr-code-with-logo';
+import { useEffect, useMemo, useState } from 'react';
+import { isImgUrl, setRgbTo16 } from '../utils/common';
+import { logoSizeTrans } from './const';
+// @ts-ignore
+import IconDefaultLogo from '../Img/assets/placeholder.png';
+
+export interface MyQRCodeProps {
+  visible?: boolean;
+  value?: any;
+  content?: string;
+  isLogo?: boolean;
+  srcType?: string;
+  fileCode?: string;
+  src?: string;
+  color?: string;
+  logoSize?: string;
+  onClick?: (url?: string, content?: string) => void;
+  getEngineApis?: any;
+}
+
+const prefixCls = 'qRCode';
+
+const QRCode = LingxiForwardRef<any, MyQRCodeProps>((props, ref) => {
+  const {
+    content,
+    isLogo,
+    fileCode,
+    src,
+    srcType,
+    color: rbgaColor,
+    logoSize: logoSizeData,
+    onClick,
+    getEngineApis,
+    visible = true,
+    ...restProps
+  } = props;
+  const [url, setUrl] = useState<any>();
+  const [logoSrc, setLogoSrc] = useState<any>();
+  const [flag, setFlag] = useState(false);
+  const engineApis = getEngineApis?.() || {};
+
+  // 自定义二维码logo
+  useEffect(() => {
+    if (!isLogo) {
+      setLogoSrc(null);
+      return;
+    }
+    if (srcType === 'fileCode' && fileCode) {
+      (async () => {
+        try {
+          setLogoSrc(
+            await engineApis?.service?.getAppFileUrlByFileCode(fileCode),
+          );
+        } catch (e) {
+          setLogoSrc(null);
+          console.log(e);
+        }
+      })();
+    } else if (srcType === 'src' && src && src.length > 0) {
+      setLogoSrc(src);
+    } else {
+      setLogoSrc(null);
+    }
+  }, [src, isLogo, fileCode, srcType]);
+
+  const color = useMemo(() => {
+    if (!rbgaColor) return undefined;
+    return setRgbTo16(rbgaColor);
+  }, [rbgaColor]);
+
+  const logoSize = useMemo(
+    () => logoSizeData && logoSizeTrans[logoSizeData],
+    [logoSizeData],
+  );
+
+  const getQrCodeUrl: any = (config: any) => {
+    const image = new Image();
+
+    QrCodeWithLogo.toImage({ ...config, image }).then(() => {
+      setUrl(image.src);
+      setFlag(true);
+    });
+  };
+
+  const setQrCodeUrl: any = async () => {
+    const config: any = {
+      content: typeof content === 'string' ? content : JSON.stringify(content),
+      nodeQrCodeOptions: {
+        margin: 2,
+        color: {
+          dark: color,
+        },
+      },
+    };
+
+    if (logoSrc) {
+      try {
+        await isImgUrl(logoSrc);
+
+        getQrCodeUrl({
+          ...config,
+          logo: {
+            logoSize,
+            src: logoSrc,
+            borderRadius: 4,
+          },
+        });
+      } catch (e) {
+        // 如果自定义logo图片无法加载，使用默认logo
+        getQrCodeUrl({
+          ...config,
+          logo: {
+            borderRadius: 4,
+            logoSize: logoSize + 0.05,
+            borderSize: 0,
+            src: IconDefaultLogo,
+          },
+        });
+      }
+    } else {
+      getQrCodeUrl(config);
+    }
+  };
+
+  useEffect(() => {
+    if (content) {
+      setQrCodeUrl();
+    } else {
+      setFlag(false);
+    }
+  }, [content, color, logoSrc, logoSize]);
+
+  return visible ? (
+    <div
+      className={prefixCls}
+      style={{ display: 'contents' }}
+      onClick={() => onClick && onClick(url, content)}
+    >
+      {flag && <img {...restProps} src={url} alt="" />}
+    </div>
+  ) : null;
+});
+
+export default QRCode;

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

@@ -0,0 +1,197 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import type { FormItemProps } from 'antd/lib/form';
+import classnames from 'classnames';
+import React, { useEffect, useMemo, useRef } from 'react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import useInitReactQuill from '../utils/hooks/useInitReactQuill';
+
+export interface MyQuillEditorProps 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
+}
+
+interface BaseQuillEditorPropsType {
+  value?: string;
+  disabled?: boolean;
+  className: string;
+  imageType?: string;
+  // heightStyle?: CSSProperties;
+  heightType: string;
+  minHeight?: string | number;
+  maxHeight?: string | number;
+  height?: number;
+  engineApis: any;
+  onChange?: Function;
+}
+
+const quillEditorPrefix = 'ued-quill-editor';
+
+const BaseQuillEditor = React.forwardRef(
+  (props: BaseQuillEditorPropsType, ref) => {
+    const {
+      value,
+      disabled,
+      className,
+      imageType,
+      heightType,
+      minHeight,
+      maxHeight,
+      height,
+      engineApis,
+      onChange,
+    } = props;
+
+    const inputting = useRef<boolean>(false);
+
+    const heightStyle = useMemo(
+      () => (heightType === 'auto' ? { minHeight, maxHeight } : { height }),
+      [heightType, height, maxHeight, minHeight],
+    );
+
+    const [quillRef, modules] = useInitReactQuill({
+      engineApis,
+    });
+
+    const quillModules = useMemo(() => {
+      if (imageType && imageType === 'base64') {
+        return {
+          toolbar: [...modules.toolbar.container],
+        };
+      }
+      return modules;
+    }, [imageType, modules]);
+
+    const convertBase64UrlToBlob = (urlData: string) => {
+      const imgSrc = urlData.match(/<img src="data:.*?(?:>|\/>)/gi);
+      if (!imgSrc || !imgSrc[0]) return null;
+      const imgData = imgSrc[0].split('"')[1];
+      // 去掉url的头，并转换为byte
+      const bytes = window.atob(imgData.split(',')[1]);
+      // 处理异常,将ascii码小于0的转换为大于0
+      const ab = new ArrayBuffer(bytes.length);
+      const ia = new Uint8Array(ab);
+      ia.forEach((i, index) => {
+        ia[index] = bytes.charCodeAt(index);
+      });
+      return new Blob([ia], {
+        type: imgData.split(',')[0].split(':')[1].split(';')[0],
+      });
+    };
+
+    useEffect(() => {
+      if (inputting.current) {
+        inputting.current = false;
+      } else {
+        // quillRef.current?.getEditor().setText(value || '');
+      }
+    }, [value]);
+
+    return (
+      <ReactQuill
+        ref={quillRef}
+        readOnly={disabled}
+        modules={quillModules}
+        style={heightStyle}
+        value={typeof value === 'number' ? `${value}` : value}
+        className={classnames(quillEditorPrefix, className)}
+        onChange={async (v: string) => {
+          // 刚执行了清空值操作，不需要调用onChange
+          if (v === '<p><br></p>' && value === '') {
+            return;
+          }
+          inputting.current = true;
+          let newValue = v;
+          let blobV = null;
+          if (imageType !== 'base64') {
+            blobV = convertBase64UrlToBlob(v);
+            if (blobV) {
+              const formData = new FormData();
+              formData.append('attach', blobV, 'tmpfile');
+              const res = await engineApis?.service?.uploadFileByFetch(
+                formData,
+              );
+              if (res?.fileId) {
+                const link = engineApis?.getAppFileUrlById(res?.fileId);
+                // TODO 后续做appid的数据隔离时候，需要改造
+                newValue = v.replace(
+                  /<img src="data:.*?(?:>|\/>)/gi,
+                  `<img src="${link}" />`,
+                );
+              }
+            }
+          }
+          if (!blobV && onChange) {
+            onChange(newValue);
+          }
+        }}
+      />
+    );
+  },
+);
+
+const QuillEditor = LingxiForwardRef<any, MyQuillEditorProps>((props, ref) => {
+  const {
+    height,
+    onChange,
+    className,
+    imageType,
+    heightType = 'fixed',
+    maxHeight,
+    minHeight,
+    getEngineApis,
+    value,
+    disabled,
+  } = props;
+  const engineApis = getEngineApis?.() || {};
+
+  return (
+    <BaseQuillEditor
+      engineApis={engineApis}
+      className={className}
+      imageType={imageType}
+      height={height}
+      disabled={disabled}
+      heightType={heightType}
+      maxHeight={maxHeight}
+      minHeight={minHeight}
+      onChange={onChange}
+      value={value}
+    />
+  );
+});
+
+export default QuillEditor;

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

@@ -0,0 +1,37 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useRef } from 'react';
+import {
+  FormFields,
+  getFieldsProps,
+  useCommonImperativeHandle,
+} from '../utils';
+import QuillEditorLoad from './loader';
+
+const QuillEditor = LingxiForwardRef<unknown, any>((props, ref) => {
+  const gridViewRef = useRef<any>(null);
+  const { disabled, required, readOnly, formFieldsRef, finalRules } =
+    useCommonImperativeHandle(ref, props);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      trigger="onChange"
+      required={required}
+      disabled={disabled as any}
+      readOnly={readOnly}
+      rules={finalRules}
+    >
+      <QuillEditorLoad
+        {...props}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        formFieldsRef={formFieldsRef}
+        ref={gridViewRef}
+      />
+    </FormFields>
+  );
+});
+
+export default QuillEditor;

package/lib/public/src/components/pcfactory/src/QuillEditor/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-QuillEditor' */ './QuillEditor'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default GanttLoader;