@lingxiteam/ebe-utils 0.3.20 → 0.3.22

package/lib/public/src/components/pcfactory/src/FormGroup/TitleComp.tsx

@@ -0,0 +1,107 @@
+import { EngineBaseProps, IEdCompBaseProps } from '@lingxiteam/types';
+import { FormGroupProps } from '.';
+import Icon from '../Icon';
+import IconED from '../Icon/IconED';
+
+type TitleProps = Pick<
+  FormGroupProps,
+  'hasIcon' | 'iconType' | 'prefixIcon' | 'title'
+>;
+type TitleCompProps = {
+  prefixCls: string;
+  isED?: boolean;
+  getEngineApis?: EngineBaseProps['getEngineApis'];
+  getEdEngineApi?: IEdCompBaseProps['getEdEngineApi'];
+  $$componentItem?:
+    | EngineBaseProps['$$componentItem']
+    | IEdCompBaseProps['$$componentItem'];
+} & TitleProps;
+const TitleComp = (props: TitleCompProps) => {
+  const {
+    iconType,
+    hasIcon,
+    title,
+    prefixCls,
+    prefixIcon = {},
+    isED,
+    getEdEngineApi,
+    getEngineApis,
+    $$componentItem,
+  } = props || {};
+  const titlePrefix = `${prefixCls}-title`;
+  const renderTitle = () => {
+    if (hasIcon || iconType) {
+      switch (iconType) {
+        case 'line':
+          return (
+            <div className={`${titlePrefix} ${titlePrefix}-icon-line`}>
+              {title}
+            </div>
+          );
+        case 'auto': {
+          const {
+            prefixIconIsIconFont,
+            prefixIconFontAddress,
+            prefixIconTheme,
+            prefixIconType,
+            prefixIconiconFile,
+            prefixIconIconFileInfo,
+          } = prefixIcon;
+          let icon = null;
+          if (!isED && getEngineApis) {
+            icon = (
+              <Icon
+                icon={{
+                  type: prefixIconType,
+                  theme: prefixIconTheme,
+                  isIconFont: prefixIconIsIconFont,
+                  fontAddress: prefixIconFontAddress,
+                  iconFile: prefixIconiconFile,
+                  iconFileInfo: prefixIconIconFileInfo,
+                }}
+                engineApis={getEngineApis?.()}
+                getEngineApis={getEngineApis}
+                $$componentItem={$$componentItem!}
+                className=""
+              />
+            );
+          } else if (getEdEngineApi) {
+            icon = (
+              <IconED
+                icon={{
+                  type: prefixIconType,
+                  theme: prefixIconTheme,
+                  isIconFont: prefixIconIsIconFont,
+                  fontAddress: prefixIconFontAddress,
+                  iconFile: prefixIconiconFile,
+                  iconFileInfo: prefixIconIconFileInfo,
+                }}
+                getEdEngineApi={getEdEngineApi}
+                $$componentItem={props.$$componentItem}
+              />
+            );
+          }
+          return (
+            <div className={`${titlePrefix} ${titlePrefix}-icon-auto`}>
+              {icon}
+              {title}
+            </div>
+          );
+        }
+        case 'circle':
+          return (
+            <div className={`${titlePrefix} ${titlePrefix}-circle`}>
+              {title}
+            </div>
+          );
+        default:
+          return <div className={`${titlePrefix}`}>{title}</div>;
+      }
+    } else {
+      return <div className={`${titlePrefix}`}>{title}</div>;
+    }
+  };
+  return renderTitle();
+};
+
+export default TitleComp;

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

