@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/VideoPlayer/index.tsx

@@ -0,0 +1,11 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle } from 'react';
+import type { ReactPlayerProps } from 'react-player';
+import ViewPlayerLoader from './loader';
+
+const ViewPlayer = LingxiForwardRef<unknown, ReactPlayerProps>((props, ref) => {
+  useImperativeHandle(ref, () => ({}));
+  return <ViewPlayerLoader {...props} />;
+});
+
+export default ViewPlayer;

package/lib/h5public/src/components/factory/src/VideoPlayer/loader.ts

@@ -0,0 +1,17 @@
+import Loadable from 'react-loadable';
+import type { ReactPlayerProps } from 'react-player';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const ViewPlayerLoader = Loadable<
+  ReactPlayerProps,
+  React.ComponentType<ReactPlayerProps>
+>({
+  // eslint-disable-next-line func-call-spacing
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: factory-ViewPlayer */ './ViewPlayer'
+    )) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ViewPlayerLoader;

package/lib/h5public/src/components/factory/src/View/index.tsx

@@ -0,0 +1,69 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useThrottleFn } from 'ahooks';
+import { useEffect, useRef, useState } from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import { withTransformProps } from '../utils/withTransformProps';
+import transformProps from './transformProps';
+import type { AppViewProps } from './useStyle';
+import useStyle from './useStyle';
+
+const AppView = LingxiForwardRef<any, AppViewProps>((props, ref) => {
+  const {
+    backgroundType = {},
+    fileCode,
+    src,
+    $$componentItem,
+    visible,
+    getEngineApis,
+    onClick,
+    visibility = false,
+    ...restProps
+  } = props;
+  const [imgSrc, setImgSrc] = useState<string>();
+  // @ts-ignore
+  const finalStyle = useHiddenStyle(visible, undefined, visibility);
+  const isDid = useRef(false);
+  const { getAppFileUrlByFileCode } = getEngineApis() || {};
+  useEffect(() => {
+    if (backgroundType.image || fileCode) {
+      setImgSrc(
+        getAppFileUrlByFileCode(backgroundType.image || fileCode, {
+          appId: $$componentItem.appId,
+        }),
+      );
+    }
+  }, [backgroundType, src, fileCode]);
+  const viewRef = useRef<any>();
+  const style = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+  const { run } = useThrottleFn(
+    (e) => {
+      onClick && onClick(e);
+    },
+    {
+      wait: 200,
+      trailing: false,
+    },
+  );
+  if (visible === false && isDid.current === false) {
+    return null;
+  }
+  // 如果已经渲染过的，就使用display none
+  isDid.current = true;
+  return (
+    <div
+      id={$$componentItem.id}
+      ref={viewRef}
+      {...restProps}
+      style={{ ...style, ...finalStyle }}
+      onClick={run}
+    />
+  );
+});
+
+export default withTransformProps(AppView, transformProps);

package/lib/h5public/src/components/factory/src/View/transformProps.ts

@@ -0,0 +1,33 @@
+interface Props {
+  content: string;
+  [key: string]: any;
+}
+
+export default function transformProps(props: Props) {
+  const { content, style, ...restProps } = props;
+  const newStyle = style;
+  // 零代码左右布局更改为上下布局
+  if (props._compname === 'HorizontalView') {
+    newStyle.flexDirection = 'column';
+    newStyle.backgroundColor = '#fff';
+  }
+  // 标签页默认样式更改
+  if (props._compname === 'TabPane') {
+    newStyle.backgroundColor = '#fff';
+    newStyle.padding = '12px';
+  }
+  // 零代码编辑态左右布局改上下
+  if (props._component?.compName === 'HorizontalView') {
+    newStyle.flexDirection = 'column';
+  }
+  // 零代码编辑态修改展示高度
+  if (props._component?.compName === 'TabPane') {
+    newStyle.minHeight = '84px';
+  }
+
+  const newProps: Record<string, any> = {
+    ...(restProps as any),
+    style: newStyle,
+  };
+  return newProps;
+}

