0.x 到 1.x升级指南

一、 1.x 相比于0.x的优势

美观度重新优化样式与动画效果。默认主题视觉提升, 超过 90% 组件样式被重新设计，获得组件用户好评。
易用性
- 新增 80 + 功能，进行 300+ 优化，组件整体代码体积却减小30% * next.js 2.07M -> 1.67M * next.min.js 910KB -> 702KB * next.css 555KB -> 446KB * next.min.css 428KB -> 337KB
- 提升了组件的加载性能和运行性能
规范性梳理并落地 10+ 组件规范。API接口名,CSS Class名语义化更强。
稳定性
- 1.x 版本提供服务以来没有产生过起线上事故
- 1.x 版本提供服务以来没有产生过非兼容性变更
- 组件单测覆盖率近90%
可维护性组件体系新增 10+ 依赖关系，重构了 17+ 个组件，包括 Animate/Overlay/ConfigProvider 底层能力库，以及 Menu/Table/Select/Tree/Calendar 等复杂组件。代码可读性显著提高。
其他升级
- 支持最新的React@16
- 提升组件本身的国际化能力
- 组件 Demo/API／使用文档 100%中英双语支持
- 为无障碍化专门作出优化,内置部分无障碍化能力
开源 - @icedesign/base 即 @alifd/next 0.x 版本 - @alifd/next 0.x 对社区开发者并不开源 - @alifd/next 1.x 开源,更方便开发者使用和二次开发

二、使用 1.x 开发

1.使用前需知

@alifd/[email protected]，相对 @alifd/[email protected] (@icedesign/base) 是一个 X 位大版本的迭代更新，存在非兼容性变更，如有升级需求，请参照下方升级日志以及自动化升级工具进行升级。

3.默认主题

考虑到 Next 组件目前定位于服务集团内部中后台 PC Web 端场景，我们将 @alife/[email protected] 默认主题的主品牌色修改为中后台场景应用更加广泛的蓝色系，并且后续会额外提供多套官方主题，包括 0.x 的橙色系，以及绿色系和紫色系等。

此外，我们修改默认字体的大小从 14px 到 12px，以更加适配占集团中后台绝大部分业务场景的中文场景。当然了上面所说的都是关于默认主题的调整，你仍然可以像在 0.x 时那样去任意定制你自己的主题以及品牌。

4.依赖变更

4.1完全基于 React 16 开发

@alifd/[email protected] 完全基于 React v16 开发，目前并不兼容 React v16 以下的版本。升级@alifd/[email protected]前,请先把项目升级到 [email protected]并且无障碍运行。

使用 React v16 的优势

更小的文件体系
更好的 diff 性能
更好的错误处理
MIT 授权

4.2 不再内置 Moment

