github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update radio (#2374) 

* feat: update radio

* chore: add @babel/plugin-proposal-optional-chaining
pull/2376/head
Amour1688 2020-06-13 22:32:10 +08:00 committed by GitHub
parent 5c811049f3
commit 109a386c22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 112 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
components/radio/Group.jsx
View File

@ -1,15 +1,14 @@
import { provide, inject, nextTick } from 'vue';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import Radio from './Radio'; import Radio from './Radio';
import { getOptionProps, filterEmpty, hasProp, getListeners } from '../_util/props-util'; import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
function noop() {} function noop() {}
export default { export default {
name: 'ARadioGroup', name: 'ARadioGroup',
model: { inheritAttrs: false,
prop: 'value',
},
props: { props: {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
defaultValue: PropTypes.any, defaultValue: PropTypes.any,
@ -35,14 +34,11 @@ export default {
stateValue: value === undefined ? defaultValue : value, stateValue: value === undefined ? defaultValue : value,
}; };
}, },
provide() { setup() {
return { return {
radioGroupContext: this, configProvider: inject('configProvider', ConfigConsumerProps),
}; };
}, },
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
computed: { computed: {
radioOptions() { radioOptions() {
const { disabled } = this; const { disabled } = this;
@ -52,13 +48,6 @@ export default {
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }; : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled };
}); });
}, },
classes() {
const { prefixCls, size } = this;
return {
[`${prefixCls}`]: true,
[`${prefixCls}-${size}`]: size,
};
},
}, },
watch: { watch: {
value(val) { value(val) {
@ -66,6 +55,10 @@ export default {
this.stateValue = val; this.stateValue = val;
}, },
}, },
created() {
this.configProvider = inject('configProvider', ConfigConsumerProps);
this.radioGroupContext = provide('radioGroupContext', this);
},
methods: { methods: {
onRadioChange(ev) { onRadioChange(ev) {
const lastValue = this.stateValue; const lastValue = this.stateValue;
@ -76,27 +69,32 @@ export default {
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280 // nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
if (!this.updatingValue && value !== lastValue) { if (!this.updatingValue && value !== lastValue) {
this.updatingValue = true; this.updatingValue = true;
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('change', ev); this.$emit('change', ev);
} }
this.$nextTick(() => { nextTick(() => {
this.updatingValue = false; this.updatingValue = false;
}); });
}, },
}, },
render() { render() {
const { mouseenter = noop, mouseleave = noop } = getListeners(this); const { onMouseenter = noop, onMouseleave = noop, class: className, style, id } = this.$attrs;
const props = getOptionProps(this); const props = getOptionProps(this);
const { prefixCls: customizePrefixCls, options, buttonStyle } = props; const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('radio', customizePrefixCls); const prefixCls = getPrefixCls('radio', customizePrefixCls);
const groupPrefixCls = `${prefixCls}-group`; const groupPrefixCls = `${prefixCls}-group`;
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, { const classString = classNames(
[`${groupPrefixCls}-${props.size}`]: props.size, groupPrefixCls,
}); `${groupPrefixCls}-${buttonStyle}`,
{
[`${groupPrefixCls}-${props.size}`]: props.size,
},
className,
);
let children = filterEmpty(this.$slots.default); let children = filterEmpty(getSlot(this));
// 如果存在 options, 优先使用 // 如果存在 options, 优先使用
if (options && options.length > 0) { if (options && options.length > 0) {
@ -113,24 +111,29 @@ export default {
{option} {option}
</Radio> </Radio>
); );
} else {
return (
<Radio
key={`radio-group-value-options-${option.value}`}
prefixCls={prefixCls}
disabled={option.disabled || props.disabled}
value={option.value}
checked={this.stateValue === option.value}
>
{option.label}
</Radio>
);
} }
return (
<Radio
key={`radio-group-value-options-${option.value}`}
prefixCls={prefixCls}
disabled={option.disabled || props.disabled}
value={option.value}
checked={this.stateValue === option.value}
>
{option.label}
</Radio>
);
}); });
} }
return ( return (
<div class={classString} onMouseenter={mouseenter} onMouseleave={mouseleave}> <div
class={classString}
onMouseenter={onMouseenter}
onMouseleave={onMouseleave}
style={style}
id={id}
>
{children} {children}
</div> </div>
); );

56
components/radio/Radio.jsx
View File