package/lib/h5public/src/components/factory/src/View/useStyle.ts

@@ -0,0 +1,126 @@
+import _ from 'lodash';
+import type React from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getImageSize } from '../utils/getImageSize';
+// import { $$componentItem } from '../interfaces/types';
+
+export interface AppViewProps {
+  style?: CSSProperties;
+  src?: string;
+  visible?: boolean;
+  fileCode?: string;
+  backgroundType: any;
+  onClick?: (e: any) => void;
+  visibility?: boolean;
+  getEdEngineApi?: any;
+  // $$componentItem?: $$componentItem;
+}
+
+const useStyle = (
+  props: AppViewProps,
+  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
+) => {
+  const { src: imgSrc, style, backgroundType = {} } = props;
+  const { mode, type, color, startColor, endColor } = backgroundType || {};
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (imgSrc && type === 'image') {
+      (async () => {
+        try {
+          setSize(await getImageSize(imgSrc));
+        } catch (error) {
+          console.log(error);
+        }
+      })();
+    }
+  }, [imgSrc, type]);
+
+  const getImageStyle = useCallback((): CSSProperties => {
+    // 不设置图片时，要使用真实宽高
+    if (!imgSrc) {
+      return {};
+    }
+    switch (mode) {
+      case 'scaleToFill':
+        return {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+      case 'widthFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewWidth = ref.current?.getBoundingClientRect().width;
+
+        if (viewWidth && size.width) {
+          iStyle.height = (size.height / size.width) * viewWidth;
+          if (!iStyle.overflowY) {
+            iStyle.overflowY = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      case 'heightFix': {
+        const iStyle: CSSProperties = {
+          backgroundImage: `url(${imgSrc})`,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        };
+        const viewHeight = ref.current?.getBoundingClientRect().height;
+        if (viewHeight && size.height) {
+          iStyle.width = (size.width / size.height) * viewHeight;
+          if (!iStyle.overflowX) {
+            iStyle.overflowX = 'auto';
+          }
+        }
+        return iStyle;
+      }
+      default:
+        break;
+    }
+    return {};
+  }, [imgSrc, mode, ref, size]);
+
+  return useMemo(() => {
+    const targetStyle: any = _.cloneDeep(style || {});
+    // / 兼容旧数据，如果没有背景类型，有imgSrc，说明需要设置背景图片，
+    if (!type) {
+      if (imgSrc) {
+        _.setWith(targetStyle, ['backgroundImage'], `url(${imgSrc})`);
+      }
+      return targetStyle;
+    }
+    if (targetStyle.backgroundColor) {
+      targetStyle.backgroundColor = undefined;
+    }
+    if (targetStyle.backgroundImage) {
+      targetStyle.backgroundImage = undefined;
+    }
+    if (type === 'cleanColor') {
+      targetStyle.backgroundColor = color;
+    } else if (type === 'hGradient') {
+      targetStyle.background = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    } else if (type === 'vGradient') {
+      targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
+    } else if (type === 'image') {
+      const imageStyle: any = getImageStyle();
+      Object.keys(imageStyle).forEach((key) => {
+        targetStyle[key] = imageStyle[key];
+      });
+    }
+    return targetStyle;
+  }, [color, endColor, getImageStyle, startColor, style, type]);
+};
+
+export default useStyle;

package/lib/h5public/src/components/factory/src/Webview/index.tsx

@@ -0,0 +1,94 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import {
+  addEventListenerMessage,
+  postMessageToContentWindow,
+  removeEventListenerMessage,
+} from 'lcdp-message';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+export interface WebviewProps {
+  visible?: boolean;
+  __compId?: string;
+  getWebviewApis?: (
+    e: WebviewProps['__compId'],
+    opts: Record<string, any>,
+  ) => void;
+  onMessage?: React.FC<any>;
+  title?: string;
+  src?: string;
+  onUnload?: () => void;
+}
+
+const Webview = LingxiForwardRef<any, WebviewProps>((props, ref) => {
+  const {
+    __compId,
+    onMessage = () => {},
+    title,
+    visible = true,
+    src: mySrc,
+    $$componentItem,
+    getEngineApis,
+    onUnload,
+    ...restProps
+  } = props;
+  const webViewRef = useRef<HTMLIFrameElement | null>(null);
+  const [src, setSrc] = useState(mySrc);
+  const [update, setUpdate] = useState(() => String(Date.now()));
+
+  const getContentWindow = () => webViewRef?.current?.contentWindow;
+
+  const postMessage = (data: unknown) => {
+    if (webViewRef.current) {
+      const contentWindow = getContentWindow();
+      postMessageToContentWindow(contentWindow, data, src);
+    }
+  };
+  useEffect(() => {
+    setSrc(mySrc);
+  }, [mySrc]);
+
+  const receiveMessage = (d: any) => {
+    // eslint-disable-next-line no-unused-expressions
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    onMessage && onMessage(d);
+  };
+
+  useEffect(() => {
+    const fn = addEventListenerMessage(receiveMessage);
+
+    const contentWindow = webViewRef.current?.contentWindow;
+    const unload = () => {
+      onUnload?.();
+    };
+    contentWindow?.addEventListener('unload', unload);
+    return () => {
+      contentWindow?.removeEventListener?.('unload', unload);
+      removeEventListenerMessage(fn);
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    setSrc,
+    get contentWindow() {
+      return webViewRef.current?.contentWindow;
+    },
+    postMessage,
+    refreshContainer: () => {
+      setUpdate(String(Date.now()));
+    },
+  }));
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <iframe
+      ref={webViewRef}
+      title={title}
+      src={src}
+      {...restProps}
+      key={update}
+    />
+  );
+});
+
+export default Webview;

package/lib/h5public/src/components/factory/src/common/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useSyncState } from './useSyncState';

