@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/factory/src/DForm/useFormStatus.tsx

@@ -0,0 +1,47 @@
+import { isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { useUpdateEffect } from '../utils/ahooks';
+import { StatusType } from '../utils/form';
+import useMonitor from './useMonitor';
+
+export type FormStatusType = {
+  [key in StatusType]?: unknown;
+};
+
+const useSubscriptionStatus = (options: {
+  run: (type: StatusType, v: unknown) => void;
+  type: StatusType;
+  listened: unknown;
+}) => {
+  const { run, type, listened } = options;
+  useUpdateEffect(() => {
+    if (!isUndefined(listened)) {
+      run(type, listened);
+    }
+  }, [listened]);
+};
+
+/**
+ * 表单状态管理
+ */
+export const useFormStatus = (value: FormStatusType) => {
+  const refValue = useRef<FormStatusType>({});
+  refValue.current = value;
+
+  const { addListener, removeListener, execListeners } = useMonitor();
+
+  const run = (type: StatusType, v: unknown) => {
+    refValue.current[type] = v;
+    execListeners(v, type);
+  };
+
+  useSubscriptionStatus({ run, type: 'disabled', listened: value.disabled });
+  useSubscriptionStatus({ run, type: 'readonly', listened: value.readonly });
+
+  return {
+    addListener,
+    removeListener,
+    run,
+    status: refValue.current,
+  };
+};

package/lib/h5public/src/components/factory/src/DForm/useMonitor.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from 'react';
+import type { MonitorFn, StatusType } from '../utils/form';
+
+const useMonitor = () => {
+  const monitor = useRef<MonitorFn[]>([]).current;
+
+  /**
+   * 增加监听事件
+   */
+  const addListener = useCallback((fn: MonitorFn) => {
+    if (!monitor.includes(fn)) {
+      monitor.push(fn);
+    }
+  }, []);
+
+  /**
+   * 移除监听事件
+   */
+  const removeListener = useCallback((fn: MonitorFn) => {
+    const index = monitor.findIndex((v) => v === fn);
+    if (index > -1) {
+      monitor.splice(index, 1);
+    }
+  }, []);
+
+  /**
+   * 执行监听事件
+   */
+  const execListeners = useCallback((v: unknown, type: StatusType) => {
+    monitor.forEach((fn) => fn(v, type));
+  }, []);
+
+  return {
+    addListener,
+    removeListener,
+    execListeners,
+  };
+};
+
+export default useMonitor;

package/lib/h5public/src/components/factory/src/DGroup/CustomBtn.tsx

@@ -0,0 +1,122 @@
+import { EngineBaseProps } from '@lingxiteam/types';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Icon from '../Icon';
+import { evalMyFunction } from '../utils';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+
+interface CustomBtnProps {
+  customCode: any;
+  icon: any;
+  title: string;
+  isIcon?: boolean;
+  onClick?: () => void;
+  isEngine?: boolean;
+  getEngineApis?: EngineBaseProps['getEngineApis'];
+}
+const CustomBtn: React.FC<CustomBtnProps> = (props) => {
+  const {
+    customCode,
+    icon,
+    title,
+    isIcon,
+    onClick,
+    isEngine = false,
+    getEngineApis,
+  } = props;
+  const [dangerHTML, setDangerHTML] = useState('');
+
+  const {
+    sandBoxSafeRun = () => {
+      console.warn('sandBoxSafeRun 引擎能力未配置');
+    },
+  } = getEngineApis?.() || {};
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun);
+
+  useEffect(() => {
+    getReactHTMLText(icon);
+  }, [customCode]);
+
+  const getReactHTMLText = (props: any) => {
+    const tempDOM = document.createElement('div');
+    tempDOM.id = '__ICON_TYPE_ID__';
+    tempDOM.style.display = 'none';
+    document.body.appendChild(tempDOM);
+    ReactDOM.render(
+      <Icon {...props} getEngineApis={getEngineApis} />,
+      tempDOM,
+      () => {
+        const htmlText = tempDOM.innerHTML;
+
+        if (Array.isArray(customCode) && customCode.length) {
+          // 兼容旧数据 原先获取弹窗的数据是取数组的格式
+          const codeStr = customCode.join('');
+          const targetStr = codeStr.replace('{{code}}', htmlText);
+          setDangerHTML(targetStr);
+        } else if (customCode?.tVal) {
+          // 改造之后，取的数据则是实际可以添加条件的函数
+          if (isEngine) {
+            let targetStr = '';
+            // 自定义渲染函数
+            if (customCode?.tVal && typeof customCode.tVal === 'string') {
+              targetStr = customCode?.tVal.replace(
+                '{{code}}',
+                htmlText.replace(/"/g, '\\"'),
+              );
+            }
+            setDangerHTML(targetStr);
+          } else {
+            const targetStr = customCode?.valueArr
+              .join('')
+              .replace('{{code}}', htmlText);
+            setDangerHTML(targetStr);
+          }
+        }
+      },
+    );
+    document.querySelector('#__ICON_TYPE_ID__')?.remove();
+    return '';
+  };
+
+  if (isEngine) {
+    if (funcExpExecute) {
+      return (
+        <div
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: funcExpExecute(dangerHTML, [
+              {
+                key: 'title',
+                value: title,
+              },
+              {
+                key: 'isIcon',
+                value: isIcon,
+              },
+            ]),
+          }}
+          onClick={onClick}
+        />
+      );
+    }
+  }
+  return (
+    <div
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: `${evalMyFunction(dangerHTML, [
+          {
+            key: 'title',
+            value: title,
+          },
+          {
+            key: 'isIcon',
+            value: isIcon,
+          },
+        ])}`,
+      }}
+      onClick={onClick}
+    />
+  );
+};
+export default CustomBtn;

package/lib/h5public/src/components/factory/src/DGroup/index.less

@@ -0,0 +1,119 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+
+@prefixCls: lcdp-dgroup;
+
+.normal-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12 * @hd;
+  height: 24 * @hd;
+  color: #47e;
+  font-size: 13 * @hd;
+  border-radius: 100px;
+  font-weight: 400;
+  gap: 4px;
+}
+
+.@{prefixCls} {
+  &-group {
+    .alitajs-dform-card {
+      .alitajs-dform-item:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .lingxiteam-dform-card {
+      position: relative;
+    }
+  }
+
+  &-groupLeftView {
+    width: 16 * @hd;
+    height: 16 * @hd;
+    margin-right: 5 * @hd;
+    overflow: hidden;
+    border: none;
+    outline: none;
+  }
+
+  &-groupLeftView {
+    width: 16* @hd;
+    height: 16* @hd;
+    margin-right: 5* @hd;
+    overflow: hidden;
+    border: none;
+    outline: none;
+  }
+
+  &-vStyle {
+    width: 6 * @hd;
+    height: 16 * @hd;
+    margin-right: 6 * @hd;
+    background: #47e;
+    border-radius: 100px;
+  }
+
+  &-hStyle {
+    position: absolute;
+    left: 0;
+    width: 10 * @hd;
+    height: 8 * @hd;
+    background: #47e;
+    border-radius: 0 100px 100px 0;
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    width: 16 * @hd;
+    height: 16 * @hd;
+    align-self: center;
+    margin-right: 6 * @hd;
+
+    svg {
+      width: 16 * @hd;
+      height: 16 * @hd;
+    }
+  }
+
+  &-rigthView {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    svg {
+      width: 12 * @hd  !important;
+      height: 12 * @hd  !important;
+    }
+  }
+
+  &-border-btn {
+    .normal-btn;
+
+    border: 1px solid #47e;
+  }
+
+  &-light-btn {
+    .normal-btn;
+
+    background: rgba(68, 119, 238, 0.1);
+  }
+
+  &-primary-btn {
+    .normal-btn;
+
+    color: @color-text-base-inverse;
+    background: #47e;
+  }
+
+  &-default-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24 * @hd;
+    color: #47e;
+    font-size: 13 *@hd;
+    gap: 4px;
+  }
+}

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

