refactor: auto-complete by ts

antdv-demo

@@ -1 +1 @@
-Subproject commit 83ab203d1ab9861132f6efd1e74015507c0e45f6
+Subproject commit 88970d13f8e2e6f5c96a28697fe0b399eccdcb07

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 });
 };

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<any>;
-//   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 <Select {...selectProps}>{options}</Select>;
   },
-};
+});
 
 /* 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);

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,

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) {

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 */

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 <ClearableLabeledInput {...props} ref={this.saveClearableInput} />;
   },
-};
+});

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,
 };
 

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 <VcSelect {...selectProps} __propsSymbol__={[]} />;
   },
-};
+});
 
 /* 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);

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]),

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,

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,
 };
 

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;
   },
-};
+});

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;
   },
-};
+});

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 = {
       </SelectTrigger>
     );
   },
-};
+});
 export { Select };
 export default Select;

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;