@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,771 @@
+import React, { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
+import { antPrefix } from '../variables';
+import { Badge, Button, Space, Popover } from 'antd';
+import MyImg from '../Img';
+import { FLOATING_BUTTON_SIZE } from './const';
+import CommIcon from '../Icon';
+import PopoverWrapper from './PopoverWrapper';
+import { EngineBaseProps } from '@lingxiteam/types';
+
+export interface FloatingButtonProps {
+  onClick: (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
+    pageUrl?: string
+  ) => void;
+  style: React.CSSProperties;
+  mode: 'simple' | 'menubtn' | 'floatgroup' | 'totop';
+  type: 'primary' | 'default' | 'imgbtn';
+  size: 'large' | 'middle' | 'small';
+  shape: 'circle' | 'square';
+  icon: {
+    svgContent: string;
+    icon: any;
+  };
+  extend: Record<string, any>;
+  badge?: boolean;
+  badgeStyle?: 'dot' | 'number';
+  badgeNumber?: string;
+  showMark?: boolean;
+  extendProps?: Record<string, any>;
+  fileCode?: string;
+  btnText?: string;
+  badgeBg?: string;
+  badgeColor?: string;
+  getEngineApis?: any;
+  visible?: boolean;
+  disabled?: boolean;
+  triggerType?: 'click' | 'hover';
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  $$componentItem: EngineBaseProps['$$componentItem'];
+  className?:string;
+}
+
+const prefixCls = `${antPrefix}-floating-button`;
+const wrapperCls = 'ued-floating-button';
+const srcType = 'fileCode';
+const FloatingButton: React.FC<FloatingButtonProps> = forwardRef(
+  (props, ref) => {
+    const {
+      onClick,
+      style,
+      type,
+      size,
+      shape,
+      icon,
+      badge,
+      badgeStyle = 'dot',
+      badgeNumber,
+      showMark,
+      getEngineApis,
+      extendProps,
+      fileCode,
+      btnText = '',
+      badgeBg,
+      badgeColor,
+      mode,
+      extend = [],
+      visible = true,
+      disabled: disabledProp = false,
+      triggerType = 'hover',
+      placement = 'top',
+      className,
+      ...restProps
+    } = props;
+    const { left, top, ...restStyle } = style;
+    const [open, setOpen] = useState(false);
+    const { id: compId } = props.$$componentItem || {};
+
+    const [position, setPosition] = useState({ x: left, y: top });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const moveDistance = useRef(0);
+    const startPos = useRef({ x: 0, y: 0 });
+
+    const btnClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
+      pageUrl = '',
+      isChildren = false, // 菜单按钮子项需要点击事件
+    ) => {
+      if (mode !== 'menubtn' || isChildren) {
+        if (onClick) {
+          onClick(e, pageUrl);
+        } else if (mode === 'totop') {
+          // 回到顶部按钮。内置回到顶部的方法
+          const element = document.querySelector('.lcdp-renderer');
+          if (element) {
+            element?.scrollTo({
+              top: 0,
+              behavior: 'smooth',
+            });
+          }
+        }
+      }
+    };
+
+    const btnStyle = (type: string, size: string | number, shape: string) => {
+      let typeStyle = {};
+      if (type === 'default') {
+        typeStyle = {
+          border: 'none',
+          backgroundColor: 'transparent',
+          boxShadow: '0px 8px 24px 0px rgba(100,103,122,0.24)',
+        };
+      }
+      if (shape === 'square') {
+        return {
+          ...restStyle,
+          ...FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+            .btnStyle,
+          borderRadius: '8px',
+          ...typeStyle,
+        };
+      }
+      return {
+        ...restStyle,
+        ...FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+          .btnStyle,
+        ...typeStyle,
+      };
+    };
+
+    const offset = (curType = type, curShape = shape) => {
+      if (curType === 'imgbtn') {
+        return [0, 0];
+      }
+      if (curShape === 'square') {
+        return [-2, 0];
+      }
+      return [-8, 4];
+    };
+
+    // 徽标样式
+    const myBadgeStyle = (
+      badgeBg: string | undefined,
+      badgeColor: string | undefined,
+      badgeStyle: string
+    ) => {
+      if (badgeStyle === 'dot') {
+        return { backgroundColor: badgeBg };
+      }
+      return { backgroundColor: badgeBg, color: badgeColor };
+    };
+
+    const renderImgView = (params: {
+      fileCode: string | undefined;
+      imgStyle: React.CSSProperties;
+      pageSrc?: string;
+      disabled?: boolean;
+    }) => {
+      const {
+        fileCode,
+        imgStyle,
+        pageSrc = '',
+        disabled = disabledProp,
+      } = params;
+      return (
+        <div style={{ cursor: disabled ? 'no-drop' : 'pointer' }}>
+          <MyImg
+            style={imgStyle}
+            fileCode={fileCode}
+            srcType={srcType}
+            getEngineApis={getEngineApis}
+            alt=""
+            src=""
+            onClick={() => {
+              // 图片点击事件没有暴露该参数
+              if (!disabled) {
+                btnClick(null, pageSrc);
+              }
+            }}
+          />
+        </div>
+      );
+    };
+    const renderIcon = (icon: any, size: string, btnText: string) => {
+      if (!icon) {
+        return null;
+      }
+      const { svgContent, ...rest } = icon || {};
+      return (
+        // @ts-ignore
+        <CommIcon
+          style={
+            btnText
+              ? FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+                .btnTextStyle
+              : FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+                .iconStyle
+          }
+          svgContent={svgContent}
+          icon={rest}
+          getEngineApis={getEngineApis}
+        />
+      );
+    };
+
+    const btnView = (params: {
+      shape: string;
+      type: string;
+      size: string;
+      btnText: string;
+      btnStyle: any;
+      style: any;
+      BtnIcon: any;
+      btnTextStyle: React.CSSProperties;
+      pageSrc?: string;
+      disabled?: boolean;
+      isChildren?:boolean;
+    }) => {
+      const {
+        shape,
+        type,
+        size,
+        btnText,
+        btnStyle,
+        style,
+        BtnIcon,
+        btnTextStyle = {},
+        pageSrc = '',
+        disabled = disabledProp,
+        isChildren = false,
+      } = params;
+      return (
+        <Button
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            if (!disabled && btnClick) {
+              btnClick(e, pageSrc, isChildren);
+            }
+          }}
+          disabled={disabled}
+          shape={shape as 'default' | 'circle' | 'round'}
+          type={
+            type as 'primary' | 'default' | 'dashed' | 'text' | 'link' | 'ghost'
+          }
+          size={size as 'large' | 'middle' | 'small'}
+          style={
+            btnText
+              ? btnStyle
+              : {
+                ...btnStyle,
+                ...btnTextStyle,
+              }
+          }
+        >
+          {BtnIcon}
+          {btnText ? (
+            <div
+              className={`${prefixCls}-btn-text`}
+              style={{
+                color: style.color,
+                ...FLOATING_BUTTON_SIZE[
+                  size as keyof typeof FLOATING_BUTTON_SIZE
+                ].btnTextStyle,
+              }}
+            >
+              {btnText}
+            </div>
+          ) : null}
+        </Button>
+      );
+    };
+
+    const renderBtn = () => {
+      if (type === 'imgbtn') {
+        const imgStyle: any = FLOATING_BUTTON_SIZE[size].btnStyle;
+        return renderImgView({ fileCode, imgStyle });
+      }
+      const curBtnStyle = btnStyle(type, size, shape);
+      const BtnIcon = renderIcon(icon, size, btnText);
+      return btnView({
+        shape,
+        type,
+        size,
+        btnText,
+        btnStyle: curBtnStyle,
+        style,
+        BtnIcon,
+        btnTextStyle:
+          FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+            .btnTextStyle,
+      });
+    };
+
+    const renderMenuBtnItem = (item: any) => {
+      const BtnIcon = renderIcon(item.btnIcon, size, item.btnContent);
+      const curBtnStyle = btnStyle(item.type, size, shape);
+      return btnView({
+        shape: 'circle',
+        type: item.type,
+        size,
+        btnText: item.btnContent,
+        btnStyle: curBtnStyle,
+        style,
+        BtnIcon,
+        btnTextStyle:
+          FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+            .btnTextStyle,
+        pageSrc: item.pageSrc,
+        disabled: item.disabled,
+        isChildren: true,
+      });
+    };
+    const menuBtnContent = () => {
+      const cBadgeStyle = myBadgeStyle(badgeBg, badgeColor, badgeStyle);
+      return (
+        <Space
+          direction={
+            ['top', 'bottom'].includes(placement) ? 'vertical' : 'horizontal'
+          }
+          size="middle"
+        >
+          {extend.map((item: any, index:number) => {
+            const { badgeSetting = {}, key = '', popoverSetting } = item;
+            const { value, badgeStyle } = badgeSetting;
+            const curOffset:any = offset(item.type, shape);
+            if (value && badgeStyle === 'dot') {
+              return (
+                <PopoverWrapper
+                  row={item}
+                  index={index}
+                  engineApis={getEngineApis?.()}
+                  rowId={key}
+                  compId={compId}
+                  popoverSetting={popoverSetting}
+                >
+                  <Badge dot style={cBadgeStyle} offset={curOffset}>
+                    {
+                  item.type === 'imgbtn' ? renderImgView({
+                    fileCode: item.btnIcon,
+                    imgStyle:
+                      FLOATING_BUTTON_SIZE[
+                        size as keyof typeof FLOATING_BUTTON_SIZE
+                      ].floatgroupItemStyle,
+                    pageSrc: item.pageSrc,
+                    disabled: item.disabled,
+                  }) : renderMenuBtnItem(item)
+                }
+                  </Badge>
+                </PopoverWrapper>
+              );
+            } if (value && badgeStyle === 'number') {
+              // 数字徽标
+              return (
+                <PopoverWrapper
+                  row={item}
+                  index={index}
+                  engineApis={getEngineApis?.()}
+                  rowId={key}
+                  compId={compId}
+                  popoverSetting={popoverSetting}
+                >
+                  <Badge style={cBadgeStyle} count={value}>
+                    {
+                  item.type === 'imgbtn' ? renderImgView({
+                    fileCode: item.btnIcon,
+                    imgStyle:
+                      FLOATING_BUTTON_SIZE[
+                        size as keyof typeof FLOATING_BUTTON_SIZE
+                      ].floatgroupItemStyle,
+                    pageSrc: item.pageSrc,
+                    disabled: item.disabled,
+                  }) : renderMenuBtnItem(item)
+                }
+                  </Badge>
+                </PopoverWrapper>
+              );
+            }
+            if (item.type === 'imgbtn') {
+              return (
+                <PopoverWrapper
+                  row={item}
+                  index={index}
+                  engineApis={getEngineApis?.()}
+                  rowId={key}
+                  compId={compId}
+                  popoverSetting={popoverSetting}
+                >
+                  { renderImgView({
+                    fileCode: item.btnIcon,
+                    imgStyle:
+                    FLOATING_BUTTON_SIZE[
+                      size as keyof typeof FLOATING_BUTTON_SIZE
+                    ].floatgroupItemStyle,
+                    pageSrc: item.pageSrc,
+                    disabled: item.disabled,
+                  })};
+                </PopoverWrapper>
+              );
+            }
+            return (
+              <PopoverWrapper
+                row={item}
+                index={index}
+                engineApis={getEngineApis?.()}
+                rowId={key}
+                compId={compId}
+                popoverSetting={popoverSetting}
+              >
+                {renderMenuBtnItem(item)}
+              </PopoverWrapper>
+            );
+          })}
+        </Space>
+      );
+    };
+
+    const menuBtn = useMemo(() => {
+      let curIcon: any = icon;
+      if (open) {
+        curIcon = { theme: 'outlined', type: 'close' };
+      }
+      if (type === 'imgbtn') {
+        const imgStyle: any = FLOATING_BUTTON_SIZE[size].btnStyle;
+        return renderImgView({ fileCode, imgStyle });
+      }
+      const curBtnStyle = btnStyle(type, size, shape);
+      const BtnIcon = renderIcon(curIcon, size, btnText);
+      return btnView({
+        shape,
+        type,
+        size,
+        btnText,
+        btnStyle: curBtnStyle,
+        style,
+        BtnIcon,
+        btnTextStyle:
+          FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+            .btnTextStyle,
+      });
+    }, [open, type, size, shape, fileCode, btnText, style]);
+
+
+    const renderFloatingItemBtn = (params: any) => {
+      const { item, btnStyle, BtnIcon, btnTextStyle, shape, imgStyle = {} } = params;
+      return (
+        <div
+          className={`${prefixCls}-floatgroup-square-item`}
+          style={
+          FLOATING_BUTTON_SIZE[
+            size as keyof typeof FLOATING_BUTTON_SIZE
+          ].floatgroupItemStyle
+        }
+        >
+          {
+             item.type === 'imgbtn' ? renderImgView({
+               fileCode: item.btnIcon,
+               imgStyle,
+               pageSrc: item.pageSrc,
+               disabled: item.disabled,
+             }) : btnView({
+               shape,
+               type: item.type,
+               size,
+               btnText: item.btnContent,
+               btnStyle,
+               style,
+               BtnIcon,
+               btnTextStyle,
+               pageSrc: item.pageSrc,
+               disabled: item.disabled,
+             })
+          }
+        </div>
+      );
+    };
+
+    const renderFloatingCircleItemBtn = (item: any) => {
+      if (item.type === 'imgbtn') {
+        return renderImgView({
+          fileCode: item.btnIcon,
+          imgStyle:
+            FLOATING_BUTTON_SIZE[
+              size as keyof typeof FLOATING_BUTTON_SIZE
+            ].floatgroupItemStyle,
+          pageSrc: item.pageSrc,
+          disabled: item.disabled,
+        });
+      }
+      const BtnIcon = renderIcon(item.btnIcon, size, item.btnContent);
+      const curBtnStyle = btnStyle(item.type, size, shape);
+
+      return renderFloatingItemBtn({
+        item,
+        BtnIcon,
+        btnStyle: curBtnStyle,
+        shape: 'circle',
+        btnTextStyle: FLOATING_BUTTON_SIZE[
+          size as keyof typeof FLOATING_BUTTON_SIZE
+        ].btnTextStyle,
+      });
+    };
+    const btnContentView = () => {
+      if (mode === 'floatgroup') {
+        const cBadgeStyle = myBadgeStyle(badgeBg, badgeColor, badgeStyle);
+
+        if (shape === 'square') {
+          const squareItemStyle: any =
+            FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE]
+              .floatgroupSquareItemStyle;
+              
+          return (
+            <div className={`${prefixCls}-floatgroup-square`}>
+              {extend.map(
+                (item: {
+                  type: 'primary' | 'default' | 'imgbtn';
+                  btnIcon: string | undefined;
+                  btnContent: string;
+                  pageSrc: string;
+                  disabled: boolean;
+                  badgeSetting: any;
+                  popoverSetting: any;
+                  key: string;
+                }, index: number) => {
+                  const { badgeSetting = {}, popoverSetting, key } = item;
+                  const { value, badgeStyle } = badgeSetting;
+                  const curOffset:any = offset(item.type);
+                  const BtnIcon = renderIcon(
+                    item.btnIcon,
+                    size,
+                    item.btnContent
+                  );
+                  const curBtnStyle = {
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    borderRadius: '0px',
+                    color: restStyle.color,
+                    boxShadow: 'none',
+                    ...squareItemStyle,
+                  };
+                  const btnTextStyle = { fontSize: squareItemStyle.fontSize };
+                  const imgStyle = FLOATING_BUTTON_SIZE[size as keyof typeof FLOATING_BUTTON_SIZE].floatgroupSquareItemStyle;
+                  const shape = 'circle';
+                  if (value && badgeStyle === 'dot') {
+                    return (
+                      <PopoverWrapper
+                        row={item}
+                        index={index}
+                        engineApis={getEngineApis?.()}
+                        rowId={key}
+                        compId={compId}
+                        popoverSetting={popoverSetting}
+                      >
+                        <Badge dot style={cBadgeStyle} offset={curOffset}>
+                          {
+                           renderFloatingItemBtn({
+                             item,
+                             imgStyle,
+                             BtnIcon,
+                             btnStyle: curBtnStyle,
+                             shape,
+                             btnTextStyle,
+                           })
+                        }
+                        </Badge>
+                      </PopoverWrapper>
+                    );
+                  }
+                  if (value && badgeStyle === 'number') {
+                    return (
+                      <PopoverWrapper
+                        row={item}
+                        index={index}
+                        engineApis={getEngineApis?.()}
+                        rowId={key}
+                        compId={compId}
+                        popoverSetting={popoverSetting}
+                      >
+                        <Badge style={cBadgeStyle} count={value}>
+                          {
+                          renderFloatingItemBtn({
+                            item,
+                            imgStyle,
+                            BtnIcon,
+                            btnStyle: curBtnStyle,
+                            shape,
+                            btnTextStyle,
+                          })
+                        }
+                        </Badge>
+                      </PopoverWrapper>
+                    );
+                  }
+                  return (
+                    <PopoverWrapper
+                      row={item}
+                      index={index}
+                      engineApis={getEngineApis?.()}
+                      rowId={key}
+                      compId={compId}
+                      popoverSetting={popoverSetting}
+                    >
+                      {renderFloatingItemBtn({
+                        item,
+                        imgStyle,
+                        BtnIcon,
+                        btnStyle: curBtnStyle,
+                        shape,
+                        btnTextStyle,
+                      })}
+                    </PopoverWrapper>
+                  );
+                }
+              )}
+            </div>
+          );
+        }
+        return (
+          <Space direction="vertical">
+            {extend.map((item: any, index: number) => {
+              const { badgeSetting = {}, popoverSetting, key } = item;
+              const { value, badgeStyle } = badgeSetting;
+              const curOffset:any = offset(item.type);
+              if (value && badgeStyle === 'dot') {
+                return (
+                  <PopoverWrapper
+                    row={item}
+                    index={index}
+                    engineApis={getEngineApis?.()}
+                    rowId={key}
+                    compId={compId}
+                    popoverSetting={popoverSetting}
+                  >
+                    <Badge dot style={cBadgeStyle} offset={curOffset}>
+                      {renderFloatingCircleItemBtn(item)}
+                    </Badge>
+                  </PopoverWrapper>
+                );
+              }
+              if (value && badgeStyle === 'number') {
+                return (
+                  <PopoverWrapper
+                    row={item}
+                    index={index}
+                    engineApis={getEngineApis?.()}
+                    rowId={key}
+                    compId={compId}
+                    popoverSetting={popoverSetting}
+                  >
+                    <Badge style={cBadgeStyle} count={value}>
+                      {renderFloatingCircleItemBtn(item)}
+                    </Badge>
+                  </PopoverWrapper>
+                );
+              }
+              return (
+                <PopoverWrapper
+                  row={item}
+                  index={index}
+                  engineApis={getEngineApis?.()}
+                  rowId={key}
+                  compId={compId}
+                  popoverSetting={popoverSetting}
+                >
+                  {renderFloatingCircleItemBtn(item)}
+                </PopoverWrapper>
+              );
+            })}
+          </Space>
+        );
+      }
+      if (mode === 'menubtn') {
+        return (
+          <Popover
+            overlayClassName={`${prefixCls}-popover`}
+            trigger={triggerType}
+            placement={placement}
+            content={menuBtnContent()}
+            onOpenChange={(open) => {
+              setOpen(open);
+            }}
+          >
+            {menuBtn}
+          </Popover>
+        );
+      }
+      return renderBtn();
+    };
+    const floattingBtn = () => {
+      const cBadgeStyle = myBadgeStyle(badgeBg, badgeColor, badgeStyle);
+      if (badge && badgeStyle === 'dot' && showMark) {
+        return (
+          <Badge dot style={cBadgeStyle} offset={offset() as any}>
+            {btnContentView()}
+          </Badge>
+        );
+      }
+      if (badge && badgeStyle === 'number') {
+        return (
+          <Badge style={cBadgeStyle} count={badgeNumber}>
+            {btnContentView()}
+          </Badge>
+        );
+      }
+      return btnContentView();
+    };
+    const handleMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+      moveDistance.current = 0;
+      startPos.current = { x: e.clientX, y: e.clientY };
+      setDragStart({
+        x: e.clientX - (position?.x ?? 0),
+        y: e.clientY - (position?.y ?? 0),
+      });
+    };
+  
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        const newX = e.clientX - dragStart.x;
+        const newY = e.clientY - dragStart.y;
+  
+        // 计算移动距离
+        const dx = e.clientX - startPos.current.x;
+        const dy = e.clientY - startPos.current.y;
+        moveDistance.current = Math.sqrt(dx * dx + dy * dy);
+  
+        // 确保按钮不会超出屏幕边界
+        const maxX = window.innerWidth - 60;
+        const maxY = window.innerHeight - 60;
+  
+        setPosition({
+          x: Math.min(Math.max(0, newX), maxX),
+          y: Math.min(Math.max(0, newY), maxY),
+        });
+      }
+    };
+  
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    useEffect(() => {
+      if (isDragging) {
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+      }
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }, [isDragging, dragStart]);
+    return (
+      <>
+        {visible ? (
+          <div
+            className={wrapperCls}
+            {...restProps}
+            {...extendProps}
+            style={{
+              left: position.x,
+              top: position.y,
+            }}
+            onMouseDown={handleMouseDown}
+          >
+            {floattingBtn()}
+          </div>
+        ) : null}
+      </>
+    );
+  }
+);
+export default FloatingButton;