@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -1,10 +1,10 @@
 import { Cascader, Tooltip } from 'antd';
 import classNames from 'classnames';
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { renderCommonList } from '../utils/renderReadOnly';
 import { FormFields, getFieldsProps, useCommonImperativeHandle, useListenProps } from '../utils';
-import EmptyComp from '../utils/Empty';
 import { useLocale } from '../utils/hooks/useLocale';
-import { renderCommonList } from '../utils/renderReadOnly';
+import EmptyComp from '../utils/Empty';
 
 const CASCADER_WRAPPER_CLASSNAME = 'ued-cascader-wrap';
 const WrapperCascader = ({ children }: { children: JSX.Element }) =>
@@ -50,8 +50,8 @@ export interface MyCascaderProps {
   onClickOption?: (openKey: string, childrenKeys: any, selectedOptionIds: any, selectedOptions: any) => void;
   onClickStaticOption?: (zattrNbrValueMap: any) => Promise<any[]>;
   childOptions: {
-    key: string;
-    options: any[];
+    key: string,
+    options: any[]
   };
   className: string;
   isFormChild?: boolean | undefined;
@@ -65,6 +65,7 @@ export interface MyCascaderProps {
 
 const prefixCls = 'cascader';
 
+
 /**
  * @description: 根据长度截断字符串，用省略号补充
  */
@@ -93,7 +94,10 @@ const sliceWordsByWidth = (text = '', width: number) => {
         }
       }
     }
-    const finalText = sliceWordsArr.length === textLength ? sliceWordsArr.join('') : [...sliceWordsArr, '.', '.', '.'].join('');
+    const finalText =
+      sliceWordsArr.length === textLength
+        ? sliceWordsArr.join('')
+        : [...sliceWordsArr, '.', '.', '.'].join('');
     return finalText;
   }
   return text;
@@ -150,13 +154,19 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
   const cascaderClassName = `cascader_cls_${compId}`;
   const [showDropDown, setShowDropDown] = useState<boolean>(false);
   const setStyleRef = useRef<boolean>(false);
-  const { margin: customMargin, display: customDisplay, visibility: customVisibility, ...restCusStyles } = customStyle;
+  const {
+    margin: customMargin,
+    display: customDisplay,
+    visibility: customVisibility,
+    ...restCusStyles
+  } = customStyle;
 
   const [childOptions, setChildOptions] = useListenProps<{
-    key: string;
-    options: any[];
+    key: string,
+    options: any[]
   }>(props.childOptions);
 
