Merge pull request alibaba-fusion#3983 from alibaba-fusion/feat/1.26

Feat/1.26
fusiongalaxy · Aug 30, 2022 · e2f288e · e2f288e
2 parents c59d797 + 8a23d51
commit e2f288e
Show file tree

Hide file tree

Showing 57 changed files with 1,551 additions and 171 deletions.
diff --git a/docs/badge/theme/index.jsx b/docs/badge/theme/index.jsx
@@ -76,7 +76,7 @@ class RenderBadge extends React.Component {
             </Demo>
             <Demo title={i18nMap.unreadText}>
                 <DemoGroup label={i18nMap.normal}>
-                    <Badge count={25} >
+                    <Badge showZero count={0} >
                         {
                             unreadTextChild
                         }

diff --git a/docs/dialog/index.md b/docs/dialog/index.md
@@ -69,6 +69,7 @@ API变化：
 | isFullScreen         | [v2废弃] 是否撑开页面。 v2 改用 overflowScroll                                                                                                                                                                                                    | Boolean             | false                                                                             |          |
 | shouldUpdatePosition | [v2废弃] 是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式                                                                                                                                                                                   | Boolean             | false                                                                             |          |
 | minMargin            | [v2废弃] 对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效                                                                                                                                                            | Number              | 40                                                                                |          |
+| noPadding            | 去除body内间距                                                                                                                                                                                                                              | Boolean             | false                                                                             | 1.26     |
 
 <!-- api-extra-start -->
 

diff --git a/docs/drawer/demo/basic.md b/docs/drawer/demo/basic.md
@@ -39,6 +39,7 @@ class Demo extends React.Component {
             <div>
                 <Button type="primary" onClick={this.onOpen}> open </Button>
                 <Drawer
+                    v2
                     title="标题"
                     placement="right"
                     visible={this.state.visible}

diff --git a/docs/drawer/demo/double.md b/docs/drawer/demo/double.md
@@ -50,9 +50,9 @@ class App extends React.Component {
           Open drawer
         </Button>
         <Drawer
+            v2
             title="Multi-level drawer"
             width={520}
-            closeMode={'mask'}
             onClose={this.onClose}
             visible={this.state.visible}
         >
@@ -63,9 +63,9 @@ class App extends React.Component {
             <div style={{ marginBottom: 40}}>底部的内容</div>
 
             <Drawer
+                v2
                 title="Two-level Drawer"
                 width={320}
-                closeMode={'mask'}
                 onClose={this.onChildrenDrawerClose}
                 visible={this.state.childrenDrawer}
             >

diff --git a/docs/drawer/demo/placement.md b/docs/drawer/demo/placement.md
@@ -53,6 +53,7 @@ class Demo extends React.Component {
                 <br/>
                 <Button type="primary" onClick={this.onOpen}> open </Button>
                 <Drawer
+                    v2
                     title="标题"
                     visible={this.state.visible}
                     placement={this.state.placement}

diff --git a/docs/drawer/demo/quick.md b/docs/drawer/demo/quick.md
@@ -0,0 +1,36 @@
+# 快捷调用
+
+- order: 6
+
+快捷调用
+
+:::lang=en-us
+# Quick
+
+- order: 0
+
+First drawer
+:::
+---
+
+````jsx
+import { Button, Drawer } from '@alifd/next';
+
+let instance = null;
+const show = () => {
+    instance = Drawer.show({
+        title: 'quick',
+        hasMask: false,
+        content: <span>hello world</span>
+    })
+}
+const hide = () => {
+    instance && instance.hide();
+    instance = null;
+}
+
+ReactDOM.render(<div>
+    <Button type="primary" onClick={show}> open </Button>
+    <Button onClick={hide} style={{marginLeft: 8}}> close </Button>
+</div>, mountNode);
+````
diff --git a/docs/drawer/demo/size.md b/docs/drawer/demo/size.md
@@ -0,0 +1,56 @@
+# 宽高
+
+- order: 5
+
+可以通过 width 设置容器宽度，或者设置 width=auto 自适应内容宽度
+
+:::lang=en-us
+# Size
+
+- order: 0
+
+First drawer
+:::
+---
+
+````jsx
+import { useState } from 'react';
+import { Button, Drawer } from '@alifd/next';
+
+const Demo = () => {
+    const [visible, setVisible] = useState(false);
+    const [visible2, setVisible2] = useState(false);
+    const [width, setWidth] = useState(200);
+
+    return (
+        <div>
+            <Button type="primary" onClick={setVisible}> fixed 700 </Button>
+            <Drawer
+                v2
+                width={700}
+                title="set width to 700"
+                placement="right"
+                visible={visible}
+                onClose={() => setVisible(false)}>
+                Start your business here by searching a popular product
+            </Drawer>
+            <Button type="primary" onClick={setVisible2} style={{marginLeft: 8}}> auto width</Button>
+            <Drawer
+                v2
+                width="auto"
+                title="auto width"
+                placement="right"
+                visible={visible2}
+                onClose={() => setVisible2(false)}>
+                <div style={{width: width}}>
+                    Start your business here by searching a popular product
+                    <br/><br/>
+                    <Button type="primary" onClick={() => setWidth(width + 100)}>larger width</Button>
+                </div>
+            </Drawer>
+        </div>
+    );
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
diff --git a/docs/drawer/index.en-us.md b/docs/drawer/index.en-us.md
@@ -13,6 +13,15 @@
 
 The Drawer is used to provide the user with an auxiliary window for quickly performing a simple operation, confirming user information, or providing a feedback prompt without leaving the main path.
 
+### `v2` update
+
+version 1.25 add api `v2` to support open new version Dialog, feature as list:
+
+feature：
+
+-   use css (not js) to compute position, will easier 
+-   support `width/height` to fix width/height of drawer, or you can set `auto` to follow content width/height
+
 ## API
 
 ### Drawer
@@ -30,6 +39,22 @@ The Drawer is used to provide the user with an auxiliary window for quickly perf
 | closeMode            | [recommand]controls how the dialog is closed. The value can be either a String or Array:<br>**close** clicking the close button can close the dialog <br>**mask** clicking the mask can close the dialog <br>**esc** pressing the esc key can close the dialog <br> for example 'close' or ['close','esc','mask']                                                  | Array&lt;Enum>/Enum | -                                                                                 |
 | onVisibleChange       | callback function triggered when the ovlery is visible or hidden<br><br>**signatures**:<br>Function(visible: Boolean, type: String, e: Object) => void<br>**params**:<br>_visible_: {Boolean} whether the overlay is visible<br>_type_: {String} the reason that triggers the overlay to show or hide<br>_e_: {Object} DOM event | Function     | func.noop       |
 | placement       | placement of the drawer <br><br>**options**:<br>'top', 'right', 'bottom', 'left'                                                                                                                                                                                     | Enum           | 'right' |
+| v2          |  v2 version | Boolean             | -                                          |      |
+| afterClose  | [v2] callback after Drawer close <br/><br/>**signatures**:<br/>Function() => void | Function | - |      |
+
+
+<!-- api-extra-start -->
+### Drawer.show
+
+The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.
+
+| Param | Descripiton  | Type  | Default Value |
+| :------- | :-------------- | :-------- | :------- |
+| title    | title of drawer              | ReactNode | ''       |
+| content  | content of drawer              | ReactNode | ''       |
+
+<!-- api-extra-end -->
+
 
 ## ARIA and Keyboard
 

diff --git a/docs/drawer/index.md b/docs/drawer/index.md
@@ -13,6 +13,16 @@
 
 抽屉是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
 
+### `v2` 版本更新指示
+
+1.25 版本增加 v2 api 支持开启新版本弹窗，功能如下
+
+功能变化：
+
+-   位置不再通过 js 计算，通过 css 完成，响应式性能更好
+-   支持设置 `width/height` 固定弹窗宽度, 或者设置 auto 跟随内容变化
+-   支持 Drawer.show() 快捷调用
+
 ## API
 
 ### Drawer
@@ -27,14 +37,36 @@
 | cache       | 隐藏时是否保留子节点，不销毁                                                                                                                                                                                                                         | Boolean             | -                                          |      |
 | closeMode   | [推荐]控制对话框关闭的方式，值可以为字符串或者数组，其中字符串、数组均为以下值的枚举：<br/>**close** 表示点击关闭按钮可以关闭对话框<br/>**mask** 表示点击遮罩区域可以关闭对话框<br/>**esc** 表示按下 esc 键可以关闭对话框<br/>如 'close' 或 ['close','esc','mask'], \[]                                                      | Array&lt;Enum>/Enum | -                                          | 1.21 |
 | onClose     | 对话框关闭时触发的回调函数<br/><br/>**签名**:<br/>Function(trigger: String, event: Object) => void<br/>**参数**:<br/>_trigger_: {String} 关闭触发行为的描述字符串<br/>_event_: {Object} 关闭时事件对象                                                                     | Function            | () => {}                                   |      |
-| afterOpen   | 对话框打开后的回调函数<br/><br/>**签名**:<br/>Function() => void                                                                                                                                                                                    | Function            | -                                          |      |
+| afterOpen   | [v2废弃]对话框打开后的回调函数<br/><br/>**签名**:<br/>Function() => void                                                                                                                                                                              | Function            | -                                          |      |
 | placement   | 位于页面的位置<br/><br/>**可选值**:<br/>'top', 'right', 'bottom', 'left'                                                                                                                                                                         | Enum                | 'right'                                    |      |
 | title       | 标题                                                                                                                                                                                                                                     | ReactNode           | -                                          |      |
 | headerStyle | header上的样式                                                                                                                                                                                                                             | Object              | -                                          |      |
 | bodyStyle   | body上的样式                                                                                                                                                                                                                               | Object              | -                                          |      |
 | visible     | 是否显示                                                                                                                                                                                                                                   | Boolean             | -                                          |      |
 | hasMask     | 是否显示遮罩                                                                                                                                                                                                                                 | Boolean             | true                                       |      |
 | animation   | 显示隐藏时动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名                                                                                                                          | Object/Boolean      | { in: 'expandInDown', out: 'expandOutUp' } |      |
+| v2          | 开启 v2                                                                                                                                                                                                                                  | Boolean             | -                                          |      |
+| afterClose  | [v2] 弹窗关闭后的回调<br/><br/>**签名**:<br/>Function() => void                                                                                                                                                                                  | Function            | -                                          |      |
+
+<!-- api-extra-start -->
+### Drawer.show
+
+以下只列举 config 可以传入的常用属性，Drawer 组件其他属性也可以传入
+
+| 属性       | 说明              | 类型        | 默认值      |
+| :------- | :-------------- | :-------- | :------- |
+| title    | 标题              | ReactNode | ''       |
+| content  | 内容              | ReactNode | ''       |
+
+### Drawer.withContext
+
+上面的`Drawer.show`这种命令式API，虽然使用起来很方便，但是如果你的应用使用了多次`ConfigProvider`，当你通过命令式API调起的Drawer的时候，它到底会使用哪份fusion config（比如prefix、文案），是一件无法确定的事情（详见[#2005](https://github.com/alibaba-fusion/next/issues/2005)）。你可以从 withContext Example 看到这个问题。
+
+为了解决这个问题，我们提供了一个新的API：`Drawer.withContext`。
+对于要使用命令式API的组件，使用`Drawer.withContext`HOC来包裹一下。然后你就可以在你的组件props.contextDrawer拿到 `show` 命令式方法。
+
+<!-- api-extra-end -->
+
 
 ## 无障碍键盘操作指南
 

diff --git a/docs/search/theme/index.jsx b/docs/search/theme/index.jsx
@@ -122,6 +122,14 @@ class FunctionDemo extends React.Component {
                         <Search filter={filter} searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
                     </DemoGroup>
                 </Demo>
+                <Demo title="Focused" block>
+                    <DemoHead cols={['L', 'M']}/>
+
+                    <DemoGroup label="Normal">
+                        <Search className="next-search-focus"  searchText={i18n.title} type="normal" size="large" shape="simple" style={style}   />
+                        <Search className="next-search-focus" searchText={i18n.title} type="normal" size="medium" shape="simple" style={style}   />
+                    </DemoGroup>
+                </Demo>
                 <div>
                     <Demo title="Dark" block defaultBackground="dark">
                         <DemoHead cols={['L', 'M']}/>

diff --git a/docs/tab/demo/closable.md b/docs/tab/demo/closable.md
@@ -1,15 +1,15 @@
-# 可关闭选项卡
+# 可关闭/新增选项卡
 
 - order: 6
 
-可关闭选项卡，可以通过在 `Tab.Item` 上设置 `closeable` 属性设置该选项卡是否可关闭。
+可关闭选项卡，可以通过在 `Tab.Item` 上设置 `closeable` 属性设置该选项卡是否可关闭。可以通过 `showAdd` 开启新增功能
 
 :::lang=en-us
 # Closeable
 
 - order: 6
 
-Creating closeable tabs by pass attribute `closeable` to `Tab.Item`.
+Creating closeable tabs by pass attribute `closeable` to `Tab.Item`. use `showAdd` use add
 
 :::
 
@@ -60,26 +60,32 @@ class CloseableTab extends React.Component {
     }
 
     addTabpane = () => {
-        this.setState(prevState => {
-            const { panes } = prevState;
-            panes.push({ tab: 'new tab', key: Math.random(), closeable: true });
-            return { panes };
-        });
+        const panes = this.state.panes;
+        const newItem = { tab: 'new tab', key: Math.random(), closeable: true }
+        panes.push(newItem);
+
+        this.setState({
+            panes: [...panes],
+            activeKey: newItem.key
+        })
     }
 
     render() {
-        const state = this.state;
+        const {panes, activeKey} = this.state;
         return (
             <div>
                 <Button onClick={this.addTabpane} type="primary"><Icon type="add"/> New Tab</Button>
 
                 <Tab
                     shape="wrapped"
-                    activeKey={state.activeKey}
+                    activeKey={activeKey}
                     onChange={this.onChange}
                     onClose={this.onClose}
-                    className="custom-tab">
-                    {state.panes.map(item => <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>{item.tab} content</Tab.Item>)}
+                    onAdd={this.addTabpane}
+                    style={{marginTop: 10}}
+                    showAdd
+                >
+                    {panes.map(item => <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>{item.tab} content</Tab.Item>)}
                 </Tab>
             </div>
         );
@@ -90,10 +96,6 @@ ReactDOM.render(<CloseableTab />, mountNode);
 ````
 
 ````css
-.custom-tab {
-    margin-top: 14px;
-}
-
 .next-tabs-content {
     color: #333;
     font-size: 12px;

diff --git a/docs/tab/index.md b/docs/tab/index.md
@@ -52,6 +52,8 @@ Fusion 提供了三级选项卡，分别用于不同的场景。
 | tabRender           | 自定义选项卡模板渲染函数<br/><br/>**签名**:<br/>Function(key: String, props: Object) => ReactNode<br/>**参数**:<br/>_key_: {String} 当前 Tab.Item 的 key 值<br/>_props_: {Object} 传给 Tab.Item 的所有属性键值对<br/>**返回值**:<br/>{ReactNode} 返回自定义组件<br/> | Function      | -        |
 | popupProps          | 弹层属性透传, 只有当 excessMode 为 dropdown 时生效                                                                                                                                                                                        | Object        | -        |
 | icons               | 自定义组件内 icon                                                                                                                                                                                                                  | Object        | {}       |
+| showAdd             | 新增按钮                                                                                                                                                                                                                         | Boolean       | -        |
+| onAdd               | 新增的事件回调<br/><br/>**签名**:<br/>Function() => void                                                                                                                                                                              | Function      | -        |
 
 ### Tab.Item