refactor: tree-select to ts
parent
e0667855ee
commit
5643bfef88
|
@ -39,7 +39,17 @@ export interface SelectPropsTypes<VT>
|
||||||
}
|
}
|
||||||
export type SelectTypes = SelectPropsTypes<SelectValue>;
|
export type SelectTypes = SelectPropsTypes<SelectValue>;
|
||||||
export const SelectProps = () => ({
|
export const SelectProps = () => ({
|
||||||
...omit(BaseProps(), ['inputIcon', 'mode', 'getInputElement', 'backfill', 'class', 'style']),
|
...(omit(BaseProps(), [
|
||||||
|
'inputIcon',
|
||||||
|
'mode',
|
||||||
|
'getInputElement',
|
||||||
|
'backfill',
|
||||||
|
'class',
|
||||||
|
'style',
|
||||||
|
]) as Omit<
|
||||||
|
ReturnType<typeof BaseProps>,
|
||||||
|
'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'
|
||||||
|
>),
|
||||||
value: {
|
value: {
|
||||||
type: [Array, Object, String, Number] as PropType<SelectValue>,
|
type: [Array, Object, String, Number] as PropType<SelectValue>,
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
|
import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
|
||||||
import { inject } from 'vue';
|
import { App, defineComponent, inject } from 'vue';
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import { TreeSelectProps } from './interface';
|
import { TreeSelectProps } from './interface';
|
||||||
import warning from '../_util/warning';
|
import warning from '../_util/warning';
|
||||||
import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
|
import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
|
||||||
|
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
import { defaultConfigProvider } from '../config-provider';
|
||||||
|
|
||||||
export { TreeData, TreeSelectProps } from './interface';
|
export { TreeData, TreeSelectProps } from './interface';
|
||||||
|
@ -14,7 +15,7 @@ import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
||||||
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
|
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
|
|
||||||
const TreeSelect = {
|
const TreeSelect = defineComponent({
|
||||||
TreeNode,
|
TreeNode,
|
||||||
SHOW_ALL,
|
SHOW_ALL,
|
||||||
SHOW_PARENT,
|
SHOW_PARENT,
|
||||||
|
@ -28,6 +29,7 @@ const TreeSelect = {
|
||||||
}),
|
}),
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
|
vcTreeSelect: null,
|
||||||
configProvider: inject('configProvider', defaultConfigProvider),
|
configProvider: inject('configProvider', defaultConfigProvider),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -111,7 +113,7 @@ const TreeSelect = {
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const props = getOptionProps(this);
|
const props: any = getOptionProps(this);
|
||||||
const {
|
const {
|
||||||
prefixCls: customizePrefixCls,
|
prefixCls: customizePrefixCls,
|
||||||
size,
|
size,
|
||||||
|
@ -121,10 +123,9 @@ const TreeSelect = {
|
||||||
...restProps
|
...restProps
|
||||||
} = props;
|
} = props;
|
||||||
const { class: className } = this.$attrs;
|
const { class: className } = this.$attrs;
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const { renderEmpty, getPrefixCls } = this.configProvider;
|
||||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||||
|
|
||||||
const renderEmpty = this.configProvider.renderEmpty;
|
|
||||||
const notFoundContent = getComponent(this, 'notFoundContent');
|
const notFoundContent = getComponent(this, 'notFoundContent');
|
||||||
const removeIcon = getComponent(this, 'removeIcon');
|
const removeIcon = getComponent(this, 'removeIcon');
|
||||||
const clearIcon = getComponent(this, 'clearIcon');
|
const clearIcon = getComponent(this, 'clearIcon');
|
||||||
|
@ -145,7 +146,7 @@ const TreeSelect = {
|
||||||
const cls = {
|
const cls = {
|
||||||
[`${prefixCls}-lg`]: size === 'large',
|
[`${prefixCls}-lg`]: size === 'large',
|
||||||
[`${prefixCls}-sm`]: size === 'small',
|
[`${prefixCls}-sm`]: size === 'small',
|
||||||
[className]: className,
|
[className as string]: className,
|
||||||
};
|
};
|
||||||
|
|
||||||
// showSearch: single - false, multiple - true
|
// showSearch: single - false, multiple - true
|
||||||
|
@ -196,10 +197,10 @@ const TreeSelect = {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
});
|
||||||
|
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
TreeSelect.install = function(app) {
|
TreeSelect.install = function(app: App) {
|
||||||
app.component(TreeSelect.name, TreeSelect);
|
app.component(TreeSelect.name, TreeSelect);
|
||||||
app.component('ATreeSelectNode', TreeSelect.TreeNode);
|
app.component('ATreeSelectNode', TreeSelect.TreeNode);
|
||||||
return app;
|
return app;
|
|
@ -1,5 +1,6 @@
|
||||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
import PropTypes, { withUndefined } from '../_util/vue-types';
|
||||||
import { SelectProps } from '../select';
|
import { SelectProps } from '../select';
|
||||||
|
import { tuple } from '../_util/type';
|
||||||
|
|
||||||
export const TreeData = PropTypes.shape({
|
export const TreeData = PropTypes.shape({
|
||||||
key: PropTypes.string,
|
key: PropTypes.string,
|
||||||
|
@ -35,7 +36,7 @@ export const TreeSelectProps = () => ({
|
||||||
notFoundContent: PropTypes.any,
|
notFoundContent: PropTypes.any,
|
||||||
searchPlaceholder: PropTypes.string,
|
searchPlaceholder: PropTypes.string,
|
||||||
searchValue: PropTypes.string,
|
searchValue: PropTypes.string,
|
||||||
showCheckedStrategy: PropTypes.oneOf(['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD']),
|
showCheckedStrategy: PropTypes.oneOf(tuple('SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD')),
|
||||||
suffixIcon: PropTypes.any,
|
suffixIcon: PropTypes.any,
|
||||||
treeCheckable: PropTypes.looseBool,
|
treeCheckable: PropTypes.looseBool,
|
||||||
treeCheckStrictly: PropTypes.looseBool,
|
treeCheckStrictly: PropTypes.looseBool,
|
||||||
|
|
Loading…
Reference in New Issue