Moment 是一个用于处理日期时间的工具库。`@alifd/[email protected] (@icedesign/base) 默认集成了一个压缩版的 moment （主要是缩减了语言包），在 1.x 我们移除了对 moment 的内置依赖，而是将其作为 peerDependencies，在使用 Calendar/DatePicker/TimePicker 时，用户需要自行引入 moment。例如：

import { DatePicker } from '@alife/next';
import moment from 'moment';

moment.locale('zh-cn');

class App extends React.Component {
    render() {
		return (<DatePicker defaultValue={moment()} />);
    }
}

如果你不使用任何日期相关的组件 Calendar/DatePicker/TimePicker，并且使用 @ali/babel-plugin-next 进行了按需加载或者手动按需加载，那么你可以不引入 moment 这个依赖

UMD 版本的 next.js 不再包含 moment，使用的时候需要自己引入 moment。

使用方法如下：

<html>
  <head>
+   <script crossorigin="anonymous" integrity="sha384-fYxN7HsDOBRo1wT/NSZ0LkoNlcXvpDpFy6WzB42LxuKAX7sBwgo7vuins+E1HCaw" src="https://lib.baomitu.com/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://alifd.alicdn.com/npm/@alifd/next/{版本号}/next.js"></script>
  </head>
</html>

如何减少 moment 的打包体积

默认情况下，如果你在 app 中引入了 moment，它的压缩代码大概有 217 kB，其中有 165 kB 的文件为多语言文件，其中绝大部分你可能并不需要。对于 moment 而言，其选择语言文件是在执行期间动态进行的：

需要注意，使用 webpack 进行构建时，webpack 并不知道哪些文件可能是你需要的，因此会默认引入所有的语言文件。为了解决这个问题，我们可以通过 MomentLocalesPlugin 来指定需要的文件：

// webpack.config.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  plugins: [
    // Or: To strip all locales except “en”, “es-us” and “ru”
    // (“en” is built into Moment and can’t be removed)
    new MomentLocalesPlugin({
      localesToKeep: ['es-us', 'ru'],
    }),
  ],
};

5.多语言

@alife/[email protected] 目前已支持中英繁日四种语言，为了保证未来支持更多语言的同时不增加应用打包的体积，我们将组件代码与国际化文案进行了分离，使用方式如下：

import { ConfigProvider, DatePicker } from '@alife/next';
import enUS from '@alife/next/lib/locale/en-us';
// import zhCN from '@alife/next/lib/locale/zh-cn';
// import zhTW from '@alife/next/lib/locale/zh-tw';
// import jaJP from '@alife/next/lib/locale/ja-jp';

class App extends React.Component {
    render() {
        return (
            <ConfigProvider locale={enUS}>
                <DatePicker />
            </ConfigProvider>
        );
    }
}

值得注意的是，在 1.x 中我们除了提供包括所有组件代码的 @alifd/next/dist/next.js 外，为了应对国际化场景，我们额外提供了 @alifd/next/dist/next-with-locales.js，cdn 链接如下：

6. 0.x 组件与 1.x 组件对应不同应用存在同一页面

如果一个页面对应多个前端应用，这些应用可能是基于 0.x 版本组件开发的，而你又想在这个页面上开发一个基于 1.x 版本组件的应用，如果不做任何额外处理的话，同一个页面中 0.x 版本组件的样式会和 1.x 版本组件的样式发生冲突，你可以使用我们提供的ConfigProvider 来修改组件样式类名的前缀解决这个问题：

为你的应用包裹 ConfigProvider，并设置相应的 prefix

entry.jsx

import { ConfigProvider, Input, Button } from '@alife/next';

class App extends React.Component {
    render() {
        return (
            <ConfigProvider prefix="my-">
                <div>
                    <Input />
                    <Button>Submit</Button>
                </div>
            </ConfigProvider>
        );
    }
}

scss 入口文件中在引入主题 scss 文件前，设置相应的 $css-prefix

entry.scss
```
$css-prefix: "my-";
@import "~@alifd/theme-xxx/index.scss";
```

经过以上修改后, .next-btn 会替换为 .my-btn

三、使用升级工具迁移

如果您的项目想从 0.x 升级到 1.x ，您需要对已有代码进行全量的 review 。为了辅助您的迁移工作，我们提供了辅助的升级工具。具体使用可以参考下面的文档：

1.准备工作

Next 0.x 支持React@15 & React@16 Next 1.x 支持React@16 请先把React相应的生态环境先升级到React@16,保证原项目能在React@16下正常运行,再去做后续的组件升级工作。

next-migrate-helper是一款帮助迁移升级Next的工具基本用法如下:

使用方法: next-migrate [options]

Options:

  -V, --version          输出版本号
  -m --migrate           开启该选项会自动修改你的代码,默认仅仅是给出提示
  -t --target <version>  target version (default: v1)
  -h, --help             output usage information

2.Example

Step 1:

进入项目目录

tnpm install @alifd/next@1 --save
tnpm install @alifd/next-migrate-helper -g

next-migrate -V

看到版本号输出表示安装成功

Step: 2:

全局文本替换,把@icedesign/base替换成@alifd/next

Step 3:

cd path-to-your-prject
next-migrate -m ./src

Terminal将会输出修改提示: _E5_9B_BE_E7_89_87

3.注意事项

迁移工具只是做静态检查,并不能做到100%覆盖。
有些变更不方便自动帮助修改,只能给出提示

四、1.x 详细变更说明

Accordion

特性

组件更名为 Collapse（折叠面板）。因为 Accordion的意思是单例展开模式，属于Collapse的子集。
标题多行不再需要API控制，根据内容自动多行展示。

API 变动

组件更名为： <Collapse />
单个展开模式由 single 变更为 accordion

API 新增

初始化默认展开的面板key值：defaultExpandedKeys
设置受控展开的key值：expandedKeys
展开事件的钩子函数：onExpand

Aniamte

API 变动

删除 useTransition，不需要再指定是否使用 transition 动画
只支持<Animate animation="tag" />或<Animate animation={{ appear: 'zoomIn', enter: 'zoomIn', leave: 'zoomOut' }} />，不再支持 0.x function 形式
component 默认值由 'span' 变更为 'div'

API 新增

增加 onAppear/onEnter/onLeave 三个钩子函数，在添加了如： xxx-appear-active 类名后触发，可用来实现如展开收起这种需要操作 dom 节点 style 的动画

Badge

特性

动画由fadeIn\fadeOut改为zoomIn\zoomOut
支持自定义节点内容
删除align属性，即小红点展示在左侧的功能

API变动

无

API新增

自定义节点内容: content

Balloon

API变动

去掉了onCloseClick
去掉了onChange
去掉了alignment(enum类型['normal', 'edge'])，改为alignEdge(boolean)，true时表示alignment='edge'
去掉text属性，全部由children传入

API新增

支持popupStyle, popupClassName, popupProps等属性，会透传给底层的Popup组件

Button

特性

优化组件依赖项，功能上更加纯粹

API 变动

设置标签类型 component 取值修改改为 button | a
按钮的类型 type 取值改为 normal | primary | secondary
移除了 shape 属性, 通过 text warning 实现原有功能
移除了 Button.Split 子组件，请使用独立的 SplitButton 组件

API 新增

设置为幽灵按钮: ghost ，取值为 light | dark
设置为文本按钮：text
设置为警告按钮：warning
新增 <SplitButton/> 组件
新增 <MenuButton/> 组件

Breadcrumb

API变动

删除了Breadcrumb.Number 与 Breadcrumb.Keyword 两个子组件，可使用标签高亮提升，或者自定义高亮提示。

Calendar

特性

组件UI样式和交互优化
内部实现逻辑优化与代码精简

API 变动

展现形态 type 修改为 shape,参数值为 card | fullscreen | panel
value & defaultValue 仅支持传入 moment 对象，不再支持数字或字符串
面板模式 mode 取值改为 date | month | year
dateCellRender & monthCellRender 回调参数第一个均为 moment 对象
disabledDate 回调参数第一个为 moment 对象
移除了 onChange, 可通过onSelect实现监听事件
移除了 base
移除了 yearCellRender
不可选择的日期 disabledMonth & disabledYear 修改为 disabledDate 实现
多语言 language 修改为通过 moment.locale 实现
移除了 Calendar.DatePickerPanel
移除了 Calendar.RangePickerPanel

API 新增

用户监听用户选择某个日期时的回调: onSelect
用于控制是否在当月日期面板展示其他月头尾日期: showOtherMonth
用于控制日历面板默认展示的月份: defaultVisibleMonth

Cascader

API 变动

expandTrigger，更改为 expandTriggerType
showItemCount & labelWidth修改为 listStyle/listClassName 来设置每列样式

API 新增

每列列表项渲染函数: itemRender

CascaderSelect

特性

支持搜索

API 变动

样式 shape 属性修改为 hasBorder 属性，以设置是否存在边框
container 属性名修改为 popupContainer
expandTrigger，修改为 expandTriggerType
showItemCount/labelWidth，修改为 listStyle/listClassName 来设置每列样式

API 新增

自定义内联 label: label
是否只读: readOnly，只读模式下可以展开弹层但不能选择
自定义搜索函数: filter
搜索结果自定义渲染函数: resultRender
搜索结果列表是否和选择框等宽: resultAutoWidth
无数据时显示内容: notFoundContent
自定义下拉框头部: header
自定义下拉框底部: footer
当前下拉框是否显示: visible
下拉框显示或关闭时触发事件的回调函数: onVisibleChange
下拉框自定义样式对象: popupStyle
透传到 Popup 的属性对象: popupProps

Card

特性

设计优化

API 变动

是否展示头部的分隔线 titleBottomLine 修改为 showHeadDivider
是否显示标题的项目符号 titlePrefixLine 修改为 showTitleBullet
内容区域的固定高度 bodyHeight 修改为 contentHeight

API 新增

无

Checkbox

特性

组件内部重构，组件性能优化

API 变动

无

API 新增

文本配置：label={string}
鼠标事件Enter回调： onMouseEnter, enter范围为wrapper，包括文本
鼠标事件Leave回调： onMouseLeave, leave范围为wrapper包括文本

ConfigProvider

特性

支持全局多语言文案切换，废弃 0.x 的 LocaleProvider。
支持全局为 Next 组件开启 Pure Render 模式。

API 新增

国际化文案对象: locale, 属性为组件的 displayName
是否开启 Pure Render 模式: pure，会提高性能，但是也会带来副作用

DatePicker

特性

组件UI样式和交互优化
内部实现逻辑优化与性能优化

API 变动

open 变更为 visible
defaultOpen 变更为 defaultVisible
onOpenChange 变更为 onVisibleChange
value/defaultValue 仅支持传入 moment 对象实例，不再支持字符串或数字
format 仅支持传入字符串
onChange 回调函数的参数1 返回的是 moment 实例
弹层默认是否显示 defaultOpen 修改为 defaultVisible
弹层显示状态 open 修改为 visible
弹层展示状态变化时的回调 onOpenChange 修改为 onVisibleChange
~~移除了 DatePicker.MonthPicker 子组件
~~移除了 DatePicker.YearPicker 子组件

API 新增

默认展示的月份: defaultVisibleMonth
设定每次选择日期时是否重置时间: resetTime
设置弹层触发方式: popupTriggerType
设置弹层容器: popupContainer
设置弹层自定义样式: popupClassName
透传弹层其他属性: popupProps

Dialog

特性

可定制底部按钮的对齐方式：居左，局中，局右
可定制底部的确认按钮和取消按钮是否单独出现，以及它们相互间的位置

API 变动

closable 修改为 closeable
不在直接接受 cache, container 等继承 Overlay 的 props，需要通过放在 overlayProps 传递

API 新增

底部按钮的对齐方式：footerAlign
底部的确认按钮和取消按钮是否单独出现，以及它们相互间的位置：footerActions
新增 Dialog.show() 快速弹出普通对话框方法

Feedback/Notice

特性

Feedback 和 Notice 收拢为 Message，两者
Message[type] 支持 success|warning|error|notice|help|loading
Message[method] 支持 show|success|warning|error|notice|help|loading
Message[method] 支持同时传入 title 和 content
Message[method] 支持传入 closeable 属性来设置是否出现关闭按钮以及可关闭
快捷调用：0.x版本的Feedback默认显示位置在屏幕上下左右居中即 align: "cc cc", 1.x版本的默认显示位置是居中偏上align: "tc tc"

API 变动

从 Feedback 迁移

Feedback.toast[method] 修改为 Message[method] 可选参数：[show|success|warning|error|notice|help|loading]
Feedback[type=prompt] 修改为 Message[type=warning]

从 Notice 迁移

Notice[type=prompt] 修改为 Message[type=notice]
Notice[type=system] 已被废弃
Notice[shape=standalone] 已被废弃
Notice[closable] 修改为 Message[closeable]

Field

特性

支持初始化表单value 数据 new Field()。
错误展现控制，支持校验的时候出现第一个错误就中止。
支持自动滚动到出错位置，并可自己控制滚动偏移位置。
reset方法能清理所有的 Fusion 的基础组件数据（其实是基础组件按照Field的数据清除标准开发）。
配置required, 自动根据不同数据类型校验是否是空，不需要再自己制定。(只要传入required参数，即使是required={false} 也会触发校验规则)
配置 disabled 的组件不在 getValue getValues 中出现。
Validate 支持 Promise。
除了提供 pattern 外，1.x 还提供了几个已经封装好一些可以快速使用的方法

API 变动

重置由reset(true) 修改为 resetToDefault()
自动删除Unmout元素默认值 autoUnmount=false 修改为 autoUnmount=>true
rules 校验
- required 命中不需要指定类型: undefined/null/""/[] 。
- min/max 从原来最大长度/最小长度 => 变更为最大最小值
  - string: parseFloat(value)的最大最小值
  - number: 数的最大最小值
  - array: value.length 数组长度的最大最小值
- 去除whitespace， input已经直接支持trim能力
- type 改为 format，去除string/array 类型，新增 tel/number, 支持类型如下：
  - url
  - email
  - tel 电话号码
  - number 数字（可以是字符串或者整数）

API 新增

rules 校验

maxLength/minLength 最大/小长度
- string：字符串的最大/小长度
- number: 字符的最大/小长度
format
- URL链接类型校验: url
- Email类型校验: email
- 大陆电话号码校验: tel
- 数字类型校验: number，format 数字类型支持string类型数字和number类型

Form

特性

表单数据获取更方便。通过Field直接自动获取组件数据，不需要自己init，这也使得自定义的事件更加容易，不需再通过props:{onChange}。
validate 在0.x的基础优化，修复Field 0.x 所有校验问题（异步校验状态被覆盖、required对数据类型检测不友好等）。

API 变动

横向表单 direction="hoz" 使用参数修改为 inline
垂直表单 direction="ver" 默认使用这种状态，不需要配置。
校验状态validateStatus 变更为 validateState

API 新增

新增子组件Form.Reset 一键清除
新增子组件Form.Submit 一键获取数据

Grid

特性

0.x Col 默认存在padding，只能通过 type 设置为 no-padding | across 去除间距，但是不能修改其他值。 1.x 默认不存在padding，修改为为通过单独的 gutter 属性设置
0.x Row 默认存在padding，1.x Row 默认不存在padding
0.x Row 设置了 margin-left: auto;/margin-right: auto; 自动水平居中，1.x 为了实现 gutter 需要设置 Row 的 margin 为负值实现，如想实现 0.x 水平居中，可在外层包裹一层 div，并设置它的样式，此实现方案为业界通用解决方案

API 变动

移除了 0.x 已经废弃的 Col[offsetFixed]，可以使用 Col[fixedOffset]
移除了 Row[type] 属性
- 原 fluid 可选值删除
- 原 fixed 可选值，更改为单独的 fixed 属性，默认值为 false
- 原 wrap | nowrap 可选值，更改为单独的 wrap 属性，默认值为 false
- 原 no-padding | across 删除，更改为单独的 gutter 属性，默认值为 0

API 新增

列间隔: gutter

Icon

API 变动

Icon 的 type 从 0.x 的 100 多个减少到 1.x 的 42 个，删除了不常用的或者具有业务属性的图标，并且重绘制了一些图标。删除的 type 包括：

all cart comments favorite folder form training 3column 4column discount service print box process bags
electronics gifts lights auto browse atm-away scanning compare pin history similar-product link cut
table nav-list image-text text move subtract dollar office operation download map bad good skip
play stop compass security share store phone email-filling account-filling credit-level credit-level-filling
mobile-phone personal-center arrow-up-filling time display category arrow-down-filling tag-subscript survey

其中 share type 名字修改为 upload。升级主题版本，升级过程中会为你自动补充 1.x 被默认废弃掉的内置 Icon. 如果需要在1.x里添加可从图标库ID 171815、126750 导入

Input

特性

作为基础组件统一Select Search Transfer DatePicker TimePicker 的基础样式
增加innerAfter， innerBefore ，支持文字前／后附加内容
addonBefore addonAfter 作为通用能力用来表示原生不带背景边框的组件，目前支持 NumberPicker Search Select 扩展
TextArea 支持根据内容自动高度

API 变动

文字前／后附加内容 addonBefore 修改为 addonTextBefore; addonAfter 修改为 addonTextAfter;
multiple 模式修改为自组件 Input.TextArea 实现

API 新增

无

Loading

特性

默认动画修改为 0.x 的 shape="fusion-vector" 样式，删除了 shape api。可通过 <Loading indicator={<span/>} /> 继续使用0.x默认样式。
增加小尺寸Loading

API 变动

移除了 shape api

API 新增

无

NumberPicker

特性

完全继承<Input/> & <Button/> 的能力，优化代码，去除原大量0.x的冗余代码。
Normal 状态下的样式改造：默认隐藏 + -，hover才出现；更加贴近原生Input type=number 的样式。
支持通过 style={{width}} 直接修改宽度

API变动

删除了inputWidth, 1.x 可通过 style={{width}} 实现
删除onDisabled接口

API 新增

无

移除了 indentSize 属性，使用 inlineIndent 属性替代
移除了 onDeselect，可以通过 onSelect(selectedKeys, item, extra) 中的 extra.selected 属性为 false 判断
onClick 不再表示点击菜单项触发的回调函数，而是原生的 onClick，转而提供 onItemClick 接口，函数签名为 onClick(key, item, e)
移除了 multipleCol API
移除了 autoFocusFirstItem，0.x 默认值为 false, 1.x 默认行为即false
autoFocus 默认值修改为 false
必须指定 selectMode 的值，才可以进行选择

Menu.Item

原 hasSelectedIcon 属性，现在由 Menu 提供
0.x onClick 回调函数的签名为 onClick(key, e)，1.x 不再修改原生回调函数参数

Menu.SubMenu

mode 属性 Menu 组件也有提供，SubMenu的 mode 属性优先级高于 Menu的 mode 属性
原 triggerType 属性，现在由 Menu 提供
原 align 属性，现在由 Menu 提供，重命名为 popupAlign，并且同时作用于 SubMenu 和 PopupItem

Menu.PopupItem

原 autoWidth 属性，现在由 Menu 提供，重命名为 popupAutoWidth，并且同时作用于 SubMenu 和 PopupItem

Menu.CheckboxItem/Menu.RadioItem

不再受 defaultSelectedKeys/selectedKeys 控制，需组件使用者自行通过 checked/onChange 实现相关逻辑

API 新增

弹层自定义: popupProps
弹出子菜单自定义 className: popupClassName，
弹出子菜单自定义 style: popupStyle

Nav

API 变动

type 属性不再接受 text 可选值
其他见 Menu

Pagination

新特性

支持总页数渲染
支持设置每页选择器是否使用浮动布局

API变动

无

API新增

总数的渲染函数: totalRender
每页显示选择器时是否使用浮动布局： useFloatLayout

Progress

API 变动

状态 state 参数值修改为 normal | success | error
类型 type 改为 shape
移除了 suffix
移除了 showInfo
移除了 animation

API 新增

自定义文本内容渲染: textRender
开启 “色彩阶段变化模式”: progressive
配置 Line 型 Progress 是否存在边框: hasBorder

Radio

特性

组件内部重构，组件性能优化

API 变动

无

API 新增

文本配置：label={string}
鼠标事件Enter回调： onMouseEnter, enter范围为wrapper，包括文本
鼠标事件Leave回调： onMouseLeave, leave范围为wrapper包括文本

Range

特性

background和border支持配置

API 变动

tipFormatter改为tipRender

API 新增

marksPosition，用来标识刻度与标注的距离

Rating

特性

hover低分（小于等于2/5）状态，星星为灰色

API变动

是否显示 grade type={"grade"} 修改为 showGrade
删除showInfo属性，文案由业务方自行封装

API新增

无

Search

特性

组件完全继承 Select.AutoComplete 能力，优化代码，大幅减小代码体积。
可以直接通过 style={width} 控制组件宽度

API 变动

autoWidth不再控制组件宽度, 修改为 style={width} 实现
autoWidth在 1.x 中表示下拉弹层的autoWidth

API 新增

新增选择器值: filterValue
选择器默认值： defaultFilterValue
选择器发生变化时回调: onFilterChange

注意事项

0.x autoWidth = true 等价于 1.x style={width:100%}

Select

特性

优化搜索交互，支持选择框输入搜索。
Tag模式也支持自定义标签。
Select.Combobox 修改为 Select.AutoComplete ，相当于 Input autoComplete，但只支持Input输入搜索。
新增一键全选功能。

API变动

Select

Select.Combobox 的多选模式 multiple/tags 模式合并到 Select
Tag模式实现由 tags 修改为 mode={"tag"}
选择器模式实现方式由原接口multiple 修改为 mode={"multiple"} 实现
无边框模式由 shape={"arrow-only"} 修改为 hasBorder={false}
弹层挂载的容器节点 container 修改为 popupContainer
自定义弹层 overlay 修改为 popupContent
Focus事件的钩子函数 onInputFocus 修改为 onFocus
Focus事件的钩子函数 onInputBlur 修改为 onBlur
Enter事件的钩子函数 onInputEnter 修改为 onPressEnter
safeNode 修改为 popupProps={{safeNode}}
本地过滤方法接口 filterBy 修改为 filter
value/defaultValue值不再支持数组、对象等引用数据类型 —— 2019.01.07 add

Select.AutoComplete（原 `Select.Combobox` 的单选模式，多选模式用）

弹层挂载的容器节点 container 修改为 popupContainer
本地过滤方法接口 filterBy 修改为 filter
Change事件的钩子函数 onInputUpdate 修改为 onChange
- onChange(value, type) 的第二个参数 type='change' 标识为输入框的变化
Focus事件的钩子函数 onInputFocus 修改为 onFocus
Focus事件的钩子函数 onInputBlur 修改为 onBlur
Enter事件的钩子函数 onInputEnter 修改为 onPressEnter
value/defaultValue值不再支持数组、对象等引用数据类型 —— 2019.01.07 add

API 新增

无

Slider

特性

增加锚点自定义render；
可通过锚点鼠标经过触发滑动；
API 调整，更加语义化，易于理解与使用；
代码结构优化，组件更加轻量；

API 变动

播放效果，删除fade接口，由animate 参数值 fade|slide 实现；
轮播变化回调函数afterChange & beforeChange 修改为 onChange实现，在切换后触发。
arrowPosition修改更易理解的参数，由原先的"outer"|"inline"改为"outer" | "inner"；
箭头位置 arrowPos 修改为 arrowPosition
arrowDirection方向可选值由['horizontal', 'vertical']修改为['hoz', 'ver'],
dotsDirection方向可选值由['horizontal', 'vertical']修改为['hoz', 'ver'],
slideDirection方向可选值由['horizontal', 'vertical']修改为['hoz', 'ver'],
初始化轮播位置 initialSlide 修改为 defaultIndex
受控跳转 slickGoTo 修改为 activeIndex

API 新增

自定义渲染导航锚点: dotRender
切换后触发该函数: onChange
鼠标经过导航锚点触发轮播: triggerType

Step

特性

支持自定义Step节点
支持显示圆型、点型Step水平状态下的内容
支持切换圆形Step水平状态下内容显示位置（节点下/节点右）
支持配置当前状态（status='process'）的节点大小

API 变动

节点自定义渲染 itemRender，从Step.Item 移动到Step上
外观形态 type 修改为 shape 替代，取值为 circle | dot | arrow，默认为circle

API 新增

定义圆型Step水平状态下内容显示位置（节点下/节点右）:labelPlacement

Switch

特性

small尺寸下也支持文案

API 变动

无

API 新增

无

Tab

特性

组件UI样式和交互优化

API 变动

外观形态 type 修改为 shape 替代，取值为 pure | wrapped | text | capsule
选项卡过多时的滑动模式 resDirection 修改为 excessMode 替代，取值为 slide | dropdown
导航栏附加内容 tabBarExtraContent 修改为 extra
子组件Tab.TabPane 修改为 Tab.Item
Tab 移除了 closeable 直接在 Tab.Item 上使用 closeable
Tab.TabPane 中的 tab 属性对应为新的 Tab.Item 上的 title 属性

API 新增

卸载处于非激活态的 Tabs： unmountInactiveTabs
nav样式配置： navStyle/navClassName
content样式配置：contentStyle/contentClassName
自定义选项卡的渲染模板: tabRender

Table

特性

支持虚拟滚动
支持sticky效果的头部

API变动

默认情况下展开的额外渲染行expandedRowKeys 修改为openRowKeys
在额外渲染行展开或者收齐的时候触发的回调 onExpandedChange 修改为 onRowOpen
表格是否在加载中 isLoading 修改为 loading
在tree模式下的缩进尺寸 indentSize 修改为 indent
表示是否进行 pure render 的属性 optimization 修改为 pure
设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效
getRowClassName 使用 getRowProps 返回 className 替代

API新增

新增GroupFooter子组件
表头是否是sticky: stickyHeader
距离窗口顶部达到指定偏移量后触发: offsetTop
affix组件的的属性: affixProps
是否开启虚拟滚动: useVirtual
设置行高: rowHeight
在内容区域滚动的时候触发的函数: onBodyScroll
GroupHeader新增hasChildrenSelection API，控制GroupList是否可以选中children

Tag

特性

组件独立拆分
UI样式更新

API变动

shape=selectable 组件替换为Tag.Selectable
shape=deletable 组件替换为Tag.Closable
shape=link 组件替换为<Tag><a href="xxxxx"></a></Tag>
shape=readonly 已废弃
shape=interactive 已废弃
type=secondary 已废弃,只保留primary | normal
count 已废弃
selected|defaultSelected改为checked|defaultChecked,且只能用在Tag.Selectable上
closed 已废弃Tag.Closable[onClose]属性代替
marked 已废弃
value 已废弃
onChange已废弃
onSelect 已废弃, 使用Tag.Selectable[onChange]替代
afterClose已废弃, 使用Tag.Closable[afterClose]替代

API新增

新增Tag.Selectable
新增Tag.Closable

Timeline

特性

支持自定义时间轴点
支持时间在左侧显示
新增动效配置
支持配置当前状态（state ='process'）的节点大小

API 变动

无

API 新增

定义时间轴左侧时间:timeLeft
自定义时间轴节点: dot 参数类型：ReactNode | String
配置展开/收起动效: animation

TimePicker

特性

内部实现逻辑优化与性能优化

API 变动

value/defaultValue 仅支持传入 moment 对象实例
弹层默认是否显示 defaultOpen 修改为 defaultVisible
弹层显示状态 open 修改为 visible
onOpenChange 变更为 onVisibleChange
disabledHours 新增参数为当前小时，返回值变更为 bool
disabledSeconds 新增参数为当前秒，返回值变更为 bool
disabledMinutes 新增参数为当前分，返回值变更为 bool

API 新增

设置小时步长: hourStep
设置分钟步长: minuteStep
设置秒钟步长: secondStep
设置弹层容器: popupContainer
设置弹层对齐方式: popupAlign
设置弹层触发方式: popupTriggerType

Transfer

特性

支持通过拖拽对两个边面的数据进行排序
支持简单模式，点击即移动

API 变动

无

API 新增

移动选项模式:mode，可选值: 'normal', 'simple'
列表项渲染函数: itemRender
自定义搜索函数: filter
搜索框输入时触发的回调函数: onSearch
是否允许拖拽排序: sortable
拖拽排序时触发的回调函数: onSort

Tree

特性

支持通过设置 dataSource 属性直接构建 Tree
支持通过设置 checkedStrategy 来自定义 onCheck 回调函数返回参数的形式
支持通过设置 isNodeBlock 来让节点占满一行

API 变动

Tree

checkedKeys 属性可接受对象做为值，由 {checked: Array, halfChecked: Array} 更改为 {checked: Array, indeterminate: Array}
onCheck 回调函数的第一个参数 checkedKeys，如果是对象，checkedKeys.halfChecked 更改为 checkedKeys.indeterminate, 第二个参数 info 的 info.halfCheckedKeys更改为 info.indeterminateKeys
onDrop/canDrop 回调函数参数 info 的 info.dropPosition，其含义由拖拽后被拖拽的节点出现在放置节点当前层的位置改为义由拖拽后被拖拽的节点相比放置节点的位置，在放置节点之前值为-1，在放置节点内部值为0，在放置节点后值为1，info.dropToGap 被删除，其含义表示是否没有被拖拽到节点内部，可使用 info.dropPosition === 0 代替判断

Tree.Node

设置复选框不可用 disableCheckbox，修改为 checkboxDisabled

API 新增

Tree

数据源: dataSource，该属性优先级高于 children
定义选中时回填的方式: checkedStrategy
设置节点是否占满一行: isNodeBlock

Tree.Node

单独设置某节点是否出现复选框: checkable

TreeSelect

特性

支持通过设置 treeCheckedStrategy 来自定义 onChange 回调函数返回参数的形式以及选择框 tag 的展现形式

API 变动

TreeSelect

shape 属性，修改为 hasBorder 属性，以设置是否存在边框
container 属性名更改为 popupContainer
autoWidth 属性默认值由 false 更改为 true
onChange 回调函数的第二个参数 info 的 info.halfCheckedKeys，更改为 info.indeterminateKeys

TreeSelect.Node

disableCheckbox，修改为 checkboxDisabled

API 新增

TreeSelect

自定义内联 label: label
是否只读: readOnly，只读模式下可以展开弹层但不能选择
定义选中时回填的方式: treeCheckedStrategy
无数据时显示内容: notFoundContent
当前下拉框是否显示: visible
下拉框显示或关闭时触发事件的回调函数: onVisibleChange
下拉框自定义样式对象: popupStyle
透传到 Tree 的属性对象: treeProps
透传到 Popup 的属性对象: popupProps

TreeSelect.Node

单独设置某节点是否出现复选框: checkable

Upload

特性

为了让Upload更加通用，去除部分业务能力（去除对FileServer的封装、去除图片裁剪功能）。
修改接口返回规范只在 {success:false} 的时候进入 onError。
提取出 <Selecter/> 和 <Uploader/>，业务组件可以根据需求封装成自己想要的任务能力（裁剪上传可使用copperjs+20行代码搞定）。
可以非常方便的对接粘贴上传、裁剪上传等来自任何地方的文件对象（File)。
支持 base64 数据读取。

API 变动

裁剪上传：业务组件（暂未开发）
Fileserver：业务组件（暂未开发）
defaultFileList => defaultValue
fileList => value
onChange({file,fileList,e}) => onChange(fileList, file)
listType="text-image" => listType="image"
listType="picture-card" => listType="card"

API 新增

新增子组件<Upload.Selecter /> 用于自定义任何上传样式的容器
新增子组件<Upload.Uploader /> 上传File的核心能力，返回上传结果

Alibaba Fusion Design

Home
Usage
Contributing
- Guide
- Tech upgrade
Maintaining