@ohkit/text-ellipsis 0.0.2-alpha.2 → 0.0.2-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohkit/text-ellipsis",
-  "version": "0.0.2-alpha.2",
+  "version": "0.0.2-alpha.4",
   "description": "text ellipsis for react",
   "keywords": [
     "text ellipsis"
@@ -17,10 +17,6 @@
     "dist": "dist",
     "test": "__tests__"
   },
-  "files": [
-    "dist",
-    "src"
-  ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -47,5 +43,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "3cc0218255596be85e949ba5fc1d91ed57dd40cf"
+  "gitHead": "8ac135fcd546178414824efd94cf46eb961fb065"
 }

package/src/__test__/data.tsx

@@ -1,42 +0,0 @@
-/**
- * @description: 测试数据
- */
-
-export const text =
-  "改变文本容器宽度看看效果\n" +
-  "测试文本也可以是reactDom测试文本也可以是reactDom测试文本也可以是reactDom\n" +
-  "测试文本也可以是reactDom测试文本也可以是reactDom测试文本也可以是reactDom\n" +
-  "测试文本也可以是reactDom测试文本也可以是reactDom测试文本也可以是reactDom\n" +
-  "测试文本也可以是reactDom测试文本也可以是reactDom测试文本也可以是reactDom";
-
-export const element = (
-  <article>
-    <aside>一篇富文本文章 导航</aside>
-    <h1>大标题</h1>
-    <p>{text}</p>
-    <div>
-      <img width="160" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
-    </div>
-    <div>
-      <table>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>2</td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>4</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <h3>三级标题</h3>
-    <ul>
-      <li>12 <a href="https://www.baidu.com">百度一下</a></li>
-      <li>34</li>
-      <li>56</li>
-      <li>78</li>
-    </ul>
-  </article>
-);

package/src/index.stories.tsx

@@ -1,149 +0,0 @@
-import {useState, useCallback} from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, Tooltip, Popover } from 'antd';
-import { DownOutlined, UpOutlined } from '@ant-design/icons';
-
-import { TextEllipsis, TextEllipsisProps } from '.';
-import { text, element } from './__test__/data';
-
-const meta = {
-  // title: 'Components/TextEllipsis',
-  component: TextEllipsis,
-  tags: ['autodocs'],
-} satisfies Meta<typeof TextEllipsis>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Right: Story = {
-  args: {
-    lines: 2,
-    content: text,
-  }
-};
-export const RightCustom: Story = {
-  args: {
-    lines: 2,
-    content: text,
-    showTitleWhenFold: true,
-    renderFoldButton: (fold) => {
-      return <Button
-        size='small'
-        type='link'
-        color='primary'
-        iconPosition='end'
-        icon={fold ? <DownOutlined /> : <UpOutlined />}
-      >
-        自定义{fold ? '展开' : '收起'}
-      </Button>;
-    }
-  }
-};
-
-export const Bottom: Story = {
-  args: {
-    lines: 2,
-    uiType: 'bottom',
-    showTitleWhenFold: true,
-    titleWhenFold: '如果太长了hover我也就不展示全了，可自定义title文案',
-    content: text,
-    lineHeight: '22px',
-  }
-};
-
-export const RichText: Story = {
-  args: {
-    lines: 7,
-    uiType: 'bottom',
-    content: element,
-  }
-};
-
-export const CustomWithTooltip: Story = {
-  render: (args) => {
-    const [visible, setVisible] = useState(false);
-    const [title, setTitle] = useState('');
-    const handleVisibleChange = useCallback((newVisible: boolean) => {
-      console.log('handleVisibleChange newVisible', newVisible);
-      setVisible(newVisible);
-    }, []);
-    const handleStatusChange = useCallback<NonNullable<TextEllipsisProps['onStatusChange']>>((status) => {
-      console.log('触发了 onStatusChange 回调', status);
-      const {ellipsis, fold, title} = status;
-      if (ellipsis && fold && title) {
-        setTitle(title);
-      } else {
-        setTitle('');
-        setVisible(false);
-      }
-    }, []);
-    return (
-      <Tooltip
-        title={<div style={{maxHeight: 350, overflowY: 'auto'}}>{title}</div>}
-        open={visible}
-        onOpenChange={title ? handleVisibleChange : undefined}
-        placement='bottomRight'
-        mouseEnterDelay={0.3}
-      >
-        <TextEllipsis {...args} onStatusChange={handleStatusChange} />
-      </Tooltip>
-    )
-  },
-  args: {
-    lines: 2,
-    uiType: 'right',
-    content: '适合不是特别长的文本，太长出滚动条比较丑:\n' + text,
-    lineHeight: '22px',
-    onFoldChange: (fold) => {
-      console.log('触发了 onFoldChange 回调 fold', fold);
-    },
-    onEllipsisChange: (ellipsis) => {
-      console.log('触发了 onEllipsisChange 回调 ellipsis', ellipsis);
-    },
-  }
-};
-
-export const CustomWithPopover: Story = {
-  render: (args) => {
-    const [visible, setVisible] = useState(false);
-    const [title, setTitle] = useState('');
-    const handleVisibleChange = useCallback((newVisible: boolean) => {
-      setVisible(newVisible);
-    }, []);
-    const handleStatusChange = useCallback<NonNullable<TextEllipsisProps['onStatusChange']>>((status) => {
-      console.log('触发了 onStatusChange 回调', status);
-      const {ellipsis, fold, title} = status;
-      if (ellipsis && fold && title) {
-        setTitle(title);
-      } else {
-        setTitle('');
-        setVisible(false);
-      }
-    }, []);
-    return (
-      <Popover
-        title={<div style={{maxHeight: 300, maxWidth: 400, overflowY: 'auto'}}>{title}</div>}
-        open={visible}
-        onOpenChange={title ? handleVisibleChange : undefined}
-        placement='bottomRight'
-        mouseEnterDelay={0.3}
-      >
-        <TextEllipsis {...args} onStatusChange={handleStatusChange} />
-      </Popover>
-    )
-  },
-  args: {
-    lines: 2,
-    uiType: 'right',
-    showFoldControl: false,
-    content: '适合超长文本，出滚动条:\n' + text + text + text,
-    lineHeight: '22px',
-    onFoldChange: (fold) => {
-      console.log('触发了 onFoldChange 回调 fold', fold);
-    },
-    onEllipsisChange: (ellipsis) => {
-      console.log('触发了 onEllipsisChange 回调 ellipsis', ellipsis);
-    },
-  }
-};