@@ -0,0 +1,181 @@
+import { CaretDownOutlined } from '@ant-design/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Collapse } from 'antd';
+import classNames from 'classnames';
+import { CSSProperties, useMemo, useState } from 'react';
+import { MyCardProps } from '../Card';
+import useExtendBtn from '../Card/useExtendBtn';
+import { FormChildren } from '../Form/Form';
+import { FormContextProps, useForm } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import TitleComp from './TitleComp';
+
+type CardProps = Pick<
+  MyCardProps,
+  | 'title'
+  | 'name'
+  | 'prefixIcon'
+  | 'visible'
+  | 'extendNum'
+  | 'extend'
+  | 'className'
+  | 'backgroundType'
+  | 'hasIcon'
+>;
+export interface FormGroupProps extends CardProps {
+  appId?: string;
+  getEngineApis?: any;
+  required?: boolean;
+  fold?: boolean;
+  onFoldChange?: (fold: boolean) => void;
+  iconType?: 'none' | 'line' | 'circle' | 'auto' | 'divider';
+  style: CSSProperties & {
+    titleColor?: string;
+    titleFontSize?: number;
+    titleLineHeight?: number;
+    titleFontWeight?: number;
+  };
+  titleStyle?: 'none' | 'divider';
+  'data-compid'?: string;
+}
+
+const FORM_GROUP_KEY = 'formGroup';
+const prefixCls = 'ued-form-group';
+const { Panel } = Collapse;
+const FormGroup = LingxiForwardRef<any, FormGroupProps>((props) => {
+  const {
+    style = {},
+    title,
+    className,
+    backgroundType,
+    getEngineApis,
+    appId,
+    fold,
+    onFoldChange,
+    children,
+    titleStyle,
+    ...restProps
+  } = props;
+  const engineApis = getEngineApis?.() || {};
+  const [foldKey, setFoldKey] = useState([FORM_GROUP_KEY]);
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId,
+    mode: 'engine',
+  });
+  const { colSpan, rowSpace, layout, colSpace } = useForm() as FormContextProps;
+
+  const { containerStyle, headStyle, bodyStyle } = useMemo(() => {
+    const {
+      titleColor,
+      titleFontSize,
+      titleFontWeight,
+      titleLineHeight,
+      ...restStyle
+    } = style;
+    const container: CSSProperties = {
+      ...(backgroundStyle || {}),
+    };
+    const head: CSSProperties = {
+      color: titleColor,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+    };
+    const body: CSSProperties = {
+      ...restStyle,
+    };
+    const containerKeys = ['margin', 'border'];
+    Object.keys(body).forEach((k) => {
+      const key = k.toLocaleLowerCase() || '';
+      const hasKey = containerKeys.find(
+        (innerKey) => key && key.indexOf(innerKey) === 0,
+      );
+      if (hasKey) {
+        (container as any)[k] = body[k as keyof CSSProperties];
+        delete body[k as keyof CSSProperties];
+      }
+    });
+    return {
+      containerStyle: container,
+      headStyle: head,
+      bodyStyle: body,
+    };
+  }, [backgroundStyle, style]);
+
+  const { renderExtendBtn } = useExtendBtn({ ...props, prefixCls });
+
+  return (
+    <div
+      data-compid={props?.['data-compid']}
+      className={classNames(prefixCls, className)}
+      style={containerStyle}
+    >
+      <Collapse
+        {...restProps}
+        expandIconPosition="end"
+        activeKey={fold ? foldKey : [FORM_GROUP_KEY]}
+        expandIcon={({ isActive }) => {
+          return (
+            fold && (
+              <div
+                className={`${prefixCls}-fold`}
+                onClick={() => {
+                  if (fold) {
+                    onFoldChange?.(!(foldKey?.length > 0));
+                    setFoldKey(foldKey?.length ? [] : [FORM_GROUP_KEY]);
+                  }
+                }}
+              >
+                <CaretDownOutlined rev="" rotate={isActive ? 0 : -90} />
+              </div>
+            )
+          );
+        }}
+        {...restProps}
+      >
+        <Panel
+          key="formGroup"
+          className={classNames(
+            `${prefixCls}-body-wrap`,
+            `${prefixCls}-body-wrap-${titleStyle}`,
+          )}
+          header={
+            <div
+              className={classNames(`${prefixCls}-head-wrap`, className)}
+              style={headStyle}
+            >
+              <div className={`${prefixCls}-title-box`}>
+                <TitleComp
+                  title={title}
+                  getEngineApis={getEngineApis}
+                  $$componentItem={props?.$$componentItem}
+                  prefixCls={prefixCls}
+                  iconType={props.iconType}
+                  hasIcon={props.hasIcon}
+                  prefixIcon={props.prefixIcon}
+                />
+              </div>
+              {renderExtendBtn()}
+            </div>
+          }
+        >
+          <div className={`${prefixCls}-body`} style={bodyStyle}>
+            <FormChildren
+              rowSpace={rowSpace}
+              layout={layout}
+              colSpace={colSpace}
+              colSpan={colSpan}
+              engineApis={engineApis}
+            >
+              {children}
+            </FormChildren>
+          </div>
+        </Panel>
+      </Collapse>
+    </div>
+  );
+});
+
+export default FormGroup;

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

