lobe-chat

1
import { ActionIcon } from '@lobehub/ui';
2
import { ConfigProvider, Popover, TooltipProps } from 'antd';
3
import { createStyles, useTheme } from 'antd-style';
4
import { XIcon } from 'lucide-react';
5
import { CSSProperties, type FC, type ReactNode } from 'react';
6
import { Flexbox } from 'react-layout-kit';
7

8
const useStyle = createStyles(({ css }) => {
9
  return {
10
    close: css`
11
      color: white;
12
    `,
13
    container: css`
14
      position: relative;
15
    `,
16
    footer: css`
17
      display: flex;
18
      justify-content: end;
19
      width: 100%;
20
    `,
21
    overlay: css`
22
      .ant-popover-inner {
23
        border: none;
24
      }
25
    `,
26
    tip: css`
27
      position: absolute;
28
      inset-inline-start: 50%;
29
      transform: translate(-50%);
30
    `,
31
  };
32
});
33

34
export interface TipGuideProps {
35
  /**
36
   * 引导内容
37
   */
38
  children?: ReactNode;
39
  /**
40
   * 类名
41
   */
42
  className?: string;
43
  /**
44
   * 默认时候的打开状态
45
   */
46
  defaultOpen?: boolean;
47
  /**
48
   * 用于自定义 footer 部分的 render api
49
   */
50
  footerRender?: (dom: ReactNode) => ReactNode;
51
  /**
52
   * 最大宽度
53
   */
54
  maxWidth?: number;
55
  /**
56
   * 纵向偏移值
57
   */
58
  offsetY?: number;
59
  /**
60
   * 当 open 属性变化时候的触发
61
   */
62
  onOpenChange: (open: boolean) => void;
63
  /**
64
   * 受控的 open 属性
65
   */
66
  open?: boolean;
67
  /**
68
   * Tooltip 位置，默认为 bottom
69
   */
70
  placement?: TooltipProps['placement'];
71
  /**
72
   * style
73
   */
74
  style?: CSSProperties;
75
  tip?: boolean;
76
  /**
77
   * 引导标题
78
   */
79
  title: string;
80
}
81

82
const TipGuide: FC<TipGuideProps> = ({
83
  children,
84
  placement = 'bottom',
85
  title,
86
  offsetY,
87
  maxWidth = 300,
88
  className,
89
  style,
90
  open,
91
  onOpenChange: setOpen,
92
}) => {
93
  const token = useTheme();
94
  const { styles, cx } = useStyle();
95

96
  return (
97
    <ConfigProvider
98
      theme={{
99
        components: {
100
          Badge: { fontSize: 12, lineHeight: 1 },
101
          Button: { colorPrimary: token.blue7 },
102
          Checkbox: {
103
            colorPrimary: token.blue7,
104
            colorText: token.colorTextLightSolid,
105
          },
106
          Popover: { colorText: token.colorTextLightSolid },
107
        },
108
      }}
109
    >
110
      {open ? (
111
        <div className={styles.container}>
112
          <div
113
            style={{
114
              marginTop: offsetY,
115
            }}
116
          >
117
            <Popover
118
              arrow={{ pointAtCenter: true }}
119
              color={'blue'}
120
              content={
121
                <Flexbox gap={24} horizontal style={{ userSelect: 'none' }}>
122
                  <div>{title}</div>
123
                  <ActionIcon
124
                    className={styles.close}
125
                    icon={XIcon}
126
                    onClick={() => {
127
                      setOpen(false);
128
                    }}
129
                    size={'small'}
130
                  />
131
                </Flexbox>
132
              }
133
              open={open}
134
              overlayClassName={cx(className, styles.overlay)}
135
              overlayStyle={{ maxWidth, zIndex: 1000, ...style }}
136
              placement={placement}
137
              trigger="hover"
138
            >
139
              {children}
140
            </Popover>
141
          </div>
142
        </div>
143
      ) : (
144
        children
145
      )}
146
    </ConfigProvider>
147
  );
148
};
149

150
export default TipGuide;
151