@lingxiteam/ebe-utils 0.2.4 → 0.2.6

package/lib/pcpublic/src/components/pcfactory/src/CollapsePanel/index.tsx

@@ -2,6 +2,7 @@ import { LingxiForwardRef } from '@lingxiteam/types';
 import { Collapse } from 'antd';
 import type { CollapsePanelProps } from 'antd/lib/collapse';
 import { useCallback, useEffect, useRef } from 'react';
+import Header from '../Card/CardTitle';
 import CommIcon from '../Icon';
 import type { PrefixIconIconProps } from '../Icon/PropsType';
 import { useChildRenderContext } from '../utils';
@@ -20,169 +21,155 @@ export interface MyCollapsePanelProps extends CollapsePanelProps {
   appId?: string;
   prefixIcon?: PrefixIconIconProps;
   getEngineApis?: any;
+  subTitle?: string;
 }
 
-const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>(
-  (props, ref) => {
-    const {
-      visible = true,
-      children,
-      header,
-      style,
-      backgroundType,
-      getEngineApis,
-      ...restProps
-    } = props;
-    const { appId } = props.$$componentItem;
-    const childRenderContext = useChildRenderContext();
-
-    const {
-      hasIcon,
-      cardIconType,
-      prefixIcon = {},
-      titleColor,
-      headerColor,
-      style: parentStyle,
-    } = childRenderContext.parentProps || {};
-
-    const { currentIndex, props: currentProps } =
-      childRenderContext?.getCurrentData?.(props.$$componentItem.uid) || {
-        currentIndex: 0,
-        props: {},
-      };
-
-    const renderRef = useRef<any>();
-
-    const engineApis = getEngineApis?.() || {};
-
-    const { backgroundStyle } = useBackgroundStyle({
-      engineApis,
-      backgroundType,
-      appId,
-      mode: 'engine',
-    });
-    const renderHeader = useCallback(() => {
-      const headStyle: { backgroundColor?: string } = {};
-      if (headerColor) {
-        headStyle.backgroundColor = headerColor;
-      }
-      const panelHeader = titleColor ? (
-        <div style={{ color: titleColor }}>{header}</div>
-      ) : (
-        header
-      );
+const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) => {
+  const { visible = true, children, header, style, backgroundType, getEngineApis, subTitle, ...restProps } = props;
+  const { appId } = props.$$componentItem;
+  const childRenderContext = useChildRenderContext();
+
+  const {
+    hasIcon,
+    cardIconType,
+    prefixIcon = {},
+    titleColor,
+    titleFont,
+    titleLineHeight,
+    titleFontWeight,
+    subTitleColor,
+    subTitleFont,
+    subTitleLineHeight,
+    subTitleFontWeight,
+    headerColor,
+    style: parentStyle,
+  } = childRenderContext.parentProps || {};
+
+  const { currentIndex, props: currentProps } = childRenderContext?.getCurrentData?.(props.$$componentItem.uid) || {
+    currentIndex: 0,
+    props: {},
+  };
+
+  const renderRef = useRef<any>();
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { backgroundStyle } = useBackgroundStyle({
+    engineApis,
+    backgroundType,
+    appId,
+    mode: 'engine',
+  });
+  const renderHeader = useCallback(() => {
+    const headStyle: { backgroundColor?: string } = {};
+    if (headerColor) {
+      headStyle.backgroundColor = headerColor;
+    }
+    // const panelHeader = titleColor ? <div style={{ color: titleColor }}>{header}</div> : header;
 
-      if (hasIcon || cardIconType) {
-        // 兼容存量数据中没有设置标题样式的
-        switch (cardIconType) {
-          case 'middle':
-            return (
-              <div className="ued-collapse-panel-header" style={headStyle}>
-                {panelHeader}
-              </div>
-            );
-          case 'left':
-            return (
-              <div
-                style={headStyle}
-                className="ued-collapse-panel-header ued-collapse-panel-header-icon-left"
-              >
-                {panelHeader}
-              </div>
-            );
-          case 'auto': {
-            const {
-              prefixIconType,
-              prefixIconTheme,
-              prefixIconIsIconFont,
-              prefixIconFontAddress,
-              prefixIconiconFile,
-              prefixIconIconFileInfo,
-            } = prefixIcon;
-
-            return (
-              <div
-                style={headStyle}
-                className="ued-collapse-panel-header ued-collapse-panel-header-icon-auto"
-              >
-                <CommIcon
-                  icon={{
-                    type: prefixIconType,
-                    theme: prefixIconTheme,
-                    isIconFont: prefixIconIsIconFont,
-                    fontAddress: prefixIconFontAddress,
-                    iconFile: prefixIconiconFile,
-                    iconFileInfo: prefixIconIconFileInfo,
-                  }}
-                  engineApis={engineApis}
-                  getEngineApis={getEngineApis}
-                  $$componentItem={props.$$componentItem}
-                  className=""
-                />
-                {panelHeader}
-              </div>
-            );
-          }
-          case 'none':
-            return (
-              <div
-                style={headStyle}
-                className="ued-collapse-panel-header-default"
-              >
-                {panelHeader}
-              </div>
-            );
-          default:
-            return (
-              <div style={headStyle} className="ued-collapse-panel-header">
-                {panelHeader}
-              </div>
-            );
+    const panelHeader = (
+      <Header
+        title={header}
+        titleColor={titleColor}
+        titleFont={titleFont}
+        titleFontWeight={titleFontWeight}
+        titleLineHeight={titleLineHeight}
+        subTitle={subTitle}
+        subTitleColor={subTitleColor}
+        subTitleFont={subTitleFont}
+        subTitleFontWeight={subTitleFontWeight}
+        subTitleLineHeight={subTitleLineHeight}
+        subTitleClassName="ued-collapse-panel-header-sub"
+      />
+    );
+
+    if (hasIcon || cardIconType) {
+      // 兼容存量数据中没有设置标题样式的
+      switch (cardIconType) {
+        case 'middle':
+          return (
+            <div className="ued-collapse-panel-header" style={headStyle}>
+              {panelHeader}
+            </div>
+          );
+        case 'left':
+          return (
+            <div style={headStyle} className="ued-collapse-panel-header ued-collapse-panel-header-icon-left">
+              {panelHeader}
+            </div>
+          );
+        case 'auto': {
+          const { prefixIconType, prefixIconTheme, prefixIconIsIconFont, prefixIconFontAddress, prefixIconiconFile, prefixIconIconFileInfo } =
+            prefixIcon;
+
+          return (
+            <div style={headStyle} className="ued-collapse-panel-header ued-collapse-panel-header-icon-auto">
+              <CommIcon
+                icon={{
+                  type: prefixIconType,
+                  theme: prefixIconTheme,
+                  isIconFont: prefixIconIsIconFont,
+                  fontAddress: prefixIconFontAddress,
+                  iconFile: prefixIconiconFile,
+                  iconFileInfo: prefixIconIconFileInfo,
+                }}
+                engineApis={engineApis}
+                getEngineApis={getEngineApis}
+                $$componentItem={props.$$componentItem}
+                className=""
+              />
+              {panelHeader}
+            </div>
+          );
         }
-      } else {
-        return (
-          <div style={headStyle} className="ued-collapse-panel-header-default">
-            {panelHeader}
-          </div>
-        );
+        case 'none':
+          return (
+            <div style={headStyle} className="ued-collapse-panel-header-default">
+              {panelHeader}
+            </div>
+          );
+        default:
+          return (
+            <div style={headStyle} className="ued-collapse-panel-header">
+              {panelHeader}
+            </div>
+          );
       }
-    }, [titleColor, header]);
-
-    renderRef.current = visible ? (
-      <Panel
-        {...restProps}
-        header={renderHeader()}
-        id={props.$$componentItem.uid}
-        key={currentProps?.key ?? currentIndex}
-      >
-        <div
-          style={{
-            ...backgroundStyle,
-            padding: parentStyle?.padding,
-            ...style,
-          }}
-          className="ued-collapse-pane-content"
-        >
-          {children}
+    } else {
+      return (
+        <div style={headStyle} className="ued-collapse-panel-header-default">
+          {panelHeader}
         </div>
-      </Panel>
-    ) : null;
-
-    useEffect(() => {
-      childRenderContext.collectChildren?.(
-        props.$$componentItem.uid,
-        renderRef,
       );
-    }, []);
+    }
+  }, [titleColor, header]);
+
+  renderRef.current = visible ? (
+    <Panel {...restProps} header={renderHeader()} id={props.$$componentItem.uid} key={currentProps?.key ?? currentIndex}>
+      <div
+        style={{
+          ...backgroundStyle,
+          padding: parentStyle?.padding,
+          ...style,
+        }}
+        className="ued-collapse-pane-content"
+      >
+        {children}
+      </div>
+    </Panel>
+  ) : null;
+
+  useEffect(() => {
+    childRenderContext.collectChildren?.(props.$$componentItem.uid, renderRef);
+  }, []);
 
-    // TODO 暂时通过监听children解决循环列表内子控件未及时更新问题
-    useUpdateEffect(() => {
-      // 监听需要更新的属性
-      childRenderContext.update?.();
-    }, [visible, children]);
+  // TODO 暂时通过监听children解决循环列表内子控件未及时更新问题
+  useUpdateEffect(() => {
+    // 监听需要更新的属性
+    childRenderContext.update?.();
+  }, [visible, children]);
 
-    return null;
-  },
-);
+  return null;
+});
 
 export default CollapsePanel;

package/lib/pcpublic/src/components/pcfactory/src/Condition/index.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 
-export interface ConditionProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
+export interface ConditionProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   visible?: boolean;
 }
 
-const Condition: React.FC<ConditionProps> = (props) => {
+const Condition: React.FC<ConditionProps> = props => {
   const { children, visible = true, className } = props;
 
   return visible ? (