@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/View/useBackgroundStyle.ts

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useState } from 'react';
+
+interface BackgroundConfig {
+  backgroundType?: any;
+  mode?: string;
+  appId?: string;
+  engineApis?: any;
+}
+const useBackgroundStyle = (props: BackgroundConfig) => {
+  const { backgroundType, mode = 'editor', engineApis } = props || {};
+
+  const [imgSrc, setImgSrc] = useState('');
+
+  useEffect(() => {
+    const code = backgroundType?.image?.fileCode;
+    if (code) {
+      (async () => {
+        try {
+          if (mode === 'editor' && engineApis) {
+            let func: any;
+            if (typeof engineApis === 'function') {
+              const apis = engineApis();
+              if (apis.getAppFileUrlByFileCode) {
+                func = apis.getAppFileUrlByFileCode;
+              }
+            } else if (
+              typeof engineApis?.getAppFileUrlByFileCode === 'function'
+            ) {
+              func = engineApis.getAppFileUrlByFileCode;
+            }
+            if (func) {
+              setImgSrc(
+                await func({
+                  appId: props?.appId || window.appId,
+                  fileCode: code,
+                }),
+              );
+            }
+          } else if (mode === 'engine') {
+            setImgSrc(await engineApis?.service?.getAppFileUrlByFileCode(code));
+          }
+        } catch (e) {
+          console.log(e);
+        }
+      })();
+    }
+  }, [backgroundType?.image?.fileCode]);
+
+  const backgroundStyle = useMemo(() => {
+    if (backgroundType) {
+      const { type, color, image, imageType } = backgroundType || {};
+      const { fileUrl } = image || {};
+      const obj: any = {};
+      if (type === 'image') {
+        let url = '';
+        if (imageType === 'custom') {
+          url = fileUrl;
+        } else {
+          url = imgSrc;
+        }
+        obj.backgroundImage = `url(${url})`;
+        obj.backgroundRepeat = 'no-repeat';
+        obj.backgroundPosition = 'center center';
+        obj.backgroundSize = '100% 100%';
+      } else if (type === 'cleanColor') {
+        obj.backgroundColor = color;
+      }
+      return obj;
+    }
+    return {};
+  }, [backgroundType, imgSrc]);
+  return { backgroundStyle };
+};
+
+export default useBackgroundStyle;

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

@@ -0,0 +1,16 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { CSSProperties } from 'react';
+
+export interface VirtualGroupProps {
+  style: CSSProperties;
+}
+
+const VirtualGroup = LingxiForwardRef<any, VirtualGroupProps>((props: any) => {
+  return (
+    <div style={props.style} data-compid={props?.['data-compid']}>
+      {props.children}
+    </div>
+  );
+});
+
+export default VirtualGroup;

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

