chore: 更新使用文档和配置

rancui · Oct 26, 2021 · e333e84 · e333e84
1 parent d7d4f1c
commit e333e84
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 58 deletions.
diff --git a/packages/rc-ui-lib/src/form/README.md b/packages/rc-ui-lib/src/form/README.md
@@ -304,7 +304,7 @@ export default () => {
 | showValidateMessage | 是否显示验证信息 | _boolean_ | `true` |
 | intro | 额外的提示信息 | _ReactNode_ | - |
 | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | _boolean_ | `false` |
-| tooltip | 字段提示信息 | _ReactNode \|_ [DialogProps & { icon: ReactNode }](/#/zh-CN/dialog#props) | - |
+| tooltip | 字段提示信息 | _ReactNode \|_ [DialogProps & { icon: ReactNode }](/#/zh-CN/dialog#props) |
 | customField | 自定义 item，此时不会渲染内置的 field，通常用于自定义表单项 | _boolean_ | `false` |
 | disabled | 是否禁用标单项 | _boolean_ | `false` |
 | labelClass | 左侧文本额外类名 | _any_ | - |

diff --git a/packages/rc-ui-lib/src/popup/Popup.tsx b/packages/rc-ui-lib/src/popup/Popup.tsx
@@ -258,6 +258,7 @@ const Popup = forwardRef<PopupInstanceType, PopupProps>((props, ref) => {
 });
 
 Popup.defaultProps = {
+  visible: false,
   zIndex: 2000,
   duration: 300,
   overlay: true,

diff --git a/packages/rc-ui-lib/src/popup/README.md b/packages/rc-ui-lib/src/popup/README.md
@@ -103,7 +103,7 @@ const [showPopup, setShowPopup] = useState(false);
 | closeIcon | 关闭图标名称或图片链接 | _string_ | `cross` |
 | closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | - |
-| teleport | 指定挂载的节点 | _HTMLElement | (() => HTMLElement)_ | - |
+| teleport | 指定挂载的节点 | _HTMLElement_ | _(() => HTMLElement)_ |
 | safeAreaInsetBottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 
 ### Events
@@ -118,7 +118,6 @@ const [showPopup, setShowPopup] = useState(false);
 | onOpened         | 打开弹出层且动画结束后触发 | -              |
 | onClosed         | 关闭弹出层且动画结束后触发 | -              |
 
-
 ### 类型定义
 
 组件导出以下类型定义：
@@ -133,13 +132,13 @@ import type { PopupPosition, PopupCloseIconPosition } from 'rc-ui-lib';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称 | 默认值 | 描述 |
-| --- | --- | --- |
-| --rc-popup-background-color | _var(--rc-white)_ | - |
-| --rc-popup-transition | _transform var(--rc-animation-duration-base)_ | - |
-| --rc-popup-round-border-radius | _16px_ | - |
-| --rc-popup-close-icon-size | _22px_ | - |
-| --rc-popup-close-icon-color | _var(--rc-gray-5)_ | - |
-| --rc-popup-close-icon-active-color | _var(--rc-gray-6)_ | - |
-| --rc-popup-close-icon-margin | _16px_ | - |
-| --rc-popup-close-icon-z-index | _1_ | - |
+| 名称                               | 默认值                                        | 描述 |
+| ---------------------------------- | --------------------------------------------- | ---- |
+| --rc-popup-background-color        | _var(--rc-white)_                             | -    |
+| --rc-popup-transition              | _transform var(--rc-animation-duration-base)_ | -    |
+| --rc-popup-round-border-radius     | _16px_                                        | -    |
+| --rc-popup-close-icon-size         | _22px_                                        | -    |
+| --rc-popup-close-icon-color        | _var(--rc-gray-5)_                            | -    |
+| --rc-popup-close-icon-active-color | _var(--rc-gray-6)_                            | -    |
+| --rc-popup-close-icon-margin       | _16px_                                        | -    |
+| --rc-popup-close-icon-z-index      | _1_                                           | -    |
diff --git a/packages/rc-ui-lib/src/popup/__test__/index.spec.tsx b/packages/rc-ui-lib/src/popup/__test__/index.spec.tsx
@@ -3,95 +3,90 @@ import { mount } from 'enzyme';
 import { Popup } from '..';
 
 describe('Popup', () => {
-  it('should lazy render content by default', async () => {
-    const wrapper = mount(
-      <Popup>
-        <div className="foo" />
-      </Popup>,
-    );
-    expect(wrapper.find('.foo').exists()).toBeFalsy();
-    await wrapper.setProps({ visible: true });
-    expect(wrapper.find('.foo').exists()).toBeTruthy();
+  let wrapper;
+  afterEach(() => {
+    wrapper.unmount();
   });
+
   it('should change z-index when using z-index prop', async () => {
-    const wrapper = mount(
-      // <Popup visible zIndex={10} />);
-      <Popup visible style={{ zIndex: 10 }} />,
-    );
+    wrapper = mount(<Popup visible style={{ zIndex: 10 }} />);
     expect(wrapper.find('.rc-popup').getDOMNode().style.zIndex).toEqual('10');
     expect(wrapper.find('.rc-overlay').getDOMNode().style.zIndex).toEqual('10');
   });
 
-  // it('should lock scroll when visibled', async () => {
-  //   const wrapper = mount(<Popup />);
-  //   expect(document.body.classList.contains('rc-overflow-hidden')).toBeFalsy();
-  //   await wrapper.setProps({ visible: true });
-  //   expect(document.body.classList.contains('rc-overflow-hidden')).toBeTruthy();
-  // });
+  it('should lock scroll when visibled', async () => {
+    wrapper = mount(<Popup />);
+    console.log(
+      '=======rc-overflow-hidden=======',
+      document.body.classList.contains('rc-overflow-hidden'),
+    );
+    expect(document.body.classList.contains('rc-overflow-hidden')).toBeFalsy();
+    await wrapper.setProps({ visible: true });
+    expect(document.body.classList.contains('rc-overflow-hidden')).toBeTruthy();
+  });
 
   it('should allow to using teleport prop', async () => {
     const div = document.createElement('div');
-    mount(<Popup visible teleport={div} />);
+    wrapper = mount(<Popup visible teleport={div} />);
 
     expect(div.querySelector('.rc-popup')).toBeTruthy();
   });
 
   it('should render overlay by default', () => {
-    const wrapper = mount(<Popup visible />);
-    expect(wrapper.find('.rc-overlay').exists()).toBeTruthy();
+    wrapper = mount(<Popup visible />);
+    expect(wrapper.find('.rc-overlay')).toBeTruthy();
   });
 
   it('should not render overlay when overlay prop is false', () => {
-    const wrapper = mount(<Popup visible overlay={false} />);
-    expect(wrapper.hasClass('rc-overlay'));
+    wrapper = mount(<Popup visible overlay={false} />);
+    expect(wrapper.hasClass('rc-overlay')).toBeFalsy();
   });
   it('should emit click-overlay event when overlay is clicked', async () => {
     const onClickOverlay = jest.fn();
-    const wrapper = mount(<Popup visible onClickOverlay={onClickOverlay} />);
+    wrapper = mount(<Popup visible onClickOverlay={onClickOverlay} />);
     const overlay = wrapper.find('.rc-overlay');
     overlay.simulate('click');
     expect(onClickOverlay).toHaveBeenCalled();
   });
 
   it('should emit open event when visible prop is set to true', async () => {
     const onOpen = jest.fn();
-    const wrapper = mount(<Popup visible={false} onOpen={onOpen} />);
+    wrapper = mount(<Popup visible={false} onOpen={onOpen} />);
     await wrapper.setProps({ visible: true });
     expect(onOpen).toHaveBeenCalledTimes(1);
   });
 
   it('should emit close event when visible prop is set to false', async () => {
     const onClickOverlay = jest.fn();
     const onClose = jest.fn();
-    const wrapper = mount(<Popup visible onClickOverlay={onClickOverlay} onClose={onClose} />);
+    wrapper = mount(<Popup visible onClickOverlay={onClickOverlay} onClose={onClose} />);
     const overlay = wrapper.find('.rc-overlay');
     await overlay.simulate('click');
     wrapper.setProps({ visible: false });
     expect(onClose).toHaveBeenCalled();
   });
 
   it('should change duration when using duration prop', () => {
-    const wrapper = mount(<Popup visible duration={500} />);
+    wrapper = mount(<Popup visible duration={500} />);
     const popup = wrapper.find('.rc-popup');
     const overlay = wrapper.find('.rc-overlay');
     expect(popup.getDOMNode().style.animationDuration).toEqual('500ms');
     expect(overlay.getDOMNode().style.animationDuration).toEqual('500ms');
   });
 
   it('should have "rc-popup--round" class when setting the round prop', () => {
-    const wrapper = mount(<Popup visible round />);
-
+    wrapper = mount(<Popup visible round />);
     expect(wrapper.find('.rc-popup--round').exists()).toBeTruthy();
   });
 
   it('should render close icon when using closeable prop', () => {
-    const wrapper = mount(<Popup visible closeable />);
+    wrapper = mount(<Popup visible closeable />);
     expect(wrapper.find('.rc-popup__close-icon').exists()).toBeTruthy();
   });
 
   it('should emit click-close-icon event when close icon is clicked', async () => {
     const onClickCloseIcon = jest.fn();
-    const wrapper = mount(
+    wrapper = mount(
       <Popup visible closeable closeIcon="success" onClickCloseIcon={onClickCloseIcon} />,
     );
     const icon = wrapper.find('.rc-popup__close-icon').at(0);
@@ -100,32 +95,31 @@ describe('Popup', () => {
   });
 
   it('should render correct close icon when using close-icon prop', () => {
-    const wrapper = mount(<Popup visible closeable closeIcon="success" />);
+    wrapper = mount(<Popup visible closeable closeIcon="success" />);
     expect(wrapper.find('.rc-popup__close-icon')).toMatchSnapshot();
   });
 
   it('should change icon class prefix when using icon-prefix prop', () => {
-    const wrapper = mount(<Popup visible closeable iconPrefix="my-icon" />);
-
+    wrapper = mount(<Popup visible closeable iconPrefix="my-icon" />);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it('should allow to prevent close with before-close prop', async () => {
     const onClickOverlay = jest.fn();
-    const www = mount(<Popup visible beforeClose={() => false} onClickOverlay={onClickOverlay} />);
+    wrapper = mount(<Popup visible beforeClose={() => false} onClickOverlay={onClickOverlay} />);
 
-    const overlay = www.find('.rc-overlay');
+    const overlay = wrapper.find('.rc-overlay');
     overlay.simulate('click');
     expect(overlay).toBeTruthy();
 
-    await www.setProps({ beforeClose: () => true });
+    await wrapper.setProps({ beforeClose: () => true });
     overlay.simulate('click');
     expect(overlay.exists());
   });
 
   it('should not call before-close when visible prop becomes false', async () => {
     const beforeClose = jest.fn();
-    const wrapper = mount(<Popup visible beforeClose={beforeClose} />);
+    wrapper = mount(<Popup visible beforeClose={beforeClose} />);
     await wrapper.setProps({ visible: false });
     expect(beforeClose).toHaveBeenCalledTimes(0);
   });

diff --git a/packages/rc-ui-lib/src/slider/README.md b/packages/rc-ui-lib/src/slider/README.md
@@ -100,8 +100,8 @@ export default () => {
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
-| value | 当前进度百分比，在双滑块模式下为数组格式 | \_number | [number, number]\_ | `0` |
+| --- | --- | --- | --- |
+| value | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
 | max | 最大值 | _number \| string_ | `100` |
 | min | 最小值 | _number \| string_ | `0` |
 | step | 步长 | _number \| string_ | `1` |

diff --git a/packages/rc-ui-lib/vant.config.js b/packages/rc-ui-lib/vant.config.js
@@ -207,10 +207,10 @@ module.exports = {
                 path: 'share-sheet',
                 title: 'ShareSheet 分享面板',
               },
-              {
-                path: 'swipe-cell',
-                title: 'SwipeCell 滑动单元格',
-              },
+              // {
+              //   path: 'swipe-cell',
+              //   title: 'SwipeCell 滑动单元格',
+              // },
             ],
           },
           {