@lingxiteam/ebe-utils 0.3.20 → 0.3.21

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

@@ -0,0 +1,435 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Col, Row } from 'antd';
+import classNames from 'classnames';
+import React, {
+  createContext,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { IconCheckSvg, IconNormalCheckSvg } from '../../../../utils/svgImage';
+import { useListenProps } from '../utils';
+
+const basicStyle = { backgroundColor: '#fff' };
+
+export const GridViewIndexContext = createContext(undefined);
+
+export interface WrapperProps {
+  children: React.ReactElement;
+}
+
+export interface MyGridView {
+  [x: string]: any;
+  gridData?: never[] | undefined;
+  valueKey?: 'value' | undefined;
+  children: any;
+  defaultValue: any;
+  selectStyle: any;
+  normalStyle: any;
+  selectImg: any;
+  normalImg: any;
+  isChecked: any;
+  isMultiple: any;
+  vspace?: 0 | undefined;
+  hspace?: 0 | undefined;
+  style: any;
+  mediaLayout: any;
+  onChange?: ((e: any) => void) | undefined;
+  fixedWidth?: false | undefined;
+  span: any;
+  isEditor?: true | undefined;
+  onValueRelease: any;
+  form: any;
+  fieldName: any;
+  value: any;
+  formUnique: any;
+}
+
+const gridViewCls = 'ued-grid-view';
+
+const WrapperEditorComp: React.FC<WrapperProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${gridViewCls}-item ${gridViewCls}-item-edit ${
+      children.props.className || ''
+    }`,
+  });
+
+const WrapperDisableComps: React.FC<WrapperProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `${gridViewCls}-item ${children.props.className || ''}`,
+  });
+
+const renderIcon = ({ checked, selectImg, normalImg }: any) => {
+  if (checked) {
+    if (selectImg) {
+      return <img src={selectImg} className={`${gridViewCls}-icon`} alt="" />;
+    }
+    return <img src={IconCheckSvg} className={`${gridViewCls}-icon`} alt="" />;
+  }
+  if (normalImg) {
+    return <img src={normalImg} className={`${gridViewCls}-icon`} alt="" />;
+  }
+  return (
+    <img src={IconNormalCheckSvg} className={`${gridViewCls}-icon`} alt="" />
+  );
+};
+
+const NoCheckBox = (item: {
+  children: any;
+  checked: any;
+  itemStyle: any;
+  index: any;
+  disabled?: false | undefined;
+  onChange: any;
+}) => {
+  const { children, checked, itemStyle, onChange } = item;
+  return (
+    <div
+      style={itemStyle}
+      className={classNames(
+        `${gridViewCls}-blockSelect`,
+        `${gridViewCls}-nobox`,
+        {
+          [`${gridViewCls}-select`]: checked,
+        },
+      )}
+      onClick={onChange}
+    >
+      <div className={classNames(`${gridViewCls}-content`)}>{children}</div>
+    </div>
+  );
+};
+
+const CheckBox = (item: {
+  children: any;
+  selectImg: any;
+  normalImg: any;
+  checked: any;
+  itemStyle: any;
+  index: any;
+  disabled?: false | undefined;
+  onChange: any;
+}) => {
+  const { children, selectImg, normalImg, checked, itemStyle, onChange } = item;
+
+  return (
+    <div
+      style={itemStyle}
+      className={classNames(
+        `${gridViewCls}-blockSelect`,
+        `${gridViewCls}-showIcon`,
+      )}
+    >
+      <div onClick={() => onChange(item)}>
+        {renderIcon({ checked, selectImg, normalImg })}
+      </div>
+      <div className={classNames(`${gridViewCls}-content`)}>{children}</div>
+    </div>
+  );
+};
+
+const EditorComp = (props: {
+  isChecked: any;
+  children: any;
+  item: any;
+  index: any;
+  valueKey: any;
+  colProps?: {} | undefined;
+  onChange: any;
+  itemStyle: any;
+  checked: any;
+  className: any;
+}) => {
+  const {
+    isChecked,
+    children,
+    item,
+    index,
+    valueKey,
+    colProps = {},
+    onChange,
+    itemStyle,
+    checked,
+    className,
+  } = props;
+  return (
+    <Col {...colProps} className={className}>
+      {isChecked ? (
+        <CheckBox
+          index={index}
+          key={item[valueKey]}
+          {...item}
+          checked={checked}
+          itemStyle={itemStyle}
+          onChange={() => onChange(item, index)}
+        >
+          {children}
+        </CheckBox>
+      ) : (
+        <NoCheckBox
+          index={index}
+          key={item[valueKey]}
+          {...item}
+          itemStyle={itemStyle}
+          onChange={() => onChange(item, index)}
+          checked={checked}
+        >
+          {children}
+        </NoCheckBox>
+      )}
+    </Col>
+  );
+};
+
+const DisabledComps = (props: {
+  children: any;
+  index: any;
+  itemStyle: any;
+  colProps: any;
+  className: any;
+}) => {
+  const { children, index, itemStyle, colProps, className } = props || {};
+  const item = children?.props?.$props;
+  return (
+    <Col {...colProps} className={className}>
+      <NoCheckBox index={index} {...item} itemStyle={itemStyle} disabled>
+        {children}
+      </NoCheckBox>
+    </Col>
+  );
+};
+
+const MyGrid = (props: MyGridView) => {
+  const {
+    gridData = [],
+    valueKey = 'value',
+    children,
+    defaultValue,
+    selectStyle,
+    normalStyle,
+    selectImg,
+    normalImg,
+    isChecked,
+    isMultiple,
+    vspace = 0,
+    hspace = 0,
+    style,
+    mediaLayout,
+    onChange: uOnChange = (e: any) => {},
+    fixedWidth = false,
+    span,
+    isEditor = true,
+    onValueRelease,
+    form,
+    fieldName,
+    value,
+    formUnique,
+    $$componentItem,
+    ...restProps
+  } = props;
+  const [values, setValues] = useState(defaultValue);
+  const { MemoRenderer } = props.getEngineApis?.();
+  const { MemoLoopItem, renderer } = MemoRenderer;
+
+  useEffect(() => {
+    if (value !== undefined) {
+      if (form && form.setFieldsValue) {
+        form.setFieldsValue({ [fieldName]: value });
+      }
+      setValues(value);
+    }
+  }, [value]);
+
+  const onChange = (restItem: Record<string, any>, index: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const value =
+      typeof restItem === 'object' ? restItem[valueKey || 'value'] : index;
+    if (!isMultiple) {
+      setValues([value]);
+      if (uOnChange) {
+        uOnChange([value]);
+      }
+      return;
+    }
+    // 多选
+    let tempValues = values || [];
+    if (!values?.includes(value)) {
+      tempValues = tempValues.concat(value);
+    } else {
+      tempValues = values.filter((v: any) => v !== value);
+    }
+    setValues([...tempValues]);
+    if (uOnChange) {
+      uOnChange([...tempValues]);
+    }
+  };
+
+  const getChecked = (item: Record<string, any>, index: number) => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const value = typeof item === 'object' ? item[valueKey || 'value'] : index;
+    const checked = values?.includes(value);
+    return checked;
+  };
+
+  const getItemStyle = (checked: any) => {
+    const itemstyle = { ...basicStyle, ...normalStyle };
+    if (checked) {
+      let source = { ...selectStyle };
+      if (isChecked !== true) {
+        source = {
+          color: '#1677ff',
+          border: '1px solid #1677ff',
+          ...selectStyle,
+        };
+      }
+      Object.assign(itemstyle, source);
+    }
+
+    return itemstyle;
+  };
+
+  const getColProps = useCallback(
+    (item, index) => {
+      const p: any = {};
+      if (!fixedWidth) {
+        p.span = span;
+        Object.assign(p, { ...mediaLayout, ...restProps });
+      } else {
+        p.style = { marginLeft: `${vspace}px` };
+        Object.assign(p, restProps);
+      }
+      return p;
+    },
+    [mediaLayout, span, fixedWidth],
+  );
+
+  // 循环列表配置key
+  const [itemKey, indexKey] = useMemo(() => {
+    return [props.itemKey || 'item', props.indexKey || 'i'];
+  }, []);
+
+  return (
+    <Row gutter={[vspace, hspace]} style={style}>
+      {(Array.isArray(gridData) ? gridData : []).map((item, index) => {
+        const restItem = item;
+        const checked = getChecked(restItem, index);
+        const itemStyle = !isEditor ? basicStyle : getItemStyle(checked);
+        const gridViewIndex =
+          restItem[valueKey] ?? `${$$componentItem.uid}_${index}`;
+
+        const renderProps = {
+          itemKey,
+          indexKey,
+          item,
+          i: index,
+          __render__: props.__render__,
+          renderer,
+          itemId: gridViewIndex,
+          compId: $$componentItem.uid,
+          context: {
+            item,
+            i: index,
+          },
+        };
+
+        return (
+          <>
+            {isEditor ? (
+              <WrapperEditorComp>
+                <EditorComp
+                  colProps={getColProps(restItem, index)}
+                  itemStyle={itemStyle}
+                  valueKey={valueKey}
+                  key={restItem[valueKey]}
+                  {...({ selectImg } as any)}
+                  normalImg={normalImg}
+                  item={restItem}
+                  index={index}
+                  onChange={onChange}
+                  isChecked={isChecked}
+                  checked={checked}
+                >
+                  <MemoLoopItem {...renderProps} />
+                  {/* {renderChildren(item, index)} */}
+                </EditorComp>
+              </WrapperEditorComp>
+            ) : (
+              <WrapperDisableComps>
+                <DisabledComps
+                  colProps={getColProps(restItem, index)}
+                  itemStyle={itemStyle}
+                  key={restItem[valueKey]}
+                  {...({ valueKey } as any)}
+                  item={restItem}
+                  index={index}
+                  checked={checked}
+                >
+                  <MemoLoopItem {...renderProps} />
+                  {/* {renderChildren(item, index)} */}
+                </DisabledComps>
+              </WrapperDisableComps>
+            )}
+          </>
+        );
+      })}
+    </Row>
+  );
+};
+
+const SyncGridView = LingxiForwardRef((props: any, ref) => {
+  const {
+    defaultValue,
+    value,
+    valueKey = 'value',
+    onChange,
+    gridViewRef,
+    refGridData,
+  } = props;
+  const [gridData, setGridData] = useListenProps(props.gridData || []);
+  const values = useRef(defaultValue || []);
+  useEffect(() => {
+    if (value !== undefined) {
+      values.current = value;
+    }
+  }, [value]);
+
+  const getValues = () =>
+    gridData?.filter((d: Record<string, any>, i: any) =>
+      typeof d === 'object'
+        ? values.current?.includes(d[valueKey])
+        : values.current?.includes(i),
+    );
+  useEffect(() => {
+    if (Array.isArray(refGridData)) {
+      setGridData(refGridData);
+    }
+  }, [refGridData]);
+  useImperativeHandle(
+    gridViewRef,
+    () => ({
+      getValues: () => [values.current, getValues()],
+      // setBlockSelectData: (list: any[]) => {
+      //   setGridData(list || []);
+      // }
+    }),
+    [gridData],
+  );
+
+  return (
+    <MyGrid
+      {...props}
+      gridData={gridData}
+      onChange={(vals) => {
+        values.current = vals;
+        if (onChange) {
+          onChange(vals);
+        }
+      }}
+    />
+  );
+});
+
+export default SyncGridView;

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

@@ -0,0 +1,24 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { useImperativeHandle, useRef, useState } from 'react';
+import SyncGridViewLoader from './loader';
+
+const SyncGridView = LingxiForwardRef<unknown, any>((props, ref) => {
+  const gridViewRef = useRef<any>(null);
+  const [gridData, setGridData] = useState<any[]>();
+
+  useImperativeHandle(ref, () => ({
+    getValues: () => gridViewRef.current?.getValues(),
+    setBlockSelectData: (list: any[]) => {
+      setGridData(list || []);
+    },
+  }));
+  return (
+    <SyncGridViewLoader
+      {...props}
+      refGridData={gridData}
+      gridViewRef={gridViewRef}
+    />
+  );
+});
+
+export default SyncGridView;

package/lib/public/src/components/pcfactory/src/GridView/loader.tsx

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useHiddenStyle } from '../utils';
+
+export interface HorizontalViewProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  visible?: boolean;
+}
+
+const HorizontalView: React.FC<HorizontalViewProps> = (props) => {
+  const { children, style, className, visible = true } = props;
+
+  const finalStyle = useHiddenStyle(visible, style);
+
+  // if (visible === false) {
+  //   return null;
+  // }
+  return (
+    // @ts-ignore
+    <div
+      style={finalStyle}
+      className={className}
+      data-compid={props?.['data-compid']}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default HorizontalView;

package/lib/public/src/components/pcfactory/src/Icon/IconED/index.tsx

@@ -0,0 +1,42 @@
+import { LingXiEdFC } from '@lingxiteam/types';
+import { useEffect, useState } from 'react';
+import { useIcon } from '../hooks';
+import type { IconEDProps } from '../PropsType';
+
+const IconED: LingXiEdFC<IconEDProps> = (props) => {
+  const { getMaterialFile, getAppFileUrlById, getAppFileUrlByFileCode } =
+    props?.getEdEngineApi?.() || {};
+  const [fun, setFun] = useState<{
+    getFileIconUrl: any;
+    getDesignPlatormIconUrl: any;
+  }>({
+    getFileIconUrl: {},
+    getDesignPlatormIconUrl: {},
+  });
+  useEffect(() => {
+    const fetchFun = async () =>
+      setFun({
+        getFileIconUrl: {
+          getFileIconUrlByCode: (fileCode: string) =>
+            getAppFileUrlByFileCode({
+              fileCode,
+              appId: props.$$componentItem?.appId || window.appId,
+            }),
+          getFileIconUrlById: getAppFileUrlById,
+        },
+        getDesignPlatormIconUrl: (materialId: string, fileName: string) =>
+          getMaterialFile({ materialId, fileName }),
+      });
+    fetchFun();
+  }, []);
+
+  const icon = useIcon({
+    ...props,
+    getFileIconUrl: () => fun.getFileIconUrl,
+    getDesignPlatormIconUrl: () => fun.getDesignPlatormIconUrl,
+  });
+
+  return icon;
+};
+
+export default IconED;

package/lib/public/src/components/pcfactory/src/Icon/PropsType.ts

@@ -0,0 +1,57 @@
+import { CSSProperties } from 'react';
+
+export interface IconCfg {
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  iconFileInfo?: any;
+  iconFile?: any;
+  isAction?: boolean; // 用于识别是否为图标的设置动作
+  [key: string]: any;
+}
+export interface PrefixIconIconEDProps {
+  prefixIconType?: string;
+  prefixIconIsIconFont?: boolean;
+  prefixIconFontAddress?: string;
+  prefixIconSvgContent?: string;
+  prefixIconTheme?: string;
+  prefixIconIconFileInfo?: any;
+  prefixIconiconFile?: any;
+}
+
+export type PrefixIconIconProps = PrefixIconIconEDProps;
+
+export interface IconEDProps {
+  icon?: IconCfg;
+  rotate?: number;
+  onClick?: any;
+  // 树控件配置图标采用主题色时使用
+  isUsePrimary?: boolean;
+  appId?: string;
+  iconItems?: any;
+  mode?: string;
+  color?: string;
+  type?: string;
+  isIconFont?: boolean;
+  fontAddress?: string;
+  svgContent?: string;
+  theme?: string;
+  iconFileInfo?: any;
+  iconFile?: any;
+  className?: string;
+  style?: CSSProperties;
+  placeholder?: any; // 占位 icon
+}
+
+export interface IconProps extends IconEDProps {
+  visible?: boolean;
+  engineApis?: any;
+  getEngineApis?: any;
+}
+
+export interface UseIconProps extends IconProps {
+  getFileIconUrl: () => any;
+  getDesignPlatormIconUrl: (materialId: string, fileName: string) => any;
+}