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

Merge branch 'feat-3.10.3' of https://github.com/vueComponent/ant-design into feat-3.10.3

pull/309/head
wangxueliang 2018-11-08 20:48:16 +08:00
parent 4badf03a2f 9ed79212e0
commit ad47206792
80 changed files with 929 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/_util/props-util.js
View File

@ -88,19 +88,19 @@ const getOptionProps = (instance) => {
return filterProps($props, $options.propsData) return filterProps($props, $options.propsData)
} }
const getComponentFromProp = (instance, prop) => { const getComponentFromProp = (instance, prop, options) => {
if (instance.$createElement) { if (instance.$createElement) {
const h = instance.$createElement const h = instance.$createElement
const temp = instance[prop] const temp = instance[prop]
if (temp !== undefined) { if (temp !== undefined) {
return typeof temp === 'function' ? temp(h) : temp return typeof temp === 'function' ? temp(h, options) : temp
} }
return instance.$slots[prop] return instance.$slots[prop] || (instance.$scopedSlots[prop] && instance.$scopedSlots[prop](options)) || undefined
} else { } else {
const h = instance.context.$createElement const h = instance.context.$createElement
const temp = getPropsData(instance)[prop] const temp = getPropsData(instance)[prop]
if (temp !== undefined) { if (temp !== undefined) {
return typeof temp === 'function' ? temp(h) : temp return typeof temp === 'function' ? temp(h, options) : temp
} }
const slotsProp = [] const slotsProp = []
const componentOptions = instance.componentOptions || {}; const componentOptions = instance.componentOptions || {};

11
components/_util/store/connect.jsx
View File

@ -26,6 +26,7 @@ export default function connect (mapStateToProps) {
}, },
data () { data () {
this.store = this.storeContext.store this.store = this.storeContext.store
this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
return { return {
subscribed: finnalMapStateToProps(this.store.getState(), this.$props), subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
} }
@ -49,10 +50,10 @@ export default function connect (mapStateToProps) {
if (!this.unsubscribe) { if (!this.unsubscribe) {
return return
} }
const props = getOptionProps(this)
const nextState = finnalMapStateToProps(this.store.getState(), this.$props) const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
if (!shallowEqual(this.subscribed, nextState)) { if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
this.subscribed = nextState this.subscribed = nextSubscribed
} }
}, },
@ -74,8 +75,10 @@ export default function connect (mapStateToProps) {
}, },
}, },
render () { render () {
this.preProps = { ...this.$props }
const { $listeners, $slots = {}, $attrs, $scopedSlots, subscribed, store } = this const { $listeners, $slots = {}, $attrs, $scopedSlots, subscribed, store } = this
const props = getOptionProps(this) const props = getOptionProps(this)
this.preProps = { ...omit(props, ['__propsSymbol__']) }
const wrapProps = { const wrapProps = {
props: { props: {
...props, ...props,

8
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -520,7 +520,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item"> <div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label for="input-number" title="InputNumber" class="">InputNumber</label></div> <div class="ant-col-6 ant-form-item-label"><label for="input-number" title="InputNumber" class="">InputNumber</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper"> <div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
</div><span class="ant-form-text"> machines</span></span> </div><span class="ant-form-text"> machines</span></span>
<!----> <!---->
@ -565,7 +565,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-row ant-form-item"> <div class="ant-row ant-form-item">
<div class="ant-col-6 ant-form-item-label"><label for="rate" title="Rate" class="">Rate</label></div> <div class="ant-col-6 ant-form-item-label"><label for="rate" title="Rate" class="">Rate</label></div>
<div class="ant-col-14 ant-form-item-control-wrapper"> <div class="ant-col-14 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="rate"><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-half ant-rate-star-active"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li></ul></span> <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" role="radiogroup" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="rate"><li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-half ant-rate-star-active"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li></ul></span>
<!----> <!---->
</div> </div>
</div> </div>
@ -708,7 +708,7 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
<div class="ant-row ant-form-item"> <div class="ant-row ant-form-item">
<div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div> <div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
<div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper"> <div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="-9007199254740991" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="-9007199254740991" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
</div></span> </div></span>
<!----> <!---->
@ -723,7 +723,7 @@ exports[`renders ./components/form/demo/without-form-create.vue correctly 1`] =
<div class="ant-row ant-form-item ant-form-item-with-help"> <div class="ant-row ant-form-item ant-form-item-with-help">
<div class="ant-col-7 ant-form-item-label"><label title="Prime between 8 &amp; 12" class="">Prime between 8 &amp; 12</label></div> <div class="ant-col-7 ant-form-item-label"><label title="Prime between 8 &amp; 12" class="">Prime between 8 &amp; 12</label></div>
<div class="ant-col-12 ant-form-item-control-wrapper"> <div class="ant-col-12 ant-form-item-control-wrapper">
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" class="ant-input-number-input-wrap"><input autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" class="ant-input-number-input-wrap"><input autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
</div></span> </div></span>
<div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div> <div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>

16
components/input-number/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders ./components/input-number/demo/basic.md correctly 1`] = ` exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
<div> <div>
<div class="ant-input-number"> <div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
当前值：3 当前值：3
@ -12,7 +12,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
exports[`renders ./components/input-number/demo/digit.md correctly 1`] = ` exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
<div class="ant-input-number"> <div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
</div> </div>
`; `;
@ -20,7 +20,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = ` exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
<div> <div>
<div class="ant-input-number ant-input-number-disabled"> <div class="ant-input-number ant-input-number-disabled">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
<div style="margin-top: 20px;"><button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div> <div style="margin-top: 20px;"><button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>
@ -30,11 +30,11 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = ` exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
<div> <div>
<div class="ant-input-number"> <div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
</div> </div>
<div class="ant-input-number"> <div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap"><input autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap"><input autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
</div> </div>
</div> </div>
@ -43,15 +43,15 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
exports[`renders ./components/input-number/demo/size.md correctly 1`] = ` exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
<div> <div>
<div class="ant-input-number ant-input-number-lg"> <div class="ant-input-number ant-input-number-lg">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
<div class="ant-input-number"> <div class="ant-input-number">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
<div class="ant-input-number ant-input-number-sm"> <div class="ant-input-number ant-input-number-sm">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
</div> </div>

72
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -45,7 +45,7 @@ exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;"> <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span>nav 1</span></li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span>nav 1</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span>nav 2</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span>nav 2</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span>nav 3</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span>nav 3</span></li>
@ -65,10 +65,22 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-fixed"> <div class="ant-layout" id="components-layout-demo-fixed">
<div class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;"> <div class="ant-layout-header" style="position: fixed; z-index: 1; width: 100%;">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 1</li> <li role="menuitem" class="ant-menu-item">nav 1</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 3</li> <li role="menuitem" class="ant-menu-item">nav 3</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul> </ul>
</div> </div>
<div class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;"> <div class="ant-layout-content" style="padding: 0px 50px; margin-top: 64px;">
@ -86,7 +98,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; overflow: auto; height: 100vh; position: fixed; left: 0px;"> <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; overflow: auto; height: 100vh; position: fixed; left: 0px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
@ -129,7 +141,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;"> <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
@ -156,7 +168,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
<div class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="max-width: 200px; min-width: 200px; width: 200px;"> <div class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="max-width: 200px; min-width: 200px; width: 200px;">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@ -191,10 +203,22 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
<div class="layout ant-layout" id="components-layout-demo-top"> <div class="layout ant-layout" id="components-layout-demo-top">
<div class="ant-layout-header"> <div class="ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 1</li> <li role="menuitem" class="ant-menu-item">nav 1</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 3</li> <li role="menuitem" class="ant-menu-item">nav 3</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul> </ul>
</div> </div>
<div class="ant-layout-content" style="padding: 0px 50px;"> <div class="ant-layout-content" style="padding: 0px 50px;">
@ -211,10 +235,22 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-top-side"> <div class="ant-layout" id="components-layout-demo-top-side">
<div class="header ant-layout-header"> <div class="header ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 1</li> <li role="menuitem" class="ant-menu-item">nav 1</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 3</li> <li role="menuitem" class="ant-menu-item">nav 3</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul> </ul>
</div> </div>
<div class="ant-layout-content" style="padding: 0px 50px;"> <div class="ant-layout-content" style="padding: 0px 50px;">
@ -222,10 +258,10 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<div class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);"> <div class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);"> <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="height: 100%;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
@ -258,19 +294,31 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<div class="ant-layout" id="components-layout-demo-top-side-2"> <div class="ant-layout" id="components-layout-demo-top-side-2">
<div class="header ant-layout-header"> <div class="header ant-layout-header">
<div class="logo"></div> <div class="logo"></div>
<ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" role="menu" style="line-height: 64px;"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height: 64px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 1</li> <li role="menuitem" class="ant-menu-item">nav 1</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected">nav 2</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item">nav 3</li> <li role="menuitem" class="ant-menu-item">nav 3</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul> </ul>
</div> </div>
<div class="ant-layout"> <div class="ant-layout">
<div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);"> <div class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255);">
<div class="ant-layout-sider-children"> <div class="ant-layout-sider-children">
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="height: 100%; border-right: 0;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>

2
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

@ -9748,7 +9748,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
<div class="ant-select ant-select-enabled ant-pagination-options-size-changer"> <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"> <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered"> <div class="ant-select-selection__rendered">
<div title="10 /странице" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 /странице</div> <div title="10 / стр." class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 / стр.</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span> </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
</div> </div>
</div> </div>

41
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,25 +2,40 @@
exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = ` exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
<div> <div>
<ul class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light" role="menu"> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item ant-menu-item-selected"><i class="anticon anticon-mail"></i>Navigation One <li role="menuitem" class="ant-menu-item ant-menu-item-selected"><i class="anticon anticon-mail"></i>Navigation One
</li> </li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" aria-disabled="true" class="ant-menu-item ant-menu-item-disabled"><i class="anticon anticon-appstore"></i>Navigation Two <li role="menuitem" aria-disabled="true" class="ant-menu-item ant-menu-item-disabled"><i class="anticon anticon-appstore"></i>Navigation Two
</li> </li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal">
<div aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-setting"></i>Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-setting"></i>Navigation Three - Submenu</span><i class="ant-menu-submenu-arrow"></i></div>
</li> </li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li role="menuitem" class="ant-menu-item"><a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a></li> <li role="menuitem" class="ant-menu-item"><a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;">
<div aria-haspopup="true" class="ant-menu-submenu-title"><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul> </ul>
</div> </div>
`; `;
exports[`renders ./components/menu/demo/inline.md correctly 1`] = ` exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
<div> <div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li class="ant-menu-item-group"> <li class="ant-menu-item-group">
<div class="ant-menu-item-group-title"><i class="anticon anticon-qq"></i><span>Item 1</span></div> <div class="ant-menu-item-group-title"><i class="anticon anticon-qq"></i><span>Item 1</span></div>
<ul class="ant-menu-item-group-list"> <ul class="ant-menu-item-group-list">
@ -51,13 +66,13 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = ` exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
<div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button> <div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-inbox"></i> <span>Option 3</span></li> <li role="menuitem" class="ant-menu-item" style="padding-left: 24px;"><i class="anticon anticon-inbox"></i> <span>Option 3</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 5</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 5</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 6</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 6</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 7</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 7</li>
@ -74,10 +89,10 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = ` exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
<div> <div>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 1</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 2</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
@ -100,7 +115,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Mode <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Mode
<span classname="ant-divider" style="margin: 0px 1em;"></span> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme <span classname="ant-divider" style="margin: 0px 1em;"></span> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
<br> <br> <br> <br>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" role="menu" style="width: 256px;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i>
Navigation One Navigation One
</li> </li>
@ -109,7 +124,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
</li> </li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@ -128,7 +143,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
exports[`renders ./components/menu/demo/template.md correctly 1`] = ` exports[`renders ./components/menu/demo/template.md correctly 1`] = `
<div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button> <div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]">
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
@ -141,7 +156,7 @@ exports[`renders ./components/menu/demo/template.md correctly 1`] = `
exports[`renders ./components/menu/demo/theme.md correctly 1`] = ` exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
<br> <br> <br> <br>
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu" style="width: 256px;"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" style="width: 256px;">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i> <li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-mail"></i>
Navigation One Navigation One
</li> </li>
@ -150,7 +165,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
</li> </li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div> <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu"> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 3</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li> <li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">Option 4</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"> <li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline">
@ -169,7 +184,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
exports[`renders ./components/menu/demo/vertical.md correctly 1`] = ` exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
<div> <div>
<ul class="ant-menu ant-menu-vertical ant-menu-root ant-menu-light" role="menu" style="width: 256px;"> <ul role="menu" class="ant-menu ant-menu-vertical ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-item"><i class="anticon anticon-mail"></i> <li role="menuitem" class="ant-menu-item"><i class="anticon anticon-mail"></i>
Navigation One Navigation One
</li> </li>

32
components/menu/__tests__/index.test.js
View File

@ -13,9 +13,9 @@ describe('Menu', () => {
// jest.useFakeTimers() // jest.useFakeTimers()
}) })
// afterEach(() => { afterEach(() => {
// jest.useRealTimers() // jest.useRealTimers()
// }) })
it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', async () => { it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', async () => {
const wrapper = mount({ const wrapper = mount({
render () { render () {
@ -123,12 +123,12 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: [] }) wrapper.setProps({ openKeys: [] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
}) }, 0)
wrapper.setProps({ openKeys: ['1'] }) wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
}) }, 0)
}) })
it('inline', async () => { it('inline', async () => {
@ -159,11 +159,11 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: [] }) wrapper.setProps({ openKeys: [] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none') expect($$('.ant-menu-sub')[0].style.display).toBe('none')
}) }, 0)
wrapper.setProps({ openKeys: ['1'] }) wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
}) }, 0)
}) })
it('vertical', async () => { it('vertical', async () => {
@ -194,11 +194,11 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: [] }) wrapper.setProps({ openKeys: [] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
}) }, 0)
wrapper.setProps({ openKeys: ['1'] }) wrapper.setProps({ openKeys: ['1'] })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
}) }, 0)
}) })
// https://github.com/ant-design/ant-design/pulls/4677 // https://github.com/ant-design/ant-design/pulls/4677
@ -375,15 +375,15 @@ describe('Menu', () => {
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0) expect($$('.ant-menu-sub').length).toBe(0)
toggleMenu(wrapper, 0, 'click') toggleMenu(wrapper, 0, 'click')
}) }, 0)
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1) expect($$('.ant-menu-sub').length).toBe(1)
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
toggleMenu(wrapper, 0, 'click') toggleMenu(wrapper, 0, 'click')
}) }, 500)
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none') expect($$('.ant-menu-sub')[0].style.display).toBe('none')
}) }, 500)
}) })
it('vertical', async () => { it('vertical', async () => {
@ -403,7 +403,7 @@ describe('Menu', () => {
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0) expect($$('.ant-menu-sub').length).toBe(0)
toggleMenu(wrapper, 0, 'mouseenter') toggleMenu(wrapper, 0, 'mouseenter')
}) }, 0)
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1) expect($$('.ant-menu-sub').length).toBe(1)
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
@ -430,12 +430,12 @@ describe('Menu', () => {
}, { attachToDocument: true, sync: false }) }, { attachToDocument: true, sync: false })
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0) expect($$('.ant-menu-sub').length).toBe(0)
toggleMenu(wrapper, 0, 'mouseenter') toggleMenu(wrapper, 1, 'mouseenter')
}) }, 0)
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1) expect($$('.ant-menu-sub').length).toBe(1)
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
toggleMenu(wrapper, 0, 'mouseleave') toggleMenu(wrapper, 1, 'mouseleave')
}, 500) }, 500)
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none') expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')

2
components/menu/demo/index.vue
View File

@ -1,6 +1,7 @@
<script> <script>
import Horizontal from './horizontal' import Horizontal from './horizontal'
import InlineCollapsed from './inline-collapsed' import InlineCollapsed from './inline-collapsed'
import Inline from './inline'
import SiderCurrent from './sider-current' import SiderCurrent from './sider-current'
import SwitchMode from './switch-mode' import SwitchMode from './switch-mode'
import Theme from './theme' import Theme from './theme'
@ -32,6 +33,7 @@ export default {
<md cn={md.cn} us={md.us}/> <md cn={md.cn} us={md.us}/>
<Horizontal /> <Horizontal />
<InlineCollapsed /> <InlineCollapsed />
<Inline />
<SiderCurrent /> <SiderCurrent />
<SwitchMode /> <SwitchMode />
<Theme /> <Theme />

2
components/popconfirm/__tests__/__snapshots__/index.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Popconfirm should show overlay when trigger is clicked 1`] = ` exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
<div class="ant-popover-content"> <div class="ant-popover-content">
<div class="ant-popover-arrow"></div> <div class="ant-popover-arrow"></div>
<div class="ant-popover-inner"> <div role="tooltip" class="ant-popover-inner">
<div class="ant-popover-inner-content"> <div class="ant-popover-inner-content">
<div class="ant-popover-message"><i class="anticon anticon-exclamation-circle"></i> <div class="ant-popover-message"><i class="anticon anticon-exclamation-circle"></i>
<div class="ant-popover-message-title">code</div> <div class="ant-popover-message-title">code</div>

4
components/popover/__tests__/__snapshots__/index.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Popover should show overlay when trigger is clicked 1`] = ` exports[`Popover should show overlay when trigger is clicked 1`] = `
<div class="ant-popover-content"> <div class="ant-popover-content">
<div class="ant-popover-arrow"></div> <div class="ant-popover-arrow"></div>
<div class="ant-popover-inner"> <div role="tooltip" class="ant-popover-inner">
<div> <div>
<div class="ant-popover-title">code</div> <div class="ant-popover-title">code</div>
<div class="ant-popover-inner-content">console.log('hello world')</div> <div class="ant-popover-inner-content">console.log('hello world')</div>
@ -15,7 +15,7 @@ exports[`Popover should show overlay when trigger is clicked 1`] = `
exports[`Popover should show overlay when trigger is clicked 2`] = ` exports[`Popover should show overlay when trigger is clicked 2`] = `
<div class="ant-popover-content"> <div class="ant-popover-content">
<div class="ant-popover-arrow"></div> <div class="ant-popover-arrow"></div>
<div class="ant-popover-inner"> <div role="tooltip" class="ant-popover-inner">
<div> <div>
<div class="ant-popover-title">code</div> <div class="ant-popover-title">code</div>
<div class="ant-popover-inner-content">console.log('hello world')</div> <div class="ant-popover-inner-content">console.log('hello world')</div>

46
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,30 +6,30 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #ff5500; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div> </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div> </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
</div> </div>
</div> </div>
@ -41,7 +41,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">0%</span></div> </svg><span class="ant-progress-text">0%</span></div>
</div> </div>
<div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"></i></button></div> <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"></i></button></div>
@ -54,30 +54,30 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">30%</span></div> </svg><span class="ant-progress-text">30%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #ff5500; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div> </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div> </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
</div> </div>
</div> </div>
@ -89,10 +89,10 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path> a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path> a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text">75%</span></div>
</div> </div>
</div> </div>
@ -119,20 +119,20 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">75 Days</span></div> </svg><span class="ant-progress-text">75 Days</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">Done</span></div> </svg><span class="ant-progress-text">Done</span></div>
</div> </div>
</div> </div>
@ -244,20 +244,20 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path> a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path> a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #108ee9; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="square" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path> a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text">75%</span></div>
</div> </div>
</div> </div>

98
components/rate/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,24 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/rate/demo/basic.md correctly 1`] = ` exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
@ -27,68 +27,68 @@ exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
exports[`renders ./components/rate/demo/character.md correctly 1`] = ` exports[`renders ./components/rate/demo/character.md correctly 1`] = `
<div> <div>
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-heart"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-heart"></i></div>
</li> </li>
</ul> <br> </ul> <br>
<ul tabindex="0" class="ant-rate" style="font-size: 36px;"> <ul tabindex="0" role="radiogroup" class="ant-rate" style="font-size: 36px;">
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">A</div> <div class="ant-rate-star-first">A</div>
<div class="ant-rate-star-second">A</div> <div class="ant-rate-star-second">A</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">A</div> <div class="ant-rate-star-first">A</div>
<div class="ant-rate-star-second">A</div> <div class="ant-rate-star-second">A</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">A</div> <div class="ant-rate-star-first">A</div>
<div class="ant-rate-star-second">A</div> <div class="ant-rate-star-second">A</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">A</div> <div class="ant-rate-star-first">A</div>
<div class="ant-rate-star-second">A</div> <div class="ant-rate-star-second">A</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">A</div> <div class="ant-rate-star-first">A</div>
<div class="ant-rate-star-second">A</div> <div class="ant-rate-star-second">A</div>
</li> </li>
</ul> <br> </ul> <br>
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">好</div> <div class="ant-rate-star-first">好</div>
<div class="ant-rate-star-second">好</div> <div class="ant-rate-star-second">好</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">好</div> <div class="ant-rate-star-first">好</div>
<div class="ant-rate-star-second">好</div> <div class="ant-rate-star-second">好</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">好</div> <div class="ant-rate-star-first">好</div>
<div class="ant-rate-star-second">好</div> <div class="ant-rate-star-second">好</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">好</div> <div class="ant-rate-star-first">好</div>
<div class="ant-rate-star-second">好</div> <div class="ant-rate-star-second">好</div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first">好</div> <div class="ant-rate-star-first">好</div>
<div class="ant-rate-star-second">好</div> <div class="ant-rate-star-second">好</div>
</li> </li>
@ -98,47 +98,47 @@ exports[`renders ./components/rate/demo/character.md correctly 1`] = `
exports[`renders ./components/rate/demo/clear.md correctly 1`] = ` exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
<div> <div>
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
</ul> allowClear: true </ul> allowClear: true
<br> <br>
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
@ -148,24 +148,24 @@ exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
`; `;
exports[`renders ./components/rate/demo/disabled.md correctly 1`] = ` exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
<ul tabindex="-1" class="ant-rate ant-rate-disabled"> <ul tabindex="-1" role="radiogroup" class="ant-rate ant-rate-disabled">
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
@ -173,28 +173,28 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
`; `;
exports[`renders ./components/rate/demo/half.md correctly 1`] = ` exports[`renders ./components/rate/demo/half.md correctly 1`] = `
<ul tabindex="0" class="ant-rate"> <ul tabindex="0" role="radiogroup" class="ant-rate">
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-full"> <li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-half ant-rate-star-active"> <li role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-half ant-rate-star-active">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
<li class="ant-rate-star ant-rate-star-zero"> <li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero">
<div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div>
<div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div> <div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div>
</li> </li>
</ul> </ul>
`; `;
exports[`renders ./components/rate/demo/text.md correctly 1`] = `<span><ul tabindex="0" class="ant-rate"><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li></ul> <span class="ant-rate-text">3 stars</span></span>`; exports[`renders ./components/rate/demo/text.md correctly 1`] = `<span><ul tabindex="0" role="radiogroup" class="ant-rate"><li role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="false" aria-posinset="4" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0" class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li></ul> <span class="ant-rate-text">3 stars</span></span>`;

