ant-design-vue/components/mentions/index.jsx

190 lines
4.3 KiB
Vue
Raw Normal View History

Feat 1.5.0 (#1853) * feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com> Co-authored-by: drafish <xwlyy1991@163.com> Co-authored-by: Amour1688 <31695475+Amour1688@users.noreply.github.com>
2020-03-07 19:45:13 +08:00
import classNames from 'classnames';
import omit from 'omit.js';
import PropTypes from '../_util/vue-types';
import VcMentions from '../vc-mentions';
import { mentionsProps } from '../vc-mentions/src/mentionsProps';
import Base from '../base';
import Spin from '../spin';
import BaseMixin from '../_util/BaseMixin';
import { ConfigConsumerProps } from '../config-provider';
import {
getOptionProps,
getComponentFromProp,
getListeners,
filterEmpty,
} from '../_util/props-util';
const { Option } = VcMentions;
function loadingFilterOption() {
return true;
}
function getMentions(value = '', config) {
const { prefix = '@', split = ' ' } = config || {};
const prefixList = Array.isArray(prefix) ? prefix : [prefix];
return value
.split(split)
.map((str = '') => {
let hitPrefix = null;
prefixList.some(prefixStr => {
const startStr = str.slice(0, prefixStr.length);
if (startStr === prefixStr) {
hitPrefix = prefixStr;
return true;
}
return false;
});
if (hitPrefix !== null) {
return {
prefix: hitPrefix,
value: str.slice(hitPrefix.length),
};
}
return null;
})
.filter(entity => !!entity && !!entity.value);
}
const Mentions = {
name: 'AMentions',
mixins: [BaseMixin],
inheritAttrs: false,
model: {
prop: 'value',
event: 'change',
},
Option: { ...Option, name: 'AMentionsOption' },
getMentions,
props: {
...mentionsProps,
loading: PropTypes.bool,
},
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
data() {
return {
focused: false,
};
},
mounted() {
this.$nextTick(() => {
if (this.autoFocus) {
this.focus();
}
});
},
methods: {
onFocus(...args) {
this.$emit('focus', ...args);
this.setState({
focused: true,
});
},
onBlur(...args) {
this.$emit('blur', ...args);
this.setState({
focused: false,
});
},
onSelect(...args) {
this.$emit('select', ...args);
this.setState({
focused: true,
});
},
onChange(val) {
this.$emit('change', val);
},
getNotFoundContent(renderEmpty) {
const h = this.$createElement;
const notFoundContent = getComponentFromProp(this, 'notFoundContent');
if (notFoundContent !== undefined) {
return notFoundContent;
}
return renderEmpty(h, 'Select');
},
getOptions() {
const { loading } = this.$props;
const children = filterEmpty(this.$slots.default || []);
if (loading) {
return (
<Option value="ANTD_SEARCHING" disabled>
<Spin size="small" />
</Option>
);
}
return children;
},
getFilterOption() {
const { filterOption, loading } = this.$props;
if (loading) {
return loadingFilterOption;
}
return filterOption;
},
focus() {
this.$refs.vcMentions.focus();
},
blur() {
this.$refs.vcMentions.blur();
},
},
render() {
const { focused } = this.$data;
const { getPrefixCls, renderEmpty } = this.configProvider;
const {
prefixCls: customizePrefixCls,
disabled,
getPopupContainer,
...restProps
} = getOptionProps(this);
const prefixCls = getPrefixCls('mentions', customizePrefixCls);
const otherProps = omit(restProps, ['loading']);
const mergedClassName = classNames({
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-focused`]: focused,
});
const mentionsProps = {
props: {
prefixCls,
notFoundContent: this.getNotFoundContent(renderEmpty),
...otherProps,
disabled,
filterOption: this.getFilterOption(),
getPopupContainer,
Feat 1.5.0 (#1853) * feat: add Result component * fix: update md template tag html>tpl - fix `result` typo - update jest `result` snapshots * refactor: svg file to functional component icon - update jest snapshot * feat: add result * Feat descriptions (#1251) * feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnames * test: add descriptions test * fix: descriptions demo (#1498) * feat: add page header (#1250) * feat: add page-header component * update site: page-header * ts definition update: page-header * get page-header props with getComponentFromProp func * optimize page-header * doc: add page-header actions.md responsive.md * breadcrumb itemRender add pure function support * style: format code * feat: update style to 3.23.6 from 2.13.6 * feat: update style to 3.26.8 from 3.23.6 * chore: update util * chore: update util * feat: update affix * feat: update alert * feat: update anchor * feat: update auto-complete * feat: update avatar * feat: update back-top * feat: update badge * feat: update button * feat: update breadcrumb * feat: update ts * docs: update doc * feat: update calendat * feat: update card * feat: update carousel * feat: update carousel * feat: update checkbox * feat: update comment * feat: update config-provider * docs: update doc * feat: update collapse * feat: update locale * feat: update date-picker * feat: update divider * feat: update drawer * feat: update dropdown * feat: update rc-trigger * feat: update dropdown * feat: update empty * test: add empty test * feat: update form * feat: update form * feat: update spin * feat: update grid * docs: update grid doc * feat: update icon * feat: update slider * feat: update textarea * feat: update input-number * feat: update layout * feat: update list * feat: update menu * feat: meaage add key for update content * feat: modal add closeIcon support * feat: update notification * feat: add pagination disabled support * feat: popconfirm add disabled support * test: update popover * feat: progress support custom line-gradiend * feat: update radio * test: update radio test * docs: update rate demo * feat: skeleton add avatar support number type * test: add switch test * test: update statistic test * fix: input clear icon event * feat: steps add type、 v-model、subTitle * feat: delete typography component * feat: delete Typography style * perf: update select * feat: add download transformFile previewFile actio * docs: update upload * feat: update tree-select * docs: update tree-select * feat: tree add blockNode selectable * docs: add tree demo * test: update snap * docs: updatedoc * feat: update tag * docs: update ad doc * feat: update tooltip * feat: update timeline * feat: time-picker add clearIcon * docs: update tabs * feat: transfer support custom children * test: update transfer test * feat: update table * test: update table test * test: update test * feat: calendar update locale * test: update test snap * feat: add mentions (#1790) * feat: mentions style * feat: theme default * feat: add mentions component * feat: mentions API * feat: add unit test for mentions * feat: update mentions demo * perf: model and inheritAttrs for mentions * perf: use getComponentFromProp instead of this.$props * perf: mentions rm defaultProps * feat: rm rows in mentionsProps * fix: mentions keyDown didn't work * docs: update mentions api * perf: mentions code * feat: update mentions * bump 1.5.0-alpha.1 * feat: pageheader add ghost prop * docs: update descriptions demo * chore: page-header add ghost type * fix: color error * feat: update to 3.26.12 * fix: some prop default value * fix(typo): form, carousel, upload. duplicate identifier (#1848) * Add Mentions Type (#1845) * feat: add mentions type * feat: add mentions in ant-design-vue.d.ts * docs: update doc * docs: add changelog * fix: mentions getPopupCotainer value (#1850) * docs: update doc * docs: uptate demo * docs: update demo * docs: delete demo * docs: delete doc * test: update snapshots * style: format code * chore: update travis * docs: update demo Co-authored-by: Sendya <18x@loacg.com> Co-authored-by: zkwolf <chenhao5866@gmail.com> Co-authored-by: drafish <xwlyy1991@163.com> Co-authored-by: Amour1688 <31695475+Amour1688@users.noreply.github.com>
2020-03-07 19:45:13 +08:00
children: this.getOptions(),
},
class: mergedClassName,
attrs: { rows: 1, ...this.$attrs },
on: {
...getListeners(this),
change: this.onChange,
select: this.onSelect,
focus: this.onFocus,
blur: this.onBlur,
},
ref: 'vcMentions',
};
return <VcMentions {...mentionsProps} />;
},
};
/* istanbul ignore next */
Mentions.install = function(Vue) {
Vue.use(Base);
Vue.component(Mentions.name, Mentions);
Vue.component(Mentions.Option.name, Mentions.Option);
};
export default Mentions;