@@ -0,0 +1,289 @@
+import DynamicForm from '@lingxiteam/dform';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useMemo } from 'react';
+import Icon from '../Icon';
+import CustomModule from '../utils/CustomModule';
+import { useFormItem } from '../utils/hooks/useFormItem';
+import CustomBtn from './CustomBtn';
+import './index.less';
+import { isJSX } from './utils';
+
+const { Group } = DynamicForm;
+const prefixCls = 'lcdp-dgroup';
+
+export interface MyDGroupProps {
+  groupTitleImg?: string;
+  status?: string;
+  extandPostion?: string;
+  titleIcon?: string;
+  prefixIcon?: any;
+  style?: any;
+  rowActions?: any;
+  onChange?: (isShow: boolean) => void;
+  onRowEdit?: () => void;
+  onRowDetail?: () => void;
+  onRowDelete?: () => void;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: number;
+  color?: string;
+  name: string;
+  visible: boolean;
+  title: string;
+  readOnly: boolean;
+}
+
+const DGroup = LingxiForwardRef<any, MyDGroupProps>((props, ref) => {
+  const {
+    children,
+    groupTitleImg,
+    extandPostion,
+    titleIcon = 'none',
+    prefixIcon,
+    style,
+    rowActions = [],
+    onChange,
+    onRowEdit,
+    onRowDetail,
+    onRowDelete,
+    fontSize = 16,
+    lineHeight,
+    fontWeight = 500,
+    color = '#333',
+    $$componentItem,
+    getEngineApis,
+    ...restProps
+  } = props;
+  const { visible, disabled, required } = useFormItem(ref, props);
+  const renderIcon = (iconInfo: any) => {
+    if (!iconInfo) {
+      return null;
+    }
+    let iconView: React.ReactNode = null;
+    // 不知道哪来的逻辑，先注释，三月后删除
+    // if (prefixIcon && prefixIcon?.prefixIconIconFileInfo) {
+    //   iconView = (
+    //     <span
+    //       className={`${prefixCls}-icon`}
+    //       // eslint-disable-next-line react/no-danger
+    //       dangerouslySetInnerHTML={{ __html: prefixIcon?.prefixIconIconFileInfo?.svgContent }}
+    //     />
+    //   );
+    // } else {
+    const {
+      prefixIconType,
+      prefixIconTheme,
+      prefixIconIsIconFont,
+      prefixIconFontAddress,
+      prefixIconiconFile,
+    } = iconInfo;
+    iconView = (
+      <span className={`${prefixCls}-icon`}>
+        {/** @ts-ignore */}
+        <Icon
+          type={prefixIconType}
+          theme={prefixIconTheme}
+          isIconFont={prefixIconIsIconFont}
+          fontAddress={prefixIconFontAddress}
+          name={props.name}
+          getEngineApis={getEngineApis}
+          iconFile={prefixIconiconFile}
+        />
+      </span>
+    );
+    // }
+    return iconView;
+  };
+  const renderLeftView = useMemo(() => {
+    switch (titleIcon) {
+      case 'vStyle':
+      case 'hStyle':
+        return (
+          <span
+            className={
+              titleIcon === 'vStyle'
+                ? `${prefixCls}-vStyle`
+                : `${prefixCls}-hStyle`
+            }
+          />
+        );
+      case 'icon':
+        return renderIcon(prefixIcon);
+      case 'auto': // 自定义图片
+        return groupTitleImg ? (
+          <img
+            src={groupTitleImg}
+            className={`${prefixCls}-groupLeftView`}
+            alt=""
+          />
+        ) : null;
+      default:
+        return null;
+    }
+  }, [titleIcon, groupTitleImg, prefixIcon]);
+  const renderRigthView = () => {
+    if (Array.isArray(rowActions) && rowActions.length) {
+      const showRowActions = rowActions?.filter((it) => it?.checked !== false);
+      return (
+        <div className={`${prefixCls}-rigthView`}>
+          {showRowActions.map((item) => {
+            const {
+              title,
+              iconPos,
+              icon,
+              customStyle,
+              customCode,
+              isIcon,
+              type,
+            } = item;
+            let subTitle = title;
+            if (subTitle && title.length > 4) {
+              subTitle = `${title.substring(0, 4)}...`;
+            }
+            let onClick: any = () => {};
+            switch (type) {
+              case 'detail':
+                onClick = onRowDetail;
+                break;
+              case 'edit':
+                onClick = onRowEdit;
+                break;
+              case 'delete':
+                onClick = onRowDelete;
+                break;
+              default:
+                break;
+            }
+            const svgContent =
+              (icon && icon?.iconFileInfo && icon?.iconFileInfo?.svgContent) ||
+              null;
+            let view = <></>;
+
+            const iconView = (
+              <Icon
+                {...icon}
+                svgContent={svgContent}
+                size={12}
+                style={{ width: '12px', height: '12px' }}
+                getEngineApis={getEngineApis}
+              />
+            );
+            if (iconPos === 'left') {
+              view = (
+                <>
+                  {iconView}
+                  {subTitle}
+                </>
+              );
+            } else {
+              view = (
+                <>
+                  {subTitle}
+                  {iconView}
+                </>
+              );
+            }
+            if (isIcon) {
+              view = <>{iconView}</>;
+            }
+            switch (customStyle) {
+              case 'borderBtn': // 描边按钮
+                return (
+                  <div className={`${prefixCls}-border-btn`} onClick={onClick}>
+                    {view}
+                  </div>
+                );
+              case 'ligthColor': // 浅色按钮
+                return (
+                  <div className={`${prefixCls}-light-btn`} onClick={onClick}>
+                    {view}
+                  </div>
+                );
+              case 'primaryBtn': // 纯色按钮
+                return (
+                  <div className={`${prefixCls}-primary-btn`} onClick={onClick}>
+                    {view}
+                  </div>
+                );
+              case 'cutsomBtn': // 自定义按钮
+                // eslint-disable-next-line no-case-declarations
+                const iconInfo: any = {
+                  ...icon,
+                  svgContent,
+                };
+
+                // 通过jsx渲染
+                if (isJSX(customCode)) {
+                  return (
+                    <div>
+                      <CustomModule
+                        code={customCode.tVal}
+                        compProps={{
+                          isIcon,
+                          icon: (
+                            <Icon {...iconInfo} getEngineApis={getEngineApis} />
+                          ),
+                          title,
+                        }}
+                        sandBoxLoadModule={getEngineApis().sandBoxLoadModule}
+                        errorInfo={{
+                          id: $$componentItem.id,
+                        }}
+                      />
+                    </div>
+                  );
+                }
+
+                return (
+                  <CustomBtn
+                    isEngine
+                    customCode={customCode}
+                    icon={iconInfo}
+                    title={title}
+                    isIcon={isIcon}
+                    onClick={onClick}
+                    getEngineApis={getEngineApis}
+                  />
+                );
+              default: // 默认图标按钮
+                return (
+                  <div className={`${prefixCls}-default-btn`} onClick={onClick}>
+                    {view}
+                  </div>
+                );
+            }
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={`${prefixCls}-group`}>
+      {!visible ? null : (
+        <Group
+          {...restProps}
+          disabled={disabled}
+          required={required}
+          boxStyle={{ ...style }}
+          titleStyle={{ fontSize, lineHeight, fontWeight, color }}
+          leftView={renderLeftView}
+          extandPostion={extandPostion === 'header' ? 'top' : undefined}
+          rightView={renderRigthView()}
+          extandChange={(isShow) => {
+            if (onChange) {
+              onChange(isShow);
+            }
+          }}
+        >
+          {children}
+        </Group>
+      )}
+    </div>
+  );
+});
+
+DGroup.displayName = 'DGroup';
+
+export default DGroup;

package/lib/h5public/src/components/factory/src/DGroup/utils/index.ts

@@ -0,0 +1,8 @@
+export const isJSX = (customCode: any) => {
+  return (
+    customCode &&
+    typeof customCode === 'object' &&
+    customCode.jsx &&
+    typeof customCode.jsx === 'object'
+  );
+};