package/lib/h5public/src/components/factory/src/common/hooks/useSyncState.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+
+type SetStateCompileFn<T> = (data: T) => void;
+
+type SetStateAction<T> = (state: T, fn?: SetStateCompileFn<T>) => void;
+
+function useSyncState<T>(state: T): [T, SetStateAction<T>];
+
+function useSyncState(initial: any) {
+  const fnRef = useRef<SetStateCompileFn<any> | undefined | null>(); // 用来保存函数
+  const [state, setState] = useState(initial); // 更新组件状态
+
+  useEffect(() => {
+    if (fnRef.current) {
+      fnRef.current(state);
+      fnRef.current = null;
+    }
+  }, [state]);
+
+  const setSyncState = (data: any, callback?: SetStateCompileFn<any>) => {
+    fnRef.current = callback;
+    setState(data);
+  };
+
+  return [state, setSyncState];
+}
+
+export default useSyncState;

package/lib/h5public/src/components/factory/src/index.component.ts

@@ -0,0 +1,259 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../typings.d.ts" />
+// 该文件请勿手动修改，执行yarn add:app + compName + (-c[是否是容器组件]) 命令自动生成该文件。
+import Accordion from './Accordion';
+import AccordionHeader from './AccordionHeader';
+import AccordionPanel from './AccordionPanel';
+import ALink from './ALink';
+import Animation from './Animation';
+import Audio from './Audio';
+import BlockSelect from './BlockSelect';
+import Button from './Button';
+import Calendar from './Calendar';
+import Card from './Card';
+import CardBody from './CardBody';
+import CardFooter from './CardFooter';
+import Carousel from './Carousel';
+import Condition from './Condition';
+import DAddressPicker from './DAddressPicker';
+import DatePicker from './DatePicker';
+import DCheckbox from './DCheckbox';
+import DForm from './DForm';
+import DformCustom from './DformCustom';
+import DformDate from './DformDate';
+import DformFile from './DformFile';
+import DformImagePicker from './DformImagePicker';
+import DformInput from './DformInput';
+import DformInputNumber from './DformInputNumber';
+import DformList from './DformList';
+import DformPicker from './DformPicker';
+import DformRadio from './DformRadio';
+import DformRangePicker from './DformRangePicker';
+import DformSelect from './DformSelect';
+import DformSwitch from './DformSwitch';
+import DformTextArea from './DformTextArea';
+import DGroup from './DGroup';
+import Divider from './Divider';
+import DMultiplePicker from './DMultiplePicker';
+import Donut from './Donut';
+import DynamicDataContainer from './DynamicDataContainer';
+import DynamicList from './DynamicList';
+import DynamicTable from './DynamicTable';
+import FilterItems from './FilterItems';
+import Flex from './Flex';
+import Grid from './Grid';
+import GroupColumn from './GroupColumn';
+import Icon from './Icon';
+import Image from './Image';
+import Input from './Input';
+import JSBridgeView from './JSBridgeView';
+import Layout from './Layout';
+import LevelView from './LevelView';
+import Line from './Line';
+import LineColumn from './LineColumn';
+import LoadMore from './LoadMore';
+import Loop from './Loop';
+import LXBarChart from './LXBarChart';
+import LXLineChart from './LXLineChart';
+import LXPieChart from './LXPieChart';
+import LXRadarChart from './LXRadarChart';
+import MultipleProgress from './MultipleProgress';
+import NoticeBarPlus from './NoticeBarPlus';
+import Notification from './Notification';
+import Picker from './Picker';
+import PictureVerifyCode from './PictureVerifyCode';
+import ProcessTrack from './ProcessTrack';
+import ProgressBar from './ProgressBar';
+import QRCode from './QRCode';
+import RemoteComponent from './RemoteComponent';
+import SearchView from './SearchView';
+import Selector from './Selector';
+import SideBar from './SideBar';
+import Signature from './Signature';
+import SingleProgress from './SingleProgress';
+import SmallColumnar from './SmallColumnar';
+import StackColumn from './StackColumn';
+import Star from './Star';
+import StaticTabs from './StaticTabs';
+import StepBar from './StepBar';
+import StepProcess from './StepProcess';
+import './styles/theme.less';
+import TabBar from './TabBar';
+import Table from './Table';
+import Text from './Text';
+import VerificationCode from './VerificationCode';
+import VideoPlayer from './VideoPlayer';
+import View from './View';
+import Webview from './Webview';
+
+export default {
+  ALink,
+  Accordion,
+  AccordionHeader,
+  AccordionPanel,
+  Animation,
+  Audio,
+  BlockSelect,
+  Button,
+  Calendar,
+  Card,
+  CardBody,
+  CardFooter,
+  Carousel,
+  Condition,
+  DAddressPicker,
+  DCheckbox,
+  DForm,
+  DGroup,
+  DMultiplePicker,
+  DatePicker,
+  DformCustom,
+  DformDate,
+  DformFile,
+  DformImagePicker,
+  DformInput,
+  DformInputNumber,
+  DformList,
+  DformPicker,
+  DformRadio,
+  DformRangePicker,
+  DformSelect,
+  DformSwitch,
+  DformTextArea,
+  Divider,
+  Donut,
+  DynamicDataContainer,
+  DynamicList,
+  DynamicTable,
+  FilterItems,
+  Flex,
+  Grid,
+  GroupColumn,
+  Icon,
+  Image,
+  Input,
+  JSBridgeView,
+  LXBarChart,
+  LXLineChart,
+  LXPieChart,
+  LXRadarChart,
+  Layout,
+  LevelView,
+  Line,
+  LineColumn,
+  LoadMore,
+  Loop,
+  MultipleProgress,
+  NoticeBarPlus,
+  Notification,
+  Picker,
+  PictureVerifyCode,
+  ProcessTrack,
+  ProgressBar,
+  QRCode,
+  RemoteComponent,
+  SearchView,
+  Selector,
+  SideBar,
+  Signature,
+  SingleProgress,
+  SmallColumnar,
+  StackColumn,
+  Star,
+  StaticTabs,
+  StepBar,
+  StepProcess,
+  TabBar,
+  Table,
+  Text,
+  VerificationCode,
+  VideoPlayer,
+  View,
+  Webview,
+};
+
+export {
+  ALink,
+  Accordion,
+  AccordionHeader,
+  AccordionPanel,
+  Animation,
+  Audio,
+  BlockSelect,
+  Button,
+  Calendar,
+  Card,
+  CardBody,
+  CardFooter,
+  Carousel,
+  Condition,
+  DAddressPicker,
+  DCheckbox,
+  DForm,
+  DGroup,
+  DMultiplePicker,
+  DatePicker,
+  DformCustom,
+  DformDate,
+  DformFile,
+  DformImagePicker,
+  DformInput,
+  DformInputNumber,
+  DformList,
+  DformPicker,
+  DformRadio,
+  DformRangePicker,
+  DformSelect,
+  DformSwitch,
+  DformTextArea,
+  Divider,
+  Donut,
+  DynamicDataContainer,
+  DynamicList,
+  DynamicTable,
+  FilterItems,
+  Flex,
+  Grid,
+  GroupColumn,
+  Icon,
+  Image,
+  Input,
+  JSBridgeView,
+  LXBarChart,
+  LXLineChart,
+  LXPieChart,
+  LXRadarChart,
+  Layout,
+  LevelView,
+  Line,
+  LineColumn,
+  LoadMore,
+  Loop,
+  MultipleProgress,
+  NoticeBarPlus,
+  Notification,
+  Picker,
+  PictureVerifyCode,
+  ProcessTrack,
+  ProgressBar,
+  QRCode,
+  RemoteComponent,
+  SearchView,
+  Selector,
+  SideBar,
+  Signature,
+  SingleProgress,
+  SmallColumnar,
+  StackColumn,
+  Star,
+  StaticTabs,
+  StepBar,
+  StepProcess,
+  TabBar,
+  Table,
+  Text,
+  VerificationCode,
+  VideoPlayer,
+  View,
+  Webview,
+};

