From 0e0ad463c75c43eb504f38fd8fc64cda30c0ae51 Mon Sep 17 00:00:00 2001 From: zkwolf Date: Tue, 25 Aug 2020 13:51:01 +0800 Subject: [PATCH 01/35] feat: badge text support vnode (#2750) * feat: badge text support vnode * test: update badge test --- components/badge/Badge.jsx | 6 +++--- .../badge/__tests__/__snapshots__/index.test.js.snap | 2 ++ components/badge/__tests__/index.test.js | 10 ++++++++++ types/badge.d.ts | 2 +- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/components/badge/Badge.jsx b/components/badge/Badge.jsx index 846e97d83..2ca8c5626 100644 --- a/components/badge/Badge.jsx +++ b/components/badge/Badge.jsx @@ -21,7 +21,7 @@ const BadgeProps = { scrollNumberPrefixCls: PropTypes.string, status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']), color: PropTypes.string, - text: PropTypes.string, + text: PropTypes.any, offset: PropTypes.array, numberStyle: PropTypes.object.def(() => ({})), title: PropTypes.string, @@ -110,7 +110,7 @@ export default { }, renderStatusText(prefixCls) { - const { text } = this.$props; + const text = getComponent(this, 'text'); const hidden = this.isHidden(); return hidden || !text ? null : {text}; }, @@ -173,10 +173,10 @@ export default { prefixCls: customizePrefixCls, scrollNumberPrefixCls: customizeScrollNumberPrefixCls, status, - text, color, } = this; + const text = getComponent(this, 'text'); const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('badge', customizePrefixCls); const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls); diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap index 2939e5279..4afa84dc8 100644 --- a/components/badge/__tests__/__snapshots__/index.test.js.snap +++ b/components/badge/__tests__/__snapshots__/index.test.js.snap @@ -44,3 +44,5 @@ exports[`Badge should support offset when count is a VueNode 1`] = ` head `; + +exports[`Badge text works with vnode 1`] = `hello`; diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js index cf93f59d1..aa27ec16b 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.js @@ -136,4 +136,14 @@ describe('Badge', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + + it('text works with vnode', () => { + const wrapper = mount({ + render() { + return hello} />; + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); + }); }); diff --git a/types/badge.d.ts b/types/badge.d.ts index 1b603e7ee..96c5a6fe8 100644 --- a/types/badge.d.ts +++ b/types/badge.d.ts @@ -52,7 +52,7 @@ export declare class Badge extends AntdComponent { * If status is set, text sets the display text of the status dot * @type string */ - text?: string; + text?: VNodeChild | JSX.Element; /** * sets the display style of the status dot From 6fa4f9cd23d27360338116365fbeb0d534e982d9 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Tue, 25 Aug 2020 14:17:00 +0800 Subject: [PATCH 02/35] bump 2.0.0-beta.3 --- CHANGELOG.en-US.md | 101 ++++++++++++++++++++++++++++++++++++++ CHANGELOG.zh-CN.md | 103 +++++++++++++++++++++++++++++++++++++++ antdv-demo | 2 +- components/form/Form.jsx | 2 +- package.json | 4 +- 5 files changed, 208 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 89dfca655..ddf082412 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,107 @@ --- +## 2.0.0-beta.3 + +- 🔥 Support Typescript. +- 🔥 Added `Space` component. +- 🐞 Fix the problem that some components cannot use css scope [4bdb24](https://github.com/vueComponent/ant-design-vue/commit/4bdb241aa674b50fafa29b3b98e291643f2a06cc). +- 🐞 Fix `List.Meta` registration failure problem [03a42a](https://github.com/vueComponent/ant-design-vue/commit/03a42a5b35e7d42a39aedb1aba8346995be2c27e) +- 🐞 Fix the problem of misalignment in the fixed column of Table [#1493](https://github.com/vueComponent/ant-design-vue/issues/1493) +- 🐞 Fix the problem that the `Button` is not vertically centered [bd71e3](https://github.com/vueComponent/ant-design-vue/commit/bd71e3806b73881f9a95028982d17a10b2cd0b5c) +- 🐞 Fix `Tabs` multiple departure `change` event issue [8ed937](https://github.com/vueComponent/ant-design-vue/commit/8ed937344a57142a575e5272f50933c9c4459a43) + +## 2.0.0-beta.2 + +### Design specification adjustment + +- Adjust the row height from `1.5`(`21px`) to `1.5715`(`22px`). +- Basic round corner adjustment, changed from `4px` to `2px`. +- The color brightness of the dividing line is reduced, from `#E8E8E8` to `#F0F0F0`. +- The default background color of Table is changed from transparent to white. + +### Compatibility adjustment + +- The minimum supported version of IE is IE 11. +- The minimum supported version of Vue is Vue 3.0. + +#### Adjusted API + +- Removed LocaleProvider, please use `ConfigProvider` instead. +- Removed the afterClose property of Tag. +- Merged FormModel and Form, see the Form refactoring part below for details. +- `tabIndex`, `maxLength`, `readOnly`, `autoComplete`, `autoFocus` are changed to all lowercase. +- In order to use the slot more friendly in template syntax, all related to xxxRender, renderXxxx are changed to single parameter, involving `itemRender`, `renderItem`, `customRender`, `dropdownRender`, `dateCellRender`, `dateFullCellRender`, `monthCellRender`, `monthFullCellRender`, `renderTabBar`. +- All the places where scopedSlots are configured are changed to slots. +- `{ on, props, attrs, ... }` configuration is flattened, such as `{ props: {type:'xxx'}, on: {click: this.handleClick}}` changed to `{ type: 'xxx', onClick: this.handleClick }`, related fields: `okButtonProps`, `cancelButtonProps`. +- Change xxx.sync to v-model:xxx +- v-model is changed to v-model:xxx, which specifically involves components: + + - The components changed from v-model to v-model:checked are: CheckableTag, Checkbox, Switch + - The components changed from v-model to v-model:value are: Radio, Mentions, CheckboxGroup, Rate, DatePicker + - The components changed from v-model to v-model:visible are: Tag, Popconfirm, Popove, Tooltip, Moda, Dropdown + - The components changed from v-model to v-model:activeKey are: Collaps, Tabs + - The components changed from v-model to v-model:current are: Steps + - The components changed from v-model to v-model:selectedKeys are: Menu + +#### Icon Upgrade + +In `ant-design-vue@1.2.0`, we introduced the svg icon ([Why use the svg icon?](https://github.com/ant-design/ant-design/issues/10353)). The icon API that uses string naming cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 2.0, we adjusted the icon usage API to support tree shaking, reducing the default package size by approximately 150 KB (Gzipped). + +The old way of using Icon will be obsolete: + +```html + +``` + +In 2.0, an on-demand introduction method will be adopted: + +```html + + +``` + +#### Component refactoring + +In 1.x, we provide two form components, Form and FormModel. The original Form component uses v-decorator for data binding. In Vue2, we use context to force update components. However, in Vue3, due to the introduction of patchFlag, etc. Optimization method, forced refresh will destroy the performance advantage brought by patchFlag. So in version 2.0, we merged Form and FormModel, retained the use of FormModel, enriched related functions, and renamed it to Form. + +Involving changes: + +- Added `scrollToFirstError`, `name`, `validateTrigger` properties for Form, added `finish`, `finishFailed` events, and added `scrollToField` method. +- Form.Item adds `validateFirst`, `validateTrigger`, and discards the `prop` attribute, and replaces it with `name`. +- The nested field path uses an array. In the past version, we used. To represent the nested path (such as user.name to represent {user: {name:''} }). However, in some back-end systems, the variable name will also carry .. This causes users to need additional codes for conversion. Therefore, in the new version, nested paths are represented by arrays to avoid wrong handling behaviors (such as ['user','name']). +- validateFields no longer supports callback. validateFields will return a Promise object, so you can perform corresponding error handling through async/await or then/catch. It is no longer necessary to determine whether errors is empty: + +```js +// v1 +validateFields((err, value) => { + if (!err) { + // Do something with value + } +}); +``` + +Change to + +```js +// v2 +validateFields().then(values ​​=> { + // Do something with value +}); +``` + ## 1.6.4 `2020-07-21` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 50dce553f..54ff8931a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,109 @@ --- +## 2.0.0-beta.3 + +- 🔥 支持 Typescript。 +- 🔥 新增 `Space` 组件。 +- 🐞 修复部分组件无法使用 css scope 问题 [4bdb24](https://github.com/vueComponent/ant-design-vue/commit/4bdb241aa674b50fafa29b3b98e291643f2a06cc)。 +- 🐞 修复 `List.Meta` 注册失败的问题 [03a42a](https://github.com/vueComponent/ant-design-vue/commit/03a42a5b35e7d42a39aedb1aba8346995be2c27e) +- 🐞 修复 `Table` 固定列情况下错位问题 [#1493](https://github.com/vueComponent/ant-design-vue/issues/1493) +- 🐞 修复 `Button` 没有垂直居中的问题 [bd71e3](https://github.com/vueComponent/ant-design-vue/commit/bd71e3806b73881f9a95028982d17a10b2cd0b5c) +- 🐞 修复 `Tabs` 多次出发 `change` 事件问题 [8ed937](https://github.com/vueComponent/ant-design-vue/commit/8ed937344a57142a575e5272f50933c9c4459a43) + +## 2.0.0-beta.2 + +`2020-08-14` + +### 设计规范调整 + +- 行高从 `1.5`(`21px`) 调整为 `1.5715`(`22px`)。 +- 基础圆角调整，由`4px` 改为 `2px`。 +- 分割线颜色明度降低，由 `#E8E8E8` 改为 `#F0F0F0`。 +- Table 默认背景颜色从透明修改为白色。 + +### 兼容性调整 + +- IE 最低支持版本为 IE 11。 +- Vue 最低支持版本为 Vue 3.0。 + +#### 调整的 API + +- 移除了 LocaleProvider，请使用 `ConfigProvider` 替代。 +- 移除了 Tag 的 afterClose 属性。 +- 合并了 FormModel、Form，详见下方的 Form 重构部分。 +- `tabIndex`、`maxLength`、`readOnly`、`autoComplete`、`autoFocus` 更改为全小写。 +- 为了在 template 语法中更友好的使用插槽，所有涉及到 xxxRender, renderXxxx 的均改成单参数，涉及到 `itemRender`、`renderItem`、`customRender`、`dropdownRender`、`dateCellRender`、`dateFullCellRender`、`monthCellRender`、`monthFullCellRender`、`renderTabBar`。 +- 所有配置 scopedSlots 的地方统一改成 slots。 +- `{ on, props, attrs, ... }` 配置进行扁平化处理，如 `{ props: {type: 'xxx'}, on: {click: this.handleClick}}` 改成 `{ type: 'xxx', onClick: this.handleClick }`, 涉及相关字段：`okButtonProps`、`cancelButtonProps`。 +- xxx.sync 改成 v-model:xxx +- v-model 更改成 v-model:xxx，具体涉及组件： + + - v-model 改成 v-model:checked 的组件有: CheckableTag、Checkbox、Switch + - v-model 改成 v-model:value 的组件有: Radio、Mentions、CheckboxGroup、Rate、DatePicker + - v-model 改成 v-model:visible 的组件有: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown + - v-model 改成 v-model:activeKey 的组件有: Collaps、Tabs + - v-model 改成 v-model:current 的组件有: Steps + - v-model 改成 v-model:selectedKeys 的组件有: Menu + +#### 图标升级 + +在 `ant-design-vue@1.2.0` 中，我们引入了 svg 图标（[为何使用 svg 图标？](https://github.com/ant-design/ant-design/issues/10353)）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 2.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少默认包体积约 150 KB(Gzipped)。 + +旧版 Icon 使用方式将被废弃： + +```html + +``` + +2.0 中会采用按需引入的方式： + +```html + + +``` + +#### 组件重构 + +在 1.x 中我们提供了 Form、FormModel 两个表单组件，原有的 Form 组件使用 v-decorator 进行数据绑定，在 Vue2 中我们通过上下文进行强制更新组件，但是在 Vue3 中，由于引入 patchFlag 等优化方式，强制刷新会破坏 patchFlag 带来的性能优势。所以在 2.0 版本中我们将 Form、FormModel 进行合并，保留了 FormModel 的使用方式，丰富了相关功能，并改名成 Form。 + +涉及改动： + +- Form 新增 `scrollToFirstError`,`name`,`validateTrigger` 属性，新增 `finish`、`finishFailed` 事件，新增 `scrollToField` 方法。 +- Form.Item 新增 `validateFirst`, `validateTrigger`, 废弃 `prop` 属性，使用 `name` 替换。 +- 嵌套字段路径使用数组，过去版本我们通过 . 代表嵌套路径（诸如 user.name 来代表 { user: { name: '' } }）。然而在一些后台系统中，变量名中也会带上 .。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 ['user', 'name']）。 +- validateFields 不再支持 callback。validateFields 会返回 Promise 对象，因而你可以通过 async/await 或者 then/catch 来执行对应的错误处理。不再需要判断 errors 是否为空： + +```js +// v1 +validateFields((err, value) => { + if (!err) { + // Do something with value + } +}); +``` + +改成 + +```js +// v2 +validateFields().then(values => { + // Do something with value +}); +``` + ## 1.6.4 `2020-07-21` diff --git a/antdv-demo b/antdv-demo index 31e7b308a..83ab203d1 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 31e7b308adb6eabb97c003fbc7883e4d00c8f764 +Subproject commit 83ab203d1ab9861132f6efd1e74015507c0e45f6 diff --git a/components/form/Form.jsx b/components/form/Form.jsx index e87526abd..5f3dcf387 100755 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -191,7 +191,7 @@ const Form = { ); if (!this.model) { warning(false, 'Form', 'model is required for validateFields to work.'); - return; + return Promise.reject('Form `model` is required for validateFields to work.'); } const provideNameList = !!nameList; const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : []; diff --git a/package.json b/package.json index ab0cfac31..841faa80b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "2.0.0-beta.2", + "version": "2.0.0-beta.3", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ @@ -184,7 +184,7 @@ "xhr-mock": "^2.5.1" }, "dependencies": { - "@ant-design/icons-vue": "^5.1.1", + "@ant-design/icons-vue": "^5.1.4", "@babel/runtime": "^7.10.5", "@simonwep/pickr": "~1.7.0", "add-dom-event-listener": "^1.0.2", From 8ac75e4a739013d76025eac6e630bf2d6faf8a1f Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Tue, 25 Aug 2020 14:24:56 +0800 Subject: [PATCH 03/35] test: update snap --- components/table/__tests__/__snapshots__/demo.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 102a32f32..8d89aa958 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -541,7 +541,7 @@ exports[`renders ./antdv-demo/docs/table/demo/edit-cell.md correctly 1`] = `
-
Edward King 0
+
Edward King 0
@@ -560,7 +560,7 @@ exports[`renders ./antdv-demo/docs/table/demo/edit-cell.md correctly 1`] = `
-
Edward King 1
+
Edward King 1
From 5e3d9fe5a32d5b31eaa678a2a122b29bf0a38bf2 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Thu, 27 Aug 2020 16:03:42 +0800 Subject: [PATCH 04/35] fix: upload not support css scope --- components/upload/Upload.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/upload/Upload.jsx b/components/upload/Upload.jsx index 94f702266..197740bf1 100644 --- a/components/upload/Upload.jsx +++ b/components/upload/Upload.jsx @@ -12,6 +12,7 @@ import UploadList from './UploadList'; import { UploadProps } from './interface'; import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils'; import { inject } from 'vue'; +import { getDataAndAria } from '../vc-tree/src/util'; export { UploadProps }; @@ -273,14 +274,13 @@ export default { if (type === 'drag') { const dragCls = classNames(prefixCls, { - [className]: !!className, [`${prefixCls}-drag`]: true, [`${prefixCls}-drag-uploading`]: fileList.some(file => file.status === 'uploading'), [`${prefixCls}-drag-hover`]: dragState === 'dragover', [`${prefixCls}-disabled`]: disabled, }); return ( - +
+ {uploadList} {uploadButton} ); } return ( - + {uploadButton} {uploadList} From 4770ed4708bd0aef1318129f1f8d1f622aeb68e2 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Thu, 27 Aug 2020 17:28:18 +0800 Subject: [PATCH 05/35] perf: update tabs --- .../__tests__/__snapshots__/demo.test.js.snap | 9 ++- components/tabs/tabs.jsx | 2 +- components/vc-tabs/src/Tabs.jsx | 66 +++++++++---------- 3 files changed, 38 insertions(+), 39 deletions(-) diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index b479497c2..b1f4b3018 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -124,7 +124,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/card-top.md correctly 1`] = ` exports[`renders ./antdv-demo/docs/tabs/demo/custom-add-trigger.md correctly 1`] = `
+ ADD +
@@ -242,7 +243,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/editable-card.md correctly 1`] = `
-
+ +
@@ -290,7 +292,8 @@ exports[`renders ./antdv-demo/docs/tabs/demo/extra.md correctly 1`] = `
+ Extra Action +
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx index 24963b25c..47a78a840 100644 --- a/components/tabs/tabs.jsx +++ b/components/tabs/tabs.jsx @@ -172,6 +172,6 @@ export default { onChange: this.handleChange, class: cls, }; - return ; + return ; }, }; diff --git a/components/vc-tabs/src/Tabs.jsx b/components/vc-tabs/src/Tabs.jsx index 9789179fe..31b5d12dd 100644 --- a/components/vc-tabs/src/Tabs.jsx +++ b/components/vc-tabs/src/Tabs.jsx @@ -1,9 +1,8 @@ -import { provide } from 'vue'; +import { provide, reactive, watchEffect } from 'vue'; import BaseMixin from '../../_util/BaseMixin'; import PropTypes from '../../_util/vue-types'; import raf from 'raf'; import KeyCode from './KeyCode'; -import { getOptionProps } from '../../_util/props-util'; import { cloneElement } from '../../_util/vnode'; import Sentinel from './Sentinel'; import isValid from '../../_util/isValid'; @@ -40,43 +39,42 @@ export default { tabBarPosition: PropTypes.string.def('top'), activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - __propsSymbol__: PropTypes.any, direction: PropTypes.string.def('ltr'), tabBarGutter: PropTypes.number, }, - data() { - provide('sentinelContext', this); - const props = getOptionProps(this); + setup(props) { let activeKey; - if ('activeKey' in props) { + if (props.activeKey !== undefined) { activeKey = props.activeKey; - } else if ('defaultActiveKey' in props) { + } else if (props.defaultActiveKey !== undefined) { activeKey = props.defaultActiveKey; } else { activeKey = getDefaultActiveKey(props); } + const state = reactive({ + _activeKey: activeKey, + }); + watchEffect( + () => { + if (props.activeKey !== undefined) { + state._activeKey = props.activeKey; + } else if (!activeKeyIsValid(props, state._activeKey)) { + // https://github.com/ant-design/ant-design/issues/7093 + state._activeKey = getDefaultActiveKey(props); + } + }, + { + flush: 'sync', + }, + ); + return { state }; + }, + created() { this.panelSentinelStart = undefined; this.panelSentinelEnd = undefined; this.sentinelStart = undefined; this.sentinelEnd = undefined; - return { - _activeKey: activeKey, - }; - }, - watch: { - __propsSymbol__() { - const nextProps = getOptionProps(this); - if ('activeKey' in nextProps) { - this.setState({ - _activeKey: nextProps.activeKey, - }); - } else if (!activeKeyIsValid(nextProps, this.$data._activeKey)) { - // https://github.com/ant-design/ant-design/issues/7093 - this.setState({ - _activeKey: getDefaultActiveKey(nextProps), - }); - } - }, + provide('sentinelContext', this); }, beforeUnmount() { this.destroy = true; @@ -133,12 +131,10 @@ export default { }, setActiveKey(activeKey) { - if (this.$data._activeKey !== activeKey) { - const props = getOptionProps(this); - if (!('activeKey' in props)) { - this.setState({ - _activeKey: activeKey, - }); + if (this.state._activeKey !== activeKey) { + const props = this.$props; + if (props.activeKey === undefined) { + this.state._activeKey = activeKey; } this.__emit('update:activeKey', activeKey); this.__emit('change', activeKey); @@ -146,7 +142,7 @@ export default { }, getNextActiveKey(next) { - const activeKey = this.$data._activeKey; + const activeKey = this.state._activeKey; const children = []; this.$props.children.forEach(c => { if (c && !c.disabled && c.disabled !== '') { @@ -206,7 +202,7 @@ export default { navWrapper, tabBarPosition, panels: props.children, - activeKey: this.$data._activeKey, + activeKey: this.state._activeKey, direction, tabBarGutter, onKeydown: this.onNavKeyDown, @@ -216,7 +212,7 @@ export default { const tabContent = cloneElement(renderTabContent(), { prefixCls, tabBarPosition, - activeKey: this.$data._activeKey, + activeKey: this.state._activeKey, destroyInactiveTabPane, direction, onChange: this.setActiveKey, From 29d681ff528e6d2c0a1d92b1bd5b4ff1f4cfe17a Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Thu, 27 Aug 2020 17:40:29 +0800 Subject: [PATCH 06/35] style: remove not use file --- components/_util/FormDecoratorDirective.js | 10 ----- components/_util/ant-ref.js | 30 ------------- components/_util/antDirective.js | 12 ------ components/_util/proxyComponent.jsx | 49 ---------------------- components/vc-drawer/src/Drawer.js | 8 ---- 5 files changed, 109 deletions(-) delete mode 100644 components/_util/FormDecoratorDirective.js delete mode 100644 components/_util/ant-ref.js delete mode 100644 components/_util/antDirective.js delete mode 100644 components/_util/proxyComponent.jsx diff --git a/components/_util/FormDecoratorDirective.js b/components/_util/FormDecoratorDirective.js deleted file mode 100644 index 7abde9954..000000000 --- a/components/_util/FormDecoratorDirective.js +++ /dev/null @@ -1,10 +0,0 @@ -export function antDecorator(Vue) { - return Vue.directive('decorator', {}); -} - -export default { - // just for tag - install: Vue => { - antDecorator(Vue); - }, -}; diff --git a/components/_util/ant-ref.js b/components/_util/ant-ref.js deleted file mode 100644 index f49e92a5f..000000000 --- a/components/_util/ant-ref.js +++ /dev/null @@ -1,30 +0,0 @@ -import { nextTick } from 'vue'; -const antvRef = { - beforeMount: function bind(el, binding, vnode) { - nextTick(function() { - binding.value(el, vnode.key); - }); - binding.value(el, vnode.key); - }, - updated: function update(el, binding, vnode, oldVnode) { - if (oldVnode && oldVnode.directives) { - let oldBinding = oldVnode.directives.find(function(directive) { - return directive === antvRef; - }); - if (oldBinding && oldBinding.value !== binding.value) { - oldBinding && oldBinding.value(null, oldVnode.key); - binding.value(el, vnode.key); - return; - } - } - // Should not have this situation - if (vnode.el !== oldVnode.el) { - binding.value(el, vnode.key); - } - }, - unmounted: function unbind(el, binding, vnode) { - binding.value(null, vnode.key); - }, -}; - -export default antvRef; diff --git a/components/_util/antDirective.js b/components/_util/antDirective.js deleted file mode 100644 index a67e327af..000000000 --- a/components/_util/antDirective.js +++ /dev/null @@ -1,12 +0,0 @@ -import ref from 'vue-ref'; -// import { antInput } from './antInputDirective'; -import { antDecorator } from './FormDecoratorDirective'; -import { antPortal } from './portalDirective'; - -export default { - install: Vue => { - Vue.use(ref, { name: 'ant-ref' }); - antDecorator(Vue); - antPortal(Vue); - }, -}; diff --git a/components/_util/proxyComponent.jsx b/components/_util/proxyComponent.jsx deleted file mode 100644 index 5c3428a1e..000000000 --- a/components/_util/proxyComponent.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import { createVNode } from 'vue'; -import PropTypes from './vue-types'; -import { getOptionProps } from './props-util'; - -function getDisplayName(WrappedComponent) { - return WrappedComponent.name || 'Component'; -} -let k = 1; -export default function wrapWithConnect(WrappedComponent) { - const tempProps = WrappedComponent.props || {}; - const methods = WrappedComponent.methods || {}; - const props = {}; - Object.keys(tempProps).forEach(k => { - props[k] = { ...tempProps[k], required: false }; - }); - WrappedComponent.props.__propsSymbol__ = PropTypes.any; - WrappedComponent.props.children = PropTypes.array.def([]); - const ProxyWrappedComponent = { - props, - inheritAttrs: false, - name: `Proxy_${getDisplayName(WrappedComponent)}`, - methods: { - getProxyWrappedInstance() { - return this.$refs.wrappedInstance; - }, - }, - render() { - const { $slots = {}, $attrs } = this; - const props = getOptionProps(this); - const wrapProps = { - ...props, - ...$attrs, - __propsSymbol__: k++, - ref: 'wrappedInstance', - }; - const slots = {}; - for (let [key, value] of Object.entries($slots)) { - slots[key] = () => value(); - } - return createVNode(WrappedComponent, wrapProps, slots); - }, - }; - Object.keys(methods).map(m => { - ProxyWrappedComponent.methods[m] = function() { - return this.getProxyWrappedInstance()[m](...arguments); - }; - }); - return ProxyWrappedComponent; -} diff --git a/components/vc-drawer/src/Drawer.js b/components/vc-drawer/src/Drawer.js index 932310a5c..6a58fd05e 100644 --- a/components/vc-drawer/src/Drawer.js +++ b/components/vc-drawer/src/Drawer.js @@ -577,14 +577,6 @@ const Drawer = { currentDrawer[this.drawerId] = open ? this.container : open; const children = this.getChildToRender(this.sFirstEnter ? open : false); if (!getContainer) { - // const directives = [ - // { - // name: 'ant-ref', - // value: c => { - // this.container = c; - // }, - // }, - // ]; return (
Date: Thu, 27 Aug 2020 18:34:23 +0800 Subject: [PATCH 07/35] perf: update propssymbol --- components/select/index.jsx | 2 +- components/transfer/ListItem.jsx | 2 +- components/tree-select/index.jsx | 2 +- components/tree/Tree.jsx | 2 +- components/vc-slick/src/slider.js | 2 +- components/vc-tree-select/src/Base/BasePopup.jsx | 2 +- components/vc-tree-select/src/Popup/SinglePopup.jsx | 2 +- components/vc-tree-select/src/Select.jsx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/select/index.jsx b/components/select/index.jsx index 11b942a1f..84183efbe 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -252,7 +252,7 @@ const Select = { class: cls, ref: 'vcSelect', }; - return ; + return ; }, }; diff --git a/components/transfer/ListItem.jsx b/components/transfer/ListItem.jsx index d084c4ff6..4627197db 100644 --- a/components/transfer/ListItem.jsx +++ b/components/transfer/ListItem.jsx @@ -57,7 +57,7 @@ export default { ...lazy, }; children = ( - + {listItem} ); diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index 7f003d4f5..8c472ab0b 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -195,7 +195,7 @@ const TreeSelect = { ); }, diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx index 245a26fe9..555b10487 100644 --- a/components/tree/Tree.jsx +++ b/components/tree/Tree.jsx @@ -219,6 +219,6 @@ export default { if (treeData) { vcTreeProps.treeData = treeData; } - return ; + return ; }, }; diff --git a/components/vc-slick/src/slider.js b/components/vc-slick/src/slider.js index 6498d5d1a..a986c7b17 100644 --- a/components/vc-slick/src/slider.js +++ b/components/vc-slick/src/slider.js @@ -193,6 +193,6 @@ export default { children: newChildren, ref: this.innerSliderRefHandler, }; - return ; + return ; }, }; diff --git a/components/vc-tree-select/src/Base/BasePopup.jsx b/components/vc-tree-select/src/Base/BasePopup.jsx index 8729f2bdf..1937b56ff 100644 --- a/components/vc-tree-select/src/Base/BasePopup.jsx +++ b/components/vc-tree-select/src/Base/BasePopup.jsx @@ -270,7 +270,7 @@ const BasePopup = { onExpand: this.onTreeExpand, onLoad: this.onLoad, }; - $tree = ; + $tree = ; } return ( diff --git a/components/vc-tree-select/src/Popup/SinglePopup.jsx b/components/vc-tree-select/src/Popup/SinglePopup.jsx index 34eb2a3ab..438ae2b29 100644 --- a/components/vc-tree-select/src/Popup/SinglePopup.jsx +++ b/components/vc-tree-select/src/Popup/SinglePopup.jsx @@ -73,7 +73,7 @@ const SinglePopup = { renderSearch: this._renderSearch, }} ref={this.popupRef} - __propsSymbol__={Symbol()} + __propsSymbol__={[]} /> ); }, diff --git a/components/vc-tree-select/src/Select.jsx b/components/vc-tree-select/src/Select.jsx index 26842f3f4..faa6cf23f 100644 --- a/components/vc-tree-select/src/Select.jsx +++ b/components/vc-tree-select/src/Select.jsx @@ -1091,7 +1091,7 @@ const Select = { }; const Popup = isMultiple ? MultiplePopup : SinglePopup; - const $popup = ; + const $popup = ; const Selector = isMultiple ? MultipleSelector : SingleSelector; const $selector = ; From 3d17d5f26e5070db9d13c3cab14a8c9e8bb48758 Mon Sep 17 00:00:00 2001 From: undefined Date: Thu, 27 Aug 2020 22:38:56 +0800 Subject: [PATCH 08/35] perf: update lazyload --- components/table/filterDropdown.jsx | 53 ---------- components/table/interface.js | 1 - components/transfer/ListItem.jsx | 6 +- components/vc-lazy-load/src/LazyLoad.jsx | 20 ++-- examples/App.vue | 120 +---------------------- 5 files changed, 13 insertions(+), 187 deletions(-) diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index 4d98921a9..d201cf4eb 100755 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -53,59 +53,6 @@ export default { ); return state; }, - // data() { - // this.neverShown = false; - // const visible = - // 'filterDropdownVisible' in this.column ? this.column.filterDropdownVisible : false; - // this.preProps = { ...getOptionProps(this) }; - // return { - // sSelectedKeys: this.selectedKeys, - // sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单 - // sVisible: visible, - // sValueKeys: generateValueMaps(this.column.filters), - // }; - // }, - watch: { - // _propsSymbol: syncWatch(function() { - // const nextProps = getOptionProps(this); - // const { column } = nextProps; - // const newState = {}; - // /** - // * if the state is visible the component should ignore updates on selectedKeys prop to avoid - // * that the user selection is lost - // * this happens frequently when a table is connected on some sort of realtime data - // * Fixes https://github.com/ant-design/ant-design/issues/10289 and - // * https://github.com/ant-design/ant-design/issues/10209 - // */ - // if ( - // 'selectedKeys' in nextProps && - // !shallowequal(this.preProps.selectedKeys, nextProps.selectedKeys) - // ) { - // newState.sSelectedKeys = nextProps.selectedKeys; - // } - // if (!shallowequal((this.preProps.column || {}).filters, (nextProps.column || {}).filters)) { - // newState.sValueKeys = generateValueMaps(nextProps.column.filters); - // } - // if ('filterDropdownVisible' in column) { - // newState.sVisible = column.filterDropdownVisible; - // } - // if (Object.keys(newState).length > 0) { - // this.setState(newState); - // } - // this.preProps = { ...nextProps }; - // }), - // 'column.fixed': function (val) { - // this.setNeverShown(this.column) - // }, - // column (val) { - // if ('filterDropdownVisible' in val) { - // this.sVisible = val.filterDropdownVisible - // } - // }, - // selectedKeys (val) { - // this.sSelectedKeys = val - // }, - }, mounted() { const { column } = this; diff --git a/components/table/interface.js b/components/table/interface.js index f41294466..a58c2132a 100644 --- a/components/table/interface.js +++ b/components/table/interface.js @@ -195,7 +195,6 @@ export const SelectionBoxProps = { // } export const FilterMenuProps = { - _propsSymbol: PropTypes.any, locale: TableLocale, selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]), column: PropTypes.object, diff --git a/components/transfer/ListItem.jsx b/components/transfer/ListItem.jsx index 4627197db..5f55923ae 100644 --- a/components/transfer/ListItem.jsx +++ b/components/transfer/ListItem.jsx @@ -56,11 +56,7 @@ export default { debounce: false, ...lazy, }; - children = ( - - {listItem} - - ); + children = {listItem}; } else { children = listItem; } diff --git a/components/vc-lazy-load/src/LazyLoad.jsx b/components/vc-lazy-load/src/LazyLoad.jsx index 987c6ea0b..8542e6bb7 100644 --- a/components/vc-lazy-load/src/LazyLoad.jsx +++ b/components/vc-lazy-load/src/LazyLoad.jsx @@ -7,6 +7,7 @@ import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; import parentScroll from './utils/parentScroll'; import inViewport from './utils/inViewport'; +import { watchEffect } from 'vue'; const lazyLoadProps = { debounce: PropTypes.bool, @@ -22,7 +23,6 @@ const lazyLoadProps = { threshold: PropTypes.number, throttle: PropTypes.number, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - _propsSymbol: PropTypes.any, }; export default { @@ -53,20 +53,15 @@ export default { visible: false, }; }, - watch: { - _propsSymbol() { - if (!this.visible) { - this.lazyLoadHandler(); - } - }, - }, mounted() { this.$nextTick(() => { - this._mounted = true; + watchEffect(() => { + if (!this.visible) { + this.lazyLoadHandler(this.$props); + } + }); const eventNode = this.getEventNode(); - this.lazyLoadHandler(); - if (this.lazyLoadHandler.flush) { this.lazyLoadHandler.flush(); } @@ -75,7 +70,6 @@ export default { }); }, beforeUnmount() { - this._mounted = false; if (this.lazyLoadHandler.cancel) { this.lazyLoadHandler.cancel(); } @@ -110,7 +104,7 @@ export default { }; }, lazyLoadHandler() { - if (!this._mounted) { + if (!this._.isMounted) { return; } const offset = this.getOffset(); diff --git a/examples/App.vue b/examples/App.vue index d649b1641..b67493837 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -11,125 +11,15 @@ Use Drawer to quickly preview details of an object, such as those in a list. ```vue