4
components/slider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -74,7 +74,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
</div> </div>
<div class="ant-col-4"> <div class="ant-col-4">
<div class="ant-input-number" style="margin-left: 16px;"> <div class="ant-input-number" style="margin-left: 16px;">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-input-number-input-wrap"><input autocomplete="off" max="20" min="1" step="1" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-input-number-input-wrap"><input autocomplete="off" max="20" min="1" step="1" class="ant-input-number-input"></div>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
</div> </div>
<div class="ant-col-4"> <div class="ant-col-4">
<div class="ant-input-number" style="margin-left: 16px;"> <div class="ant-input-number" style="margin-left: 16px;">
<div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div> <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled" unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span></div>
<div role="spinbutton" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-input-number-input-wrap"><input autocomplete="off" max="1" min="0" step="0.01" class="ant-input-number-input"></div> <div role="spinbutton" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-input-number-input-wrap"><input autocomplete="off" max="1" min="0" step="0.01" class="ant-input-number-input"></div>
</div> </div>
</div> </div>

4
components/slider/__tests__/__snapshots__/index.test.js.snap
View File

@ -5,7 +5,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
<div class="ant-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px;"> <div class="ant-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
<div class="ant-tooltip-content"> <div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div> <div class="ant-tooltip-arrow"></div>
<div class="ant-tooltip-inner">30</div> <div role="tooltip" class="ant-tooltip-inner">30</div>
</div> </div>
</div> </div>
</div> </div>
@ -16,7 +16,7 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
<div class="ant-tooltip ant-tooltip-placement-top" style="display: none;"> <div class="ant-tooltip ant-tooltip-placement-top" style="display: none;">
<div class="ant-tooltip-content"> <div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div> <div class="ant-tooltip-arrow"></div>
<div class="ant-tooltip-inner">30</div> <div role="tooltip" class="ant-tooltip-inner">30</div>
</div> </div>
</div> </div>
</div> </div>