package/lib/h5public/src/components/factory/src/interfaces/types.ts

@@ -0,0 +1,29 @@
+// $$componentItem: {
+//     id: c.id,
+//     platform: 'pc',
+//     // Field: DformCustom,
+//     // 提供给支持自定义渲染的组件传入engineEvalExp方法
+//     $$engineEvalExp: (str, par) =>
+//       engineEvalExp(str, par, {
+//         ...cmdcontext,
+//         item,
+//         i,
+//         getValue,
+//         functorsMap,
+//       }),
+//   },
+
+export type $$componentItem = {
+  id: string; // 组件Id
+  platform: 'pc' | 'h5'; // 组件平台
+  platformType: 'ZeroCode' | 'LowCode' | 'Design';
+  renderType: string; // 配置态使用
+  fusionMode: boolean;
+};
+
+export type reloadSelectDataType = {
+  dataSource: any[];
+  labelKey?: string;
+  valueKey?: string;
+  childrenKey?: string;
+};

package/lib/h5public/src/components/factory/src/styles/theme.less

@@ -0,0 +1,15 @@
+@import (reference) "~@lingxiteam/antd-mobile-v2-theme/es/index.less";
+
+body {
+  --adm-color-primary: @brand-primary;
+  --adm-color-success: @brand-success;
+  --adm-color-warning: @brand-warning;
+  --adm-color-danger: @brand-error;
+  --adm-color-text: @color-text-base;
+  --adm-color-text-secondary: @color-text-secondary;
+  --adm-color-border: @border-color-base;
+  --adm-color-box: @fill-body;
+  --adm-color-background: @fill-base;
+  --adm-border-color: var(--adm-color-border);
+  --adm-font-size-main: @font-size-base;
+}