@ -1,13 +1,15 @@
import { inject } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import VcCheckbox from '../vc-checkbox'; import VcCheckbox from '../vc-checkbox';
import classNames from 'classnames'; import classNames from 'classnames';
import { getOptionProps, getAttrs, getListeners } from '../_util/props-util'; import { getOptionProps } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
function noop() {} function noop() {}
export default { export default {
name: 'ARadio', name: 'ARadio',
inheritAttrs: false,
model: { model: {
prop: 'checked', prop: 'checked',
}, },
@ -23,9 +25,11 @@ export default {
autoFocus: Boolean, autoFocus: Boolean,
type: PropTypes.string.def('radio'), type: PropTypes.string.def('radio'),
}, },
inject: { setup() {
radioGroupContext: { default: undefined }, return {
configProvider: { default: () => ConfigConsumerProps }, configProvider: inject('configProvider', ConfigConsumerProps),
radioGroupContext: inject('radioGroupContext'),
};
}, },
methods: { methods: {
focus() { focus() {
@ -36,7 +40,7 @@ export default {
}, },
handleChange(event) { handleChange(event) {
const targetChecked = event.target.checked; const targetChecked = event.target.checked;
this.$emit('input', targetChecked); this.$emit('update:value', targetChecked);
this.$emit('change', event); this.$emit('change', event);
}, },
onChange(e) { onChange(e) {
@ -48,38 +52,48 @@ export default {
}, },
render() { render() {
const { $slots, radioGroupContext: radioGroup } = this; const { $slots, radioGroupContext: radioGroup, $attrs } = this;
const props = getOptionProps(this); const props = getOptionProps(this);
const children = $slots.default; const {
const { mouseenter = noop, mouseleave = noop, ...restListeners } = getListeners(this); onMouseenter = noop,
onMouseleave = noop,
class: className,
style,
...restAttrs
} = $attrs;
const { prefixCls: customizePrefixCls, ...restProps } = props; const { prefixCls: customizePrefixCls, ...restProps } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('radio', customizePrefixCls); const prefixCls = getPrefixCls('radio', customizePrefixCls);
const radioProps = { const radioProps = {
props: { ...restProps, prefixCls }, prefixCls,
on: restListeners, ...restProps,
attrs: getAttrs(this), ...restAttrs,
}; };
if (radioGroup) { if (radioGroup) {
radioProps.props.name = radioGroup.name; radioProps.name = radioGroup.name;
radioProps.on.change = this.onChange; radioProps.onChange = this.onChange;
radioProps.props.checked = props.value === radioGroup.stateValue; radioProps.checked = props.value === radioGroup.stateValue;
radioProps.props.disabled = props.disabled || radioGroup.disabled; radioProps.disabled = props.disabled || radioGroup.disabled;
} else { } else {
radioProps.on.change = this.handleChange; radioProps.onChange = this.handleChange;
} }
const wrapperClassString = classNames({ const wrapperClassString = classNames(className, {
[`${prefixCls}-wrapper`]: true, [`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: radioProps.props.checked, [`${prefixCls}-wrapper-checked`]: radioProps.checked,
[`${prefixCls}-wrapper-disabled`]: radioProps.props.disabled, [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
}); });
return ( return (
<label class={wrapperClassString} onMouseenter={mouseenter} onMouseleave={mouseleave}> <label
class={wrapperClassString}
style={style}
onMouseenter={onMouseenter}
onMouseleave={onMouseleave}
>
<VcCheckbox {...radioProps} ref="vcCheckbox" /> <VcCheckbox {...radioProps} ref="vcCheckbox" />
{children !== undefined ? <span>{children}</span> : null} {$slots.default !== undefined ? <span>{$slots.default()}</span> : null}
</label> </label>
); );
}, },

29
components/radio/RadioButton.jsx
View File

@ -1,5 +1,6 @@
import { inject } from 'vue';
import Radio from './Radio'; import Radio from './Radio';
import { getOptionProps, getListeners } from '../_util/props-util'; import { getOptionProps, getSlot } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
export default { export default {
@ -7,27 +8,27 @@ export default {
props: { props: {
...Radio.props, ...Radio.props,
}, },
inject: { setup() {
radioGroupContext: { default: undefined }, return {
configProvider: { default: () => ConfigConsumerProps }, configProvider: inject('configProvider', ConfigConsumerProps),
radioGroupContext: inject('radioGroupContext'),
};
}, },
render() { render() {
const { prefixCls: customizePrefixCls, ...otherProps } = getOptionProps(this); const props = getOptionProps(this);
const { prefixCls: customizePrefixCls, ...otherProps } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('radio-button', customizePrefixCls); const prefixCls = getPrefixCls('radio-button', customizePrefixCls);
const radioProps = { const radioProps = {
props: { prefixCls,
...otherProps, ...otherProps,
prefixCls,
},
on: getListeners(this),
}; };
if (this.radioGroupContext) { if (this.radioGroupContext) {
radioProps.on.change = this.radioGroupContext.onRadioChange; radioProps.onChange = this.radioGroupContext.onRadioChange;
radioProps.props.checked = this.$props.value === this.radioGroupContext.stateValue; radioProps.checked = props.value === this.radioGroupContext.stateValue;
radioProps.props.disabled = this.$props.disabled || this.radioGroupContext.disabled; radioProps.disabled = props.disabled || this.radioGroupContext.disabled;
} }
return <Radio {...radioProps}>{this.$slots.default}</Radio>; return <Radio {...radioProps}>{getSlot(this)}</Radio>;
}, },
}; };

11
components/radio/index.js
View File

@ -1,17 +1,16 @@
import Radio from './Radio'; import Radio from './Radio';
import Group from './Group'; import Group from './Group';
import Button from './RadioButton'; import Button from './RadioButton';
import Base from '../base'; // import Base from '../base';
Radio.Group = Group; Radio.Group = Group;
Radio.Button = Button; Radio.Button = Button;
/* istanbul ignore next */ /* istanbul ignore next */
Radio.install = function(Vue) { Radio.install = function(app) {
Vue.use(Base); app.component(Radio.name, Radio);
Vue.component(Radio.name, Radio); app.component(Radio.Group.name, Radio.Group);
Vue.component(Radio.Group.name, Radio.Group); app.component(Radio.Button.name, Radio.Button);
Vue.component(Radio.Button.name, Radio.Button);
}; };
export { Button, Group }; export { Button, Group };

33
components/vc-checkbox/src/Checkbox.jsx
View File

@ -1,13 +1,8 @@
import PropTypes from '../../_util/vue-types'; import { nextTick } from 'vue';
import classNames from 'classnames'; import classNames from 'classnames';
import { import PropTypes from '../../_util/vue-types';
getOptionProps,
hasProp,
initDefaultProps,
getAttrs,
getListeners,
} from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp, initDefaultProps } from '../../_util/props-util';
export default { export default {
name: 'Checkbox', name: 'Checkbox',
@ -53,7 +48,7 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$nextTick(() => { nextTick(() => {
if (this.autoFocus) { if (this.autoFocus) {
this.$refs.input && this.$refs.input.focus(); this.$refs.input && this.$refs.input.focus();
} }
@ -94,7 +89,7 @@ export default {
this.eventShiftKey = false; this.eventShiftKey = false;
}, },
onClick(e) { onClick(e) {
this.__emit('click', e); this.$emit('click', e);
// onChange没能获取到shiftKey，使用onClick hack // onChange没能获取到shiftKey，使用onClick hack
this.eventShiftKey = e.shiftKey; this.eventShiftKey = e.shiftKey;
}, },
@ -110,11 +105,12 @@ export default {
readOnly, readOnly,
tabIndex, tabIndex,
autoFocus, autoFocus,
onFocus,
onBlur,
value, value,
...others ...others
} = getOptionProps(this); } = getOptionProps(this);
const attrs = getAttrs(this); const globalProps = Object.keys({ ...others, ...this.$attrs }).reduce((prev, key) => {
const globalProps = Object.keys({ ...others, ...attrs }).reduce((prev, key) => {
if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') { if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
prev[key] = others[key]; prev[key] = others[key];
} }
@ -141,14 +137,11 @@ export default {
autoFocus={autoFocus} autoFocus={autoFocus}
ref="input" ref="input"
value={value} value={value}
{...{ onChange={this.handleChange}
attrs: globalProps, onClick={this.onClick}
on: { onFocus={onFocus}
...getListeners(this), onBlur={onBlur}
change: this.handleChange, {...globalProps}
click: this.onClick,
},
}}
/> />
<span class={`${prefixCls}-inner`} /> <span class={`${prefixCls}-inner`} />
</span> </span>

2
examples/index.js
View File

@ -10,6 +10,7 @@ import Affix from 'ant-design-vue/affix';
import Alert from 'ant-design-vue/alert'; import Alert from 'ant-design-vue/alert';
import Divider from 'ant-design-vue/divider'; import Divider from 'ant-design-vue/divider';
import Anchor from 'ant-design-vue/anchor'; import Anchor from 'ant-design-vue/anchor';
import Radio from 'ant-design-vue/radio';
import ConfigProvider from 'ant-design-vue/config-provider'; import ConfigProvider from 'ant-design-vue/config-provider';
import Result from 'ant-design-vue/result'; import Result from 'ant-design-vue/result';
import Spin from 'ant-design-vue/spin'; import Spin from 'ant-design-vue/spin';
@ -34,6 +35,7 @@ createApp(App)
.use(Drawer) .use(Drawer)
.use(Affix) .use(Affix)
.use(Alert) .use(Alert)
.use(Radio)
.use(Divider) .use(Divider)
.use(Result) .use(Result)
.use(PageHeader) .use(PageHeader)

1
package.json
View File

@ -65,6 +65,7 @@
"@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-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-transform-member-expression-literals": "^7.8.3", "@babel/plugin-transform-member-expression-literals": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.8.3", "@babel/plugin-transform-object-assign": "^7.8.3",
"@babel/plugin-transform-property-literals": "^7.8.3", "@babel/plugin-transform-property-literals": "^7.8.3",

5
webpack.config.js
View File

@ -37,7 +37,8 @@ module.exports = {
], ],
], ],
plugins: [ plugins: [
['@ant-design-vue/babel-plugin-jsx', { transformOn: true, compatibleProps: true }], ['@ant-design-vue/babel-plugin-jsx', { transformOn: true }],
'@babel/plugin-proposal-optional-chaining',
'@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',
@ -85,8 +86,6 @@ module.exports = {
extensions: ['.js', '.jsx', '.vue'], extensions: ['.js', '.jsx', '.vue'],
}, },
devServer: { devServer: {
host: 'localhost',
port: 3002,
historyApiFallback: { historyApiFallback: {
rewrites: [{ from: /./, to: '/index.html' }], rewrites: [{ from: /./, to: '/index.html' }],
}, },