@lingxiteam/ebe-utils 0.0.9 → 0.0.10

package/lib/pcpublic/src/hooks/usePageForm.ts

@@ -0,0 +1,179 @@
+import { Context } from '@/utils/Context/context';
+import {
+  getAllForm,
+  getBoframerOwnForms,
+  getBOFramerOwnFormValues,
+  getFieldsValue,
+  getFormByCompId,
+  getOwnFormValues,
+  updateNodeChildren,
+} from '@/utils/formUtils';
+import { useContext } from 'react';
+
+const usePageForm = (refs: Record<string, any>) => {
+  const { refs: renderRefs } = useContext(Context);
+
+  /**
+   * 获取当前表单值
+   */
+  const getFormValue = async (compId: string): Promise<any> => {
+    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
+    if (!refs[compId]) return Promise.resolve({});
+
+    // 表单的情况 可能是循环容器
+    if (refs[compId].compName === 'Form') {
+      const forms = getFormByCompId(compId, refs);
+      return getFieldsValue(forms, (form) => {
+        return form?.getFieldsValue?.();
+      });
+    }
+
+    if (refs[compId].compName === 'BOFramer') {
+      return getBOFramerOwnFormValues(
+        {
+          refs,
+          renderRefs,
+          compId,
+        },
+        (form) => form?.getFieldsValue?.(),
+      );
+    }
+
+    return Promise.reject(
+      new Error('该组件不支持使用getFormValues获取表单数据'),
+    );
+  };
+
+  /**
+   * 验证并取值
+   * @param compId
+   */
+  const validateForm = async (compId: string): Promise<any> => {
+    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
+    if (!refs[compId]) return Promise.resolve({});
+
+    // 表单的情况 可能是循环容器
+    if (refs[compId].compName === 'Form') {
+      const forms = getFormByCompId(compId, refs);
+      return getFieldsValue(forms, (form) => {
+        return form?.validateFormAndScroll?.();
+      });
+    }
+
+    if (refs[compId].compName === 'BOFramer') {
+      return getBOFramerOwnFormValues(
+        {
+          refs,
+          renderRefs,
+          compId,
+        },
+        (form) => form?.validateFormAndScroll?.(),
+      );
+    }
+    return Promise.reject(
+      new Error('该组件不支持使用getFormValues获取表单数据'),
+    );
+  };
+
+  /**
+   * 重置表单值
+   * @param compId
+   */
+  const resetForm = (compId: string) => {
+    if (!refs[compId]) return;
+    const compName = refs[compId].compName;
+    if (compName === 'BOFramer') {
+      const forms = getBoframerOwnForms({
+        currentRefs: refs,
+        renderRefs,
+        compId,
+      });
+
+      forms.forEach((form) => {
+        form?.resetFields?.();
+      });
+    } else {
+      const forms = getFormByCompId(compId, refs);
+      // 支持循环容器中的表单重置
+      (Array.isArray(forms) ? forms : [forms]).forEach((form) =>
+        form?.resetFields(),
+      );
+    }
+  };
+
+  /**
+   * 设置表单值
+   * @param compId 组件id
+   * @param formValues 表单值
+   */
+  const setFormValues = (
+    compId: string,
+    formValues: Record<string, any> = {},
+  ) => {
+    if (!refs[compId]) return;
+    const compName = refs[compId].compName;
+
+    if (compName === 'BOFramer') {
+      const forms = getBoframerOwnForms({
+        currentRefs: refs,
+        renderRefs,
+        compId,
+      });
+
+      forms.forEach((form) => {
+        form?.setFieldsValue(formValues);
+      });
+    } else {
+      refs[compId]?.setFieldsValue?.(formValues);
+    }
+  };
+
+  /**
+   * 校验并获取所有表单值
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const validateAllForm = () =>
+    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
+      form.validateFormAndScroll?.(false),
+    );
+
+  /**
+   * 获取所有表单值 但不校验
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const getAllFormValues = () =>
+    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
+      form.getFieldsValue?.(),
+    );
+
+  /**
+   * 重置所有表单
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const resetAllForm = () => {
+    const forms = getAllForm({
+      currentRefs: refs,
+      renderRefs,
+    });
+
+    forms.forEach((form) => {
+      form.resetFields();
+    });
+  };
+
+  return {
+    getFormValue,
+    validateForm,
+    resetForm,
+    setFormValues,
+    validateAllForm,
+    getAllFormValues,
+    resetAllForm,
+    updateNodeChildren,
+  };
+};
+
+export default usePageForm;

package/lib/pcpublic/src/styles/common.less

@@ -0,0 +1,41 @@
+// 容器内容为空占位box
+.ued-empty-box {
+  width: 100%;
+  min-height: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  font-size: 16px;
+  color: rgba(28, 36, 46, 0.45);
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.ued-m-empty-box {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 12px;
+  bottom: 12px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  font-size: 16px;
+  color: rgba(28, 36, 46, 0.45);
+  background: #f2f3f5;
+  border: 1px dotted rgba(0, 0, 0, 0.15);
+}
+
+.TEXT_ELLIPSIS {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.@{ant-prefix}-spin-nested-loading > div > .@{ant-prefix}-spin {
+  min-height: 50px;
+}

package/lib/pcpublic/src/styles/index.less

@@ -0,0 +1,4 @@
+@prefix: engine;
+@import (reference) '~antd/es/style/themes/default.less';
+@import url('./theme/variables.less');
+@import url('./common.less');

package/lib/pcpublic/src/styles/index.ts

@@ -0,0 +1 @@
+export const prefix = 'engine';

package/lib/pcpublic/src/styles/theme/variables.less

@@ -0,0 +1,130 @@
+// 基准灰色
+@gray-base: #000;
+@gray-1: mix(@gray-base, #fff, 100%);
+@gray-2: mix(@gray-base, #fff, 85%);
+@gray-3: mix(@gray-base, #fff, 65%);
+@gray-4: mix(@gray-base, #fff, 45%);
+@gray-5: mix(@gray-base, #fff, 25%);
+@gray-6: mix(@gray-base, #fff, 15%);
+@gray-7: mix(@gray-base, #fff, 10%);
+@gray-8: mix(@gray-base, #fff, 5%);
+@gray-9: mix(@gray-base, #fff, 2%);
+@gray-10: mix(@gray-base, #fff, 0%);
+
+// 主题色
+@primary-color: #2a71eb;
+@success-color: #2cb82c;
+@danger-color: #f52230;
+@warning-color: #f47a1d;
+
+// 背景
+@bg-default: #fff;
+@bg-gray: #f5f7f9;
+@bg-hover: rgba(65, 105, 225, 0.08);
+@box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+@box-hover-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.08);
+@bg-sider: #0f121f;
+
+// 间距
+@padding: 4px;
+@padding-xs: 6px; // 6px
+@padding-s: @padding*2; // 8px
+@padding-m: @padding*3; // 12px
+@padding-l: @padding*4; // 16px
+@padding-xl: @padding*10; // 40px
+@padding-xxl: @padding-xl*2; // 72px
+
+// 文字大小
+@font-size-sm: 12px;
+@font-size-base: 14px;
+@font-size-md: 16px;
+@font-size-lg: 18px;
+@font-size-xl: 20px;
+@font-size-heading: 24px;
+@font-size-strong: 32px;
+@font-weight: 500;
+
+// 文字颜色
+@base-color: #fff;
+@color-text-title: #1c242e; // 标题
+@color-text-base: rgba(28, 36, 46, 0.85); // 基本
+@color-text-paragraph: rgba(28, 36, 46, 0.65); // 段落
+@color-text-secondary: rgba(28, 36, 46, 0.45); // 辅助色
+@color-text-sub: rgba(28, 36, 46, 0.45); // 副标题色
+@color-text-base-inverse: #fff; // 基本 - 反色
+@color-text-strong: @danger-color; //价格、强调的数值，包含单位
+@color-link: @primary-color; // 链接
+@color-link-inverse: #f3af61; // 链接
+
+// 线条
+@border-color: rgba(28, 36, 46, 0.15);
+@dividing-color: rgba(28, 36, 46, 0.1);
+
+// 圆角
+@border-radius-base: 4px;
+@border-radius-sm: 2px;
+
+// 侧边栏
+@sidebar-selected-color: @color-text-title;
+@sidebar-selected-bg: rgba(68, 119, 238, 0.1);
+
+// 事件树
+@event-head-panel: #fff;
+@event-body-panel: #fff;
+@event-foot-panel: #fff;
+@event-btn-color: @color-text-base-inverse;
+@event-color: #47e;
+@action-color: #11c9ac;
+@cycle-color: #e8b339;
+@condition-color: #f759ab;
+@elseIf-color: #45d7ef;
+@callback-color: #a25fff;
+@shielding-color: rgba(28, 36, 46, 0.25);
+@event-line-color: #e5e5e5;
+@action-line-height: 28px;
+@action-table-line-height: 24px;
+
+@input-border-color: @gray-7;
+
+// 清除浮动
+.clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+.textEllipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.HeightOverflowY {
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.flexModal {
+  top: 40px;
+  padding-bottom: @padding-l;
+
+  .@{ant-prefix}-modal-content {
+    min-height: 320px;
+    max-height: calc(100vh - 80px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .@{ant-prefix}-modal-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}

package/lib/pcpublic/src/utils/LcdpSpin/index.less

@@ -0,0 +1,13 @@
+@import (reference) '../../styles/index.less';
+
+.@{prefix}-dynamicPage-spinning-mask {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}

package/lib/pcpublic/src/utils/LcdpSpin/index.tsx

@@ -0,0 +1,12 @@
+import { Spin } from 'antd';
+import { prefix } from '../../styles/index';
+import './index.less';
+
+const LcdpSpin = (props: { spinning: boolean }) => (
+  <Spin
+    spinning={props.spinning}
+    className={`${prefix}-dynamicPage-spinning-mask`}
+  />
+);
+
+export default LcdpSpin;

package/lib/pcpublic/src/utils/i18n/i18n.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line max-len
+export const getCalendarLocale = (
+  getLocale: (
+    t: string,
+    placelhoder?: string,
+    tempValue?: Record<string, any>,
+  ) => string | undefined,
+  t: string,
+  tempValue?: Record<string, any>,
+) => {
+  if (t === 'confirm') {
+    return getLocale(t, '', tempValue);
+  }
+  return getLocale(`Calendar.${t}`, '', tempValue);
+};

package/lib/pcpublic/src/utils/i18n/index.ts

@@ -0,0 +1,7 @@
+import { localeMonitor } from './localeMonitor';
+import { useLocale } from './useLocale';
+
+export const i18n = {
+  useLocale,
+  localeMonitor,
+};