@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/h5public/src/components/factory/src/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,819 @@
+import React, { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
+import { Badge, Button, Space, Popover } from 'antd-mobile-5';
+import MyImg from '../Image';
+import { FLOATING_BUTTON_SIZE } from './const';
+import CommIcon from '../Icon';
+import PopoverWrapper from './PopoverWrapper';
+import { EngineBaseProps } from '@lingxiteam/types';
+import './index.less';
+
+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;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  $$componentItem: EngineBaseProps['$$componentItem'];
+  className?:string;
+}
+
+const prefixCls = 'lcdp-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,
+      placement = 'top',
+      className,
+      ...restProps
+    } = props;
+  
+    const { left, top, ...restStyle } = style;
+    const boxRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const offset = useRef({ x: 0, y: 0 });
+
+    const getMyPosition = () => {
+      let myLeft = 0;
+      let myTop = 0;
+
+      if ((left as string)?.includes('rem')) {
+        // 获取根元素的font-size
+        const rootFontSize = parseFloat(
+          getComputedStyle(document.documentElement).fontSize
+        );
+        // 将rem转换为px
+        const remValue = parseFloat(left as string);
+        myLeft = remValue * rootFontSize;
+      } else if (left) {
+        myLeft = Number(left);
+      }
+
+      if ((top as string)?.includes('rem')) {
+        const rootFontSize = parseFloat(
+          getComputedStyle(document.documentElement).fontSize
+        );
+        // 将rem转换为px
+        const remValue = parseFloat(top as string);
+        myTop = remValue * rootFontSize;
+      } else if (top) {
+        myTop = Number(top);
+      }
+
+      setPosition({
+        x: myLeft,
+        y: myTop,
+      });
+    };
+    const [open, setOpen] = useState(false);
+    const [position, setPosition] = useState({ 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 bageOffset = (curType = type, curShape = shape) => {
+      if (curType === 'imgbtn') {
+        return {
+          top: 0,
+          right: 0,
+        };
+      }
+      if (curShape === 'square') {
+        return {
+          right: 2,
+          top: 0,
+        };
+      }
+      return {
+        right: 7,
+        top: 3,
+      };
+    };
+
+    // 徽标样式
+    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}
+            onClick={() => {
+              // 图片点击事件没有暴露该参数
+              if (!disabled) {
+                btnClick(null, pageSrc);
+              }
+            }}
+            disabled={false}
+            errorSrc=""
+            className=""
+            $$componentItem={props.$$componentItem}
+          />
+        </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 getBtnProps = (shape: string, type: string) => {
+      const myShape: any = shape === 'square' ? 'rectangular' : 'rounded';
+      const color: any = ['imgbtn', 'default'].includes(type)
+        ? 'default'
+        : 'primary';
+      const fill: any = type === 'primary' ? 'solid' : 'none';
+      return {
+        shape: myShape,
+        color,
+        fill,
+      };
+    };
+
+    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;
+      const comProps = getBtnProps(shape, type);
+      return (
+        <Button
+          {...comProps}
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            if (!disabled && btnClick) {
+              btnClick(e, pageSrc, isChildren);
+            }
+          }}
+          disabled={disabled}
+          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'
+          }
+          style={{ '--gap': '12px' }}
+        >
+          {extend.map((item: any, index: number) => {
+            const { badgeSetting = {}, popoverSetting } = item;
+            const { value, badgeStyle } = badgeSetting;
+            const curOffset: any = bageOffset(item.type, shape);
+            if (value && badgeStyle === 'dot') {
+              return (
+                <PopoverWrapper
+                  $$componentItem={props.$$componentItem}
+                  engineApis={getEngineApis?.()}
+                  popoverSetting={popoverSetting}
+                >
+                  <Badge
+                    content={Badge.dot}
+                    style={{ ...cBadgeStyle, ...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
+                  $$componentItem={props.$$componentItem}
+                  engineApis={getEngineApis?.()}
+                  popoverSetting={popoverSetting}
+                >
+                  <Badge style={cBadgeStyle} content={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
+                  $$componentItem={props.$$componentItem}
+                  engineApis={getEngineApis?.()}
+                  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
+                $$componentItem={props.$$componentItem}
+                engineApis={getEngineApis?.()}
+                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 } = item;
+                  const { value, badgeStyle } = badgeSetting;
+                  const curOffset: any = bageOffset(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
+                        $$componentItem={props.$$componentItem}
+                        engineApis={getEngineApis?.()}
+                        popoverSetting={popoverSetting}
+                      >
+                        <Badge
+                          content={Badge.dot}
+                          style={{ ...cBadgeStyle, ...curOffset }}
+                        >
+                          {renderFloatingItemBtn({
+                            item,
+                            imgStyle,
+                            BtnIcon,
+                            btnStyle: curBtnStyle,
+                            shape,
+                            btnTextStyle,
+                            index,
+                          })}
+                        </Badge>
+                      </PopoverWrapper>
+                    );
+                  }
+                  if (value && badgeStyle === 'number') {
+                    return (
+                      <PopoverWrapper
+                        $$componentItem={props.$$componentItem}
+                        engineApis={getEngineApis?.()}
+                        popoverSetting={popoverSetting}
+                      >
+                        <Badge style={cBadgeStyle} content={value}>
+                          {renderFloatingItemBtn({
+                            item,
+                            imgStyle,
+                            BtnIcon,
+                            btnStyle: curBtnStyle,
+                            shape,
+                            btnTextStyle,
+                          })}
+                        </Badge>
+                      </PopoverWrapper>
+                    );
+                  }
+                  return (
+                    <PopoverWrapper
+                      $$componentItem={props.$$componentItem}
+                      engineApis={getEngineApis?.()}
+                      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 } = item;
+              const { value, badgeStyle } = badgeSetting;
+              if (value && badgeStyle === 'dot') {
+                return (
+                  <PopoverWrapper
+                    $$componentItem={props.$$componentItem}
+                    engineApis={getEngineApis?.()}
+                    popoverSetting={popoverSetting}
+                  >
+                    <Badge content={Badge.dot} style={cBadgeStyle}>
+                      {renderFloatingCircleItemBtn(item)}
+                    </Badge>
+                  </PopoverWrapper>
+                );
+              }
+              if (value && badgeStyle === 'number') {
+                return (
+                  <PopoverWrapper
+                    $$componentItem={props.$$componentItem}
+                    engineApis={getEngineApis?.()}
+                    popoverSetting={popoverSetting}
+                  >
+                    <Badge style={cBadgeStyle} content={value}>
+                      {renderFloatingCircleItemBtn(item)}
+                    </Badge>
+                  </PopoverWrapper>
+                );
+              }
+              return (
+                <PopoverWrapper
+                  $$componentItem={props.$$componentItem}
+                  engineApis={getEngineApis?.()}
+                  popoverSetting={popoverSetting}
+                >
+                  {renderFloatingCircleItemBtn(item)}
+                </PopoverWrapper>
+              );
+            })}
+          </Space>
+        );
+      }
+      if (mode === 'menubtn') {
+        return (
+          <Popover
+            className={`${prefixCls}-popover`}
+            trigger="click"
+            placement={placement}
+            content={menuBtnContent()}
+            onVisibleChange={(open) => {
+              setOpen(open);
+            }}
+          >
+            {menuBtn}
+          </Popover>
+        );
+      }
+      return renderBtn();
+    };
+    const floattingBtn = () => {
+      const cBadgeStyle = myBadgeStyle(badgeBg, badgeColor, badgeStyle);
+      if (badge && badgeStyle === 'dot' && showMark) {
+        return (
+          <Badge content={Badge.dot} style={cBadgeStyle}>
+            {btnContentView()}
+          </Badge>
+        );
+      }
+      if (badge && badgeStyle === 'number') {
+        return (
+          <Badge style={cBadgeStyle} content={badgeNumber}>
+            {btnContentView()}
+          </Badge>
+        );
+      }
+      return btnContentView();
+    };
+
+    useEffect(() => {
+      const handleMouseMove = (e: { clientX: number; clientY: number; }) => {
+        if (!dragging) return;
+        setPosition({
+          x: e.clientX - offset.current.x,
+          y: e.clientY - offset.current.y,
+        });
+      };
+
+      const handleTouchMove = (e:any) => {
+        if (!dragging || e.touches.length !== 1) return;
+        const touch = e.touches[0];
+        setPosition({
+          x: touch.clientX - offset.current.x,
+          y: touch.clientY - offset.current.y,
+        });
+      };
+
+      const stopDragging = () => setDragging(false);
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', stopDragging);
+      document.addEventListener('touchmove', handleTouchMove);
+      document.addEventListener('touchend', stopDragging);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', stopDragging);
+        document.removeEventListener('touchmove', handleTouchMove);
+        document.removeEventListener('touchend', stopDragging);
+      };
+    }, [dragging]);
+
+    const handleMouseDown = (e: { clientX: number; clientY: number; }) => {
+      const rect = (boxRef?.current as any).getBoundingClientRect();
+      offset.current = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      };
+      setDragging(true);
+    };
+
+    const handleTouchStart = (e: { touches: any[]; }) => {
+      const rect = (boxRef?.current as any).getBoundingClientRect();
+      const touch = e.touches[0];
+      offset.current = {
+        x: touch.clientX - rect.left,
+        y: touch.clientY - rect.top,
+      };
+      setDragging(true);
+    };
+
+    useEffect(() => {
+      getMyPosition();
+    }, []);
+
+    return (
+      <>
+        {visible ? (
+          <div
+            ref={boxRef}
+            {...restProps}
+            className={`${prefixCls}-wrapper`}
+            {...extendProps}
+            style={{
+              left: position.x,
+              top: position.y,
+              position: 'fixed',
+              userSelect: 'none',
+              touchAction: 'none', // 避免滚动干扰拖拽
+            }}
+            onMouseDown={handleMouseDown}
+            onTouchStart={(e) => { handleTouchStart(e as any); }}
+          >
+            {floattingBtn()}
+          </div>
+        ) : null}
+      </>
+    );
+  }
+);
+export default FloatingButton;