@lingxiteam/ebe-utils 0.5.1 → 0.5.3

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

@@ -0,0 +1,195 @@
+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 { PrefixIconIconProps } from '../Icon/PropsType';
+import { ChildRenderProvider, useChildRender, useHiddenStyle } from '../utils';
+
+export interface MyCollapseProps extends CollapsePanelProps {
+  name: string;
+  _component: any;
+  collapseType?: string;
+  size?: any;
+  headerColor?: string;
+  hasIcon?: boolean;
+  cardIconType?: string;
+  titleColor?: string;
+  appId?: string;
+  prefixIcon?: PrefixIconIconProps;
+  visible?: boolean;
+
+  onChange?: (activeKey: string[] | string) => void;
+
+  /**
+   * 默认展开的面板
+   */
+  defaultActiveKey?: string[] | string;
+
+  /**
+   * 手风琴模式
+   */
+  accordion: boolean;
+}
+
+export interface WrapperCollapseProps {
+  children: React.ReactElement;
+}
+
+const WrapperCollapse: React.FC<WrapperCollapseProps> = ({ children }) =>
+  React.cloneElement(children, {
+    className: `ued-collapse-wrap ${children.props.className || ''}`,
+  });
+
+const MyCollapse = LingxiForwardRef<any, MyCollapseProps>((props, ref) => {
+  const {
+    children,
+    style,
+    name,
+    className,
+    _component,
+    id,
+    size,
+    hasIcon,
+    cardIconType,
+    titleColor,
+    headerColor,
+    appId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    prefixIcon = {},
+    defaultActiveKey,
+    onChange,
+    accordion,
+    visible = true,
+    ...restProps
+  } = props;
+
+  const {
+    context,
+    resetList,
+    addChildProps,
+    addParentProps,
+    renderChildren,
+    childRef,
+  } = useChildRender();
+  const [activeKeys, setActiveKeys] = useState<string[] | string>(
+    defaultActiveKey || [],
+  );
+
+  const finalStyle = useHiddenStyle(visible, style);
+  const { padding, ...restStyle } = finalStyle || {};
+
+  addParentProps(props);
+  const renderComponent = () => {
+    const components: any[] = [];
+    const childrenList = React.Children.toArray(children);
+    const list: string[] = [];
+    React.Children.forEach(childrenList, (child: any) => {
+      // 兼容高代码模式下的uid
+      list.push(child?.props?.uid || child?.props?.$$componentItem.uid);
+      components.push(child);
+      // 兼容高代码模式下的uid
+      addChildProps(
+        child.props.uid || child?.props?.$$componentItem.uid,
+        child.props?.schema?.props,
+      );
+    });
+    resetList(list);
+    return components;
+  };
+
+  useEffect(() => {
+    if (Array.isArray(defaultActiveKey)) {
+      setActiveKeys(defaultActiveKey || []);
+    } else if (typeof defaultActiveKey === 'string') {
+      setActiveKeys(defaultActiveKey.split(','));
+    }
+  }, [JSON.stringify(defaultActiveKey)]);
+  useImperativeHandle(ref, () => ({
+    setExpansionTerm: (type: '0' | '1' | '2' | '2', keys: string) => {
+      const collectChildsKeys = () => {
+        const childsKeys = [];
+        const childProps = childRef.current.props?.values();
+        if (childProps) {
+          for (const value of childProps) {
+            childsKeys.push(value.key);
+          }
+        }
+        return childsKeys;
+      };
+      if (type === '0') {
+        setActiveKeys(collectChildsKeys());
+      } else if (type === '1') {
+        setActiveKeys([]);
+      } else if (type === '2') {
+        const childsKeys = collectChildsKeys().filter(
+          (key) => !activeKeys.includes(key),
+        );
+        setActiveKeys(childsKeys);
+      } else if (type === '3') {
+        if (typeof keys === 'string') {
+          setActiveKeys(keys.split(','));
+        }
+      }
+    },
+  }));
+  // 需要转化展开项，手风琴模式和非手风琴模式数据格式不同
+  const myActiveKeys = useMemo(() => {
+    if (isUndefined(activeKeys)) {
+      return null;
+    }
+    if (accordion) {
+      return activeKeys?.[0] === undefined ? null : activeKeys?.[0];
+    }
+    return activeKeys;
+  }, [activeKeys, accordion]);
+
+  return (
+    <ChildRenderProvider value={context}>
+      <WrapperCollapse>
+        <div className={className} style={restStyle} id={id}>
+          <Collapse
+            {...restProps}
+            accordion={accordion}
+            // @ts-ignore
+            defaultActiveKey={myActiveKeys}
+            // @ts-ignore
+            activeKey={props.activeKey ?? myActiveKeys}
+            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,
+                })}
+              >
+                <DownOutlined style={{ fontSize: 14 }} rev="" />
+              </div>
+            )}
+            className={classnames(
+              `ued-collapse-${size || 'default'}`,
+              restProps.collapseType === 'simple' ? 'ued-collapse-simple' : '',
+            )}
+          >
+            {renderChildren()}
+          </Collapse>
+          {renderComponent()}
+        </div>
+      </WrapperCollapse>
+    </ChildRenderProvider>
+  );
+});
+
+export default MyCollapse;
+
+export { WrapperCollapse };

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

@@ -0,0 +1,186 @@
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Collapse } from 'antd';
+import type { CollapsePanelProps } from 'antd/lib/collapse';
+import { useEffect, useRef } from 'react';
+import CommIcon from '../Icon';
+import type { PrefixIconIconProps } from '../Icon/PropsType';
+import { useChildRenderContext } from '../utils';
+import { useUpdateEffect } from '../utils/ahooks';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+
+const { Panel } = Collapse;
+
+export interface MyCollapsePanelProps extends CollapsePanelProps {
+  hasIcon?: boolean;
+  visible: boolean;
+  cardIconType: string;
+  titleColor: string;
+  headerColor?: string;
+  backgroundType?: any;
+  appId?: string;
+  prefixIcon?: PrefixIconIconProps;
+  getEngineApis?: any;
+}
+
+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 = () => {
+      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>
+            );
+        }
+      } else {
+        return (
+          <div style={headStyle} className="ued-collapse-panel-header-default">
+            {panelHeader}
+          </div>
+        );
+      }
+    };
+
+    renderRef.current = visible ? (
+      <Panel
+        {...restProps}
+        header={renderHeader()}
+        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,
+      );
+    }, []);
+
+    useUpdateEffect(() => {
+      // 监听需要更新的属性
+      childRenderContext.update?.();
+    }, [visible]);
+
+    return null;
+  },
+);
+
+export default CollapsePanel;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export interface ConditionProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  visible?: boolean;
+}
+
+const Condition: React.FC<ConditionProps> = (props) => {
+  const { children, visible = true, className } = props;
+
+  return visible ? (
+    // @ts-ignore
+    <div data-compid={props?.['data-compid']} className={className}>
+      {children}
+    </div>
+  ) : null;
+};
+
+export default Condition;