BWAP-806 updating paginator component to hand textField properties

src/components/Paginator/Paginator.tsx

@@ -11,7 +11,7 @@ import {
 	SingleSelectDumb as SingleSelect,
 	ISingleSelectState,
 } from '../SingleSelect/SingleSelect';
-import TextField, { ITextFieldProps } from '../TextField/TextField';
+import TextField, { ITextFieldProps, ITextFieldPropsWithPassThroughs } from '../TextField/TextField';
 import { IButtonProps, Button } from '../Button/Button';
 import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon';
 import { buildModernHybridComponent } from '../../util/state-management';
@@ -35,6 +35,10 @@ type IPaginatorSingleSelectProps = Partial<ISingleSelectProps>;
 
 type ShowTotalObjects = (count: number) => string;
 
+interface IExtendedTextFieldProps extends Omit<ITextFieldProps, 'value'> {
+	value?: string | number
+}
+
 export interface IPaginatorProps
 	extends StandardProps,
 		React.DetailedHTMLProps<
@@ -116,7 +120,7 @@ export interface IPaginatorProps
 	/** Object of TextField props which are passed thru to the underlying TextField component. */
 
 	//TextField: TextField.defaultProps;
-	TextField: ITextFieldProps;
+	TextField: IExtendedTextFieldProps;
 }
 
 export interface IPaginatorState {
@@ -242,6 +246,7 @@ class Paginator extends React.Component<IPaginatorProps, IPaginatorState> {
 			event: React.FocusEvent | React.FormEvent;
 		}
 	): void => {
+		console.log(pageNum);
 		const { onPageSelect, selectedPageIndex, totalPages } = this.props;
 		const parsedPageNum = _.parseInt(pageNum);
 		if (_.isNaN(parsedPageNum)) {
@@ -310,11 +315,11 @@ class Paginator extends React.Component<IPaginatorProps, IPaginatorState> {
 					<ArrowIcon direction='left' />
 				</Button>
 				<TextField
-					lazyLevel={100}
-					{...textFieldProps}
+					lazyLevel={100}	
 					onBlur={this.handleTextFieldChange}
 					onSubmit={this.handleTextFieldChange}
-					isDisabled={isDisabled}
+					isDisabled={isDisabled || textFieldProps.isDisabled}
+					{...textFieldProps}
 					value={selectedPageIndex + 1}
 				/>
 				{!_.isNil(totalPages) && <span>of {totalPages.toLocaleString()}</span>}

src/components/Paginator/examples/5.text-field-props.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import createClass from 'create-react-class';
+import { Paginator } from '../../../index';
+
+export default createClass({
+	getInitialState() {
+		return {
+			selectedPageIndex: 0,
+		};
+	},
+	render() {
+		return (
+			<div>
+				<p>A paginator where textField is disabled using textFieldProps.</p>
+
+				<section>
+					<Paginator
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							isDisabled: true,
+						}}
+					/>
+				</section>
+
+				<p>A paginator where textField is disabled using textFieldProps and is passed an index value.</p>
+
+				<section>
+					<Paginator
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							value: 3,
+							isDisabled: true,
+						}}
+					/>
+				</section>
+
+				<p>On submit</p>
+
+				<section>
+					<Paginator
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							value: 3,
+							isDisabled: true,
+						}}
+					/>
+				</section>
+
+				<p>On blur</p>
+
+				<section>
+					<Paginator
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							value: this.state.selectedPageIndex,
+							onBlur: (value) => {this.setState(
+								{selectedPageIndex: value}
+							)}
+						}}
+					/>
+				</section>
+			</div>
+		);
+	},
+});