@@ -35,22 +35,29 @@ class DOMWrap extends React.Component {
3535 entries . forEach ( this . setChildrenWidthAndResize ) ;
3636 } ) ;
3737
38- [ ] . slice . call ( menuUl . children ) . concat ( menuUl ) . forEach ( el => {
39- this . resizeObserver . observe ( el ) ;
40- } ) ;
38+ [ ] . slice
39+ . call ( menuUl . children )
40+ . concat ( menuUl )
41+ . forEach ( el => {
42+ this . resizeObserver . observe ( el ) ;
43+ } ) ;
4144
4245 if ( typeof MutationObserver !== 'undefined' ) {
4346 this . mutationObserver = new MutationObserver ( ( ) => {
4447 this . resizeObserver . disconnect ( ) ;
45- [ ] . slice . call ( menuUl . children ) . concat ( menuUl ) . forEach ( el => {
46- this . resizeObserver . observe ( el ) ;
47- } ) ;
48+ [ ] . slice
49+ . call ( menuUl . children )
50+ . concat ( menuUl )
51+ . forEach ( el => {
52+ this . resizeObserver . observe ( el ) ;
53+ } ) ;
4854 this . setChildrenWidthAndResize ( ) ;
4955 } ) ;
50- this . mutationObserver . observe (
51- menuUl ,
52- { attributes : false , childList : true , subTree : false }
53- ) ;
56+ this . mutationObserver . observe ( menuUl , {
57+ attributes : false ,
58+ childList : true ,
59+ subTree : false ,
60+ } ) ;
5461 }
5562 }
5663 }
@@ -73,21 +80,31 @@ class DOMWrap extends React.Component {
7380 }
7481
7582 // filter out all overflowed indicator placeholder
76- return [ ] . slice . call ( ul . children )
77- . filter ( node => {
78- return node . className . split ( ' ' ) . indexOf ( `${ prefixCls } -overflowed-submenu` ) < 0 ;
79- } ) ;
80- }
83+ return [ ] . slice . call ( ul . children ) . filter ( node => {
84+ return (
85+ node . className . split ( ' ' ) . indexOf ( `${ prefixCls } -overflowed-submenu` ) < 0
86+ ) ;
87+ } ) ;
88+ } ;
8189
82- getOverflowedSubMenuItem = ( keyPrefix , overflowedItems , renderPlaceholder ) => {
90+ getOverflowedSubMenuItem = (
91+ keyPrefix ,
92+ overflowedItems ,
93+ renderPlaceholder ,
94+ ) => {
8395 const { overflowedIndicator, level, mode, prefixCls, theme } = this . props ;
8496 if ( level !== 1 || mode !== 'horizontal' ) {
8597 return null ;
8698 }
8799 // put all the overflowed item inside a submenu
88100 // with a title of overflow indicator ('...')
89101 const copy = this . props . children [ 0 ] ;
90- const { children : throwAway , title, style : propStyle , ...rest } = copy . props ;
102+ const {
103+ children : throwAway ,
104+ title,
105+ style : propStyle ,
106+ ...rest ,
107+ } = copy . props ;
91108
92109 let style = { ...propStyle } ;
93110 let key = `${ keyPrefix } -overflowed-indicator` ;
@@ -131,7 +148,7 @@ class DOMWrap extends React.Component {
131148 { overflowedItems }
132149 </ SubMenu >
133150 ) ;
134- }
151+ } ;
135152
136153 // memorize rendered menuSize
137154 setChildrenWidthAndResize = ( ) => {
@@ -150,7 +167,8 @@ class DOMWrap extends React.Component {
150167 return ;
151168 }
152169
153- const lastOverflowedIndicatorPlaceholder = ul . children [ ulChildrenNodes . length - 1 ] ;
170+ const lastOverflowedIndicatorPlaceholder =
171+ ul . children [ ulChildrenNodes . length - 1 ] ;
154172
155173 // need last overflowed indicator for calculating length;
156174 setStyle ( lastOverflowedIndicatorPlaceholder , 'display' , 'inline-block' ) ;
@@ -160,8 +178,9 @@ class DOMWrap extends React.Component {
160178 // reset display attribute for all hidden elements caused by overflow to calculate updated width
161179 // and then reset to original state after width calculation
162180
163- const overflowedItems = menuItemNodes
164- . filter ( c => c . className . split ( ' ' ) . indexOf ( MENUITEM_OVERFLOWED_CLASSNAME ) >= 0 ) ;
181+ const overflowedItems = menuItemNodes . filter (
182+ c => c . className . split ( ' ' ) . indexOf ( MENUITEM_OVERFLOWED_CLASSNAME ) >= 0 ,
183+ ) ;
165184
166185 overflowedItems . forEach ( c => {
167186 setStyle ( c , 'display' , 'inline-block' ) ;
@@ -172,12 +191,17 @@ class DOMWrap extends React.Component {
172191 overflowedItems . forEach ( c => {
173192 setStyle ( c , 'display' , 'none' ) ;
174193 } ) ;
175- this . overflowedIndicatorWidth = getWidth ( ul . children [ ul . children . length - 1 ] ) ;
176- this . originalTotalWidth = this . menuItemSizes . reduce ( ( acc , cur ) => acc + cur , 0 ) ;
194+ this . overflowedIndicatorWidth = getWidth (
195+ ul . children [ ul . children . length - 1 ] ,
196+ ) ;
197+ this . originalTotalWidth = this . menuItemSizes . reduce (
198+ ( acc , cur ) => acc + cur ,
199+ 0 ,
200+ ) ;
177201 this . handleResize ( ) ;
178202 // prevent the overflowed indicator from taking space;
179203 setStyle ( lastOverflowedIndicatorPlaceholder , 'display' , 'none' ) ;
180- }
204+ } ;
181205
182206 resizeObserver = null ;
183207 mutationObserver = null ;
@@ -223,18 +247,21 @@ class DOMWrap extends React.Component {
223247 }
224248
225249 this . setState ( { lastVisibleIndex } ) ;
226- }
250+ } ;
227251
228252 renderChildren ( children ) {
229253 // need to take care of overflowed items in horizontal mode
230254 const { lastVisibleIndex } = this . state ;
231255 return ( children || [ ] ) . reduce ( ( acc , childNode , index ) => {
232256 let item = childNode ;
233257 if ( this . props . mode === 'horizontal' ) {
234- let overflowed = this . getOverflowedSubMenuItem ( childNode . props . eventKey , [ ] ) ;
235- if ( lastVisibleIndex !== undefined
236- &&
237- this . props . className . indexOf ( `${ this . props . prefixCls } -root` ) !== - 1
258+ let overflowed = this . getOverflowedSubMenuItem (
259+ childNode . props . eventKey ,
260+ [ ] ,
261+ ) ;
262+ if (
263+ lastVisibleIndex !== undefined &&
264+ this . props . className . indexOf ( `${ this . props . prefixCls } -root` ) !== - 1
238265 ) {
239266 if ( index > lastVisibleIndex ) {
240267 item = React . cloneElement (
@@ -248,14 +275,16 @@ class DOMWrap extends React.Component {
248275 ) ;
249276 }
250277 if ( index === lastVisibleIndex + 1 ) {
251- this . overflowedItems = children . slice ( lastVisibleIndex + 1 ) . map ( c => {
252- return React . cloneElement (
253- c ,
254- // children[index].key will become '.$key' in clone by default,
255- // we have to overwrite with the correct key explicitly
256- { key : c . props . eventKey , mode : 'vertical-left' } ,
257- ) ;
258- } ) ;
278+ this . overflowedItems = children
279+ . slice ( lastVisibleIndex + 1 )
280+ . map ( c => {
281+ return React . cloneElement (
282+ c ,
283+ // children[index].key will become '.$key' in clone by default,
284+ // we have to overwrite with the correct key explicitly
285+ { key : c . props . eventKey , mode : 'vertical-left' } ,
286+ ) ;
287+ } ) ;
259288
260289 overflowed = this . getOverflowedSubMenuItem (
261290 childNode . props . eventKey ,
@@ -268,7 +297,9 @@ class DOMWrap extends React.Component {
268297
269298 if ( index === children . length - 1 ) {
270299 // need a placeholder for calculating overflowed indicator width
271- ret . push ( this . getOverflowedSubMenuItem ( childNode . props . eventKey , [ ] , true ) ) ;
300+ ret . push (
301+ this . getOverflowedSubMenuItem ( childNode . props . eventKey , [ ] , true ) ,
302+ ) ;
272303 }
273304 return ret ;
274305 }
@@ -294,18 +325,20 @@ class DOMWrap extends React.Component {
294325 rest . className += ` ${ hiddenClassName } ` ;
295326 }
296327
297- return (
298- < Tag { ...rest } >
299- { this . renderChildren ( this . props . children ) }
300- </ Tag >
301- ) ;
328+ return < Tag { ...rest } > { this . renderChildren ( this . props . children ) } </ Tag > ;
302329 }
303330}
304331
305332DOMWrap . propTypes = {
306333 className : PropTypes . string ,
307334 children : PropTypes . node ,
308- mode : PropTypes . oneOf ( [ 'horizontal' , 'vertical' , 'vertical-left' , 'vertical-right' , 'inline' ] ) ,
335+ mode : PropTypes . oneOf ( [
336+ 'horizontal' ,
337+ 'vertical' ,
338+ 'vertical-left' ,
339+ 'vertical-right' ,
340+ 'inline' ,
341+ ] ) ,
309342 prefixCls : PropTypes . string ,
310343 level : PropTypes . number ,
311344 theme : PropTypes . string ,
0 commit comments