4
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -43,7 +43,7 @@ exports[`Table.filter renders menu correctly 1`] = `
<div> <div>
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;"> <div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
<div class="ant-table-filter-dropdown ant-dropdown-content"> <div class="ant-table-filter-dropdown ant-dropdown-content">
<ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root" role="menu" tabindex="0"> <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Boy</span></li> <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Boy</span></li>
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Girl</span></li> <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Girl</span></li>
<li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"> <li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical">
@ -60,7 +60,7 @@ exports[`Table.filter renders radio filter correctly 1`] = `
<div> <div>
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;"> <div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
<div class="ant-table-filter-dropdown ant-dropdown-content"> <div class="ant-table-filter-dropdown ant-dropdown-content">
<ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root" role="menu" tabindex="0"> <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Boy</span></li> <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Boy</span></li>
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Girl</span></li> <li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Girl</span></li>
<li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"> <li role="menuitem" class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical">

2
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -76,7 +76,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
exports[`Table.rowSelection render with default selection correctly 1`] = ` exports[`Table.rowSelection render with default selection correctly 1`] = `
<div> <div>
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;"> <div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
<ul class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content" role="menu" tabindex="0"> <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-table-selection-menu ant-dropdown-content">
<li role="menuitem" class="ant-dropdown-menu-item"> <li role="menuitem" class="ant-dropdown-menu-item">
<div>Select current page</div> <div>Select current page</div>
</li> </li>

0
components/align/Align.jsx → components/vc-align/Align.jsx
View File

0
components/align/demo/point.vue → components/vc-align/demo/point.vue
View File

0
components/align/demo/simple.vue → components/vc-align/demo/simple.vue
View File

0
components/align/index.js → components/vc-align/index.js
View File

0
components/align/util.js → components/vc-align/util.js
View File

2
components/vc-calendar/src/Picker.jsx
View File