@@ -0,0 +1,151 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Spin } from 'antd';
+import React, {
+  CSSProperties,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useHiddenStyle, useListenProps } from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+
+export interface FreeLayoutProps {
+  style: React.CSSProperties;
+  className: string;
+  visible: boolean;
+  backgroundType?: any;
+  appId?: string;
+  loading?: boolean;
+  getEngineApis?: any;
+}
+
+// const prefixCls = 'view';
+
+const FreeLayout = LingxiForwardRef<any, FreeLayoutProps>((props, ref) => {
+  const {
+    children,
+    style,
+    className,
+    visible = true,
+    backgroundType,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const [loading, setLoading] = useListenProps(props.loading);
+
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId: restProps?.appId,
+    mode: 'engine',
+  });
+
+  const finalStyle = useHiddenStyle(visible, style);
+
+  const containerRef = useRef<any>();
+  const loadingRef = useRef<any>();
+
+  const [reload, setReload] = useState<number>(0);
+
+  const getLoadingStyle = (isShow: boolean): CSSProperties => {
+    const res: CSSProperties = {};
+    if (containerRef.current && loadingRef.current) {
+      const containerRefProps = window.getComputedStyle(containerRef.current);
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      const containerOffset = containerRef.current.getBoundingClientRect();
+      // 获取loading基于父级的偏移量
+      const loadingOffset = loadingRef.current.getBoundingClientRect();
+
+      const offset = {
+        x: loadingOffset.left - containerOffset.left,
+        y: loadingOffset.top - containerOffset.top,
+      };
+
+      res.position = 'absolute';
+      res.width = `${offsetWidth}px`;
+      res.height = `${offsetHeight}px`;
+      res.zIndex = containerRefProps.zIndex;
+      res.backgroundColor = 'rgba(255,255,255,0.5)';
+      res.display = 'flex';
+      res.justifyContent = 'center';
+      res.alignItems = 'center';
+      res.left = 0;
+      res.top = 0;
+      if (offset.x > 0 || offset.y > 0) {
+        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
+      }
+    }
+    if (!isShow) {
+      res.display = 'none';
+    }
+    return res;
+  };
+
+  const renderLoadingComp = useMemo(() => {
+    if (loading && loadingRef.current) {
+      return (
+        <div style={getLoadingStyle(true)}>
+          <Spin tip={getLocale?.('loadingText')} />
+        </div>
+      );
+    }
+    return null;
+  }, [loading, loadingRef.current, reload]);
+
+  useEffect(() => {
+    if (loading) {
+      setReload(reload + 1);
+    }
+  }, [loading]);
+
+  useImperativeHandle(ref, () => ({
+    setLoading(_loading: boolean) {
+      setLoading(_loading);
+    },
+  }));
+
+  // if (visible === false) {
+  //   return null;
+  // }
+
+  return (
+    <div
+      style={{
+        ...backgroundStyle,
+        ...finalStyle,
+        position: 'relative',
+      }}
+      className={className}
+      // @ts-ignore
+      data-compid={props?.['data-compid']}
+      {...restProps}
+      ref={containerRef}
+    >
+      {children}
+      {/* loading 定位元素 */}
+      {loading && (
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            position: 'relative',
+            backgroundColor: 'transparent',
+            visibility: loading ? 'visible' : 'hidden',
+          }}
+          ref={loadingRef}
+        >
+          {renderLoadingComp}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default FreeLayout;