@@ -0,0 +1,104 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import {
+  addEventListenerMessage,
+  postMessageToContentWindow,
+  removeEventListenerMessage,
+} from 'lcdp-message';
+import React, {
+  CSSProperties,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { useHiddenStyle, useListenProps } from '../utils';
+
+export interface MyWebviewProps {
+  __compId?: string;
+  getWebviewApis?: (
+    e: MyWebviewProps['__compId'],
+    opts: Record<string, any>,
+  ) => void;
+  onMessage?: React.FC<any>;
+  title?: string;
+  src?: string;
+  visible: boolean;
+  style?: CSSProperties;
+}
+
+// const prefixCls = 'webview';
+
+const Webview = LingxiForwardRef<any, MyWebviewProps>((props, ref) => {
+  const {
+    __compId,
+    getWebviewApis,
+    onMessage = () => {},
+    style,
+    visible,
+    title,
+    ...restProps
+  } = props;
+  const hiddenStyle = useHiddenStyle(visible, style);
+  const webViewRef = useRef<HTMLIFrameElement | null>(null);
+  const getContentWindow = () => webViewRef?.current?.contentWindow;
+
+  const [update, setUpdate] = useState(() => String(Date.now()));
+
+  const [src, setSrc] = useListenProps(props.src);
+
+  const postMessage = (data: unknown) => {
+    if (webViewRef.current) {
+      const contentWindow = getContentWindow();
+      postMessageToContentWindow(contentWindow, data, src);
+    }
+  };
+
+  useEffect(() => {
+    // 把业务组件中操作表单的api暴露给父组件
+    if (typeof getWebviewApis === 'function') {
+      getWebviewApis(__compId, {
+        contentWindow: getContentWindow(),
+        postMessage,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [__compId]);
+
+  const receiveMessage = (d: any) => {
+    // eslint-disable-next-line no-unused-expressions
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    onMessage && onMessage(d);
+  };
+
+  useImperativeHandle(ref, () => ({
+    setSrc: (_url: string) => {
+      setSrc(_url);
+    },
+    postMessage: (message: any) => {
+      postMessage(message);
+    },
+    refreshContainer: () => {
+      setUpdate(String(Date.now()));
+    },
+  }));
+
+  useEffect(() => {
+    const fn = addEventListenerMessage(receiveMessage);
+    return () => {
+      removeEventListenerMessage(fn);
+    };
+  }, []);
+
+  return (
+    <iframe
+      title="title"
+      ref={webViewRef}
+      {...restProps}
+      src={src}
+      key={update}
+      style={hiddenStyle}
+    />
+  );
+});
+
+export default Webview;

package/lib/public/src/components/pcfactory/src/index.component.ts

@@ -0,0 +1,253 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../typings.d.ts" />
+// 该文件请勿手动修改，执行yarn add:pc + compName + (-c[是否是容器组件]) 命令自动生成该文件。
+import Alert from './Alert';
+import Animation from './Animation';
+import Audio from './Audio';
+import BarChart from './BarChart';
+import Button from './Button';
+import Card from './Card';
+import Cascader from './Cascader';
+import ChartBar from './ChartBar';
+import ChartLine from './ChartLine';
+import Checkbox from './Checkbox';
+import CheckboxGroup from './CheckboxGroup';
+import Collapse from './Collapse';
+import CollapsePanel from './CollapsePanel';
+import Condition from './Condition';
+import DatePicker from './DatePicker';
+import Description from './Description';
+import Divider from './Divider';
+import Dropdown from './Dropdown';
+import DynamicTabs from './DynamicTabs';
+import Form from './Form';
+import FormGroup from './FormGroup';
+import FreeLayout from './FreeLayout';
+import Gantt from './Gantt';
+import GridView from './GridView';
+import HorizontalView from './HorizontalView';
+import Icon from './Icon';
+import Img from './Img';
+import Input from './Input';
+import InputNumber from './InputNumber';
+import Layout from './Layout';
+import LineChart from './LineChart';
+import Link from './Link';
+import LoopList from './LoopList';
+import LXPieChart from './LXPieChart';
+import LXRadarChart from './LXRadarChart';
+import Menu from './Menu';
+import ModalSelect from './ModalSelect';
+import MultipleSelect from './MultipleSelect';
+import Pagination from './Pagination';
+import Password from './Password';
+import PictureVerifyCode from './PictureVerifyCode';
+import PieChart from './PieChart';
+import Progress from './Progress';
+import QRCode from './QRCode';
+import QuillEditor from './QuillEditor';
+import RadarChart from './RadarChart';
+import Radio from './Radio';
+import RangePicker from './RangePicker';
+import Rate from './Rate';
+import RemoteComponent, { getUseRemoteComponent } from './RemoteComponent';
+import Result from './Result';
+import RichTextEditor from './RichTextEditor';
+import Row from './Row';
+import Select from './Select';
+import Slider from './Slider';
+import StdUpload from './StdUpload';
+import Steps from './Steps';
+import './styles/index.less';
+import SuperSelect from './SuperSelect';
+import Swiper from './Swiper';
+import Switch from './Switch';
+import Table from './Table';
+import TabPane from './TabPane';
+import Tabs from './Tabs';
+import Tag from './Tag';
+import Text from './Text';
+import TextArea from './TextArea';
+import TimePicker from './TimePicker';
+import TlrView from './TlrView';
+import Transfer from './Transfer';
+import Tree from './Tree';
+import TreeSelect from './TreeSelect';
+import TreeTable from './TreeTable';
+import Upload from './Upload';
+import './utils/polyfill';
+import WithSyncValue from './utils/WithSyncValue';
+import VerificationCode from './VerificationCode';
+import VerticalView from './VerticalView';
+import VideoPlayer from './VideoPlayer';
+import View from './View';
+import VirtualGroup from './VirtualGroup';
+import Webview from './Webview';
+
+export default {
+  Alert,
+  Animation,
+  Audio,
+  BarChart,
+  Button,
+  Card,
+  Cascader,
+  ChartBar,
+  ChartLine,
+  Checkbox,
+  CheckboxGroup,
+  Collapse,
+  CollapsePanel,
+  Condition,
+  DatePicker,
+  Description,
+  Divider,
+  Dropdown,
+  DynamicTabs,
+  Form,
+  FormGroup,
+  FreeLayout,
+  Gantt,
+  GridView,
+  HorizontalView,
+  Icon,
+  Img,
+  Input,
+  InputNumber,
+  LXPieChart,
+  LXRadarChart,
+  Layout,
+  LineChart,
+  Link,
+  LoopList,
+  Menu,
+  ModalSelect,
+  MultipleSelect,
+  Pagination,
+  Password,
+  PictureVerifyCode,
+  PieChart,
+  Progress,
+  QRCode,
+  QuillEditor,
+  RadarChart,
+  Radio,
+  RangePicker,
+  Rate,
+  RemoteComponent,
+  Result,
+  RichTextEditor,
+  Row,
+  Select,
+  Slider,
+  StdUpload,
+  Steps,
+  SuperSelect,
+  Swiper,
+  Switch,
+  TabPane,
+  Table,
+  Tabs,
+  Tag,
+  Text,
+  TextArea,
+  TimePicker,
+  TlrView,
+  Transfer,
+  Tree,
+  TreeSelect,
+  TreeTable,
+  Upload,
+  VerificationCode,
+  VerticalView,
+  VideoPlayer,
+  View,
+  VirtualGroup,
+  Webview,
+  getUseRemoteComponent,
+  WithSyncValue,
+};
+
+export {
+  Alert,
+  Animation,
+  Audio,
+  BarChart,
+  Button,
+  Card,
+  Cascader,
+  ChartBar,
+  ChartLine,
+  Checkbox,
+  CheckboxGroup,
+  Collapse,
+  CollapsePanel,
+  Condition,
+  DatePicker,
+  Description,
+  Divider,
+  Dropdown,
+  DynamicTabs,
+  Form,
+  FormGroup,
+  FreeLayout,
+  Gantt,
+  GridView,
+  HorizontalView,
+  Icon,
+  Img,
+  Input,
+  InputNumber,
+  LXPieChart,
+  LXRadarChart,
+  Layout,
+  LineChart,
+  Link,
+  LoopList,
+  Menu,
+  ModalSelect,
+  MultipleSelect,
+  Pagination,
+  Password,
+  PictureVerifyCode,
+  PieChart,
+  Progress,
+  QRCode,
+  QuillEditor,
+  RadarChart,
+  Radio,
+  RangePicker,
+  Rate,
+  RemoteComponent,
+  Result,
+  RichTextEditor,
+  Row,
+  Select,
+  Slider,
+  StdUpload,
+  Steps,
+  SuperSelect,
+  Swiper,
+  Switch,
+  TabPane,
+  Table,
+  Tabs,
+  Tag,
+  Text,
+  TextArea,
+  TimePicker,
+  TlrView,
+  Transfer,
+  Tree,
+  TreeSelect,
+  TreeTable,
+  Upload,
+  VerificationCode,
+  VerticalView,
+  VideoPlayer,
+  View,
+  VirtualGroup,
+  Webview,
+  getUseRemoteComponent,
+  WithSyncValue,
+};

package/lib/public/src/components/pcfactory/src/styles/common.less

@@ -0,0 +1,107 @@
+@import (reference) "./theme/variables/antdVariables.less";
+// 容器内容为空占位box
+.ued-empty-box {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 60px;
+  color: rgba(28, 36, 46, 0.45);
+  font-size: 16px;
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.ued-m-empty-box {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 60px;
+  color: rgba(28, 36, 46, 0.45);
+  font-size: 16px;
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.TEXT_ELLIPSIS {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.@{ant-prefix}-spin-nested-loading > div > .@{ant-prefix}-spin {
+  min-height: 50px;
+}
+
+.@{ant-prefix}-message {
+  z-index: 1050;
+}
+
+// 图标使用主题色统一样式
+.fill-primary {
+  color: @primary-color;
+  fill: @primary-color;
+}
+
+.ued-input-readonly {
+  border: none !important;
+  line-height: 22px;
+  display: inline-block;
+  width: 100%;
+  word-break: break-all;
+  white-space: pre-line;
+
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.ued-control-line-number {
+  display: inline-block; // 兼容IE
+  display: -webkit-box; // webkit 内核专用
+  overflow: hidden;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.@{ant-prefix}-picker-today-btn {
+  color: @primary-color;
+  &:hover {
+    color: @primary-color;
+  }
+}
+
+.@{ant-prefix}-picker-now-btn {
+  color: @primary-color;
+  &:hover {
+    color: @primary-color;
+  }
+}
+
+.ued-print-container {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}