@ -6,7 +6,7 @@ import { cloneElement } from '../../_util/vnode'
import createChainedFunction from '../../_util/createChainedFunction' import createChainedFunction from '../../_util/createChainedFunction'
import KeyCode from '../../_util/KeyCode' import KeyCode from '../../_util/KeyCode'
import placements from './picker/placements' import placements from './picker/placements'
import Trigger from '../../trigger' import Trigger from '../../vc-trigger'
import moment from 'moment' import moment from 'moment'
import { setTimeout } from 'timers' import { setTimeout } from 'timers'
function isMoment (value) { function isMoment (value) {

2
components/vc-cascader/Cascader.jsx
View File

@ -1,6 +1,6 @@
import { getComponentFromProp } from '../_util/props-util' import { getComponentFromProp } from '../_util/props-util'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import Trigger from '../trigger' import Trigger from '../vc-trigger'
import Menus from './Menus' import Menus from './Menus'
import KeyCode from '../_util/KeyCode' import KeyCode from '../_util/KeyCode'
import arrayTreeFilter from 'array-tree-filter' import arrayTreeFilter from 'array-tree-filter'

2
components/vc-dropdown/src/Dropdown.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
import Trigger from '../../trigger' import Trigger from '../../vc-trigger'
import placements from './placements' import placements from './placements'
import { hasProp, getEvents, getOptionProps } from '../../_util/props-util' import { hasProp, getEvents, getOptionProps } from '../../_util/props-util'
import BaseMixin from '../../_util/BaseMixin' import BaseMixin from '../../_util/BaseMixin'

2
components/vc-form/index.js
View File

@ -1,3 +1,3 @@
// based on rc-form 2.2.1 // based on rc-form 2.2.6
import { createForm, createFormField } from './src/' import { createForm, createFormField } from './src/'
export { createForm, createFormField } export { createForm, createFormField }

92
components/vc-form/src/createBaseForm.jsx
View File

@ -59,7 +59,11 @@ function createBaseForm (option = {}, mixins = []) {
this.instances = {} this.instances = {}
this.cachedBind = {} this.cachedBind = {}
this.clearedFieldMetaCache = {}; this.clearedFieldMetaCache = {}
this.renderFields = {}
this.domFields = {};
// HACK: https://github.com/ant-design/ant-design/issues/6406 // HACK: https://github.com/ant-design/ant-design/issues/6406
['getFieldsValue', ['getFieldsValue',
'getFieldValue', 'getFieldValue',
@ -91,9 +95,11 @@ function createBaseForm (option = {}, mixins = []) {
}, },
mounted () { mounted () {
this.wrappedComponentRef(this.$refs.WrappedComponent) this.wrappedComponentRef(this.$refs.WrappedComponent)
this.cleanUpUselessFields()
}, },
updated () { updated () {
this.wrappedComponentRef(this.$refs.WrappedComponent) this.wrappedComponentRef(this.$refs.WrappedComponent)
this.cleanUpUselessFields()
}, },
destroyed () { destroyed () {
this.wrappedComponentRef(null) this.wrappedComponentRef(null)
@ -151,25 +157,21 @@ function createBaseForm (option = {}, mixins = []) {
this.cachedBind[name] = {} this.cachedBind[name] = {}
} }
const cache = this.cachedBind[name] const cache = this.cachedBind[name]
if (!cache[action]) { if (!cache[action] || cache[action].oriFn !== fn) {
cache[action] = fn.bind(this, name, action) cache[action] = {
} fn: fn.bind(this, name, action),
return cache[action] oriFn: fn,
}, }
recoverClearedField (name) {
if (this.clearedFieldMetaCache[name]) {
this.fieldsStore.setFields({
[name]: this.clearedFieldMetaCache[name].field,
})
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta)
delete this.clearedFieldMetaCache[name]
} }
return cache[action].fn
}, },
getFieldDecorator (name, fieldOption) { getFieldDecorator (name, fieldOption) {
const { props, ...restProps } = this.getFieldProps(name, fieldOption) const { props, ...restProps } = this.getFieldProps(name, fieldOption)
return (fieldElem) => { return (fieldElem) => {
// We should put field in record if it is rendered
this.renderFields[name] = true
const fieldMeta = this.fieldsStore.getFieldMeta(name) const fieldMeta = this.fieldsStore.getFieldMeta(name)
const originalProps = getOptionProps(fieldElem) const originalProps = getOptionProps(fieldElem)
const originalEvents = getEvents(fieldElem) const originalEvents = getEvents(fieldElem)
@ -288,7 +290,8 @@ function createBaseForm (option = {}, mixins = []) {
if (fieldDataProp) { if (fieldDataProp) {
inputAttrs[fieldDataProp] = this.fieldsStore.getField(name) inputAttrs[fieldDataProp] = this.fieldsStore.getField(name)
} }
// This field is rendered, record it
this.renderFields[name] = true
return { return {
props: omit(inputProps, ['id']), props: omit(inputProps, ['id']),
// id: inputProps.id, // id: inputProps.id,
@ -338,19 +341,6 @@ function createBaseForm (option = {}, mixins = []) {
}) })
}, },
resetFields (ns) {
const newFields = this.fieldsStore.resetFields(ns)
if (Object.keys(newFields).length > 0) {
this.setFields(newFields)
}
if (ns) {
const names = Array.isArray(ns) ? ns : [ns]
names.forEach(name => delete this.clearedFieldMetaCache[name])
} else {
this.clearedFieldMetaCache = {}
}
},
setFieldsValue (changedValues, callback) { setFieldsValue (changedValues, callback) {
const { fieldsMeta } = this.fieldsStore const { fieldsMeta } = this.fieldsStore
const values = this.fieldsStore.flattenRegisteredFields(changedValues) const values = this.fieldsStore.flattenRegisteredFields(changedValues)
@ -385,11 +375,11 @@ function createBaseForm (option = {}, mixins = []) {
field: this.fieldsStore.getField(name), field: this.fieldsStore.getField(name),
meta: this.fieldsStore.getFieldMeta(name), meta: this.fieldsStore.getFieldMeta(name),
} }
this.fieldsStore.clearField(name) this.clearField(name)
delete this.instances[name] delete this.domFields[name]
delete this.cachedBind[name]
return return
} }
this.domFields[name] = true
this.recoverClearedField(name) this.recoverClearedField(name)
// const fieldMeta = this.fieldsStore.getFieldMeta(name) // const fieldMeta = this.fieldsStore.getFieldMeta(name)
// if (fieldMeta) { // if (fieldMeta) {
@ -404,6 +394,46 @@ function createBaseForm (option = {}, mixins = []) {
this.instances[name] = component this.instances[name] = component
}, },
cleanUpUselessFields () {
const fieldList = this.fieldsStore.getAllFieldsName()
const removedList = fieldList.filter(field => (
!this.renderFields[field] && !this.domFields[field]
))
if (removedList.length) {
removedList.forEach(this.clearField)
}
this.renderFields = {}
},
clearField (name) {
this.fieldsStore.clearField(name)
delete this.instances[name]
delete this.cachedBind[name]
},
resetFields (ns) {
const newFields = this.fieldsStore.resetFields(ns)
if (Object.keys(newFields).length > 0) {
this.setFields(newFields)
}
if (ns) {
const names = Array.isArray(ns) ? ns : [ns]
names.forEach(name => delete this.clearedFieldMetaCache[name])
} else {
this.clearedFieldMetaCache = {}
}
},
recoverClearedField (name) {
if (this.clearedFieldMetaCache[name]) {
this.fieldsStore.setFields({
[name]: this.clearedFieldMetaCache[name].field,
})
this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta)
delete this.clearedFieldMetaCache[name]
}
},
validateFieldsInternal (fields, { validateFieldsInternal (fields, {
fieldNames, fieldNames,
action, action,

5
components/vc-form/src/createDOMForm.jsx
View File

@ -65,7 +65,7 @@ const mixin = {
const validNames = this.fieldsStore.getValidFieldsName() const validNames = this.fieldsStore.getValidFieldsName()
let firstNode let firstNode
let firstTop let firstTop
for (const name of validNames) { validNames.forEach((name) => {
if (has(error, name)) { if (has(error, name)) {
const instance = this.getFieldInstance(name) const instance = this.getFieldInstance(name)
if (instance) { if (instance) {
@ -77,7 +77,8 @@ const mixin = {
} }
} }
} }
} })
if (firstNode) { if (firstNode) {
const c = options.container || getScrollableContainer(firstNode) const c = options.container || getScrollableContainer(firstNode)
scrollIntoView(firstNode, c, { scrollIntoView(firstNode, c, {

26
components/vc-form/src/createFieldsStore.jsx
View File

@ -10,22 +10,22 @@ function partOf (a, b) {
return b.indexOf(a) === 0 && ['.', '['].indexOf(b[a.length]) !== -1 return b.indexOf(a) === 0 && ['.', '['].indexOf(b[a.length]) !== -1
} }
function internalFlattenFields (fields) {
return flattenFields(
fields,
(_, node) => isFormField(node),
'You must wrap field data with `createFormField`.'
)
}
class FieldsStore { class FieldsStore {
constructor (fields) { constructor (fields) {
this.fields = this.flattenFields(fields) this.fields = internalFlattenFields(fields)
this.fieldsMeta = {} this.fieldsMeta = {}
} }
updateFields (fields) { updateFields (fields) {
this.fields = this.flattenFields(fields) this.fields = internalFlattenFields(fields)
}
flattenFields (fields) {
return flattenFields(
fields,
(_, node) => isFormField(node),
'You must wrap field data with `createFormField`.'
)
} }
flattenRegisteredFields (fields) { flattenRegisteredFields (fields) {
@ -33,7 +33,7 @@ class FieldsStore {
return flattenFields( return flattenFields(
fields, fields,
path => validFieldsName.indexOf(path) >= 0, path => validFieldsName.indexOf(path) >= 0,
'You cannot set field before registering it.' 'You cannot set a form field before rendering a field associated with the value.'
) )
} }
@ -58,7 +58,9 @@ class FieldsStore {
} }
const nowValues = {} const nowValues = {}
Object.keys(fieldsMeta) Object.keys(fieldsMeta)
.forEach((f) => { nowValues[f] = this.getValueFromFields(f, nowFields) }) .forEach((f) => {
nowValues[f] = this.getValueFromFields(f, nowFields)
})
Object.keys(nowValues).forEach((f) => { Object.keys(nowValues).forEach((f) => {
const value = nowValues[f] const value = nowValues[f]
const fieldMeta = this.getFieldMeta(f) const fieldMeta = this.getFieldMeta(f)

2
components/vc-form/src/index.jsx
View File

@ -6,4 +6,4 @@ import Vue from 'vue'
import antRefDirective from '../../_util/antRefDirective' import antRefDirective from '../../_util/antRefDirective'
Vue.use(antRefDirective) Vue.use(antRefDirective)
export { createForm, createFormField, formShape } export { createFormField, formShape, createForm }

6
components/vc-form/src/utils.js
View File

@ -1,3 +1,5 @@
import warning from 'warning'
function getDisplayName (WrappedComponent) { function getDisplayName (WrappedComponent) {
return WrappedComponent.name || 'WrappedComponent' return WrappedComponent.name || 'WrappedComponent'
} }
@ -22,7 +24,7 @@ export function treeTraverse (path = '', tree, isLeafNode, errorMessage, callbac
if (isLeafNode(path, tree)) { if (isLeafNode(path, tree)) {
callback(path, tree) callback(path, tree)
} else if (tree === undefined || tree === null) { } else if (tree === undefined || tree === null) {
return // Do nothing
} else if (Array.isArray(tree)) { } else if (Array.isArray(tree)) {
tree.forEach((subTree, index) => treeTraverse( tree.forEach((subTree, index) => treeTraverse(
`${path}[${index}]`, `${path}[${index}]`,
@ -33,7 +35,7 @@ export function treeTraverse (path = '', tree, isLeafNode, errorMessage, callbac
)) ))
} else { // It's object and not a leaf node } else { // It's object and not a leaf node
if (typeof tree !== 'object') { if (typeof tree !== 'object') {
console.error(errorMessage) warning(false, errorMessage)
return return
} }
Object.keys(tree).forEach(subTreeKey => { Object.keys(tree).forEach(subTreeKey => {

5
components/vc-input-number/src/InputHandler.js
View File

@ -15,14 +15,11 @@ const InputHandler = {
}, },
on: this.$listeners, on: this.$listeners,
} }
const spanProps = {
attrs: this.$attrs,
}
return ( return (
<Touchable <Touchable
{...touchableProps} {...touchableProps}
> >
<span {...spanProps}> <span>
{this.$slots.default} {this.$slots.default}
</span> </span>
</Touchable> </Touchable>

40
components/vc-input-number/src/index.js
View File

@ -1,7 +1,7 @@
// based on rc-input-number 4.0.12 // based on rc-input-number 4.3.1
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin' import BaseMixin from '../../_util/BaseMixin'
import { initDefaultProps, hasProp } from '../../_util/props-util' import { initDefaultProps, hasProp, getOptionProps } from '../../_util/props-util'
import classNames from 'classnames' import classNames from 'classnames'
import isNegativeZero from 'is-negative-zero' import isNegativeZero from 'is-negative-zero'
import KeyCode from '../../_util/KeyCode' import KeyCode from '../../_util/KeyCode'
@ -72,6 +72,7 @@ const inputNumberProps = {
precision: PropTypes.number, precision: PropTypes.number,
required: PropTypes.bool, required: PropTypes.bool,
pattern: PropTypes.string, pattern: PropTypes.string,
decimalSeparator: PropTypes.string,
} }
export default { export default {
@ -142,6 +143,22 @@ export default {
inputValue: this.inputting ? value : this.toPrecisionAsStep(value), inputValue: this.inputting ? value : this.toPrecisionAsStep(value),
}) })
}, },
max (val) {
const props = getOptionProps(this)
// Trigger onChange when max or min change
// https://github.com/ant-design/ant-design/issues/11574
const nextValue = 'value' in props ? props.value : this.sValue
if (nextValue > val) {
this.__emit('change', val)
}
},
min (val) {
const props = getOptionProps(this)
const nextValue = 'value' in props ? props.value : this.sValue
if (nextValue < val) {
this.__emit('change', val)
}
},
}, },
methods: { methods: {
updatedFunc () { updatedFunc () {
@ -158,7 +175,7 @@ export default {
if ( if (
// If not match full str, try to match part of str // If not match full str, try to match part of str
!this.partRestoreByAfter(this.cursorAfter) !this.partRestoreByAfter(this.cursorAfter) && this.sValue !== this.value
) { ) {
// If not match any of then, let's just keep the position // If not match any of then, let's just keep the position
// TODO: Logic should not reach here, need check if happens // TODO: Logic should not reach here, need check if happens
@ -275,8 +292,14 @@ export default {
}, },
getValueFromEvent (e) { getValueFromEvent (e) {
// optimize for chinese input expierence // optimize for chinese input expierence
// https://github.com/ant-design/ant-design/issues/8196 // https://github.com/ant-design/ant-design/issues/8196
return e.target.value.trim().replace(/。/g, '.') let value = e.target.value.trim().replace(/。/g, '.')
if (this.decimalSeparator !== undefined) {
value = value.replace(this.decimalSeparator, '.')
}
return value
}, },
getValidValue (value, min = this.min, max = this.max) { getValidValue (value, min = this.min, max = this.max) {
let val = parseFloat(value, 10) let val = parseFloat(value, 10)
@ -622,7 +645,12 @@ export default {
mouseleave: this.stop, mouseleave: this.stop,
} }
} }
const inputDisplayValueFormat = this.formatWrapper(inputDisplayValue) let inputDisplayValueFormat = this.formatWrapper(inputDisplayValue)
if (this.decimalSeparator !== undefined) {
inputDisplayValueFormat = inputDisplayValueFormat
.toString()
.replace('.', this.decimalSeparator)
}
const isUpDisabled = !!upDisabledClass || disabled || readOnly const isUpDisabled = !!upDisabledClass || disabled || readOnly
const isDownDisabled = !!downDisabledClass || disabled || readOnly const isDownDisabled = !!downDisabledClass || disabled || readOnly
const { mouseenter = noop, mouseleave = noop, mouseover = noop, mouseout = noop } = this.$listeners const { mouseenter = noop, mouseleave = noop, mouseover = noop, mouseout = noop } = this.$listeners

2
components/vc-m-feedback/index.js
View File

@ -1,3 +1,3 @@
// based on 2.0.0
import TouchFeedback from './src/TouchFeedback' import TouchFeedback from './src/TouchFeedback'
export default TouchFeedback export default TouchFeedback

12
components/vc-m-feedback/src/TouchFeedback.jsx
View File

@ -26,10 +26,7 @@ export default {
}, },
methods: { methods: {
triggerEvent (type, isActive, ev) { triggerEvent (type, isActive, ev) {
// const eventType = `on${type}` // 暂时仅有input-number用到，事件直接到挂载到Touchable上，不需要像antd那样从子组件触发
// if (this.props[eventType]) {
// this.props[eventType](ev)
// }
this.$emit(type, ev) this.$emit(type, ev)
if (isActive !== this.active) { if (isActive !== this.active) {
this.setState({ this.setState({
@ -50,17 +47,10 @@ export default {
this.triggerEvent('touchcancel', false, e) this.triggerEvent('touchcancel', false, e)
}, },
onMouseDown (e) { onMouseDown (e) {
// todo
// pc simulate mobile // pc simulate mobile
// if (this.props.onTouchStart) {
this.triggerEvent('touchstart', true, e)
// }
this.triggerEvent('mousedown', true, e) this.triggerEvent('mousedown', true, e)
}, },
onMouseUp (e) { onMouseUp (e) {
// if (this.props.onTouchEnd) {
this.triggerEvent('touchend', false, e)
// }
this.triggerEvent('mouseup', false, e) this.triggerEvent('mouseup', false, e)
}, },
onMouseLeave (e) { onMouseLeave (e) {

317
components/vc-menu/DOMWrap.jsx
View File

@ -1,41 +1,304 @@
import PropTypes from '../_util/vue-types'
import ResizeObserver from 'resize-observer-polyfill'
import SubMenu from './SubMenu'
import BaseMixin from '../_util/BaseMixin'
import { getWidth, setStyle, menuAllProps } from './util'
import { cloneElement } from '../_util/vnode'
import { getClass, getPropsData, filterEmpty } from '../_util/props-util'
import omit from 'omit.js' const canUseDOM = !!(
export default { typeof window !== 'undefined' &&
window.document &&
window.document.createElement
)
const MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed'
// Fix ssr
if (canUseDOM) {
require('mutationobserver-shim')
}
const DOMWrap = {
name: 'DOMWrap', name: 'DOMWrap',
props: { mixins: [BaseMixin],
visible: { data () {
type: Boolean, this.resizeObserver = null
default: false, this.mutationObserver = null
},
tag: { // original scroll size of the list
type: String, this.originalTotalWidth = 0
default: 'div',
}, // copy of overflowed items
hiddenClassName: { this.overflowedItems = []
type: String,
default: '', // cache item of the original items (so we can track the size and order)
}, this.menuItemSizes = []
return {
lastVisibleIndex: undefined,
}
}, },
computed: {
class () { mounted () {
const { visible, hiddenClassName } = this.$props this.$nextTick(() => {
return { this.setChildrenWidthAndResize()
// [hiddenClassName]: !visible, if (this.level === 1 && this.mode === 'horizontal') {
const menuUl = this.$el
if (!menuUl) {
return
}
this.resizeObserver = new ResizeObserver(entries => {
entries.forEach(this.setChildrenWidthAndResize)
});
[].slice.call(menuUl.children).concat(menuUl).forEach(el => {
this.resizeObserver.observe(el)
})
if (typeof MutationObserver !== 'undefined') {
this.mutationObserver = new MutationObserver(() => {
this.resizeObserver.disconnect();
[].slice.call(menuUl.children).concat(menuUl).forEach(el => {
this.resizeObserver.observe(el)
})
this.setChildrenWidthAndResize()
})
this.mutationObserver.observe(
menuUl,
{ attributes: false, childList: true, subTree: false }
)
}
} }
})
},
beforeDestroy () {
if (this.resizeObserver) {
this.resizeObserver.disconnect()
}
if (this.mutationObserver) {
this.resizeObserver.disconnect()
}
},
methods: {
// get all valid menuItem nodes
getMenuItemNodes () {
const { prefixCls } = this.$props
const ul = this.$el
if (!ul) {
return []
}
// filter out all overflowed indicator placeholder
return [].slice.call(ul.children)
.filter(node => {
return node.className.split(' ').indexOf(`${prefixCls}-overflowed-submenu`) < 0
})
},
getOverflowedSubMenuItem (keyPrefix, overflowedItems, renderPlaceholder) {
const { overflowedIndicator, level, mode, prefixCls, theme } = this.$props
if (level !== 1 || mode !== 'horizontal') {
return null
}
// put all the overflowed item inside a submenu
// with a title of overflow indicator ('...')
const copy = this.$slots.default[0]
const { title, eventKey, ...rest } = getPropsData(copy)
let style = {}
let key = `${keyPrefix}-overflowed-indicator`
if (overflowedItems.length === 0 && renderPlaceholder !== true) {
style = {
display: 'none',
}
} else if (renderPlaceholder) {
style = {
visibility: 'hidden',
// prevent from taking normal dom space
position: 'absolute',
}
key = `${key}-placeholder`
}
const popupClassName = theme ? `${prefixCls}-${theme}` : ''
const subMenuProps = {
props: {
title,
overflowedIndicator,
popupClassName,
eventKey: `${keyPrefix}-overflowed-indicator`,
disabled: false,
},
class: `${prefixCls}-overflowed-submenu`,
key,
style,
on: copy.$listeners,
}
menuAllProps.props.forEach(k => {
if (rest[k] !== undefined) {
subMenuProps.props[k] = rest[k]
}
})
return (
<SubMenu
{...subMenuProps}
>
{overflowedItems}
</SubMenu>
)
},
// memorize rendered menuSize
setChildrenWidthAndResize () {
if (this.mode !== 'horizontal') {
return
}
const ul = this.$el
if (!ul) {
return
}
const ulChildrenNodes = ul.children
if (!ulChildrenNodes || ulChildrenNodes.length === 0) {
return
}
const lastOverflowedIndicatorPlaceholder = ul.children[ulChildrenNodes.length - 1]
// need last overflowed indicator for calculating length;
setStyle(lastOverflowedIndicatorPlaceholder, 'display', 'inline-block')
const menuItemNodes = this.getMenuItemNodes()
// reset display attribute for all hidden elements caused by overflow to calculate updated width
// and then reset to original state after width calculation
const overflowedItems = menuItemNodes
.filter(c => c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0)
overflowedItems.forEach(c => {
setStyle(c, 'display', 'inline-block')
})
this.menuItemSizes = menuItemNodes.map(c => getWidth(c))
overflowedItems.forEach(c => {
setStyle(c, 'display', 'none')
})
this.overflowedIndicatorWidth = getWidth(ul.children[ul.children.length - 1])
this.originalTotalWidth = this.menuItemSizes.reduce((acc, cur) => acc + cur, 0)
this.handleResize()
// prevent the overflowed indicator from taking space;
setStyle(lastOverflowedIndicatorPlaceholder, 'display', 'none')
},
handleResize () {
if (this.mode !== 'horizontal') {
return
}
const ul = this.$el
if (!ul) {
return
}
const width = getWidth(ul)
this.overflowedItems = []
let currentSumWidth = 0
// index for last visible child in horizontal mode
let lastVisibleIndex
if (this.originalTotalWidth > width) {
lastVisibleIndex = -1
this.menuItemSizes.forEach(liWidth => {
currentSumWidth += liWidth
if (currentSumWidth + this.overflowedIndicatorWidth <= width) {
lastVisibleIndex++
}
})
}
this.setState({ lastVisibleIndex })
},
renderChildren (children) {
// need to take care of overflowed items in horizontal mode
const { lastVisibleIndex } = this.$data
const className = getClass(this)
return (children || []).reduce((acc, childNode, index) => {
let item = childNode
const eventKey = getPropsData(childNode).eventKey
if (this.mode === 'horizontal') {
let overflowed = this.getOverflowedSubMenuItem(eventKey, [])
if (lastVisibleIndex !== undefined &&
className[`${this.prefixCls}-root`]
) {
if (index > lastVisibleIndex) {
item = cloneElement(
childNode,
// 这里修改 eventKey 是为了防止隐藏状态下还会触发 openkeys 事件
{
style: { display: 'none' },
props: { eventKey: `${eventKey}-hidden` },
class: { ...getClass(childNode), [MENUITEM_OVERFLOWED_CLASSNAME]: true },
},
)
}
if (index === lastVisibleIndex + 1) {
this.overflowedItems = children.slice(lastVisibleIndex + 1).map(c => {
return cloneElement(
c,
// children[index].key will become '.$key' in clone by default,
// we have to overwrite with the correct key explicitly
{ key: getPropsData(c).eventKey, props: { mode: 'vertical-left' }},
)
})
overflowed = this.getOverflowedSubMenuItem(
eventKey,
this.overflowedItems,
)
}
}
const ret = [...acc, overflowed, item]
if (index === children.length - 1) {
// need a placeholder for calculating overflowed indicator width
ret.push(this.getOverflowedSubMenuItem(eventKey, [], true))
}
return ret
}
return [...acc, item]
}, [])
}, },
}, },
render () { render () {
const otherProps = omit(this.$props, [
'tag',
'hiddenClassName',
'visible',
])
const Tag = this.$props.tag const Tag = this.$props.tag
const tagProps = { const tagProps = {
attr: { ...otherProps, ...this.$attrs },
on: this.$listeners, on: this.$listeners,
} }
return <Tag {...tagProps} class={this.class}>{this.$slots.default}</Tag> return <Tag {...tagProps}>{this.renderChildren(this.$slots.default)}</Tag>
}, },
} }
DOMWrap.props = {
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
prefixCls: PropTypes.string,
level: PropTypes.number,
theme: PropTypes.string,
overflowedIndicator: PropTypes.node,
visible: PropTypes.bool,
hiddenClassName: PropTypes.string,
tag: PropTypes.string.def('div'),
}
export default DOMWrap

94
components/vc-menu/Menu.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types'
import { Provider, create } from '../_util/store' import { Provider, create } from '../_util/store'
import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu' import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import hasProp, { getOptionProps } from '../_util/props-util' import hasProp, { getOptionProps, getComponentFromProp, filterEmpty } from '../_util/props-util'
import commonPropsType from './commonPropsType' import commonPropsType from './commonPropsType'
const Menu = { const Menu = {
@ -33,47 +33,13 @@ const Menu = {
// this.isRootMenu = true // 声明在props上 // this.isRootMenu = true // 声明在props上
return {} return {}
}, },
watch: { mounted () {
selectedKeys (val) { this.updateMiniStore()
this.store.setState({ },
selectedKeys: val || [], updated () {
}) this.updateMiniStore()
},
openKeys (val) {
this.store.setState({
openKeys: val || [],
})
},
// '$props': {
// handler: function (nextProps) {
// if (hasProp(this, 'selectedKeys')) {
// this.setState({
// sSelectedKeys: nextProps.selectedKeys || [],
// })
// }
// if (hasProp(this, 'openKeys')) {
// this.setState({
// sOpenKeys: nextProps.openKeys || [],
// })
// }
// },
// deep: true,
// },
}, },
methods: { methods: {
// onDestroy (key) {
// const state = this.$data
// const sSelectedKeys = state.sSelectedKeys
// const sOpenKeys = state.sOpenKeys
// let index = sSelectedKeys.indexOf(key)
// if (!hasProp(this, 'selectedKeys') && index !== -1) {
// sSelectedKeys.splice(index, 1)
// }
// index = sOpenKeys.indexOf(key)
// if (!hasProp(this, 'openKeys') && index !== -1) {
// sOpenKeys.splice(index, 1)
// }
// },
onSelect (selectInfo) { onSelect (selectInfo) {
const props = this.$props const props = this.$props
@ -170,35 +136,19 @@ const Menu = {
} }
return transitionName return transitionName
}, },
updateMiniStore () {
// isInlineMode () { const props = getOptionProps(this)
// return this.$props.mode === 'inline' if ('selectedKeys' in props) {
// }, this.store.setState({
selectedKeys: props.selectedKeys || [],
// lastOpenSubMenu () { })
// let lastOpen = [] }
// const { sOpenKeys } = this.$data if ('openKeys' in props) {
// if (sOpenKeys.length) { this.store.setState({
// lastOpen = this.getFlatInstanceArray().filter((c) => { openKeys: props.openKeys || [],
// return c && sOpenKeys.indexOf(c.eventKey) !== -1 })
// }) }
// } },
// return lastOpen[0]
// },
// renderMenuItem (c, i, subIndex) {
// if (!c) {
// return null
// }
// const state = this.$data
// const extraProps = {
// openKeys: state.sOpenKeys,
// selectedKeys: state.sSelectedKeys,
// triggerSubMenuAction: this.$props.triggerSubMenuAction,
// isRootMenu: this.isRootMenu,
// }
// return this.renderCommonMenuItem(c, i, subIndex, extraProps)
// },
}, },
render () { render () {
@ -206,10 +156,12 @@ const Menu = {
const subPopupMenuProps = { const subPopupMenuProps = {
props: { props: {
...props, ...props,
itemIcon: getComponentFromProp(this, 'itemIcon', props),
expandIcon: getComponentFromProp(this, 'expandIcon', props),
overflowedIndicator: getComponentFromProp(this, 'overflowedIndicator', props),
openTransitionName: this.getOpenTransitionName(), openTransitionName: this.getOpenTransitionName(),
parentMenu: this, parentMenu: this,
children: this.$slots.default || [], children: filterEmpty(this.$slots.default || []),
__propsSymbol__: Symbol(),
}, },
class: `${props.prefixCls}-root`, class: `${props.prefixCls}-root`,
on: { on: {

12
components/vc-menu/MenuItem.jsx
View File

@ -5,6 +5,7 @@ import BaseMixin from '../_util/BaseMixin'
import scrollIntoView from 'dom-scroll-into-view' import scrollIntoView from 'dom-scroll-into-view'
import { connect } from '../_util/store' import { connect } from '../_util/store'
import { noop, menuAllProps } from './util' import { noop, menuAllProps } from './util'
import { getComponentFromProp } from '../_util/props-util'
const props = { const props = {
attribute: PropTypes.object, attribute: PropTypes.object,
@ -25,6 +26,7 @@ const props = {
manualRef: PropTypes.func.def(noop), manualRef: PropTypes.func.def(noop),
role: PropTypes.any, role: PropTypes.any,
subMenuKey: PropTypes.string, subMenuKey: PropTypes.string,
itemIcon: PropTypes.any,
// clearSubMenuTimers: PropTypes.func.def(noop), // clearSubMenuTimers: PropTypes.func.def(noop),
} }
const MenuItem = { const MenuItem = {
@ -138,7 +140,7 @@ const MenuItem = {
let attrs = { let attrs = {
...props.attribute, ...props.attribute,
title: props.title, title: props.title,
role: 'menuitem', role: props.role || 'menuitem',
'aria-disabled': props.disabled, 'aria-disabled': props.disabled,
} }
if (props.role === 'option') { if (props.role === 'option') {
@ -148,10 +150,13 @@ const MenuItem = {
role: 'option', role: 'option',
'aria-selected': props.isSelected, 'aria-selected': props.isSelected,
} }
} else if (props.role === null) { } else if (props.role === null || props.role === 'none') {
// sometimes we want to specify role inside <li/> element // sometimes we want to specify role inside <li/> element
// <li><a role='menuitem'>Link</a></li> would be a good example // <li><a role='menuitem'>Link</a></li> would be a good example
delete attrs.role // in this case the role on <li/> should be "none" to
// remove the implied listitem role.
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
attrs.role = 'none'
} }
// In case that onClick/onMouseLeave/onMouseEnter is passed down from owner // In case that onClick/onMouseLeave/onMouseEnter is passed down from owner
const mouseEvent = { const mouseEvent = {
@ -184,6 +189,7 @@ const MenuItem = {
class={className} class={className}
> >
{this.$slots.default} {this.$slots.default}
{getComponentFromProp(this, 'itemIcon', props)}
</li> </li>
) )
}, },

21
components/vc-menu/SubMenu.jsx
View File

@ -1,12 +1,12 @@
import omit from 'omit.js' import omit from 'omit.js'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import Trigger from '../trigger' import Trigger from '../vc-trigger'
import KeyCode from '../_util/KeyCode' import KeyCode from '../_util/KeyCode'
import { connect } from '../_util/store' import { connect } from '../_util/store'
import SubPopupMenu from './SubPopupMenu' import SubPopupMenu from './SubPopupMenu'
import placements from './placements' import placements from './placements'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { getComponentFromProp } from '../_util/props-util' import { getComponentFromProp, filterEmpty } from '../_util/props-util'
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout' import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout'
import { import {
noop, noop,
@ -66,6 +66,9 @@ const SubMenu = {
store: PropTypes.object, store: PropTypes.object,
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'), mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
manualRef: PropTypes.func.def(noop), manualRef: PropTypes.func.def(noop),
builtinPlacements: PropTypes.object.def({}),
itemIcon: PropTypes.any,
expandIcon: PropTypes.any,
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
isSubMenu: true, isSubMenu: true,
@ -350,13 +353,15 @@ const SubMenu = {
subMenuCloseDelay: props.subMenuCloseDelay, subMenuCloseDelay: props.subMenuCloseDelay,
forceSubMenuRender: props.forceSubMenuRender, forceSubMenuRender: props.forceSubMenuRender,
triggerSubMenuAction: props.triggerSubMenuAction, triggerSubMenuAction: props.triggerSubMenuAction,
builtinPlacements: props.builtinPlacements,
defaultActiveFirst: props.store.getState() defaultActiveFirst: props.store.getState()
.defaultActiveFirst[getMenuIdFromSubMenuEventKey(props.eventKey)], .defaultActiveFirst[getMenuIdFromSubMenuEventKey(props.eventKey)],
multiple: props.multiple, multiple: props.multiple,
prefixCls: props.rootPrefixCls, prefixCls: props.rootPrefixCls,
manualRef: this.saveMenuInstance, manualRef: this.saveMenuInstance,
itemIcon: getComponentFromProp(this, 'itemIcon'),
expandIcon: getComponentFromProp(this, 'expandIcon'),
children, children,
__propsSymbol__: Symbol(),
}, },
on: { on: {
click: this.onSubMenuClick, click: this.onSubMenuClick,
@ -475,13 +480,18 @@ const SubMenu = {
class: `${prefixCls}-title`, class: `${prefixCls}-title`,
ref: 'subMenuTitle', ref: 'subMenuTitle',
} }
// expand custom icon should NOT be displayed in menu with horizontal mode.
let icon = null
if (props.mode !== 'horizontal') {
icon = getComponentFromProp(this, 'expandIcon', props)
}
const title = ( const title = (
<div {...titleProps}> <div {...titleProps}>
{getComponentFromProp(this, 'title')} {getComponentFromProp(this, 'title')}
<i class={`${prefixCls}-arrow`} /> {icon || <i class={`${prefixCls}-arrow`} />}
</div> </div>
) )
const children = this.renderChildren(this.$slots.default) const children = this.renderChildren(filterEmpty(this.$slots.default))
const getPopupContainer = this.parentMenu.isRootMenu const getPopupContainer = this.parentMenu.isRootMenu
? this.parentMenu.getPopupContainer : triggerNode => triggerNode.parentNode ? this.parentMenu.getPopupContainer : triggerNode => triggerNode.parentNode
@ -503,6 +513,7 @@ const SubMenu = {
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${parentMenu.theme} ${popupClassName || ''}`} popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${parentMenu.theme} ${popupClassName || ''}`}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
builtinPlacements={placements} builtinPlacements={placements}
builtinPlacements={Object.assign({}, placements, props.builtinPlacements)}
popupPlacement={popupPlacement} popupPlacement={popupPlacement}
popupVisible={isOpen} popupVisible={isOpen}
popupAlign={popupAlign} popupAlign={popupAlign}

97
components/vc-menu/SubPopupMenu.jsx
View File

@ -7,7 +7,7 @@ import classNames from 'classnames'
import { getKeyFromChildrenIndex, loopMenuItem, noop } from './util' import { getKeyFromChildrenIndex, loopMenuItem, noop } from './util'
import DOMWrap from './DOMWrap' import DOMWrap from './DOMWrap'
import { cloneElement } from '../_util/vnode' import { cloneElement } from '../_util/vnode'
import { initDefaultProps, getOptionProps, getEvents } from '../_util/props-util' import { initDefaultProps, getOptionProps, getPropsData, getEvents, getComponentFromProp } from '../_util/props-util'
function allDisabled (arr) { function allDisabled (arr) {
if (!arr.length) { if (!arr.length) {
@ -28,18 +28,15 @@ function updateActiveKey (store, menuId, activeKey) {
}) })
} }
function getEventKey (props) {
// when eventKey not available ,it's menu and return menu id '0-menu-'
return props.eventKey || '0-menu-'
}
export function saveRef (key, c) { export function saveRef (key, c) {
if (c) { if (c) {
const index = this.instanceArrayKeyIndexMap[key] const index = this.instanceArrayKeyIndexMap[key]
this.instanceArray[index] = c this.instanceArray[index] = c
// const index = this.instanceArray.indexOf(c)
// if (index !== -1) {
// // update component if it's already inside instanceArray
// this.instanceArray[index] = c
// } else {
// // add component if it's not in instanceArray yet;
// this.instanceArray.push(c)
// }
} }
} }
export function getActiveKey (props, originalActiveKey) { export function getActiveKey (props, originalActiveKey) {
@ -100,6 +97,8 @@ const SubPopupMenu = {
triggerSubMenuAction: PropTypes.oneOf(['click', 'hover']), triggerSubMenuAction: PropTypes.oneOf(['click', 'hover']),
inlineIndent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), inlineIndent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
manualRef: PropTypes.func, manualRef: PropTypes.func,
itemIcon: PropTypes.any,
expandIcon: PropTypes.any,
children: PropTypes.any.def([]), children: PropTypes.any.def([]),
__propsSymbol__: PropTypes.any, // mock componentWillReceiveProps __propsSymbol__: PropTypes.any, // mock componentWillReceiveProps
}, { }, {
@ -129,17 +128,14 @@ const SubPopupMenu = {
this.manualRef(this) this.manualRef(this)
} }
}, },
watch: { updated () {
__propsSymbol__ () { const props = getOptionProps(this)
const props = getOptionProps(this) const originalActiveKey = 'activeKey' in props ? props.activeKey
const storeActiveKey = this.getStore().getState().activeKey[this.getEventKey()] : props.store.getState().activeKey[getEventKey(props)]
const originalActiveKey = 'activeKey' in props ? props.activeKey const activeKey = getActiveKey(props, originalActiveKey)
: storeActiveKey if (activeKey !== originalActiveKey) {
const activeKey = getActiveKey(props, originalActiveKey) updateActiveKey(props.store, getEventKey(props), activeKey)
if (activeKey !== originalActiveKey || storeActiveKey !== activeKey) { }
updateActiveKey(this.getStore(), this.getEventKey(), activeKey)
}
},
}, },
methods: { methods: {
// all keyboard events callbacks run from here at first // all keyboard events callbacks run from here at first
@ -160,7 +156,7 @@ const SubPopupMenu = {
} }
if (activeItem) { if (activeItem) {
e.preventDefault() e.preventDefault()
updateActiveKey(this.getStore(), this.getEventKey(), activeItem.eventKey) updateActiveKey(this.$props.store, getEventKey(this.$props), activeItem.eventKey)
if (typeof callback === 'function') { if (typeof callback === 'function') {
callback(activeItem) callback(activeItem)
@ -172,7 +168,7 @@ const SubPopupMenu = {
onItemHover (e) { onItemHover (e) {
const { key, hover } = e const { key, hover } = e
updateActiveKey(this.getStore(), this.getEventKey(), hover ? key : null) updateActiveKey(this.$props.store, getEventKey(this.$props), hover ? key : null)
}, },
onDeselect (selectInfo) { onDeselect (selectInfo) {
@ -199,22 +195,13 @@ const SubPopupMenu = {
return this.instanceArray return this.instanceArray
}, },
getStore () {
return this.store
},
getEventKey () {
// when eventKey not available ,it's menu and return menu id '0-menu-'
return this.eventKey !== undefined ? this.eventKey : '0-menu-'
},
getOpenTransitionName () { getOpenTransitionName () {
return this.$props.openTransitionName return this.$props.openTransitionName
}, },
step (direction) { step (direction) {
let children = this.getFlatInstanceArray() let children = this.getFlatInstanceArray()
const activeKey = this.getStore().getState().activeKey[this.getEventKey()] const activeKey = this.$props.store.getState().activeKey[getEventKey(this.$props)]
const len = children.length const len = children.length
if (!len) { if (!len) {
return null return null
@ -251,14 +238,40 @@ const SubPopupMenu = {
return null return null
}, },
getIcon (instance, name) {
if (instance.$createElement) {
const temp = instance[name]
if (temp !== undefined) {
return temp
}
return instance.$slots[name] || instance.$scopedSlots[name]
} else {
const temp = getPropsData(instance)[name]
if (temp !== undefined) {
return temp
}
const slotsProp = []
const componentOptions = instance.componentOptions || {};
(componentOptions.children || []).forEach((child) => {
if (child.data && child.data.slot === name) {
if (child.tag === 'template') {
slotsProp.push(child.children)
} else {
slotsProp.push(child)
}
}
})
return slotsProp.length ? slotsProp : undefined
}
},
renderCommonMenuItem (child, i, extraProps) { renderCommonMenuItem (child, i, extraProps) {
if (child.tag === undefined) { return child } if (child.tag === undefined) { return child }
const state = this.getStore().getState() const state = this.$props.store.getState()
const props = this.$props const props = this.$props
const key = getKeyFromChildrenIndex(child, props.eventKey, i) const key = getKeyFromChildrenIndex(child, props.eventKey, i)
const childProps = child.componentOptions.propsData || {} const childProps = child.componentOptions.propsData || {}
const isActive = key === state.activeKey[this.getEventKey()]
const isActive = key === state.activeKey[getEventKey(this.$props)]
if (!childProps.disabled) { if (!childProps.disabled) {
// manualRef的执行顺序不能保证，使用key映射ref在this.instanceArray中的位置 // manualRef的执行顺序不能保证，使用key映射ref在this.instanceArray中的位置
this.instanceArrayKeyIndexMap[key] = Object.keys(this.instanceArrayKeyIndexMap).length this.instanceArrayKeyIndexMap[key] = Object.keys(this.instanceArrayKeyIndexMap).length
@ -266,7 +279,7 @@ const SubPopupMenu = {
const childListeners = getEvents(child) const childListeners = getEvents(child)
const newChildProps = { const newChildProps = {
props: { props: {
mode: props.mode, mode: childProps.mode || props.mode,
level: props.level, level: props.level,
inlineIndent: props.inlineIndent, inlineIndent: props.inlineIndent,
renderMenuItem: this.renderMenuItem, renderMenuItem: this.renderMenuItem,
@ -283,6 +296,9 @@ const SubPopupMenu = {
subMenuOpenDelay: props.subMenuOpenDelay, subMenuOpenDelay: props.subMenuOpenDelay,
subMenuCloseDelay: props.subMenuCloseDelay, subMenuCloseDelay: props.subMenuCloseDelay,
forceSubMenuRender: props.forceSubMenuRender, forceSubMenuRender: props.forceSubMenuRender,
builtinPlacements: props.builtinPlacements,
itemIcon: this.getIcon(child, 'itemIcon') || this.getIcon(this, 'itemIcon'),
expandIcon: this.getIcon(child, 'expandIcon') || this.getIcon(this, 'expandIcon'),
...extraProps, ...extraProps,
}, },
on: { on: {
@ -307,7 +323,7 @@ const SubPopupMenu = {
if (!c) { if (!c) {
return null return null
} }
const state = this.getStore().getState() const state = this.$props.store.getState()
const extraProps = { const extraProps = {
openKeys: state.openKeys, openKeys: state.openKeys,
selectedKeys: state.selectedKeys, selectedKeys: state.selectedKeys,
@ -320,7 +336,7 @@ const SubPopupMenu = {
}, },
render () { render () {
const { ...props } = this.$props const { ...props } = this.$props
const { eventKey, visible } = props const { eventKey, prefixCls, visible, level, mode, theme } = props
this.instanceArray = [] this.instanceArray = []
this.instanceArrayKeyIndexMap = {} this.instanceArrayKeyIndexMap = {}
const className = classNames( const className = classNames(
@ -332,6 +348,11 @@ const SubPopupMenu = {
tag: 'ul', tag: 'ul',
// hiddenClassName: `${prefixCls}-hidden`, // hiddenClassName: `${prefixCls}-hidden`,
visible, visible,
prefixCls,
level,
mode,
theme,
overflowedIndicator: getComponentFromProp(this, 'overflowedIndicator'),
}, },
attrs: { attrs: {
role: props.role || 'menu', role: props.role || 'menu',

14
components/vc-menu/assets/index.less
View File

@ -2,8 +2,8 @@
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0'); src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot');
src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -92,6 +92,10 @@
&-submenu { &-submenu {
&-popup { &-popup {
position: absolute; position: absolute;
.submenu-title-wrapper {
padding-right: 20px;
}
} }
> .@{menuPrefixCls} { > .@{menuPrefixCls} {
background-color: #fff; background-color: #fff;
@ -110,17 +114,19 @@
&-horizontal { &-horizontal {
background-color: #F3F5F7; background-color: #F3F5F7;
border: none; border: none;
border-bottom: 1px solid transparent;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
box-shadow: none; box-shadow: none;
white-space: nowrap;
overflow: hidden;
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
padding: 15px 20px; padding: 15px 20px;
} }
& > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item { & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
float: left;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
display: inline-block;
vertical-align: bottom;
&-active { &-active {
border-bottom: 2px solid #2db7f5; border-bottom: 2px solid #2db7f5;

4
components/vc-menu/commonPropsType.js
View File

@ -23,4 +23,8 @@ export default {
forceSubMenuRender: PropTypes.bool, forceSubMenuRender: PropTypes.bool,
selectable: PropTypes.bool, selectable: PropTypes.bool,
isRootMenu: PropTypes.bool.def(true), isRootMenu: PropTypes.bool.def(true),
builtinPlacements: PropTypes.object.def({}),
itemIcon: PropTypes.any,
expandIcon: PropTypes.any,
overflowedIndicator: PropTypes.any,
} }

2
components/vc-menu/index.js
View File

@ -1,4 +1,4 @@
// based on rc-menu 7.0.5 // based on rc-menu 7.4.19
import Menu from './Menu' import Menu from './Menu'
import SubMenu from './SubMenu' import SubMenu from './SubMenu'
import MenuItem, { menuItemProps } from './MenuItem' import MenuItem, { menuItemProps } from './MenuItem'

17
components/vc-menu/util.js
View File

@ -77,6 +77,7 @@ export const menuAllProps = {
'rootPrefixCls', 'rootPrefixCls',
'eventKey', 'eventKey',
'active', 'active',
'popupAlign',
'popupOffset', 'popupOffset',
'isOpen', 'isOpen',
'renderMenuItem', 'renderMenuItem',
@ -87,6 +88,8 @@ export const menuAllProps = {
'isSelected', 'isSelected',
'store', 'store',
'activeKey', 'activeKey',
'builtinPlacements',
'overflowedIndicator',
// the following keys found need to be removed from test regression // the following keys found need to be removed from test regression
'attribute', 'attribute',
@ -95,6 +98,8 @@ export const menuAllProps = {
'inlineCollapsed', 'inlineCollapsed',
'menu', 'menu',
'theme', 'theme',
'itemIcon',
'expandIcon',
], ],
on: [ on: [
'select', 'select',
@ -107,3 +112,15 @@ export const menuAllProps = {
'titleClick', 'titleClick',
], ],
} }
export const getWidth = (elem) => (
elem &&
typeof elem.getBoundingClientRect === 'function' &&
elem.getBoundingClientRect().width
) || 0
export const setStyle = (elem, styleProperty, value) => {
if (elem && typeof elem.style === 'object') {
elem.style[styleProperty] = value
}
}

6
components/vc-notification/Notice.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import { getStyle } from '../_util/props-util' import { getStyle, getComponentFromProp } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
export default { export default {
@ -10,6 +10,7 @@ export default {
closable: PropTypes.bool, closable: PropTypes.bool,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
update: PropTypes.bool, update: PropTypes.bool,
closeIcon: PropTypes.any,
}, },
mounted () { mounted () {
@ -65,6 +66,7 @@ export default {
[`${componentClass}-closable`]: closable, [`${componentClass}-closable`]: closable,
} }
const style = getStyle(this) const style = getStyle(this)
const closeIcon = getComponentFromProp(this, 'closeIcon')
return ( return (
<div class={className} style={style || { right: '50%' } } onMouseenter={clearCloseTimer} <div class={className} style={style || { right: '50%' } } onMouseenter={clearCloseTimer}
onMouseleave={startCloseTimer} onMouseleave={startCloseTimer}
@ -72,7 +74,7 @@ export default {
<div class={`${componentClass}-content`}>{$slots.default}</div> <div class={`${componentClass}-content`}>{$slots.default}</div>
{closable {closable
? <a tabIndex='0' onClick={close} class={`${componentClass}-close`}> ? <a tabIndex='0' onClick={close} class={`${componentClass}-close`}>
<span class={`${componentClass}-close-x`}></span> {closeIcon || <span class={`${componentClass}-close-x`}/>}
</a> : null </a> : null
} }
</div> </div>

4
components/vc-notification/Notification.jsx
View File

@ -1,7 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import { getStyle } from '../_util/props-util' import { getStyle, getComponentFromProp } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import createChainedFunction from '../_util/createChainedFunction' import createChainedFunction from '../_util/createChainedFunction'
import getTransitionProps from '../_util/getTransitionProps' import getTransitionProps from '../_util/getTransitionProps'
@ -21,6 +21,7 @@ const Notification = {
transitionName: PropTypes.string, transitionName: PropTypes.string,
animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).def('fade'), animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).def('fade'),
maxCount: PropTypes.number, maxCount: PropTypes.number,
closeIcon: PropTypes.any,
}, },
data () { data () {
return { return {
@ -86,6 +87,7 @@ const Notification = {
duration, duration,
closable, closable,
update, update,
closeIcon: getComponentFromProp(this, 'closeIcon'),
}, },
on: { on: {
close, close,

2
components/vc-notification/index.js
View File

@ -1,3 +1,3 @@
// based on rc-notification 3.1.1 // based on rc-notification 3.2.0
import Notification from './Notification' import Notification from './Notification'
export default Notification export default Notification

47
components/vc-pagination/Pagination.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { hasProp } from '../_util/props-util' import { hasProp, getComponentFromProp } from '../_util/props-util'
import Pager from './Pager' import Pager from './Pager'
import Options from './Options' import Options from './Options'
import LOCALE from './locale/zh_CN' import LOCALE from './locale/zh_CN'
@ -46,6 +46,10 @@ export default {
simple: PropTypes.bool, simple: PropTypes.bool,
locale: PropTypes.object.def(LOCALE), locale: PropTypes.object.def(LOCALE),
itemRender: PropTypes.func.def(defaultItemRender), itemRender: PropTypes.func.def(defaultItemRender),
prevIcon: PropTypes.any,
nextIcon: PropTypes.any,
jumpPrevIcon: PropTypes.any,
jumpNextIcon: PropTypes.any,
}, },
model: { model: {
prop: 'current', prop: 'current',
@ -111,6 +115,11 @@ export default {
isValid (page) { isValid (page) {
return isInteger(page) && page >= 1 && page !== this.stateCurrent return isInteger(page) && page >= 1 && page !== this.stateCurrent
}, },
getItemIcon (icon) {
const { prefixCls } = this.$props
const iconNode = getComponentFromProp(this, icon, this.$props) || <a class={`${prefixCls}-item-link`} />
return iconNode
},
calculatePage (p) { calculatePage (p) {
let pageSize = p let pageSize = p
if (typeof pageSize === 'undefined') { if (typeof pageSize === 'undefined') {
@ -255,7 +264,7 @@ export default {
if (this.hideOnSinglePage === true && this.total <= this.statePageSize) { if (this.hideOnSinglePage === true && this.total <= this.statePageSize) {
return null return null
} }
const props = this.$props
const locale = this.locale const locale = this.locale
const prefixCls = this.prefixCls const prefixCls = this.prefixCls
@ -313,7 +322,7 @@ export default {
class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={!this.hasPrev()} aria-disabled={!this.hasPrev()}
> >
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)} {this.itemRender(prevPage, 'prev', this.getItemIcon('prevIcon'))}
</li> </li>
<li <li
title={this.showTitle ? `${stateCurrent}/${allPages}` : null} title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
@ -338,7 +347,7 @@ export default {
class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={!this.hasNext()} aria-disabled={!this.hasNext()}
> >
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)} {this.itemRender(nextPage, 'next', this.getItemIcon('nextIcon'))}
</li> </li>
{gotoButton} {gotoButton}
</ul> </ul>
@ -365,6 +374,10 @@ export default {
const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5 const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5 const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
if (this.showPrevNextJumpers) { if (this.showPrevNextJumpers) {
let jumpPrevClassString = `${prefixCls}-jump-prev`
if (props.jumpPrevIcon) {
jumpPrevClassString += ` ${prefixCls}-jump-prev-custom-icon`
}
jumpPrev = ( jumpPrev = (
<li <li
title={this.showTitle ? prevItemTitle : null} title={this.showTitle ? prevItemTitle : null}
@ -372,13 +385,19 @@ export default {
onClick={this.jumpPrev} onClick={this.jumpPrev}
tabIndex='0' tabIndex='0'
onKeypress={this.runIfEnterJumpPrev} onKeypress={this.runIfEnterJumpPrev}
class={`${prefixCls}-jump-prev`} class={jumpPrevClassString}
> >
{this.itemRender( {this.itemRender(
this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} /> this.getJumpPrevPage(),
'jump-prev',
this.getItemIcon('jumpPrevIcon')
)} )}
</li> </li>
) )
let jumpNextClassString = `${prefixCls}-jump-next`
if (props.jumpNextIcon) {
jumpNextClassString += ` ${prefixCls}-jump-next-custom-icon`
}
jumpNext = ( jumpNext = (
<li <li
title={this.showTitle ? nextItemTitle : null} title={this.showTitle ? nextItemTitle : null}
@ -386,10 +405,12 @@ export default {
tabIndex='0' tabIndex='0'
onClick={this.jumpNext} onClick={this.jumpNext}
onKeypress={this.runIfEnterJumpNext} onKeypress={this.runIfEnterJumpNext}
class={`${prefixCls}-jump-next`} class={jumpNextClassString}
> >
{this.itemRender( {this.itemRender(
this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} /> this.getJumpNextPage(),
'jump-next',
this.getItemIcon('jumpNextIcon')
)} )}
</li> </li>
) )
@ -527,7 +548,10 @@ export default {
class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={prevDisabled} aria-disabled={prevDisabled}
> >
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)} {this.itemRender(prevPage,
'prev',
this.getItemIcon('prevIcon')
)}
</li> </li>
{pagerList} {pagerList}
<li <li
@ -538,7 +562,10 @@ export default {
class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={nextDisabled} aria-disabled={nextDisabled}
> >
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)} {this.itemRender(nextPage,
'next',
this.getItemIcon('nextIcon')
)}
</li> </li>
<Options <Options
locale={locale} locale={locale}

2
components/vc-pagination/index.js
View File

@ -1,2 +1,2 @@
// based on rc-pagination 1.16.5 // based on rc-pagination 1.17.3
export { default } from './Pagination' export { default } from './Pagination'

15
components/vc-pagination/locale/he_IL.js Normal file
View File

@ -0,0 +1,15 @@
export default {
// Options.jsx
items_per_page: '/ עמוד',
jump_to: 'עבור אל',
jump_to_confirm: 'אישור',
page: '',
// Pagination.jsx
prev_page: 'העמוד הקודם',
next_page: 'העמוד הבא',
prev_5: '5 עמודים קודמים',
next_5: '5 עמודים הבאים',
prev_3: '3 עמודים קודמים',
next_3: '3 עמודים הבאים',
};

15
components/vc-pagination/locale/mm_MM.js Normal file
View File

@ -0,0 +1,15 @@
export default {
// Options.jsx
items_per_page: '/ စာမျက်နှာ',
jump_to: 'သွားရန်',
jump_to_confirm: 'သေချာပြီ',
page: '',
// Pagination.jsx
prev_page: 'ယခင်စာမျက်နှာ',
next_page: 'နောက်စာမျက်နှာ',
prev_5: 'ယခင် ၅ခုမြောက်',
next_5: 'နောက် ၅ခုမြောက်',
prev_3: 'ယခင် ၃ခုမြောက်',
next_3: 'နောက် ၃ခုမြောက်',
};

15
components/vc-pagination/locale/mn_MN.js Normal file
View File

@ -0,0 +1,15 @@
export default {
// Options.jsx
items_per_page: '/ хуудас',
jump_to: 'Шилжих',
jump_to_confirm: 'сонгох',
page: '',
// Pagination.jsx
prev_page: 'Өмнөх хуудас',
next_page: 'Дараагийн хуудас',
prev_5: 'Дараагийн 5 хуудас',
next_5: 'Дараагийн 5 хуудас',
prev_3: 'Дараагийн 3 хуудас',
next_3: 'Дараагийн 3 хуудас',
};

2
components/vc-pagination/locale/ru_RU.js
View File

@ -1,6 +1,6 @@
export default { export default {
// Options.jsx // Options.jsx
items_per_page: '/странице', items_per_page: '/ стр.',
jump_to: 'Перейти', jump_to: 'Перейти',
jump_to_confirm: 'подтвердить', jump_to_confirm: 'подтвердить',
page: '', page: '',

2
components/vc-progress/index.js
View File

@ -1,4 +1,4 @@
// based on rc-progress 2.2.5 // based on rc-progress 2.2.6
import Progress, { Line, Circle } from './src/' import Progress, { Line, Circle } from './src/'
export { export {

7
components/vc-progress/src/Circle.js
View File

@ -18,7 +18,7 @@ const Circle = {
props: initDefaultProps(circlePropTypes, circleDefaultProps), props: initDefaultProps(circlePropTypes, circleDefaultProps),
methods: { methods: {
getPathStyles () { getPathStyles () {
const { percent, strokeWidth, gapDegree = 0, gapPosition } = this.$props const { percent, strokeWidth, strokeColor, gapDegree = 0, gapPosition } = this.$props
const radius = 50 - (strokeWidth / 2) const radius = 50 - (strokeWidth / 2)
let beginPositionX = 0 let beginPositionX = 0
let beginPositionY = -radius let beginPositionY = -radius
@ -48,6 +48,7 @@ const Circle = {
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}` a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`
const len = Math.PI * 2 * radius const len = Math.PI * 2 * radius
const trailPathStyle = { const trailPathStyle = {
stroke: strokeColor,
strokeDasharray: `${len - gapDegree}px ${len}px`, strokeDasharray: `${len - gapDegree}px ${len}px`,
strokeDashoffset: `-${gapDegree / 2}px`, strokeDashoffset: `-${gapDegree / 2}px`,
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s', transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',
@ -62,13 +63,14 @@ const Circle = {
}, },
render () { render () {
const { const {
prefixCls, strokeWidth, trailWidth, strokeColor, prefixCls, strokeWidth, trailWidth,
trailColor, strokeLinecap, percent, ...restProps trailColor, strokeLinecap, percent, ...restProps
} = this.$props } = this.$props
const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles() const { pathString, trailPathStyle, strokePathStyle } = this.getPathStyles()
delete restProps.percent delete restProps.percent
delete restProps.gapDegree delete restProps.gapDegree
delete restProps.gapPosition delete restProps.gapPosition
delete restProps.strokeColor
const pathFirst = { const pathFirst = {
attrs: { attrs: {
'd': pathString, 'd': pathString,
@ -83,7 +85,6 @@ const Circle = {
attrs: { attrs: {
'd': pathString, 'd': pathString,
'stroke-linecap': strokeLinecap, 'stroke-linecap': strokeLinecap,
'stroke': strokeColor,
'stroke-width': percent === 0 ? 0 : strokeWidth, 'stroke-width': percent === 0 ? 0 : strokeWidth,
'fill-opacity': '0', 'fill-opacity': '0',
}, },

2
components/vc-rate/index.js
View File

@ -1,3 +1,3 @@
// based on rc-rate 2.4.0 // based on rc-rate 2.4.3
import Rate from './src/' import Rate from './src/'
export default Rate export default Rate

2
components/vc-rate/src/Rate.jsx
View File

@ -180,6 +180,7 @@ export default {
const starProps = { const starProps = {
props: { props: {
index, index,
count,
disabled, disabled,
prefixCls: `${prefixCls}-star`, prefixCls: `${prefixCls}-star`,
allowHalf, allowHalf,
@ -213,6 +214,7 @@ export default {
onBlur={disabled ? noop : this.onBlur} onBlur={disabled ? noop : this.onBlur}
onKeydown={disabled ? noop : this.onKeyDown} onKeydown={disabled ? noop : this.onKeyDown}
ref='rateRef' ref='rateRef'
role='radiogroup'
> >
{stars} {stars}
</ul> </ul>

18
components/vc-rate/src/Star.jsx
View File

@ -1,9 +1,10 @@
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin'
function noop () {} function noop () {}
export default { export default {
name: 'Star', name: 'Star',
mixins: [BaseMixin],
props: { props: {
value: PropTypes.number, value: PropTypes.number,
index: PropTypes.number, index: PropTypes.number,
@ -12,6 +13,7 @@ export default {
disabled: PropTypes.bool, disabled: PropTypes.bool,
character: PropTypes.any, character: PropTypes.any,
focused: PropTypes.bool, focused: PropTypes.bool,
count: PropTypes.number,
}, },
methods: { methods: {
onHover (e) { onHover (e) {
@ -22,6 +24,12 @@ export default {
const { index } = this const { index } = this
this.$emit('click', e, index) this.$emit('click', e, index)
}, },
onKeyDown (e) {
const { index } = this.$props
if (e.keyCode === 13) {
this.__emit('click', e, index)
}
},
getClassName () { getClassName () {
const { prefixCls, index, value, allowHalf, focused } = this const { prefixCls, index, value, allowHalf, focused } = this
const starValue = index + 1 const starValue = index + 1
@ -43,7 +51,7 @@ export default {
}, },
}, },
render () { render () {
const { onHover, onClick, disabled, prefixCls } = this const { onHover, onClick, onKeyDown, disabled, prefixCls, index, count, value } = this
let character = this.character let character = this.character
if (character === undefined) { if (character === undefined) {
character = this.$slots.character character = this.$slots.character
@ -52,7 +60,13 @@ export default {
<li <li
class={this.getClassName()} class={this.getClassName()}
onClick={disabled ? noop : onClick} onClick={disabled ? noop : onClick}
onKeydown={disabled ? noop : onKeyDown}
onMousemove={disabled ? noop : onHover} onMousemove={disabled ? noop : onHover}
role='radio'
aria-checked={value > index ? 'true' : 'false'}
aria-posinset={index + 1}
aria-setsize={count}
tabIndex={0}
> >
<div class={`${prefixCls}-first`}>{character}</div> <div class={`${prefixCls}-first`}>{character}</div>
<div class={`${prefixCls}-second`}>{character}</div> <div class={`${prefixCls}-second`}>{character}</div>

2
components/vc-select/SelectTrigger.jsx
View File

@ -1,6 +1,6 @@
import classnames from 'classnames' import classnames from 'classnames'
import Trigger from '../trigger' import Trigger from '../vc-trigger'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import DropdownMenu from './DropdownMenu' import DropdownMenu from './DropdownMenu'
import { isSingleMode, saveRef } from './util' import { isSingleMode, saveRef } from './util'

2
components/vc-time-picker/TimePicker.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import Trigger from '../trigger' import Trigger from '../vc-trigger'
import Panel from './Panel' import Panel from './Panel'
import placements from './placements' import placements from './placements'
import moment from 'moment' import moment from 'moment'

2
components/vc-tooltip/Content.jsx
View File

@ -15,7 +15,7 @@ export default {
render () { render () {
const { overlay, prefixCls } = this const { overlay, prefixCls } = this
return ( return (
<div class={`${prefixCls}-inner`}> <div class={`${prefixCls}-inner`} role='tooltip'>
{typeof overlay === 'function' ? overlay() : overlay} {typeof overlay === 'function' ? overlay() : overlay}
</div> </div>
) )

2
components/vc-tooltip/Tooltip.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import Trigger from '../trigger' import Trigger from '../vc-trigger'
import { placements } from './placements' import { placements } from './placements'
import Content from './Content' import Content from './Content'
import { hasProp, getComponentFromProp, getOptionProps } from '../_util/props-util' import { hasProp, getComponentFromProp, getOptionProps } from '../_util/props-util'

2
components/vc-tooltip/index.js
View File

@ -1,4 +1,4 @@
// based on rc-tooltip 3.7.2 // based on rc-tooltip 3.7.3
import Tooltip from './Tooltip' import Tooltip from './Tooltip'
export default Tooltip export default Tooltip

2
components/vc-tree-select/src/SelectTrigger.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
import classnames from 'classnames' import classnames from 'classnames'
import omit from 'omit.js' import omit from 'omit.js'
import Trigger from '../../trigger' import Trigger from '../../vc-trigger'
import Tree, { TreeNode } from '../../vc-tree' import Tree, { TreeNode } from '../../vc-tree'
import { SelectPropTypes } from './PropTypes' import { SelectPropTypes } from './PropTypes'
import BaseMixin from '../../_util/BaseMixin' import BaseMixin from '../../_util/BaseMixin'

2
components/vc-tree/index.js
View File

@ -1,4 +1,4 @@
// based on rc-tree 1.14.6 // based on rc-tree 1.14.8
'use strict' 'use strict'
module.exports = require('./src/') module.exports = require('./src/')

19
components/vc-tree/src/Tree.jsx
View File

@ -313,6 +313,7 @@ const Tree = {
_dragOverNodeKey: '', _dragOverNodeKey: '',
}) })
this.__emit('dragend', { event, node }) this.__emit('dragend', { event, node })
this.dragNode = null
}, },
onNodeDrop (event, node) { onNodeDrop (event, node) {
const { _dragNodesKeys = [], _dropPosition } = this.$data const { _dragNodesKeys = [], _dropPosition } = this.$data
@ -342,6 +343,7 @@ const Tree = {
dropResult.dropToGap = true dropResult.dropToGap = true
} }
this.__emit('drop', dropResult) this.__emit('drop', dropResult)
this.dragNode = null
}, },
onNodeClick (e, treeNode) { onNodeClick (e, treeNode) {
@ -455,18 +457,21 @@ const Tree = {
const promise = loadData(treeNode) const promise = loadData(treeNode)
promise.then(() => { promise.then(() => {
const newLoadedKeys = arrAdd(this.$data._loadedKeys, eventKey) const newLoadedKeys = arrAdd(this.$data._loadedKeys, eventKey)
this.setUncontrolledState({ const newLoadingKeys = arrDel(this.$data._loadingKeys, eventKey)
_loadedKeys: newLoadedKeys,
}) // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
this.setState({ // https://github.com/ant-design/ant-design/issues/12464
_loadingKeys: arrDel(this.$data._loadingKeys, eventKey),
})
const eventObj = { const eventObj = {
event: 'load', event: 'load',
node: treeNode, node: treeNode,
} }
this.__emit('load', eventObj) this.__emit('load', eventObj)
this.setUncontrolledState({
_loadedKeys: newLoadedKeys,
})
this.setState({
_loadingKeys: newLoadingKeys,
})
resolve() resolve()
}) })

0
components/trigger/LazyRenderBox.jsx → components/vc-trigger/LazyRenderBox.jsx
View File

7
components/trigger/Popup.jsx → components/vc-trigger/Popup.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import Align from '../align' import Align from '../vc-align'
import PopupInner from './PopupInner' import PopupInner from './PopupInner'
import LazyRenderBox from './LazyRenderBox' import LazyRenderBox from './LazyRenderBox'
import { noop } from './utils' import { noop } from './utils'
@ -181,10 +181,7 @@ export default {
// hiddenClassName, // hiddenClassName,
}, },
class: className, class: className,
on: { on: $listeners,
mouseenter: mouseenter || noop,
mouseleave: mouseleave || noop,
},
ref: 'popupInstance', ref: 'popupInstance',
style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() }, style: { ...sizeStyle, ...popupStyle, ...this.getZIndexStyle() },
} }

0
components/trigger/PopupInner.jsx → components/vc-trigger/PopupInner.jsx
View File

27
components/trigger/Trigger.jsx → components/vc-trigger/Trigger.jsx
View File

@ -70,6 +70,14 @@ export default {
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
provide () {
return {
vcTriggerContext: this,
}
},
inject: {
vcTriggerContext: { default: {}},
},
data () { data () {
const props = this.$props const props = this.$props
let popupVisible let popupVisible
@ -122,6 +130,7 @@ export default {
beforeDestroy () { beforeDestroy () {
this.clearDelayTimer() this.clearDelayTimer()
this.clearOutsideHandler() this.clearOutsideHandler()
clearTimeout(this.mouseDownTimeout)
}, },
methods: { methods: {
updatedCal () { updatedCal () {
@ -260,6 +269,19 @@ export default {
this.setPopupVisible(!this.$data.sPopupVisible, event) this.setPopupVisible(!this.$data.sPopupVisible, event)
} }
}, },
onPopupMouseDown (...args) {
const { vcTriggerContext = {}} = this
this.hasPopupMouseDown = true
clearTimeout(this.mouseDownTimeout)
this.mouseDownTimeout = setTimeout(() => {
this.hasPopupMouseDown = false
}, 0)
if (vcTriggerContext.onPopupMouseDown) {
vcTriggerContext.onPopupMouseDown(...args)
}
},
onDocumentClick (event) { onDocumentClick (event) {
if (this.$props.mask && !this.$props.maskClosable) { if (this.$props.mask && !this.$props.maskClosable) {
@ -267,8 +289,7 @@ export default {
} }
const target = event.target const target = event.target
const root = this.$el const root = this.$el
const popupNode = this.getPopupDomNode() if (!contains(root, target) && !this.hasPopupMouseDown) {
if (!contains(root, target) && !contains(popupNode, target)) {
this.close() this.close()
} }
}, },
@ -318,6 +339,8 @@ export default {
if (this.isMouseLeaveToHide()) { if (this.isMouseLeaveToHide()) {
mouseProps.mouseleave = self.onPopupMouseleave mouseProps.mouseleave = self.onPopupMouseleave
} }
mouseProps.mousedown = this.onPopupMouseDown
mouseProps.touchstart = this.onPopupMouseDown
const { const {
handleGetPopupClassFromAlign, getRootDomNode, handleGetPopupClassFromAlign, getRootDomNode,
getContainer, $listeners } = self getContainer, $listeners } = self

0
components/trigger/assets/index.less → components/vc-trigger/assets/index.less
View File

0
components/trigger/assets/mask.less → components/vc-trigger/assets/mask.less
View File

0
components/trigger/demo/nested.vue → components/vc-trigger/demo/nested.vue
View File

0
components/trigger/demo/point.less → components/vc-trigger/demo/point.less
View File

0
components/trigger/demo/point.vue → components/vc-trigger/demo/point.vue
View File

0
components/trigger/demo/simple.vue → components/vc-trigger/demo/simple.vue
View File

2
components/trigger/index.js → components/vc-trigger/index.js
View File

@ -1,3 +1,3 @@
// based on rc-trigger 2.5.4 // based on rc-trigger 2.6.2
import Trigger from './Trigger' import Trigger from './Trigger'
export default Trigger export default Trigger

0
components/trigger/index.md → components/vc-trigger/index.md
View File

0
components/trigger/utils.js → components/vc-trigger/utils.js
View File

1
package.json
View File

@ -172,6 +172,7 @@
"json2mq": "^0.2.0", "json2mq": "^0.2.0",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"moment": "^2.21.0", "moment": "^2.21.0",
"mutationobserver-shim": "^0.3.2",
"omit.js": "^1.0.0", "omit.js": "^1.0.0",
"raf": "^3.4.0", "raf": "^3.4.0",
"resize-observer-polyfill": "^1.5.0", "resize-observer-polyfill": "^1.5.0",