+
   // 是否多选
   const multiple = useMemo(() => {
     return _multiple === '2';
@@ -203,7 +213,7 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
 
   const options = useMemo(() => {
     const changeLabel: (list: any[]) => any = (list: any[]) =>
-      list?.map?.(item => {
+      list?.map?.((item) => {
         const _item: any = { ...item };
         const { title: _title, children: _children } = _item;
 
@@ -234,7 +244,7 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
   }, [sourceOptions]);
 
   const renderDisplay = (_label: any[]) => {
-    const target = _label.map(l => (l instanceof Object ? l.props?.title : l));
+    const target = _label.map((l) => (l instanceof Object ? l.props?.title : l));
     return target.join(' / ');
   };
 
@@ -280,7 +290,10 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
       }
     },
     // 加载子节点数据
-    setChildOptions(data: { key: string; options: any[] }) {
+    setChildOptions(data: {
+      key: string,
+      options: any[]
+    }) {
       setChildOptions(data);
     },
   });
@@ -307,7 +320,7 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
       disabled={disabled}
       ref={formFieldsRef}
       wrapperClassName={CASCADER_WRAPPER_CLASSNAME}
-      render={val => renderCommonList(val, options)}
+      render={(val) => renderCommonList(val, options)}
       rules={finalRules}
       clearValue={null}
     >

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

@@ -1,7 +1,7 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useImperativeHandle } from 'react';
-import ChartLineProps from '../ChartLine/PropsType';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import CharBarLoader from './loader';
+import ChartLineProps from '../ChartLine/PropsType';
 
 const ChartBar = LingxiForwardRef<unknown, ChartLineProps>((props, ref) => {
   useImperativeHandle(ref, () => ({

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

@@ -2,15 +2,15 @@ import React, { useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import CharBarLoader from './loader';
 import ChartLineProps from './PropsType';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 
 const ChartLine = LingxiForwardRef<unknown, ChartLineProps>((props, ref) => {
   useImperativeHandle(ref, () => ({
     // 这里暴漏部分指令方法
     // 由于组件采用懒加载延迟执行组件，导致组件在未加载完成的时候已经执行了页面加载完成的生命周期，所以未来的指令方法不应放入懒加载中，避免页面加载完成时机无法调用指令。
   }));
-
-  return <CharBarLoader {...props} className={classNames(props.className, 'ued-chartLine')} />;
+  // className={classNames(props.className, 'ued-chartLine')}
+  return <CharBarLoader {...props} />;
 });
 
 export default ChartLine;

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

@@ -51,7 +51,12 @@ export interface CheckboxItemProps extends CheckboxProps {
 
 // 组件识别checked， 导致form.setFieldValue不生效 拆出来让组件识别value
 const CheckboxItem: FC<CheckboxItemProps> = props => {
-  return <Checkbox {...props} checked={props.value} />;
+  return (
+    <Checkbox
+      {...props}
+      checked={props.value}
+    />
+  );
 };
 
 const MyCheckbox = React.forwardRef<any, MyCheckboxProps>((props, ref) => {

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

@@ -1,10 +1,11 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import { Checkbox } from 'antd';
 import React, { useEffect, useMemo, useState, useLayoutEffect, useCallback } from 'react';
+import { renderCommonList } from '../utils/renderReadOnly';
 import { FormFields, getFieldsProps } from '../utils';
 import useCommonImperative from '../utils/hooks/useCommonImperativeHandle';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useLocale } from '../utils/hooks/useLocale';
-import { renderCommonList } from '../utils/renderReadOnly';
+import classNames from 'classnames';
 
 export interface MyCheckboxGroupProps {
   value?: any;
@@ -53,6 +54,8 @@ export interface MyCheckboxGroupProps {
   tipSize?: string; // 文字提示
   tipWidth?: string; // 提示自定义的宽度
   tipHeight?: string; // 提示自定义的高度
+  checkboxType?: 'SplitButton' | 'BackgroundButton' | 'CircleButton' | 'ColorButton' | 'BadgeButton';
+  optionMarginRight?: number;
 }
 
 
@@ -129,6 +132,8 @@ const CheckboxGroup = LingxiForwardRef<any, MyCheckboxGroupProps>((props, ref) =
     tipHeight,
     getEngineApis,
     dataSource: newDataSoure,
+    checkboxType = 'normal',
+    optionMarginRight,
     ...restProps
   } = props;
 
@@ -232,16 +237,25 @@ const CheckboxGroup = LingxiForwardRef<any, MyCheckboxGroupProps>((props, ref) =
     }
   };
 
+  const isButtonType = useMemo(() => {
+    return ['SplitButton', 'BackgroundButton', 'CircleButton', 'ColorButton', 'BadgeButton'].includes(checkboxType || '');
+  }, [checkboxType]);
+
+  const space = isButtonType && optionMarginRight ? optionMarginRight : undefined;
+
   const renderItem = () => {
     const rProps = { ...restProps, style: restCusStyles, defaultValue: dfValue, disabled };
     return (checkedAll && dataSource?.length > 0) ? (
       <>
         <Checkbox
-          className={classNameCheck}
+          className={classNames(classNameCheck, `ued-checkboxgroup-${checkboxType}`)}
           indeterminate={indeterminate}
           disabled={rProps?.disabled || isAllDisabled}
           checked={checkAll}
           onChange={(e) => onCheckAllChange(e)}
+          style={{
+            marginRight: space,
+          }}
         >
           {checkAllText || getLocale?.('all')}
         </Checkbox>
@@ -249,18 +263,22 @@ const CheckboxGroup = LingxiForwardRef<any, MyCheckboxGroupProps>((props, ref) =
           {...rProps}
           value={value}
           options={dataSource}
-          className={`ued-checkboxgroup-wrap ${className}`}
+          className={classNames('ued-checkboxgroup-wrap', className, `ued-checkboxgroup-${checkboxType}`)}
           onChange={(e) => {
             if (onChange) {
               onChange(e);
             }
           }}
+          style={{
+            columnGap: space,
+            rowGap: space,
+          }}
         />
       </>
     ) : (
       <Checkbox.Group
         {...rProps}
-        className={`ued-checkboxgroup-wrap ${className}`}
+        className={classNames('ued-checkboxgroup-wrap', className, `ued-checkboxgroup-${checkboxType}`)}
         value={value}
         options={dataSource}
         onChange={(e: any) => {
@@ -268,6 +286,10 @@ const CheckboxGroup = LingxiForwardRef<any, MyCheckboxGroupProps>((props, ref) =
             onChange(e);
           }
         }}
+        style={{
+          columnGap: space,
+          rowGap: space,
+        }}
       />
     );
   };

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

@@ -1,12 +1,12 @@
-import { DownOutlined } from '@ant-design/icons';
-import { LingxiForwardRef } from '@lingxiteam/types';
 import { Collapse } from 'antd';
 import type { CollapsePanelProps } from 'antd/es/collapse';
 import classnames from 'classnames';
-import isUndefined from 'lodash/isUndefined';
-import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { useEffect, useState, useImperativeHandle, useMemo } from 'react';
 import { PrefixIconIconProps } from '../Icon/PropsType';
 import { ChildRenderProvider, useChildRender, useHiddenStyle } from '../utils';
+import { DownOutlined } from '@lingxiteam/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import isUndefined from 'lodash/isUndefined';
 
 export interface MyCollapseProps extends CollapsePanelProps {
   name: string;
@@ -74,7 +74,7 @@ const MyCollapse = LingxiForwardRef<any, MyCollapseProps>((props, ref) => {
   } = props;
 
   const { context, resetList, addChildProps, addParentProps, renderChildren, childRef } = useChildRender();
-  const [activeKeys, setActiveKeys] = useState<string[] | string>(defaultActiveKey || []);
+  const [activeKeys, setActiveKeys] = useState<string[] | string >(defaultActiveKey || []);
 
   const finalStyle = useHiddenStyle(visible, style);
   const { padding, ...restStyle } = finalStyle || {};
@@ -94,7 +94,7 @@ const MyCollapse = LingxiForwardRef<any, MyCollapseProps>((props, ref) => {
     resetList(list);
     return components;
   };
-
+ 
   useEffect(() => {
     if (Array.isArray(defaultActiveKey)) {
       setActiveKeys(defaultActiveKey || []);
@@ -142,7 +142,8 @@ const MyCollapse = LingxiForwardRef<any, MyCollapseProps>((props, ref) => {
   return (
     <ChildRenderProvider value={context}>
       <WrapperCollapse>
-        <div className={className} style={restStyle} id={id}>
+        <div style={restStyle} id={id}>
+          
           <Collapse
             {...restProps}
             accordion={accordion}
@@ -150,21 +151,24 @@ const MyCollapse = LingxiForwardRef<any, MyCollapseProps>((props, ref) => {
             defaultActiveKey={myActiveKeys}
             // @ts-ignore
             activeKey={props.activeKey ?? myActiveKeys}
-            onChange={key => {
+            onChange={(key) => {
               const temKeys = Array.isArray(key) ? key : [key];
               setActiveKeys(temKeys);
               onChange && onChange(key);
             }}
             expandIcon={({ isActive }) => (
-              <div
-                className={classnames('ued-collapse-expand-icon-arrow', {
-                  active: isActive,
-                })}
+              <div className={classnames('ued-collapse-expand-icon-arrow', {
+                active: isActive,
+              })}
               >
-                <DownOutlined style={{ fontSize: 14 }} rev="" />
+                <DownOutlined style={{ fontSize: 14 }} />
               </div>
             )}
-            className={classnames(`ued-collapse-${size || 'default'}`, restProps.collapseType === 'simple' ? 'ued-collapse-simple' : '')}
+            className={classnames(
+              `ued-collapse-${size || 'default'}`,
+              restProps.collapseType === 'simple' ? 'ued-collapse-simple' : '',
+              className,
+            )}
           >
             {renderChildren()}
           </Collapse>

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

@@ -1,13 +1,15 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Collapse } from 'antd';
 import type { CollapsePanelProps } from 'antd/lib/collapse';
-import React, { useCallback, useEffect, useRef } from 'react';
-import Header from '../Card/CardTitle';
 import CommIcon from '../Icon';
 import type { PrefixIconIconProps } from '../Icon/PropsType';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { useChildRenderContext } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useUpdateEffect } from '../utils/ahooks';
-import useBackgroundStyle from '../View/useBackgroundStyle';
+import classnames from 'classnames';
+import Header from '../Card/CardTitle';
+
 
 const { Panel } = Collapse;
 
@@ -25,7 +27,18 @@ export interface MyCollapsePanelProps extends CollapsePanelProps {
 }
 
 const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) => {
-  const { visible = true, children, header, style, backgroundType, getEngineApis, subTitle, ...restProps } = props;
+  const {
+    visible = true,
+    children,
+    header,
+    style,
+    backgroundType,
+    getEngineApis,
+    subTitle,
+    className,
+    extra,
+    ...restProps
+  } = props;
   const { appId } = props.$$componentItem;
   const childRenderContext = useChildRenderContext();
 
@@ -54,19 +67,33 @@ const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) =
 
   const engineApis = getEngineApis?.() || {};
 
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId,
-    mode: 'engine',
-  });
-  const renderHeader = useCallback(() => {
-    const headStyle: { backgroundColor?: string } = {};
-    if (headerColor) {
-      headStyle.backgroundColor = headerColor;
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId, mode: 'engine' });
+  const headStyle: { backgroundColor?: string } = {};
+  if (headerColor) {
+    headStyle.backgroundColor = headerColor;
+  }
+
+  // 头部样式
+  const getHeaderClassName = useMemo(() => {
+    if (!hasIcon && !cardIconType) {
+      return 'ued-collapse-panel-header-default';
+    }
+
+    switch (cardIconType) {
+      case 'middle':
+        return 'ued-collapse-panel-header';
+      case 'left':
+        return 'ued-collapse-panel-header ued-collapse-panel-header-icon-left';
+      case 'auto':
+        return 'ued-collapse-panel-header ued-collapse-panel-header-icon-auto';
+      case 'none':
+        return 'ued-collapse-panel-header-default';
+      default:
+        return 'ued-collapse-panel-header';
     }
-    // const panelHeader = titleColor ? <div style={{ color: titleColor }}>{header}</div> : header;
+  }, [hasIcon, cardIconType]);
 
+  const renderHeader = useCallback(() => {
     const panelHeader = (
       <Header
         title={header}
@@ -86,24 +113,20 @@ const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) =
     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;
+          const {
+            prefixIconType,
+            prefixIconTheme,
+            prefixIconIsIconFont,
+            prefixIconFontAddress,
+            prefixIconiconFile,
+            prefixIconIconFileInfo,
+            isSystem,
+            systemIconKey,
+          } = prefixIcon;
 
           return (
-            <div style={headStyle} className="ued-collapse-panel-header ued-collapse-panel-header-icon-auto">
+            <>
               <CommIcon
                 icon={{
                   type: prefixIconType,
@@ -112,6 +135,8 @@ const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) =
                   fontAddress: prefixIconFontAddress,
                   iconFile: prefixIconiconFile,
                   iconFileInfo: prefixIconIconFileInfo,
+                  isSystem,
+                  systemIconKey,
                 }}
                 engineApis={engineApis}
                 getEngineApis={getEngineApis}
@@ -119,48 +144,42 @@ const CollapsePanel = LingxiForwardRef<any, MyCollapsePanelProps>((props, ref) =
                 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>
-          );
       }
-    } else {
-      return (
-        <div style={headStyle} className="ued-collapse-panel-header-default">
-          {panelHeader}
-        </div>
-      );
     }
+    return (
+      <>
+        {panelHeader}
+      </>
+    );
   }, [titleColor, header]);
-
+  const genExtra = () => (
+    <>{extra || <></>}</>
+  );
   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"
-      >
+    <Panel
+      {...restProps}
+      header={(
+        <div className={getHeaderClassName} style={headStyle}>
+          {renderHeader()}
+          {genExtra()}
+        </div>)}
+      id={props.$$componentItem.uid}
+      key={currentProps?.key ?? currentIndex}
+    >
+      <div style={{ ...backgroundStyle, padding: parentStyle?.padding, ...style }} className={classnames('ued-collapse-pane-content', className)}>
         {children}
       </div>
     </Panel>
   ) : null;
 
   useEffect(() => {
-    childRenderContext.collectChildren?.(props.$$componentItem.uid, renderRef);
+    childRenderContext.collectChildren?.(
+      props.$$componentItem.uid,
+      renderRef
+    );
   }, []);
 
   // TODO 暂时通过监听children解决循环列表内子控件未及时更新问题

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

@@ -1,15 +1,25 @@
 import React from 'react';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { LingXiFC } from '@lingxiteam/types';
+import classNames from 'classnames';
 
-export interface ConditionProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+export interface ConditionProps
+  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   visible?: boolean;
+  backgroundType?: any;
 }
 
-const Condition: React.FC<ConditionProps> = props => {
-  const { children, visible = true, className } = props;
+const Condition: LingXiFC<ConditionProps> = (props) => {
+  const { children, visible = true, className, backgroundType, getEngineApis, $$componentItem, style } = props;
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
 
   return visible ? (
+    <div
     // @ts-ignore
-    <div data-compid={props?.['data-compid']} className={className}>
+      data-compid={props?.['data-compid']}
+      className={classNames('ued-condition-wrap', className)}
+      style={{ ...backgroundStyle, ...(style || {}) }}
+    >
       {children}
     </div>
   ) : null;

package/lib/pcpublic/src/components/pcfactory/src/DatePicker/Helper.ts

@@ -0,0 +1,7 @@
+import moment, { Moment } from 'moment';
+
+export const parseDateFromFormat = (val: string | Moment, format: string | string[]): Moment | null => {
+  // 日期格式严格按照（取值+展示）格式转换，转换失败后再使用内置格式（标准）转换
+  const date = moment(val, format, true)?.isValid() ? moment(val, format) : moment(val);
+  return date.isValid() ? date : null;
+};