perf: remove no need file
tanjinzhou
parent
d2d613980a
commit
48f385556f
|
|
@ -13,6 +13,7 @@ module.exports = function(modules) {
|
||||||
resolve('@babel/plugin-transform-object-assign'),
|
resolve('@babel/plugin-transform-object-assign'),
|
||||||
resolve('@babel/plugin-proposal-object-rest-spread'),
|
resolve('@babel/plugin-proposal-object-rest-spread'),
|
||||||
resolve('@babel/plugin-proposal-export-default-from'),
|
resolve('@babel/plugin-proposal-export-default-from'),
|
||||||
|
resolve('@babel/plugin-proposal-export-namespace-from'),
|
||||||
resolve('@babel/plugin-proposal-class-properties'),
|
resolve('@babel/plugin-proposal-class-properties'),
|
||||||
resolve('@babel/plugin-syntax-dynamic-import'),
|
resolve('@babel/plugin-syntax-dynamic-import'),
|
||||||
// resolve('babel-plugin-inline-import-data-uri'),
|
// resolve('babel-plugin-inline-import-data-uri'),
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ module.exports = {
|
||||||
'@babel/plugin-transform-object-assign',
|
'@babel/plugin-transform-object-assign',
|
||||||
'@babel/plugin-proposal-object-rest-spread',
|
'@babel/plugin-proposal-object-rest-spread',
|
||||||
'@babel/plugin-proposal-export-default-from',
|
'@babel/plugin-proposal-export-default-from',
|
||||||
|
'@babel/plugin-proposal-export-namespace-from',
|
||||||
'@babel/plugin-proposal-class-properties',
|
'@babel/plugin-proposal-class-properties',
|
||||||
'@babel/plugin-syntax-dynamic-import',
|
'@babel/plugin-syntax-dynamic-import',
|
||||||
'@babel/plugin-transform-runtime',
|
'@babel/plugin-transform-runtime',
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select2';
|
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
|
||||||
import { OptionProps as OptionPropsType } from '../vc-select2/Option';
|
import { OptionProps as OptionPropsType } from '../vc-select/Option';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
import { defaultConfigProvider } from '../config-provider';
|
||||||
import getIcons from './utils/iconUtil';
|
import getIcons from './utils/iconUtil';
|
||||||
import { computed, defineComponent, inject, ref, VNodeChild, App, PropType } from 'vue';
|
import { computed, defineComponent, inject, ref, VNodeChild, App, PropType } from 'vue';
|
||||||
|
|
|
||||||
|
|
@ -1,268 +0,0 @@
|
||||||
import { provide, inject, defineComponent, App } from 'vue';
|
|
||||||
import warning from '../_util/warning';
|
|
||||||
import omit from 'omit.js';
|
|
||||||
import PropTypes, { withUndefined } from '../_util/vue-types';
|
|
||||||
import { Select as VcSelect, Option, OptGroup } from '../vc-select';
|
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
|
||||||
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
|
|
||||||
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
|
||||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
|
||||||
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
|
|
||||||
import DownOutlined from '@ant-design/icons-vue/DownOutlined';
|
|
||||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
|
||||||
import { cloneElement } from '../_util/vnode';
|
|
||||||
|
|
||||||
const AbstractSelectProps = () => ({
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
size: PropTypes.oneOf(['small', 'large', 'default']),
|
|
||||||
showAction: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
|
|
||||||
notFoundContent: PropTypes.VNodeChild,
|
|
||||||
transitionName: PropTypes.string,
|
|
||||||
choiceTransitionName: PropTypes.string,
|
|
||||||
showSearch: PropTypes.looseBool,
|
|
||||||
allowClear: PropTypes.looseBool,
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
tabindex: PropTypes.number,
|
|
||||||
placeholder: PropTypes.VNodeChild,
|
|
||||||
defaultActiveFirstOption: PropTypes.looseBool,
|
|
||||||
dropdownClassName: PropTypes.string,
|
|
||||||
dropdownStyle: PropTypes.style,
|
|
||||||
dropdownMenuStyle: PropTypes.style,
|
|
||||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
|
||||||
// onSearch: (value: string) => any,
|
|
||||||
filterOption: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
|
|
||||||
autofocus: PropTypes.looseBool,
|
|
||||||
backfill: PropTypes.looseBool,
|
|
||||||
showArrow: PropTypes.looseBool,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
open: PropTypes.looseBool,
|
|
||||||
defaultOpen: PropTypes.looseBool,
|
|
||||||
autoClearSearchValue: PropTypes.looseBool,
|
|
||||||
dropdownRender: PropTypes.func,
|
|
||||||
onChange: PropTypes.func,
|
|
||||||
loading: PropTypes.looseBool,
|
|
||||||
});
|
|
||||||
const Value = PropTypes.shape({
|
|
||||||
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
}).loose;
|
|
||||||
|
|
||||||
const SelectValue = PropTypes.oneOfType([
|
|
||||||
PropTypes.string,
|
|
||||||
PropTypes.number,
|
|
||||||
PropTypes.arrayOf(PropTypes.oneOfType([Value, PropTypes.string, PropTypes.number])),
|
|
||||||
Value,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const SelectProps = {
|
|
||||||
...AbstractSelectProps(),
|
|
||||||
value: SelectValue,
|
|
||||||
defaultValue: SelectValue,
|
|
||||||
// mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
|
|
||||||
mode: PropTypes.string,
|
|
||||||
optionLabelProp: PropTypes.string,
|
|
||||||
firstActiveValue: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
|
||||||
maxTagCount: PropTypes.number,
|
|
||||||
maxTagPlaceholder: PropTypes.any,
|
|
||||||
maxTagTextLength: PropTypes.number,
|
|
||||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
|
||||||
optionFilterProp: PropTypes.string,
|
|
||||||
labelInValue: PropTypes.looseBool,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
|
||||||
getInputElement: PropTypes.func,
|
|
||||||
options: PropTypes.array,
|
|
||||||
suffixIcon: PropTypes.any,
|
|
||||||
removeIcon: PropTypes.any,
|
|
||||||
clearIcon: PropTypes.any,
|
|
||||||
menuItemSelectedIcon: PropTypes.any,
|
|
||||||
};
|
|
||||||
|
|
||||||
const SelectPropTypes = {
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
size: PropTypes.oneOf(['default', 'large', 'small']),
|
|
||||||
// combobox: PropTypes.looseBool,
|
|
||||||
notFoundContent: PropTypes.any,
|
|
||||||
showSearch: PropTypes.looseBool,
|
|
||||||
optionLabelProp: PropTypes.string,
|
|
||||||
transitionName: PropTypes.string,
|
|
||||||
choiceTransitionName: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export { AbstractSelectProps, SelectValue, SelectProps };
|
|
||||||
const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
|
||||||
const Select = defineComponent({
|
|
||||||
SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
|
||||||
Option: { ...Option, name: 'ASelectOption' },
|
|
||||||
OptGroup: { ...OptGroup, name: 'ASelectOptGroup' },
|
|
||||||
name: 'ASelect',
|
|
||||||
props: {
|
|
||||||
...SelectProps,
|
|
||||||
showSearch: PropTypes.looseBool.def(false),
|
|
||||||
transitionName: PropTypes.string.def('slide-up'),
|
|
||||||
choiceTransitionName: PropTypes.string.def(''),
|
|
||||||
},
|
|
||||||
propTypes: SelectPropTypes,
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
configProvider: inject('configProvider', defaultConfigProvider),
|
|
||||||
popupRef: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
provide('savePopupRef', this.savePopupRef);
|
|
||||||
warning(
|
|
||||||
this.$props.mode !== 'combobox',
|
|
||||||
'Select',
|
|
||||||
'The combobox mode of Select is deprecated,' +
|
|
||||||
'it will be removed in next major version,' +
|
|
||||||
'please use AutoComplete instead',
|
|
||||||
);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getNotFoundContent(renderEmpty: any) {
|
|
||||||
const notFoundContent = getComponent(this, 'notFoundContent');
|
|
||||||
if (notFoundContent !== undefined) {
|
|
||||||
return notFoundContent;
|
|
||||||
}
|
|
||||||
if (this.isCombobox()) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return renderEmpty('Select');
|
|
||||||
},
|
|
||||||
savePopupRef(ref) {
|
|
||||||
this.popupRef = ref;
|
|
||||||
},
|
|
||||||
focus() {
|
|
||||||
(this.$refs.vcSelect as any).focus();
|
|
||||||
},
|
|
||||||
blur() {
|
|
||||||
(this.$refs.vcSelect as any).blur();
|
|
||||||
},
|
|
||||||
|
|
||||||
isCombobox() {
|
|
||||||
const { mode } = this;
|
|
||||||
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderSuffixIcon(prefixCls) {
|
|
||||||
const { loading } = this.$props;
|
|
||||||
let suffixIcon = getComponent(this, 'suffixIcon');
|
|
||||||
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
|
||||||
if (suffixIcon) {
|
|
||||||
return isValidElement(suffixIcon)
|
|
||||||
? cloneElement(suffixIcon, { class: `${prefixCls}-arrow-icon` })
|
|
||||||
: suffixIcon;
|
|
||||||
}
|
|
||||||
if (loading) {
|
|
||||||
return <LoadingOutlined />;
|
|
||||||
}
|
|
||||||
return <DownOutlined class={`${prefixCls}-arrow-icon`} />;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
prefixCls: customizePrefixCls,
|
|
||||||
size,
|
|
||||||
mode,
|
|
||||||
options,
|
|
||||||
getPopupContainer,
|
|
||||||
showArrow,
|
|
||||||
...restProps
|
|
||||||
} = getOptionProps(this);
|
|
||||||
const { class: className } = this.$attrs as any;
|
|
||||||
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
||||||
const renderEmpty = this.configProvider.renderEmpty;
|
|
||||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
|
||||||
|
|
||||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
|
||||||
let removeIcon = getComponent(this, 'removeIcon');
|
|
||||||
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
|
|
||||||
let clearIcon = getComponent(this, 'clearIcon');
|
|
||||||
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
|
|
||||||
let menuItemSelectedIcon = getComponent(this, 'menuItemSelectedIcon');
|
|
||||||
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon)
|
|
||||||
? menuItemSelectedIcon[0]
|
|
||||||
: menuItemSelectedIcon;
|
|
||||||
const rest = omit(restProps as any, [
|
|
||||||
'inputIcon',
|
|
||||||
'removeIcon',
|
|
||||||
'clearIcon',
|
|
||||||
'suffixIcon',
|
|
||||||
'menuItemSelectedIcon',
|
|
||||||
]);
|
|
||||||
|
|
||||||
const cls = {
|
|
||||||
[className]: className,
|
|
||||||
[`${prefixCls}-lg`]: size === 'large',
|
|
||||||
[`${prefixCls}-sm`]: size === 'small',
|
|
||||||
[`${prefixCls}-show-arrow`]: showArrow,
|
|
||||||
};
|
|
||||||
|
|
||||||
let { optionLabelProp } = this.$props;
|
|
||||||
if (this.isCombobox()) {
|
|
||||||
// children 带 dom 结构时，无法填入输入框
|
|
||||||
optionLabelProp = optionLabelProp || 'value';
|
|
||||||
}
|
|
||||||
|
|
||||||
const modeConfig = {
|
|
||||||
multiple: mode === 'multiple',
|
|
||||||
tags: mode === 'tags',
|
|
||||||
combobox: this.isCombobox(),
|
|
||||||
};
|
|
||||||
const finalRemoveIcon = (removeIcon &&
|
|
||||||
(isValidElement(removeIcon)
|
|
||||||
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
|
|
||||||
: removeIcon)) || <CloseOutlined class={`${prefixCls}-remove-icon`} />;
|
|
||||||
|
|
||||||
const finalClearIcon = (clearIcon &&
|
|
||||||
(isValidElement(clearIcon)
|
|
||||||
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
|
|
||||||
: clearIcon)) || <CloseCircleFilled class={`${prefixCls}-clear-icon`} />;
|
|
||||||
|
|
||||||
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
|
|
||||||
(isValidElement(menuItemSelectedIcon)
|
|
||||||
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
|
|
||||||
: menuItemSelectedIcon)) || <CheckOutlined class={`${prefixCls}-selected-icon`} />;
|
|
||||||
|
|
||||||
const selectProps = {
|
|
||||||
inputIcon: this.renderSuffixIcon(prefixCls),
|
|
||||||
removeIcon: finalRemoveIcon,
|
|
||||||
clearIcon: finalClearIcon,
|
|
||||||
menuItemSelectedIcon: finalMenuItemSelectedIcon,
|
|
||||||
showArrow,
|
|
||||||
...rest,
|
|
||||||
...modeConfig,
|
|
||||||
prefixCls,
|
|
||||||
optionLabelProp: optionLabelProp || 'children',
|
|
||||||
notFoundContent: this.getNotFoundContent(renderEmpty),
|
|
||||||
maxTagPlaceholder: getComponent(this, 'maxTagPlaceholder'),
|
|
||||||
placeholder: getComponent(this, 'placeholder'),
|
|
||||||
children: options
|
|
||||||
? options.map(option => {
|
|
||||||
const { key, label = option.title, class: cls, style, ...restOption } = option;
|
|
||||||
return (
|
|
||||||
<Option key={key} {...{ class: cls, style, ...restOption }}>
|
|
||||||
{label}
|
|
||||||
</Option>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
: getSlot(this),
|
|
||||||
dropdownRender: getComponent(this, 'dropdownRender', {}, false),
|
|
||||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
|
||||||
...this.$attrs,
|
|
||||||
class: cls,
|
|
||||||
ref: 'vcSelect',
|
|
||||||
};
|
|
||||||
return <VcSelect {...selectProps} __propsSymbol__={[]} />;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
Select.install = function(app: App) {
|
|
||||||
app.component(Select.name, Select);
|
|
||||||
app.component(Select.Option.name, Select.Option);
|
|
||||||
app.component(Select.OptGroup.name, Select.OptGroup);
|
|
||||||
return app;
|
|
||||||
};
|
|
||||||
export default Select;
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
import './index.less';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
import './v2-compatible-reset.less';
|
|
||||||
|
|
@ -1,212 +0,0 @@
|
||||||
import raf from 'raf';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
import Menu from '../vc-menu';
|
|
||||||
import scrollIntoView from 'dom-scroll-into-view';
|
|
||||||
import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
|
|
||||||
import { cloneElement } from '../_util/vnode';
|
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
|
||||||
import { findDOMNode, getSlot } from '../_util/props-util';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DropdownMenu',
|
|
||||||
mixins: [BaseMixin],
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
ariaId: PropTypes.string,
|
|
||||||
defaultActiveFirstOption: PropTypes.looseBool,
|
|
||||||
value: PropTypes.any,
|
|
||||||
dropdownMenuStyle: PropTypes.object,
|
|
||||||
multiple: PropTypes.looseBool,
|
|
||||||
// onPopupFocus: PropTypes.func,
|
|
||||||
// onPopupScroll: PropTypes.func,
|
|
||||||
// onMenuDeSelect: PropTypes.func,
|
|
||||||
// onMenuSelect: PropTypes.func,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
menuItems: PropTypes.any,
|
|
||||||
inputValue: PropTypes.string,
|
|
||||||
visible: PropTypes.looseBool,
|
|
||||||
backfillValue: PropTypes.any,
|
|
||||||
firstActiveValue: PropTypes.string,
|
|
||||||
menuItemSelectedIcon: PropTypes.any,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
visible(val) {
|
|
||||||
if (!val) {
|
|
||||||
this.lastVisible = val;
|
|
||||||
} else {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollActiveItemToView();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.rafInstance = null;
|
|
||||||
this.saveMenuRef = saveRef(this, 'menuRef');
|
|
||||||
this.lastInputValue = this.$props.inputValue;
|
|
||||||
this.lastVisible = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollActiveItemToView();
|
|
||||||
});
|
|
||||||
this.lastVisible = this.$props.visible;
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
const props = this.$props;
|
|
||||||
// if (!this.prevVisible && props.visible) {
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.scrollActiveItemToView();
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
this.lastVisible = props.visible;
|
|
||||||
this.lastInputValue = props.inputValue;
|
|
||||||
this.prevVisible = this.visible;
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
if (this.rafInstance) {
|
|
||||||
raf.cancel(this.rafInstance);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
scrollActiveItemToView() {
|
|
||||||
// scroll into view
|
|
||||||
const itemComponent = this.firstActiveItem && findDOMNode(this.firstActiveItem);
|
|
||||||
const props = this.$props;
|
|
||||||
const { value, visible, firstActiveValue } = props;
|
|
||||||
if (!itemComponent || !visible) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const scrollIntoViewOpts = {
|
|
||||||
onlyScrollIfNeeded: true,
|
|
||||||
};
|
|
||||||
if ((!value || value.length === 0) && firstActiveValue) {
|
|
||||||
scrollIntoViewOpts.alignWithTop = true;
|
|
||||||
}
|
|
||||||
// Delay to scroll since current frame item position is not ready when pre view is by filter
|
|
||||||
// https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462
|
|
||||||
this.rafInstance = raf(() => {
|
|
||||||
scrollIntoView(itemComponent, findDOMNode(this.menuRef), scrollIntoViewOpts);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
renderMenu() {
|
|
||||||
const props = { ...this.$props, ...this.$attrs };
|
|
||||||
const {
|
|
||||||
menuItems,
|
|
||||||
menuItemSelectedIcon,
|
|
||||||
defaultActiveFirstOption,
|
|
||||||
prefixCls,
|
|
||||||
multiple,
|
|
||||||
onMenuSelect,
|
|
||||||
inputValue,
|
|
||||||
backfillValue,
|
|
||||||
onMenuDeselect,
|
|
||||||
visible,
|
|
||||||
} = props;
|
|
||||||
const firstActiveValue = this.firstActiveValue;
|
|
||||||
if (menuItems && menuItems.length) {
|
|
||||||
const menuProps = {};
|
|
||||||
if (multiple) {
|
|
||||||
menuProps.onDeselect = onMenuDeselect;
|
|
||||||
menuProps.onSelect = onMenuSelect;
|
|
||||||
} else {
|
|
||||||
menuProps.onClick = onMenuSelect;
|
|
||||||
}
|
|
||||||
|
|
||||||
const value = this.value;
|
|
||||||
const selectedKeys = getSelectKeys(menuItems, value);
|
|
||||||
const activeKeyProps = {};
|
|
||||||
|
|
||||||
let defaultActiveFirst = defaultActiveFirstOption;
|
|
||||||
let clonedMenuItems = menuItems;
|
|
||||||
if (selectedKeys.length || firstActiveValue) {
|
|
||||||
if (props.visible && !this.lastVisible) {
|
|
||||||
activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
|
|
||||||
} else if (!visible) {
|
|
||||||
// Do not trigger auto active since we already have selectedKeys
|
|
||||||
if (selectedKeys[0]) {
|
|
||||||
defaultActiveFirst = false;
|
|
||||||
}
|
|
||||||
activeKeyProps.activeKey = undefined;
|
|
||||||
}
|
|
||||||
let foundFirst = false;
|
|
||||||
// set firstActiveItem via cloning menus
|
|
||||||
// for scroll into view
|
|
||||||
const clone = item => {
|
|
||||||
if (
|
|
||||||
(!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
|
|
||||||
(!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
|
|
||||||
) {
|
|
||||||
foundFirst = true;
|
|
||||||
return cloneElement(item, {
|
|
||||||
ref: ref => {
|
|
||||||
this.firstActiveItem = ref;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
};
|
|
||||||
|
|
||||||
clonedMenuItems = menuItems.map(item => {
|
|
||||||
if (item.type.isMenuItemGroup) {
|
|
||||||
const children = getSlot(item).map(clone);
|
|
||||||
const newItem = cloneElement(item);
|
|
||||||
newItem.children = { ...item.children, default: () => children };
|
|
||||||
return newItem;
|
|
||||||
}
|
|
||||||
return clone(item);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Clear firstActiveItem when dropdown menu items was empty
|
|
||||||
// Avoid `Unable to find node on an unmounted component`
|
|
||||||
// https://github.com/ant-design/ant-design/issues/10774
|
|
||||||
this.firstActiveItem = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// clear activeKey when inputValue change
|
|
||||||
const lastValue = value && value[value.length - 1];
|
|
||||||
if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
|
|
||||||
activeKeyProps.activeKey = '';
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Menu
|
|
||||||
ref={this.saveMenuRef}
|
|
||||||
style={this.dropdownMenuStyle}
|
|
||||||
defaultActiveFirst={defaultActiveFirst}
|
|
||||||
role="listbox"
|
|
||||||
itemIcon={multiple ? menuItemSelectedIcon : null}
|
|
||||||
{...activeKeyProps}
|
|
||||||
multiple={multiple}
|
|
||||||
{...menuProps}
|
|
||||||
selectedKeys={selectedKeys}
|
|
||||||
prefixCls={`${prefixCls}-menu`}
|
|
||||||
children={clonedMenuItems}
|
|
||||||
></Menu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const renderMenu = this.renderMenu();
|
|
||||||
const { onPopupFocus, onPopupScroll } = this.$attrs;
|
|
||||||
return renderMenu ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
overflow: 'auto',
|
|
||||||
transform: 'translateZ(0)',
|
|
||||||
}}
|
|
||||||
id={this.$props.ariaId}
|
|
||||||
tabindex="-1"
|
|
||||||
onFocus={onPopupFocus}
|
|
||||||
onMousedown={preventDefaultEvent}
|
|
||||||
onScroll={onPopupScroll}
|
|
||||||
>
|
|
||||||
{renderMenu}
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
},
|
|
||||||
isSelectOptGroup: true,
|
|
||||||
render() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
||||||
},
|
|
||||||
isSelectOption: true,
|
|
||||||
render() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
|
|
||||||
export const SelectPropTypes = {
|
|
||||||
defaultActiveFirstOption: PropTypes.looseBool,
|
|
||||||
multiple: PropTypes.looseBool,
|
|
||||||
filterOption: PropTypes.any,
|
|
||||||
// children: PropTypes.any,
|
|
||||||
showSearch: PropTypes.looseBool,
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
allowClear: PropTypes.looseBool,
|
|
||||||
showArrow: PropTypes.looseBool,
|
|
||||||
tags: PropTypes.looseBool,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
// className: PropTypes.string,
|
|
||||||
transitionName: PropTypes.string,
|
|
||||||
optionLabelProp: PropTypes.string,
|
|
||||||
optionFilterProp: PropTypes.string,
|
|
||||||
animation: PropTypes.string,
|
|
||||||
choiceTransitionName: PropTypes.string,
|
|
||||||
open: PropTypes.looseBool,
|
|
||||||
defaultOpen: PropTypes.looseBool,
|
|
||||||
// onChange: PropTypes.func,
|
|
||||||
// onBlur: PropTypes.func,
|
|
||||||
// onFocus: PropTypes.func,
|
|
||||||
// onSelect: PropTypes.func,
|
|
||||||
// onSearch: PropTypes.func,
|
|
||||||
// onPopupScroll: PropTypes.func,
|
|
||||||
// onMouseEnter: PropTypes.func,
|
|
||||||
// onMouseLeave: PropTypes.func,
|
|
||||||
// onInputKeyDown: PropTypes.func,
|
|
||||||
placeholder: PropTypes.any,
|
|
||||||
// onDeselect: PropTypes.func,
|
|
||||||
labelInValue: PropTypes.looseBool,
|
|
||||||
loading: PropTypes.looseBool,
|
|
||||||
value: PropTypes.any,
|
|
||||||
defaultValue: PropTypes.any,
|
|
||||||
dropdownStyle: PropTypes.object,
|
|
||||||
dropdownClassName: PropTypes.string,
|
|
||||||
maxTagTextLength: PropTypes.number,
|
|
||||||
maxTagCount: PropTypes.number,
|
|
||||||
maxTagPlaceholder: PropTypes.any,
|
|
||||||
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
|
|
||||||
getInputElement: PropTypes.func,
|
|
||||||
showAction: PropTypes.arrayOf(PropTypes.string),
|
|
||||||
autofocus: PropTypes.looseBool,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
clearIcon: PropTypes.any,
|
|
||||||
inputIcon: PropTypes.any,
|
|
||||||
removeIcon: PropTypes.any,
|
|
||||||
menuItemSelectedIcon: PropTypes.any,
|
|
||||||
dropdownRender: PropTypes.func,
|
|
||||||
mode: PropTypes.oneOf(['multiple', 'tags']),
|
|
||||||
backfill: PropTypes.looseBool,
|
|
||||||
dropdownAlign: PropTypes.any,
|
|
||||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
|
||||||
dropdownMenuStyle: PropTypes.object,
|
|
||||||
notFoundContent: PropTypes.oneOfType([String, Number]),
|
|
||||||
tabindex: PropTypes.oneOfType([String, Number]),
|
|
||||||
__propsSymbol__: PropTypes.any,
|
|
||||||
children: PropTypes.array,
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,214 +0,0 @@
|
||||||
import classnames from '../_util/classNames';
|
|
||||||
import raf from 'raf';
|
|
||||||
import Trigger from '../vc-trigger';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
import DropdownMenu from './DropdownMenu';
|
|
||||||
import { isSingleMode, saveRef } from './util';
|
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
|
||||||
import { findDOMNode, getSlot } from '../_util/props-util';
|
|
||||||
|
|
||||||
const BUILT_IN_PLACEMENTS = {
|
|
||||||
bottomLeft: {
|
|
||||||
points: ['tl', 'bl'],
|
|
||||||
offset: [0, 4],
|
|
||||||
overflow: {
|
|
||||||
adjustX: 0,
|
|
||||||
adjustY: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
topLeft: {
|
|
||||||
points: ['bl', 'tl'],
|
|
||||||
offset: [0, -4],
|
|
||||||
overflow: {
|
|
||||||
adjustX: 0,
|
|
||||||
adjustY: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'SelectTrigger',
|
|
||||||
mixins: [BaseMixin],
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
// onPopupFocus: PropTypes.func,
|
|
||||||
// onPopupScroll: PropTypes.func,
|
|
||||||
dropdownMatchSelectWidth: PropTypes.looseBool,
|
|
||||||
defaultActiveFirstOption: PropTypes.looseBool,
|
|
||||||
dropdownAlign: PropTypes.object,
|
|
||||||
visible: PropTypes.looseBool,
|
|
||||||
disabled: PropTypes.looseBool,
|
|
||||||
showSearch: PropTypes.looseBool,
|
|
||||||
dropdownClassName: PropTypes.string,
|
|
||||||
dropdownStyle: PropTypes.object,
|
|
||||||
dropdownMenuStyle: PropTypes.object,
|
|
||||||
multiple: PropTypes.looseBool,
|
|
||||||
inputValue: PropTypes.string,
|
|
||||||
filterOption: PropTypes.any,
|
|
||||||
empty: PropTypes.looseBool,
|
|
||||||
options: PropTypes.any,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
popupClassName: PropTypes.string,
|
|
||||||
value: PropTypes.array,
|
|
||||||
// children: PropTypes.any,
|
|
||||||
showAction: PropTypes.arrayOf(PropTypes.string),
|
|
||||||
combobox: PropTypes.looseBool,
|
|
||||||
animation: PropTypes.string,
|
|
||||||
transitionName: PropTypes.string,
|
|
||||||
getPopupContainer: PropTypes.func,
|
|
||||||
backfillValue: PropTypes.any,
|
|
||||||
menuItemSelectedIcon: PropTypes.any,
|
|
||||||
dropdownRender: PropTypes.func,
|
|
||||||
ariaId: PropTypes.string,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dropdownWidth: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.rafInstance = null;
|
|
||||||
this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
|
|
||||||
this.saveTriggerRef = saveRef(this, 'triggerRef');
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.setDropdownWidth();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
updated() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.setDropdownWidth();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
this.cancelRafInstance();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setDropdownWidth() {
|
|
||||||
this.cancelRafInstance();
|
|
||||||
this.rafInstance = raf(() => {
|
|
||||||
const width = findDOMNode(this)?.offsetWidth;
|
|
||||||
if (width !== this.dropdownWidth) {
|
|
||||||
this.setState({ dropdownWidth: width });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
cancelRafInstance() {
|
|
||||||
if (this.rafInstance) {
|
|
||||||
raf.cancel(this.rafInstance);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getInnerMenu() {
|
|
||||||
return this.dropdownMenuRef && this.dropdownMenuRef.menuRef;
|
|
||||||
},
|
|
||||||
|
|
||||||
getPopupDOMNode() {
|
|
||||||
return this.triggerRef.getPopupDomNode();
|
|
||||||
},
|
|
||||||
|
|
||||||
getDropdownElement(newProps) {
|
|
||||||
const props = { ...this.$props, ...this.$attrs };
|
|
||||||
const { dropdownRender, ariaId } = props;
|
|
||||||
const menuNode = (
|
|
||||||
<DropdownMenu
|
|
||||||
ref={this.saveDropdownMenuRef}
|
|
||||||
{...newProps}
|
|
||||||
ariaId={ariaId}
|
|
||||||
prefixCls={this.getDropdownPrefixCls()}
|
|
||||||
onMenuSelect={props.onMenuSelect}
|
|
||||||
onMenuDeselect={props.onMenuDeselect}
|
|
||||||
onPopupScroll={props.onPopupScroll}
|
|
||||||
value={props.value}
|
|
||||||
backfillValue={props.backfillValue}
|
|
||||||
firstActiveValue={props.firstActiveValue}
|
|
||||||
defaultActiveFirstOption={props.defaultActiveFirstOption}
|
|
||||||
dropdownMenuStyle={props.dropdownMenuStyle}
|
|
||||||
menuItemSelectedIcon={props.menuItemSelectedIcon}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (dropdownRender) {
|
|
||||||
return dropdownRender({ menuNode, props });
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
getDropdownTransitionName() {
|
|
||||||
const props = this.$props;
|
|
||||||
let transitionName = props.transitionName;
|
|
||||||
if (!transitionName && props.animation) {
|
|
||||||
transitionName = `${this.getDropdownPrefixCls()}-${props.animation}`;
|
|
||||||
}
|
|
||||||
return transitionName;
|
|
||||||
},
|
|
||||||
|
|
||||||
getDropdownPrefixCls() {
|
|
||||||
return `${this.prefixCls}-dropdown`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { onPopupFocus, empty, ...props } = { ...this.$props, ...this.$attrs };
|
|
||||||
const {
|
|
||||||
multiple,
|
|
||||||
visible,
|
|
||||||
inputValue,
|
|
||||||
dropdownAlign,
|
|
||||||
disabled,
|
|
||||||
showSearch,
|
|
||||||
dropdownClassName,
|
|
||||||
dropdownStyle,
|
|
||||||
dropdownMatchSelectWidth,
|
|
||||||
} = props;
|
|
||||||
const dropdownPrefixCls = this.getDropdownPrefixCls();
|
|
||||||
const popupClassName = {
|
|
||||||
[dropdownClassName]: !!dropdownClassName,
|
|
||||||
[`${dropdownPrefixCls}--${multiple ? 'multiple' : 'single'}`]: 1,
|
|
||||||
[`${dropdownPrefixCls}--empty`]: empty,
|
|
||||||
};
|
|
||||||
const popupElement = this.getDropdownElement({
|
|
||||||
menuItems: props.options,
|
|
||||||
multiple,
|
|
||||||
inputValue,
|
|
||||||
visible,
|
|
||||||
onPopupFocus,
|
|
||||||
});
|
|
||||||
let hideAction;
|
|
||||||
if (disabled) {
|
|
||||||
hideAction = [];
|
|
||||||
} else if (isSingleMode(props) && !showSearch) {
|
|
||||||
hideAction = ['click'];
|
|
||||||
} else {
|
|
||||||
hideAction = ['blur'];
|
|
||||||
}
|
|
||||||
const popupStyle = { ...dropdownStyle };
|
|
||||||
const widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
|
|
||||||
if (this.dropdownWidth) {
|
|
||||||
popupStyle[widthProp] = `${this.dropdownWidth}px`;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Trigger
|
|
||||||
{...props}
|
|
||||||
showAction={disabled ? [] : this.$props.showAction}
|
|
||||||
hideAction={hideAction}
|
|
||||||
ref={this.saveTriggerRef}
|
|
||||||
popupPlacement="bottomLeft"
|
|
||||||
builtinPlacements={BUILT_IN_PLACEMENTS}
|
|
||||||
prefixCls={dropdownPrefixCls}
|
|
||||||
popupTransitionName={this.getDropdownTransitionName()}
|
|
||||||
onPopupVisibleChange={props.onDropdownVisibleChange}
|
|
||||||
popup={popupElement}
|
|
||||||
popupAlign={dropdownAlign}
|
|
||||||
popupVisible={visible}
|
|
||||||
getPopupContainer={props.getPopupContainer}
|
|
||||||
popupClassName={classnames(popupClassName)}
|
|
||||||
popupStyle={popupStyle}
|
|
||||||
>
|
|
||||||
{getSlot(this)[0]}
|
|
||||||
</Trigger>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,11 +1,267 @@
|
||||||
@selectPrefixCls: rc-select;
|
@select-prefix: ~'rc-select';
|
||||||
|
|
||||||
@keyframes select-ring {
|
* {
|
||||||
0% {
|
box-sizing: border-box;
|
||||||
transform: rotate(0deg);
|
}
|
||||||
|
|
||||||
|
.search-input-without-border() {
|
||||||
|
.@{select-prefix}-selection-search-input {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: rgba(255, 0, 0, 0.2);
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
100% {
|
}
|
||||||
transform: rotate(360deg);
|
|
||||||
|
.@{select-prefix} {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
&,
|
||||||
|
& input {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-selector {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-show-arrow&-loading {
|
||||||
|
.@{select-prefix}-arrow {
|
||||||
|
&-icon::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 2px solid #999;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
transform: none;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
animation: rcSelectLoadingIcon 0.5s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== Selector ===============
|
||||||
|
.@{select-prefix}-selection-placeholder {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== Search ===============
|
||||||
|
.@{select-prefix}-selection-search-input {
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&::-webkit-search-cancel-button {
|
||||||
|
display: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --------------- Single ----------------
|
||||||
|
&-single {
|
||||||
|
.@{select-prefix}-selector {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.@{select-prefix}-selection-search {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-selection-item,
|
||||||
|
.@{select-prefix}-selection-placeholder {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 3px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Not customize
|
||||||
|
&:not(.@{select-prefix}-customize-input) {
|
||||||
|
.@{select-prefix}-selector {
|
||||||
|
padding: 1px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
|
||||||
|
.search-input-without-border();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------- Multiple ---------------
|
||||||
|
&-multiple .@{select-prefix}-selector {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 1px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
|
||||||
|
.@{select-prefix}-selection-item {
|
||||||
|
flex: none;
|
||||||
|
background: #bbb;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 2px;
|
||||||
|
padding: 0 8px;
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-selection-search {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-input,
|
||||||
|
&-mirror {
|
||||||
|
padding: 1px;
|
||||||
|
font-family: system-ui;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mirror {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: none;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-without-border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ================ Icons ================
|
||||||
|
&-allow-clear {
|
||||||
|
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-clear {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-show-arrow {
|
||||||
|
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-arrow {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
&-icon::after {
|
||||||
|
content: '';
|
||||||
|
border: 5px solid transparent;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: inline-block;
|
||||||
|
border-top-color: #999;
|
||||||
|
transform: translateY(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============== Focused ===============
|
||||||
|
&-focused {
|
||||||
|
.@{select-prefix}-selector {
|
||||||
|
border-color: blue !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============== Dropdown ===============
|
||||||
|
&-dropdown {
|
||||||
|
border: 1px solid green;
|
||||||
|
min-height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
&-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============== Option ================
|
||||||
|
&-item {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 4px 16px;
|
||||||
|
|
||||||
|
// >>> Group
|
||||||
|
&-group {
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// >>> Option
|
||||||
|
&-option {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-grouped {
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-item-option-state {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 4px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------- Active -------
|
||||||
|
&-active {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------ Disabled ------
|
||||||
|
&-disabled {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// >>> Empty
|
||||||
|
&-empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-selection__choice-zoom {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{select-prefix}-selection__choice-zoom-appear {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
|
||||||
|
&&-active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{select-prefix}-selection__choice-zoom-leave {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
|
||||||
|
&&-active {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -15,435 +271,7 @@
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{selectPrefixCls} {
|
.@{select-prefix}-dropdown {
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: #666;
|
|
||||||
line-height: 28px;
|
|
||||||
|
|
||||||
ul,
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul > li > a {
|
|
||||||
padding: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
// arrow
|
|
||||||
&-arrow {
|
|
||||||
height: 26px;
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
right: 1px;
|
|
||||||
width: 20px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-arrow &-arrow-loading {
|
|
||||||
display: inline-block;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-left: -4px;
|
|
||||||
&:after {
|
|
||||||
content: ' ';
|
|
||||||
display: block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
margin: 2px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid #999999;
|
|
||||||
border-color: #999999 transparent #999999 transparent;
|
|
||||||
animation: select-ring 1.2s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-arrow &-arrow-icon {
|
|
||||||
border-color: #999999 transparent transparent transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 5px 4px 0 4px;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
margin-left: -4px;
|
|
||||||
margin-top: -2px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// select with arrow or loader
|
|
||||||
&:not(.@{selectPrefixCls}-no-arrow),
|
|
||||||
&-loading {
|
|
||||||
.@{selectPrefixCls}-selection--multiple {
|
|
||||||
.@{selectPrefixCls}-selection__clear {
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-selection {
|
|
||||||
outline: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
|
|
||||||
&__placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__clear {
|
|
||||||
font-weight: bold;
|
|
||||||
position: absolute;
|
|
||||||
line-height: 28px;
|
|
||||||
&-icon {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-focused &-selection {
|
|
||||||
border-color: #23c0fa;
|
|
||||||
box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-enabled &-selection {
|
|
||||||
&:hover {
|
|
||||||
border-color: #23c0fa;
|
|
||||||
box-shadow: 0 0 2px fadeout(#2db7f5, 20%);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
border-color: #2db7f5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-selection--single {
|
|
||||||
height: 28px;
|
|
||||||
line-height: 28px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection-selected-value {
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__rendered {
|
|
||||||
height: 28px;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-left: 10px;
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__clear {
|
|
||||||
top: 0;
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
color: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection--single,
|
|
||||||
.@{selectPrefixCls}-selection__choice__remove {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: #ccc;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search__field__wrap {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search__field__placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 3px;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search--inline {
|
|
||||||
width: 100%;
|
|
||||||
.@{selectPrefixCls}-search__field__wrap {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.@{selectPrefixCls}-search__field {
|
|
||||||
border: none;
|
|
||||||
font-size: 100%;
|
|
||||||
//margin-top: 5px;
|
|
||||||
background: transparent;
|
|
||||||
outline: 0;
|
|
||||||
width: 100%;
|
|
||||||
&::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.@{selectPrefixCls}-search__field__mirror {
|
|
||||||
position: absolute;
|
|
||||||
top: -999px;
|
|
||||||
left: 0;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
> i {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-enabled&-selection--multiple {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-selection--multiple {
|
|
||||||
min-height: 28px;
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-search--inline {
|
|
||||||
float: left;
|
|
||||||
width: auto;
|
|
||||||
.@{selectPrefixCls}-search__field {
|
|
||||||
&__wrap {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
width: 0.75em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-search__field__placeholder {
|
|
||||||
top: 5px;
|
|
||||||
left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__rendered {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-left: 8px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__choice {
|
|
||||||
margin-top: 4px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__clear {
|
|
||||||
top: 1px;
|
|
||||||
right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-enabled {
|
|
||||||
.@{selectPrefixCls}-selection__choice {
|
|
||||||
cursor: default;
|
|
||||||
&:hover {
|
|
||||||
.@{selectPrefixCls}-selection__choice__remove {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
.@{selectPrefixCls}-selection__choice__content {
|
|
||||||
margin-left: -8px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{selectPrefixCls}-selection__choice__disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
&:hover {
|
|
||||||
.@{selectPrefixCls}-selection__choice__content {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& &-selection__choice {
|
|
||||||
background-color: #f3f3f3;
|
|
||||||
border-radius: 4px;
|
|
||||||
float: left;
|
|
||||||
padding: 0 15px;
|
|
||||||
margin-right: 4px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: padding 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
|
|
||||||
width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
transition: margin 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-zoom-enter,
|
|
||||||
&-zoom-appear,
|
|
||||||
&-zoom-leave {
|
|
||||||
.effect();
|
|
||||||
opacity: 0;
|
|
||||||
animation-play-state: paused;
|
|
||||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-zoom-leave {
|
|
||||||
opacity: 1;
|
|
||||||
animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
||||||
}
|
|
||||||
|
|
||||||
&-zoom-enter.@{selectPrefixCls}-selection__choice-zoom-enter-active,
|
|
||||||
&-zoom-appear.@{selectPrefixCls}-selection__choice-zoom-appear-active {
|
|
||||||
animation-play-state: running;
|
|
||||||
animation-name: rcSelectChoiceZoomIn;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-zoom-leave.@{selectPrefixCls}-selection__choice-zoom-leave-active {
|
|
||||||
animation-play-state: running;
|
|
||||||
animation-name: rcSelectChoiceZoomOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rcSelectChoiceZoomIn {
|
|
||||||
0% {
|
|
||||||
transform: scale(0.6);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rcSelectChoiceZoomOut {
|
|
||||||
to {
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__remove {
|
|
||||||
color: #919191;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0 0 0 8px;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
top: 0;
|
|
||||||
right: 2px;
|
|
||||||
transition: opacity 0.3s, transform 0.3s;
|
|
||||||
|
|
||||||
&-icon {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-dropdown {
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
box-shadow: 0 0px 4px #d9d9d9;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: 100;
|
|
||||||
left: -9999px;
|
|
||||||
top: -9999px;
|
|
||||||
position: absolute;
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
&:empty,
|
|
||||||
&-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-menu {
|
|
||||||
outline: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item-group-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> li.@{selectPrefixCls}-menu-item {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item-group-title {
|
|
||||||
color: #999;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-bottom: 1px solid #dedede;
|
|
||||||
}
|
|
||||||
|
|
||||||
li&-item {
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
padding: 7px 10px;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #666;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
color: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-selected {
|
|
||||||
color: #666;
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
background-color: #5897fb;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-divider {
|
|
||||||
height: 1px;
|
|
||||||
margin: 1px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #e5e5e5;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-enter,
|
&-slide-up-enter,
|
||||||
&-slide-up-appear {
|
&-slide-up-appear {
|
||||||
.effect();
|
.effect();
|
||||||
|
|
@ -480,8 +308,9 @@
|
||||||
animation-name: rcSelectDropdownSlideDownOut;
|
animation-name: rcSelectDropdownSlideDownOut;
|
||||||
animation-play-state: running;
|
animation-play-state: running;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes rcSelectDropdownSlideUpIn {
|
@keyframes rcSelectDropdownSlideUpIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
|
|
@ -492,50 +321,25 @@
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes rcSelectDropdownSlideUpOut {
|
@keyframes rcSelectDropdownSlideUpOut {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
transform: scaleY(0);
|
transform: scaleY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rcSelectDropdownSlideDownIn {
|
@keyframes rcSelectLoadingIcon {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
transform: rotate(0);
|
||||||
transform-origin: 0% 100%;
|
}
|
||||||
transform: scaleY(0);
|
100% {
|
||||||
}
|
transform: rotate(360deg);
|
||||||
100% {
|
}
|
||||||
opacity: 1;
|
|
||||||
transform-origin: 0% 100%;
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes rcSelectDropdownSlideDownOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
transform-origin: 0% 100%;
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform-origin: 0% 100%;
|
|
||||||
transform: scaleY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-open {
|
|
||||||
.@{selectPrefixCls}-arrow b {
|
|
||||||
border-color: transparent transparent #888 transparent;
|
|
||||||
border-width: 0 4px 5px 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
// based on vc-select 9.2.2
|
|
||||||
import Select from './Select';
|
|
||||||
import Option from './Option';
|
|
||||||
import { SelectPropTypes } from './PropTypes';
|
|
||||||
import OptGroup from './OptGroup';
|
|
||||||
Select.Option = Option;
|
|
||||||
Select.OptGroup = OptGroup;
|
|
||||||
export { Select, Option, OptGroup, SelectPropTypes };
|
|
||||||
export default Select;
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
import Select from './Select';
|
import Select, { ExportedSelectProps } from './Select';
|
||||||
import Option from './Option';
|
import Option from './Option';
|
||||||
import OptGroup from './OptGroup';
|
import OptGroup from './OptGroup';
|
||||||
import { BaseProps } from './generate';
|
import { BaseProps } from './generate';
|
||||||
|
|
||||||
// eslint-disable-next-line prettier/prettier
|
export type SelectProps<T> = ExportedSelectProps<T>;
|
||||||
export type { ExportedSelectProps as SelectProps } from './Select';
|
|
||||||
|
|
||||||
export { Option, OptGroup, BaseProps };
|
export { Option, OptGroup, BaseProps };
|
||||||
|
|
||||||
export default Select;
|
export default Select;
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
import { getPropsData, getComponent, getSlot } from '../_util/props-util';
|
|
||||||
import { cloneElement } from '../_util/vnode';
|
|
||||||
import { isVNode, Text } from 'vue';
|
|
||||||
|
|
||||||
export function toTitle(title) {
|
|
||||||
if (typeof title === 'string') {
|
|
||||||
return title.trim();
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
export function getValuePropValue(child) {
|
|
||||||
if (!child) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const props = getPropsData(child);
|
|
||||||
if ('value' in props) {
|
|
||||||
return props.value;
|
|
||||||
}
|
|
||||||
if (child.key !== undefined) {
|
|
||||||
return child.key;
|
|
||||||
}
|
|
||||||
if (typeof child.type === 'object' && child.type.isSelectOptGroup) {
|
|
||||||
const label = getComponent(child, 'label');
|
|
||||||
if (label) {
|
|
||||||
return label;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw new Error(`Need at least a key or a value or a label (only for OptGroup) for ${child}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPropValue(child, prop) {
|
|
||||||
if (prop === 'value') {
|
|
||||||
return getValuePropValue(child);
|
|
||||||
}
|
|
||||||
if (prop === 'children') {
|
|
||||||
const temp = getComponent(child);
|
|
||||||
const newChild = isVNode(temp) ? cloneElement(temp) : temp;
|
|
||||||
if (isVNode(newChild) && newChild.type === Text) {
|
|
||||||
return newChild.children;
|
|
||||||
}
|
|
||||||
return newChild;
|
|
||||||
}
|
|
||||||
const props = getPropsData(child);
|
|
||||||
return props[prop];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isMultiple(props) {
|
|
||||||
return props.multiple;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isCombobox(props) {
|
|
||||||
return props.combobox;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isMultipleOrTags(props) {
|
|
||||||
return props.multiple || props.tags;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isMultipleOrTagsOrCombobox(props) {
|
|
||||||
return isMultipleOrTags(props) || isCombobox(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isSingleMode(props) {
|
|
||||||
return !isMultipleOrTagsOrCombobox(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function toArray(value) {
|
|
||||||
let ret = value;
|
|
||||||
if (value === undefined) {
|
|
||||||
ret = [];
|
|
||||||
} else if (!Array.isArray(value)) {
|
|
||||||
ret = [value];
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMapKey(value) {
|
|
||||||
return `${typeof value}-${value}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function preventDefaultEvent(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
export function findIndexInValueBySingleValue(value, singleValue) {
|
|
||||||
let index = -1;
|
|
||||||
if (value) {
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (value[i] === singleValue) {
|
|
||||||
index = i;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getLabelFromPropsValue(value, key) {
|
|
||||||
let label;
|
|
||||||
value = toArray(value);
|
|
||||||
if (value) {
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (value[i].key === key) {
|
|
||||||
label = value[i].label;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return label;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSelectKeys(menuItems = [], value) {
|
|
||||||
if (value === null || value === undefined) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let selectedKeys = [];
|
|
||||||
menuItems.forEach(item => {
|
|
||||||
if (item.type?.isMenuItemGroup) {
|
|
||||||
selectedKeys = selectedKeys.concat(getSelectKeys(getSlot(item), value));
|
|
||||||
} else {
|
|
||||||
const itemValue = getValuePropValue(item);
|
|
||||||
const itemKey = item.key;
|
|
||||||
if (findIndexInValueBySingleValue(value, itemValue) !== -1 && itemKey !== undefined) {
|
|
||||||
selectedKeys.push(itemKey);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return selectedKeys;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const UNSELECTABLE_STYLE = {
|
|
||||||
userSelect: 'none',
|
|
||||||
WebkitUserSelect: 'none',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const UNSELECTABLE_ATTRIBUTE = {
|
|
||||||
unselectable: 'on',
|
|
||||||
};
|
|
||||||
|
|
||||||
export function findFirstMenuItem(children) {
|
|
||||||
for (let i = 0; i < children.length; i++) {
|
|
||||||
const child = children[i];
|
|
||||||
const props = getPropsData(child);
|
|
||||||
if (child.type?.isMenuItemGroup) {
|
|
||||||
const found = findFirstMenuItem(getSlot(child));
|
|
||||||
if (found) {
|
|
||||||
return found;
|
|
||||||
}
|
|
||||||
} else if (!props.disabled) {
|
|
||||||
return child;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function includesSeparators(str, separators) {
|
|
||||||
for (let i = 0; i < separators.length; ++i) {
|
|
||||||
if (str.lastIndexOf(separators[i]) > 0) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function splitBySeparators(str, separators) {
|
|
||||||
const reg = new RegExp(`[${separators.join()}]`);
|
|
||||||
return str.split(reg).filter(token => token);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function defaultFilterFn(input, child) {
|
|
||||||
const props = getPropsData(child);
|
|
||||||
if (props.disabled) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
let value = getPropValue(child, this.optionFilterProp);
|
|
||||||
if (value.length && value[0].text) {
|
|
||||||
value = value[0].text;
|
|
||||||
} else {
|
|
||||||
value = String(value);
|
|
||||||
}
|
|
||||||
return value.toLowerCase().indexOf(input.toLowerCase()) > -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function validateOptionValue(value, props) {
|
|
||||||
if (isSingleMode(props) || isMultiple(props)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (typeof value !== 'string') {
|
|
||||||
throw new Error(
|
|
||||||
`Invalid \`value\` of type \`${typeof value}\` supplied to Option, ` +
|
|
||||||
`expected \`string\` when \`tags/combobox\` is \`true\`.`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function saveRef(instance, name) {
|
|
||||||
return node => {
|
|
||||||
instance[name] = node;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function generateUUID() {
|
|
||||||
if (process.env.NODE_ENV === 'test') {
|
|
||||||
return 'test-uuid';
|
|
||||||
}
|
|
||||||
let d = new Date().getTime();
|
|
||||||
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
|
||||||
const r = (d + Math.random() * 16) % 16 | 0;
|
|
||||||
d = Math.floor(d / 16);
|
|
||||||
return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
|
|
||||||
});
|
|
||||||
return uuid;
|
|
||||||
}
|
|
||||||
|
|
@ -1,345 +0,0 @@
|
||||||
@select-prefix: ~'rc-select';
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-without-border() {
|
|
||||||
.@{select-prefix}-selection-search-input {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
background: rgba(255, 0, 0, 0.2);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix} {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 12px;
|
|
||||||
width: 100px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
&,
|
|
||||||
& input {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-selector {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-show-arrow&-loading {
|
|
||||||
.@{select-prefix}-arrow {
|
|
||||||
&-icon::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 100%;
|
|
||||||
border: 2px solid #999;
|
|
||||||
border-top-color: transparent;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
transform: none;
|
|
||||||
margin-top: 4px;
|
|
||||||
|
|
||||||
animation: rcSelectLoadingIcon 0.5s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== Selector ===============
|
|
||||||
.@{select-prefix}-selection-placeholder {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== Search ===============
|
|
||||||
.@{select-prefix}-selection-search-input {
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&::-webkit-search-cancel-button {
|
|
||||||
display: none;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------- Single ----------------
|
|
||||||
&-single {
|
|
||||||
.@{select-prefix}-selector {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.@{select-prefix}-selection-search {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-selection-item,
|
|
||||||
.@{select-prefix}-selection-placeholder {
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
left: 3px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Not customize
|
|
||||||
&:not(.@{select-prefix}-customize-input) {
|
|
||||||
.@{select-prefix}-selector {
|
|
||||||
padding: 1px;
|
|
||||||
border: 1px solid #000;
|
|
||||||
|
|
||||||
.search-input-without-border();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------------- Multiple ---------------
|
|
||||||
&-multiple .@{select-prefix}-selector {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 1px;
|
|
||||||
border: 1px solid #000;
|
|
||||||
|
|
||||||
.@{select-prefix}-selection-item {
|
|
||||||
flex: none;
|
|
||||||
background: #bbb;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 2px;
|
|
||||||
padding: 0 8px;
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-selection-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&-input,
|
|
||||||
&-mirror {
|
|
||||||
padding: 1px;
|
|
||||||
font-family: system-ui;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-mirror {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 999;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: none;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-without-border();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================ Icons ================
|
|
||||||
&-allow-clear {
|
|
||||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-clear {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-show-arrow {
|
|
||||||
&.@{select-prefix}-multiple .@{select-prefix}-selector {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-arrow {
|
|
||||||
pointer-events: none;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&-icon::after {
|
|
||||||
content: '';
|
|
||||||
border: 5px solid transparent;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
display: inline-block;
|
|
||||||
border-top-color: #999;
|
|
||||||
transform: translateY(5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============== Focused ===============
|
|
||||||
&-focused {
|
|
||||||
.@{select-prefix}-selector {
|
|
||||||
border-color: blue !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============== Dropdown ===============
|
|
||||||
&-dropdown {
|
|
||||||
border: 1px solid green;
|
|
||||||
min-height: 100px;
|
|
||||||
position: absolute;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
&-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============== Option ================
|
|
||||||
&-item {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 4px 16px;
|
|
||||||
|
|
||||||
// >>> Group
|
|
||||||
&-group {
|
|
||||||
color: #999;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// >>> Option
|
|
||||||
&-option {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&-grouped {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-item-option-state {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 4px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ------- Active -------
|
|
||||||
&-active {
|
|
||||||
background: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ------ Disabled ------
|
|
||||||
&-disabled {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// >>> Empty
|
|
||||||
&-empty {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-selection__choice-zoom {
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-selection__choice-zoom-appear {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.5);
|
|
||||||
|
|
||||||
&&-active {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.@{select-prefix}-selection__choice-zoom-leave {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
|
|
||||||
&&-active {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.effect() {
|
|
||||||
animation-duration: 0.3s;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{select-prefix}-dropdown {
|
|
||||||
&-slide-up-enter,
|
|
||||||
&-slide-up-appear {
|
|
||||||
.effect();
|
|
||||||
opacity: 0;
|
|
||||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-leave {
|
|
||||||
.effect();
|
|
||||||
opacity: 1;
|
|
||||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
|
|
||||||
&-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft {
|
|
||||||
animation-name: rcSelectDropdownSlideUpIn;
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft {
|
|
||||||
animation-name: rcSelectDropdownSlideUpOut;
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
|
|
||||||
&-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
|
|
||||||
animation-name: rcSelectDropdownSlideDownIn;
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
|
|
||||||
animation-name: rcSelectDropdownSlideDownOut;
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rcSelectDropdownSlideUpIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform-origin: 0% 0%;
|
|
||||||
transform: scaleY(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform-origin: 0% 0%;
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes rcSelectDropdownSlideUpOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
transform-origin: 0% 0%;
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform-origin: 0% 0%;
|
|
||||||
transform: scaleY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rcSelectLoadingIcon {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<a-empty
|
<div>
|
||||||
class="ddd"
|
<demo />
|
||||||
image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
|
</div>
|
||||||
:image-style="{
|
|
||||||
height: '60px',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<template v-slot:description>
|
|
||||||
<span> Customize <a href="#API">Description</a> </span>
|
|
||||||
</template>
|
|
||||||
<a-button type="primary">
|
|
||||||
Create Now
|
|
||||||
</a-button>
|
|
||||||
</a-empty>
|
|
||||||
</template>
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import demo from '../antdv-demo/docs/select/demo';
|
||||||
|
// import Affix from '../components/affix';
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
demo,
|
||||||
|
// Affix,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
pStyle: {
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'rgba(0,0,0,0.85)',
|
||||||
|
lineHeight: '24px',
|
||||||
|
display: 'block',
|
||||||
|
marginBottom: '16px',
|
||||||
|
},
|
||||||
|
pStyle2: {
|
||||||
|
marginBottom: '24px',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDrawer() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -70,6 +70,7 @@
|
||||||
"@babel/core": "^7.10.5",
|
"@babel/core": "^7.10.5",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||||
"@babel/plugin-proposal-export-default-from": "^7.8.3",
|
"@babel/plugin-proposal-export-default-from": "^7.8.3",
|
||||||
|
"@babel/plugin-proposal-export-namespace-from": "^7.12.1",
|
||||||
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
|
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
|
||||||
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
|
"@babel/plugin-proposal-optional-chaining": "^7.10.1",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const babelConfig = {
|
||||||
'last 2 versions',
|
'last 2 versions',
|
||||||
'Firefox ESR',
|
'Firefox ESR',
|
||||||
'> 1%',
|
'> 1%',
|
||||||
'ie >= 9',
|
'ie >= 11',
|
||||||
'iOS >= 8',
|
'iOS >= 8',
|
||||||
'Android >= 4',
|
'Android >= 4',
|
||||||
],
|
],
|
||||||
|
|
@ -38,6 +38,7 @@ const babelConfig = {
|
||||||
'@babel/plugin-transform-object-assign',
|
'@babel/plugin-transform-object-assign',
|
||||||
'@babel/plugin-proposal-object-rest-spread',
|
'@babel/plugin-proposal-object-rest-spread',
|
||||||
'@babel/plugin-proposal-export-default-from',
|
'@babel/plugin-proposal-export-default-from',
|
||||||
|
'@babel/plugin-proposal-export-namespace-from',
|
||||||
'@babel/plugin-proposal-class-properties',
|
'@babel/plugin-proposal-class-properties',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue