From 712f2b1599d27d0fb6303525853717f76a3d29bd Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Mon, 12 Oct 2020 18:46:05 +0800 Subject: [PATCH] refactor: auto-complete by ts --- antdv-demo | 2 +- .../{InputElement.jsx => InputElement.tsx} | 2 +- .../auto-complete/{index.jsx => index.tsx} | 40 ++++++------------- components/calendar/Header.jsx | 2 +- components/config-provider/index.tsx | 2 +- components/form/Form.jsx | 4 +- components/input/Input.jsx | 6 +-- components/layout/layout.jsx | 2 +- components/select/{index.jsx => index.tsx} | 21 +++++----- components/table/interface.js | 2 +- components/transfer/index.jsx | 2 +- components/vc-mentions/src/Option.jsx | 2 +- components/vc-select/OptGroup.jsx | 5 ++- components/vc-select/Option.jsx | 5 ++- components/vc-select/Select.jsx | 6 +-- components/vc-select2/Selector/index.tsx | 4 +- 16 files changed, 48 insertions(+), 59 deletions(-) rename components/auto-complete/{InputElement.jsx => InputElement.tsx} (83%) rename components/auto-complete/{index.jsx => index.tsx} (85%) rename components/select/{index.jsx => index.tsx} (95%) diff --git a/antdv-demo b/antdv-demo index 83ab203d1..88970d13f 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 83ab203d1ab9861132f6efd1e74015507c0e45f6 +Subproject commit 88970d13f8e2e6f5c96a28697fe0b399eccdcb07 diff --git a/components/auto-complete/InputElement.jsx b/components/auto-complete/InputElement.tsx similarity index 83% rename from components/auto-complete/InputElement.jsx rename to components/auto-complete/InputElement.tsx index 22f5c607d..c3623cfec 100644 --- a/components/auto-complete/InputElement.jsx +++ b/components/auto-complete/InputElement.tsx @@ -1,7 +1,7 @@ import { cloneElement } from '../_util/vnode'; import { flattenChildren } from '../_util/props-util'; -const InputElement = (_, { attrs, slots }) => { +const InputElement = (_: any, { attrs, slots }) => { const children = flattenChildren(slots.default?.())[0]; return cloneElement(children, { ...attrs }); }; diff --git a/components/auto-complete/index.jsx b/components/auto-complete/index.tsx similarity index 85% rename from components/auto-complete/index.jsx rename to components/auto-complete/index.tsx index 796d5511b..7e7be38a4 100644 --- a/components/auto-complete/index.jsx +++ b/components/auto-complete/index.tsx @@ -1,4 +1,4 @@ -import { inject, provide } from 'vue'; +import { App, defineComponent, inject, provide } from 'vue'; import { Option, OptGroup } from '../vc-select'; import Select, { AbstractSelectProps, SelectValue } from '../select'; import Input from '../input'; @@ -7,20 +7,7 @@ import PropTypes from '../_util/vue-types'; import { defaultConfigProvider } from '../config-provider'; import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util'; -// const DataSourceItemObject = PropTypes.shape({ -// value: String, -// text: String, -// }).loose -// const DataSourceItemType = PropTypes.oneOfType([ -// PropTypes.string, -// DataSourceItemObject, -// ]).isRequired - -// export interface AutoCompleteInputProps { -// onChange?: React.FormEventHandler; -// value: any; -// } -function isSelectOptionOrSelectOptGroup(child) { +function isSelectOptionOrSelectOptGroup(child: any): Boolean { return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup); } @@ -30,15 +17,16 @@ const AutoCompleteProps = { defaultValue: SelectValue, dataSource: PropTypes.array, dropdownMenuStyle: PropTypes.object, - optionLabelProp: String, + optionLabelProp: PropTypes.string, dropdownMatchSelectWidth: PropTypes.looseBool, // onChange?: (value: SelectValue) => void; // onSelect?: (value: SelectValue, option: Object) => any; }; -const AutoComplete = { +const AutoComplete = defineComponent({ name: 'AAutoComplete', inheritAttrs: false, + emits: ['change', 'select', 'focus', 'blur'], props: { ...AutoCompleteProps, prefixCls: PropTypes.string.def('ant-select'), @@ -53,23 +41,21 @@ const AutoComplete = { }, Option: { ...Option, name: 'AAutoCompleteOption' }, OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' }, - // model: { - // prop: 'value', - // event: 'change', - // }, setup() { return { configProvider: inject('configProvider', defaultConfigProvider), + popupRef: null, + select: null }; }, created() { provide('savePopupRef', this.savePopupRef); }, methods: { - savePopupRef(ref) { + savePopupRef(ref: any) { this.popupRef = ref; }, - saveSelect(node) { + saveSelect(node: any) { this.select = node; }, getInputElement() { @@ -100,7 +86,7 @@ const AutoComplete = { const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('select', customizePrefixCls); - const { class: className } = this.$attrs; + const { class: className} = this.$attrs as any; const cls = { [className]: !!className, [`${prefixCls}-lg`]: size === 'large', @@ -115,7 +101,7 @@ const AutoComplete = { options = childArray; } else { options = dataSource - ? dataSource.map(item => { + ? dataSource.map((item: any) => { if (isValidElement(item)) { return item; } @@ -145,10 +131,10 @@ const AutoComplete = { }; return ; }, -}; +}); /* istanbul ignore next */ -AutoComplete.install = function(app) { +AutoComplete.install = function(app: App) { app.component(AutoComplete.name, AutoComplete); app.component(AutoComplete.Option.name, AutoComplete.Option); app.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup); diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index a927c1379..62124c92b 100644 --- a/components/calendar/Header.jsx +++ b/components/calendar/Header.jsx @@ -21,7 +21,7 @@ function getMonthsLocale(value) { export const HeaderProps = { prefixCls: PropTypes.string, locale: PropTypes.any, - fullscreen: PropTypes.looseBoolean, + fullscreen: PropTypes.looseBool, yearSelectOffset: PropTypes.number, yearSelectTotal: PropTypes.number, type: PropTypes.string, diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 0d7d191a0..ced6ec71c 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -160,7 +160,7 @@ export const defaultConfigProvider = { return `ant-${suffixCls}`; }, renderEmpty: defaultRenderEmpty, -}; +} as any; /* istanbul ignore next */ ConfigProvider.install = function(app: App) { diff --git a/components/form/Form.jsx b/components/form/Form.jsx index 5916757ad..4c03ebe37 100755 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -39,9 +39,9 @@ export const ValidationRule = { /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */ type: PropTypes.string, /** indicates whether field is required */ - required: PropTypes.looseBoolean, + required: PropTypes.looseBool, /** treat required fields that only contain whitespace as errors */ - whitespace: PropTypes.looseBoolean, + whitespace: PropTypes.looseBool, /** validate the exact length of a field */ len: PropTypes.number, /** validate the min length of a field */ diff --git a/components/input/Input.jsx b/components/input/Input.jsx index 2e5980701..733e2cf24 100644 --- a/components/input/Input.jsx +++ b/components/input/Input.jsx @@ -1,4 +1,4 @@ -import { inject, withDirectives } from 'vue'; +import { defineComponent, inject, withDirectives } from 'vue'; import antInputDirective from '../_util/antInputDirective'; import classNames from '../_util/classNames'; import omit from 'omit.js'; @@ -48,7 +48,7 @@ export function getInputClassName(prefixCls, size, disabled) { }); } -export default { +export default defineComponent({ name: 'AInput', inheritAttrs: false, props: { @@ -227,4 +227,4 @@ export default { }; return ; }, -}; +}); diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx index ba951dd11..bed7173c1 100644 --- a/components/layout/layout.jsx +++ b/components/layout/layout.jsx @@ -6,7 +6,7 @@ import { defaultConfigProvider } from '../config-provider'; export const BasicProps = { prefixCls: PropTypes.string, - hasSider: PropTypes.looseBoolean, + hasSider: PropTypes.looseBool, tagName: PropTypes.string, }; diff --git a/components/select/index.jsx b/components/select/index.tsx similarity index 95% rename from components/select/index.jsx rename to components/select/index.tsx index df6674722..583f129df 100644 --- a/components/select/index.jsx +++ b/components/select/index.tsx @@ -1,4 +1,4 @@ -import { provide, inject } from 'vue'; +import { provide, inject, defineComponent, App } from 'vue'; import warning from '../_util/warning'; import omit from 'omit.js'; import PropTypes, { withUndefined } from '../_util/vue-types'; @@ -65,7 +65,7 @@ const SelectProps = { maxTagTextLength: PropTypes.number, dropdownMatchSelectWidth: PropTypes.looseBool, optionFilterProp: PropTypes.string, - labelInValue: PropTypes.looseBoolean, + labelInValue: PropTypes.looseBool, getPopupContainer: PropTypes.func, tokenSeparators: PropTypes.arrayOf(PropTypes.string), getInputElement: PropTypes.func, @@ -89,7 +89,7 @@ const SelectPropTypes = { export { AbstractSelectProps, SelectValue, SelectProps }; const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE'; -const Select = { +const Select = defineComponent({ SECRET_COMBOBOX_MODE_DO_NOT_USE, Option: { ...Option, name: 'ASelectOption' }, OptGroup: { ...OptGroup, name: 'ASelectOptGroup' }, @@ -104,6 +104,7 @@ const Select = { setup() { return { configProvider: inject('configProvider', defaultConfigProvider), + popupRef: null, }; }, created() { @@ -117,7 +118,7 @@ const Select = { ); }, methods: { - getNotFoundContent(renderEmpty) { + getNotFoundContent(renderEmpty: any) { const notFoundContent = getComponent(this, 'notFoundContent'); if (notFoundContent !== undefined) { return notFoundContent; @@ -131,10 +132,10 @@ const Select = { this.popupRef = ref; }, focus() { - this.$refs.vcSelect.focus(); + (this.$refs.vcSelect as any).focus(); }, blur() { - this.$refs.vcSelect.blur(); + (this.$refs.vcSelect as any).blur(); }, isCombobox() { @@ -167,7 +168,7 @@ const Select = { showArrow, ...restProps } = getOptionProps(this); - const { class: className } = this.$attrs; + const { class: className } = this.$attrs as any; const getPrefixCls = this.configProvider.getPrefixCls; const renderEmpty = this.configProvider.renderEmpty; @@ -182,7 +183,7 @@ const Select = { menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) ? menuItemSelectedIcon[0] : menuItemSelectedIcon; - const rest = omit(restProps, [ + const rest = omit(restProps as any, [ 'inputIcon', 'removeIcon', 'clearIcon', @@ -254,10 +255,10 @@ const Select = { }; return ; }, -}; +}); /* istanbul ignore next */ -Select.install = function(app) { +Select.install = function(app: App) { app.component(Select.name, Select); app.component(Select.Option.name, Select.Option); app.component(Select.OptGroup.name, Select.OptGroup); diff --git a/components/table/interface.js b/components/table/interface.js index 98b828c61..d5d8c47eb 100644 --- a/components/table/interface.js +++ b/components/table/interface.js @@ -28,7 +28,7 @@ export const ColumnProps = { filterDropdown: PropTypes.any, filterDropdownVisible: PropTypes.looseBool, // onFilterDropdownVisibleChange?: (visible: boolean) => void; - sorter: PropTypes.oneOfType([PropTypes.looseBoolean, PropTypes.func]), + sorter: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]), defaultSortOrder: PropTypes.oneOf(['ascend', 'descend']), colSpan: PropTypes.number, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index 09681f115..486929521 100644 --- a/components/transfer/index.jsx +++ b/components/transfer/index.jsx @@ -21,7 +21,7 @@ export const TransferItem = { export const TransferProps = { prefixCls: PropTypes.string, dataSource: PropTypes.arrayOf(PropTypes.shape(TransferItem).loose), - disabled: PropTypes.looseBoolean, + disabled: PropTypes.looseBool, targetKeys: PropTypes.arrayOf(PropTypes.string), selectedKeys: PropTypes.arrayOf(PropTypes.string), render: PropTypes.func, diff --git a/components/vc-mentions/src/Option.jsx b/components/vc-mentions/src/Option.jsx index 153850fef..3d9d9e0b6 100644 --- a/components/vc-mentions/src/Option.jsx +++ b/components/vc-mentions/src/Option.jsx @@ -3,7 +3,7 @@ import PropTypes from '../../_util/vue-types'; export const OptionProps = { value: PropTypes.string, - disabled: PropTypes.looseBoolean, + disabled: PropTypes.looseBool, children: PropTypes.any, }; diff --git a/components/vc-select/OptGroup.jsx b/components/vc-select/OptGroup.jsx index 1293870d5..3626a0fe3 100644 --- a/components/vc-select/OptGroup.jsx +++ b/components/vc-select/OptGroup.jsx @@ -1,5 +1,6 @@ +import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; -export default { +export default defineComponent({ props: { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -8,4 +9,4 @@ export default { render() { return null; }, -}; +}); diff --git a/components/vc-select/Option.jsx b/components/vc-select/Option.jsx index 6225e64a7..94dca1e45 100644 --- a/components/vc-select/Option.jsx +++ b/components/vc-select/Option.jsx @@ -1,6 +1,7 @@ +import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; -export default { +export default defineComponent({ props: { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -11,4 +12,4 @@ export default { render() { return null; }, -}; +}); diff --git a/components/vc-select/Select.jsx b/components/vc-select/Select.jsx index 267f2c29e..500f5c99a 100644 --- a/components/vc-select/Select.jsx +++ b/components/vc-select/Select.jsx @@ -1,4 +1,4 @@ -import { TransitionGroup, withDirectives } from 'vue'; +import { defineComponent, TransitionGroup, withDirectives } from 'vue'; import KeyCode from '../_util/KeyCode'; import PropTypes from '../_util/vue-types'; import classnames from '../_util/classNames'; @@ -71,7 +71,7 @@ function chaining(...fns) { } }; } -const Select = { +const Select = defineComponent({ inheritAttrs: false, Option, OptGroup, @@ -1599,6 +1599,6 @@ const Select = { ); }, -}; +}); export { Select }; export default Select; diff --git a/components/vc-select2/Selector/index.tsx b/components/vc-select2/Selector/index.tsx index 6f9d4878d..48b3e2c1e 100644 --- a/components/vc-select2/Selector/index.tsx +++ b/components/vc-select2/Selector/index.tsx @@ -14,9 +14,9 @@ import SingleSelector from './SingleSelector'; import { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator'; import { RenderNode, Mode } from '../interface'; import useLock from '../hooks/useLock'; -import { defineComponent, VNode, VNodeChild } from 'vue'; +import { defineComponent, VNodeChild } from 'vue'; import createRef, { RefObject } from '../../_util/createRef'; -import PropTypes from '../../_util/vue-types copy'; +import PropTypes from '../../_util/vue-types'; export interface InnerSelectorProps { prefixCls: string;