fix(text): remove text tooltip (#1621)

* docs(story): add storybook * fix(text): fix text ts and upload css Co-authored-by: zhujiahong <zhujiahong@growingio.com>
growingio · Dec 6, 2021 · 4938202 · 4938202 · vercel · Dec 6, 2021
1 parent af39027
commit 4938202
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 94 deletions.
diff --git a/src/dropdown/demos/Dropdown.stories.tsx b/src/dropdown/demos/Dropdown.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import {
   DownloadOutlined,
@@ -19,6 +19,7 @@ import Button from '../../button';
 import List, { Item } from '../../list';
 import Divider from '../../divider';
 import CascaderItem from '../../list/inner/CascaderItem';
+import { PopConfirm, Tooltip } from '../..';
 
 export default {
   title: 'Upgraded/Dropdown',
@@ -35,67 +36,97 @@ export default {
   },
 } as Meta;
 
-export const Demo = () => (
-  <>
-    <h3>Use Case -1看板中“更多”按钮</h3>
-    <Dropdown
-      content={
-        <List>
-          <Item prefix={<ReloadOutlined size="14px" />} value="1">
-            刷新数据
-          </Item>
-          <Item prefix={<FullScreenOutlined size="14px" />} value="2">
-            进入全屏
-          </Item>
-          <Item prefix={<DownloadOutlined size="14px" />} value="3">
-            下载PDF
-          </Item>
-          <Item prefix={<DownloadOutlined size="14px" />} value="4">
-            下载图片
-          </Item>
-          <Item prefix={<PinOutlined size="14px" />} value="5">
-            取消订阅
-          </Item>
-          <Item prefix={<DeleteOutlined size="14px" />} value="6">
-            删除看板
-          </Item>
-          <Divider style={{ margin: '0 0 4px' }} />
-          <CascaderItem label="邮件推送" value="4" prefix={<EmailOutlined size="14px" />}>
-            <List>
-              <Item value="4-1" label="创建邮件推送" prefix={<PlusOutlined size="14px" />} />
-              <Item value="4-1" label="邮件推送管理" prefix={<SettingOutlined size="14px" />} />
-            </List>
-          </CascaderItem>
-        </List>
-      }
-      placement="bottomLeft"
-    >
-      <Button type="secondary" prefix={<MoreHorizonalOutlined />}>
-        更多
-      </Button>
-    </Dropdown>
-    <h3>Use Case -2列表/卡片中的操作菜单</h3>
-    <Dropdown
-      content={
-        <List>
-          <Item prefix={<ReloadOutlined size="14px" />} value="1">
-            添加到看板
-          </Item>
-          <Item prefix={<FullScreenOutlined size="14px" />} value="2">
-            编辑
-          </Item>
-          <Item prefix={<DownloadOutlined size="14px" />} value="3">
-            删除
-          </Item>
-        </List>
-      }
-    >
-      <Button.IconButton type="secondary">
-        <MoreOutlined />
-      </Button.IconButton>
-    </Dropdown>
-  </>
-);
+export const Demo = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <h3>Use Case -1看板中“更多”按钮</h3>
+      <Dropdown
+        content={
+          <List>
+            <Item prefix={<ReloadOutlined size="14px" />} value="1">
+              刷新数据
+            </Item>
+            <Item prefix={<FullScreenOutlined size="14px" />} value="2">
+              进入全屏
+            </Item>
+            <Item prefix={<DownloadOutlined size="14px" />} value="3">
+              下载PDF
+            </Item>
+            <Item prefix={<DownloadOutlined size="14px" />} value="4">
+              下载图片
+            </Item>
+            <Item prefix={<PinOutlined size="14px" />} value="5">
+              取消订阅
+            </Item>
+            <Item prefix={<DeleteOutlined size="14px" />} value="6">
+              删除看板
+            </Item>
+            <Divider style={{ margin: '0 0 4px' }} />
+            <CascaderItem label="邮件推送" value="4" prefix={<EmailOutlined size="14px" />}>
+              <List>
+                <Item value="4-1" label="创建邮件推送" prefix={<PlusOutlined size="14px" />} />
+                <Item value="4-1" label="邮件推送管理" prefix={<SettingOutlined size="14px" />} />
+              </List>
+            </CascaderItem>
+          </List>
+        }
+        placement="bottomLeft"
+      >
+        <Button type="secondary" prefix={<MoreHorizonalOutlined />}>
+          更多
+        </Button>
+      </Dropdown>
+      <h3>Use Case -2列表/卡片中的操作菜单</h3>
+      <Dropdown
+        visible={visible}
+        onVisibleChange={(e) => setVisible(e)}
+        content={
+          <List>
+            <Item
+              prefix={<ReloadOutlined size="14px" />}
+              value="1"
+              onClick={() => {
+                console.log('tttt');
+                setVisible(false);
+              }}
+            >
+              添加到看板
+            </Item>
+            <Item prefix={<FullScreenOutlined size="14px" />} value="2" onClick={() => setVisible(false)}>
+              编辑
+            </Item>
+            <PopConfirm
+              title={123 as any}
+              desc={321 as any}
+              trigger="click"
+              placement="top"
+              onConfirm={() => setVisible(false)}
+              onCancel={() => setVisible(false)}
+              getContainer={() => document.body}
+              overlayStyle={{ zIndex: 1060 }}
+              okText="确认"
+              cancelText="取消"
+              onVisibleChange={() => console.log('visible')}
+            >
+              <Tooltip title="111">
+                <span>
+                  <Item prefix={<DownloadOutlined size="14px" />} value="3">
+                    删除
+                  </Item>
+                </span>
+              </Tooltip>
+            </PopConfirm>
+          </List>
+        }
+      >
+        <Button.IconButton type="secondary">
+          <MoreOutlined />
+        </Button.IconButton>
+      </Dropdown>
+    </>
+  );
+};
 const Template: Story<DropdownProps> = (args) => <Dropdown {...args} />;
 export const Default = Template.bind({});
 Default.args = {

diff --git a/src/loading/demos/Loading.stories.tsx b/src/loading/demos/Loading.stories.tsx
@@ -55,6 +55,7 @@ Default.args = {
   loading: true,
   titlePosition: 'right',
   autoCenter: true,
+  title: '123',
 };
 
 export const Container = Template.bind({});
@@ -143,6 +144,12 @@ export const Demo = () => (
           <Loading indicator={<LoadingOutlined rotating />} />
         </td>
       </tr>
+      <tr>
+        <td>title</td>
+        <td>
+          <Loading title="title" />
+        </td>
+      </tr>
     </table>
   </>
 );

diff --git a/src/tooltip/demos/Tooltip.stories.tsx b/src/tooltip/demos/Tooltip.stories.tsx
@@ -7,6 +7,7 @@ import { Button } from '../../button';
 import '../style';
 import '../../popover/demos/demo.stories.less';
 import Docs from './TooltipPage';
+import { PopConfirm } from '../..';
 
 export default {
   title: 'Upgraded/Tooltip',
@@ -257,3 +258,23 @@ export const Disabled = () => (
     </Tooltip>
   </div>
 );
+
+export const Demo = () => (
+  <>
+    <Tooltip>
+      <PopConfirm
+        title={123 as any}
+        desc={321 as any}
+        trigger="click"
+        placement="top"
+        // onConfirm={this.handleSelect(item)}
+        // onCancel={this.handleConfirmCancel}
+        overlayStyle={{ zIndex: 1060 }}
+        okText="确认"
+        cancelText="取消"
+      >
+        删除
+      </PopConfirm>
+    </Tooltip>
+  </>
+);
diff --git a/src/typography/demos/Text.stories.tsx b/src/typography/demos/Text.stories.tsx
@@ -50,6 +50,7 @@ export const Styles = () => (
     <Text size="small" color="gray">
       Small Gray Text Paragraph
     </Text>
+    <Text />
   </>
 );
 

diff --git a/src/typography/demos/TextPage.tsx b/src/typography/demos/TextPage.tsx
@@ -10,6 +10,12 @@ export default function TextPage() {
     <>
       <Title>{formatMessage({ defaultMessage: 'Text 文本' })}</Title>
       <p>{formatMessage({ defaultMessage: '文本的基本格式。' })}</p>
+      <p>Upgrading Guide</p>
+      <ul>
+        <li>去除了外层的tooltip，改为title属性</li>
+        <li>内容只接收string</li>
+        <li>children接受空值，默认为‘‘</li>
+      </ul>
       <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
       <Subheading>{formatMessage({ defaultMessage: '单行样式' })}</Subheading>
       <Canvas>

diff --git a/src/typography/interfaces.ts b/src/typography/interfaces.ts
@@ -1,12 +1,11 @@
 import { CommonProps } from '@gio-design/utils';
 import React from 'react';
-import { TooltipProps } from '../tooltip';
 
 export interface TextProps extends CommonProps {
   /**
    * The text you want to clamp.
    */
-  children: React.ReactNode;
+  children?: string;
   /**
    * The color of text
    * @default `inherit`
@@ -20,10 +19,6 @@ export interface TextProps extends CommonProps {
    * The font size of text
    */
   size?: 'small' | 'middle' | 'large';
-  /**
-   * Show tooltip when clamp text
-   */
-  tooltip?: Pick<TooltipProps, 'placement'>;
   /**
    * Trim right the clamped text to avoid putting the ellipsis on an empty line.
    */

diff --git a/src/typography/text.tsx b/src/typography/text.tsx
@@ -4,25 +4,20 @@ import classnames from 'classnames';
 import InnerLinesEllipsis from 'react-lines-ellipsis';
 import responsiveHOC from 'react-lines-ellipsis/lib/responsiveHOC';
 import type { TextProps } from './interfaces';
-import Tooltip from '../tooltip';
 
 export { TextProps };
 const LinesEllipsis = responsiveHOC()(InnerLinesEllipsis);
 
 function Text({
-  children,
+  children = '',
   className,
   color = 'inherit',
   lines = 1,
   size: customizeSize,
-  tooltip,
   trimRight = true,
   style,
 }: TextProps) {
   const prefixCls = usePrefixCls('text');
-  const ref = React.useRef<{ isClamped: () => boolean }>(null);
-  const [clamped, setClamped] = React.useState(false);
-
   const mergedSize = customizeSize;
   const cls = classnames(
     prefixCls,
@@ -32,31 +27,17 @@ function Text({
     className
   );
 
-  React.useEffect(() => {
-    setClamped(ref.current ? ref.current.isClamped() : false);
-  }, []);
-
-  const linesNode = (
+  return (
     <LinesEllipsis
-      innerRef={ref}
       className={cls}
       style={{ '--color': color, ...style }}
       maxLine={lines}
       text={children}
       trimRight={trimRight}
+      title={children}
       ellipsis="..."
     />
   );
-
-  if (clamped) {
-    return (
-      <Tooltip {...tooltip} overlay={children}>
-        {linesNode}
-      </Tooltip>
-    );
-  }
-
-  return linesNode;
 }
 
 export default Text;
diff --git a/src/upload/UploadList.tsx b/src/upload/UploadList.tsx
@@ -31,12 +31,13 @@ const UploadList = (props: IUploadListProps<IUploadProps>) => {
         <div className={`${prefixCls}-file-list-item`} key={file.uid}>
           <Text className={`${prefixCls}-file-name`}>{file.name}</Text>
           {file.status === STATUS_SUCCESS && (
-            <Text className={`${prefixCls}-file-success`}>
-              {name}
-              {uploadSuccess}!
+            <Text className={`${prefixCls}-file-success`}>{`${name}${uploadSuccess}!`}</Text>
+          )}
+          {file.status === STATUS_ERROR && (
+            <Text className={`${prefixCls}-file-error`} style={{ width: '100px' }}>
+              {file.errorMessage as string}
             </Text>
           )}
-          {file.status === STATUS_ERROR && <Text className={`${prefixCls}-file-error`}>{file.errorMessage}</Text>}
           <DeleteOutlined size="12px" className={`${prefixCls}-file-delete`} onClick={() => handleRemove(file)} />
         </div>
       ))}