1- /* eslint react/prop-types: 0 */
1+ import type { SelectProps } from 'rc-select' ;
2+ import type { OptionProps } from 'rc-select/es/Option' ;
3+ import KEYCODE from 'rc-util/lib/KeyCode' ;
24import React from 'react' ;
3- import KEYCODE from './KeyCode ' ;
5+ import type { PaginationLocale } from './interface ' ;
46
5- interface Props {
6- disabled : boolean ;
7- locale : any ;
7+ interface InternalSelectProps extends SelectProps {
8+ /**
9+ * form antd v5.5.0, popupMatchSelectWidth default is true
10+ */
11+ popupMatchSelectWidth ?: boolean ;
12+ }
13+
14+ interface OptionsProps {
15+ disabled ?: boolean ;
16+ locale : PaginationLocale ;
817 rootPrefixCls : string ;
9- selectPrefixCls : string ;
10- current : number ;
18+ selectPrefixCls ?: string ;
1119 pageSize : number ;
12- pageSizeOptions : ( string | number ) [ ] ;
13- goButton : boolean | string ;
14- changeSize : ( size : number ) => void ;
15- quickGo : ( value : number ) => void ;
20+ pageSizeOptions ? : ( string | number ) [ ] ;
21+ goButton ? : boolean | string ;
22+ changeSize ? : ( size : number ) => void ;
23+ quickGo ? : ( value : number ) => void ;
1624 buildOptionText ?: ( value : string | number ) => string ;
17- selectComponentClass : React . ComponentType < any > & {
18- Option ?: React . ComponentType < any > ;
25+ selectComponentClass : React . ComponentType < Partial < InternalSelectProps > > & {
26+ Option ?: React . ComponentType < Partial < OptionProps > > ;
1927 } ;
2028}
2129
22- interface State {
23- goInputText : string ;
24- }
25-
26- class Options extends React . Component < Props , State > {
27- static defaultProps = {
28- pageSizeOptions : [ '10' , '20' , '50' , '100' ] ,
29- } ;
30-
31- state = {
32- goInputText : '' ,
33- } ;
34-
35- getValidValue = ( ) => {
36- const { goInputText } = this . state ;
37- // eslint-disable-next-line no-restricted-globals
30+ const defaultPageSizeOptions = [ '10' , '20' , '50' , '100' ] ;
31+
32+ function Options ( props : OptionsProps ) {
33+ const {
34+ pageSizeOptions = defaultPageSizeOptions ,
35+ locale,
36+ changeSize,
37+ pageSize,
38+ goButton,
39+ quickGo,
40+ rootPrefixCls,
41+ selectComponentClass : Select ,
42+ selectPrefixCls,
43+ disabled,
44+ buildOptionText,
45+ } = props ;
46+
47+ const [ goInputText , setGoInputText ] = React . useState ( '' ) ;
48+
49+ const getValidValue = ( ) => {
3850 return ! goInputText || Number . isNaN ( goInputText )
3951 ? undefined
4052 : Number ( goInputText ) ;
4153 } ;
4254
43- buildOptionText = ( value : string ) =>
44- `${ value } ${ this . props . locale . items_per_page } ;
55+ const mergeBuildOptionText =
56+ typeof buildOptionText === 'function'
57+ ? buildOptionText
58+ : ( value : string ) => `${ value } ${ locale . items_per_page } ;
4559
46- changeSize = ( value : number ) => {
47- this . props . changeSize ( Number ( value ) ) ;
60+ const changeSizeHandle = ( value : number ) => {
61+ changeSize ?. ( Number ( value ) ) ;
4862 } ;
4963
50- handleChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
51- this . setState ( { goInputText : e . target . value } ) ;
64+ const handleChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
65+ setGoInputText ( e . target . value ) ;
5266 } ;
5367
54- handleBlur = ( e : React . FocusEvent < HTMLInputElement , Element > ) => {
55- const { goButton, quickGo, rootPrefixCls } = this . props ;
56- const { goInputText } = this . state ;
68+ const handleBlur = ( e : React . FocusEvent < HTMLInputElement , Element > ) => {
5769 if ( goButton || goInputText === '' ) {
5870 return ;
5971 }
60- this . setState ( { goInputText : '' } ) ;
72+ setGoInputText ( '' ) ;
6173 if (
6274 e . relatedTarget &&
6375 ( e . relatedTarget . className . indexOf ( `${ rootPrefixCls } ) >= 0 ||
6476 e . relatedTarget . className . indexOf ( `${ rootPrefixCls } ) >= 0 )
6577 ) {
6678 return ;
6779 }
68- quickGo ( this . getValidValue ( ) ) ;
80+ quickGo ?. ( getValidValue ( ) ) ;
6981 } ;
7082
71- go = ( e : any ) => {
72- const { goInputText } = this . state ;
83+ const go = ( e : any ) => {
7384 if ( goInputText === '' ) {
7485 return ;
7586 }
7687 if ( e . keyCode === KEYCODE . ENTER || e . type === 'click' ) {
77- this . setState ( { goInputText : '' } ) ;
78- this . props . quickGo ( this . getValidValue ( ) ) ;
88+ setGoInputText ( '' ) ;
89+ quickGo ?. ( getValidValue ( ) ) ;
7990 }
8091 } ;
8192
82- getPageSizeOptions ( ) {
83- const { pageSize, pageSizeOptions } = this . props ;
93+ const getPageSizeOptions = ( ) => {
8494 if (
8595 pageSizeOptions . some (
8696 ( option ) => option . toString ( ) === pageSize . toString ( ) ,
@@ -89,110 +99,94 @@ class Options extends React.Component<Props, State> {
8999 return pageSizeOptions ;
90100 }
91101 return pageSizeOptions . concat ( [ pageSize . toString ( ) ] ) . sort ( ( a , b ) => {
92- // eslint-disable-next-line no-restricted-globals
93102 const numberA = Number . isNaN ( Number ( a ) ) ? 0 : Number ( a ) ;
94- // eslint-disable-next-line no-restricted-globals
95103 const numberB = Number . isNaN ( Number ( b ) ) ? 0 : Number ( b ) ;
96104 return numberA - numberB ;
97105 } ) ;
98- }
99-
100- render ( ) {
101- const {
102- pageSize,
103- locale,
104- rootPrefixCls,
105- changeSize,
106- quickGo,
107- goButton,
108- selectComponentClass,
109- buildOptionText,
110- selectPrefixCls,
111- disabled,
112- } = this . props ;
113- const { goInputText } = this . state ;
114- const prefixCls = `${ rootPrefixCls } ;
115- const Select = selectComponentClass ;
116- let changeSelect = null ;
117- let goInput = null ;
118- let gotoButton = null ;
119-
120- if ( ! changeSize && ! quickGo ) {
121- return null ;
122- }
106+ } ;
107+ // ============== cls ==============
108+ const prefixCls = `${ rootPrefixCls } ;
123109
124- const pageSizeOptions = this . getPageSizeOptions ( ) ;
110+ // ============== render ==============
125111
126- if ( changeSize && Select ) {
127- const options = pageSizeOptions . map ( ( opt , i ) => (
128- < Select . Option key = { i } value = { opt . toString ( ) } >
129- { ( buildOptionText || this . buildOptionText ) ( opt ) }
130- </ Select . Option >
131- ) ) ;
112+ if ( ! changeSize && ! quickGo ) {
113+ return null ;
114+ }
132115
133- changeSelect = (
134- < Select
135- disabled = { disabled }
136- prefixCls = { selectPrefixCls }
137- showSearch = { false }
138- className = { `${ prefixCls } }
139- optionLabelProp = "children"
140- popupMatchSelectWidth = { false }
141- value = { ( pageSize || pageSizeOptions [ 0 ] ) . toString ( ) }
142- onChange = { this . changeSize }
143- getPopupContainer = { ( triggerNode ) => triggerNode . parentNode }
144- aria-label = { locale . page_size }
145- defaultOpen = { false }
146- >
147- { options }
148- </ Select >
149- ) ;
150- }
116+ let changeSelect = null ;
117+ let goInput = null ;
118+ let gotoButton = null ;
119+
120+ if ( changeSize && Select ) {
121+ const options = getPageSizeOptions ( ) . map ( ( opt , i ) => (
122+ < Select . Option key = { i } value = { opt . toString ( ) } >
123+ { mergeBuildOptionText ( opt ) }
124+ </ Select . Option >
125+ ) ) ;
126+
127+ changeSelect = (
128+ < Select
129+ disabled = { disabled }
130+ prefixCls = { selectPrefixCls }
131+ showSearch = { false }
132+ className = { `${ prefixCls } }
133+ optionLabelProp = "children"
134+ popupMatchSelectWidth = { false }
135+ value = { ( pageSize || pageSizeOptions [ 0 ] ) . toString ( ) }
136+ onChange = { changeSizeHandle }
137+ getPopupContainer = { ( triggerNode ) => triggerNode . parentNode }
138+ aria-label = { locale . page_size }
139+ defaultOpen = { false }
140+ >
141+ { options }
142+ </ Select >
143+ ) ;
144+ }
151145
152- if ( quickGo ) {
153- if ( goButton ) {
154- gotoButton =
155- typeof goButton === 'boolean' ? (
156- < button
157- type = "button"
158- onClick = { this . go }
159- onKeyUp = { this . go }
160- disabled = { disabled }
161- className = { `${ prefixCls } }
162- >
163- { locale . jump_to_confirm }
164- </ button >
165- ) : (
166- < span onClick = { this . go } onKeyUp = { this . go } >
167- { goButton }
168- </ span >
169- ) ;
170- }
171- goInput = (
172- < div className = { `${ prefixCls } } >
173- { locale . jump_to }
174- < input
146+ if ( quickGo ) {
147+ if ( goButton ) {
148+ gotoButton =
149+ typeof goButton === 'boolean' ? (
150+ < button
151+ type = "button"
152+ onClick = { go }
153+ onKeyUp = { go }
175154 disabled = { disabled }
176- type = "text"
177- value = { goInputText }
178- onChange = { this . handleChange }
179- onKeyUp = { this . go }
180- onBlur = { this . handleBlur }
181- aria-label = { locale . page }
182- />
183- { locale . page }
184- { gotoButton }
185- </ div >
186- ) ;
155+ className = { `${ prefixCls } }
156+ >
157+ { locale . jump_to_confirm }
158+ </ button >
159+ ) : (
160+ < span onClick = { go } onKeyUp = { go } >
161+ { goButton }
162+ </ span >
163+ ) ;
187164 }
188165
189- return (
190- < li className = { `${ prefixCls } } >
191- { changeSelect }
192- { goInput }
193- </ li >
166+ goInput = (
167+ < div className = { `${ prefixCls } } >
168+ { locale . jump_to }
169+ < input
170+ disabled = { disabled }
171+ type = "text"
172+ value = { goInputText }
173+ onChange = { handleChange }
174+ onKeyUp = { go }
175+ onBlur = { handleBlur }
176+ aria-label = { locale . page }
177+ />
178+ { locale . page }
179+ { gotoButton }
180+ </ div >
194181 ) ;
195182 }
183+
184+ return (
185+ < li className = { prefixCls } >
186+ { changeSelect }
187+ { goInput }
188+ </ li >
189+ ) ;
196190}
197191
198192export default Options ;
0 commit comments