BWAP-806 updating paginator component to hand textField properties

src/components/Paginator/Paginator.tsx

@@ -11,7 +11,9 @@ import {
 	SingleSelectDumb as SingleSelect,
 	ISingleSelectState,
 } from '../SingleSelect/SingleSelect';
-import TextField, { ITextFieldProps } from '../TextField/TextField';
+import TextField, {
+	ITextFieldProps,
+} from '../TextField/TextField';
 import { IButtonProps, Button } from '../Button/Button';
 import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon';
 import { buildModernHybridComponent } from '../../util/state-management';
@@ -35,6 +37,10 @@ type IPaginatorSingleSelectProps = Partial<ISingleSelectProps>;
 
 type ShowTotalObjects = (count: number) => string;
 
+interface IExtendedTextFieldProps extends Omit<ITextFieldProps, 'value'> {
+	value?: string;
+}
+
 export interface IPaginatorProps
 	extends StandardProps,
 		React.DetailedHTMLProps<
@@ -116,7 +122,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 {
@@ -311,10 +317,10 @@ class Paginator extends React.Component<IPaginatorProps, IPaginatorState> {
 				</Button>
 				<TextField
 					lazyLevel={100}
-					{...textFieldProps}
 					onBlur={this.handleTextFieldChange}
 					onSubmit={this.handleTextFieldChange}
-					isDisabled={isDisabled}
+					{...textFieldProps}
+					isDisabled={isDisabled || textFieldProps.isDisabled}
 					value={selectedPageIndex + 1}
 				/>
 				{!_.isNil(totalPages) && <span>of {totalPages.toLocaleString()}</span>}

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

@@ -0,0 +1,87 @@
+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 not disabled using TextField props, but disabled from Paginator props</p>
+
+				<section>
+					<Paginator
+						isDisabled={true}
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							isDisabled: false,
+						}}
+					/>
+				</section>
+
+				<p>On submit</p>
+
+				<section>
+					<Paginator
+						hasPageSizeSelector
+						showTotalObjects
+						totalCount={12321313}
+						SingleSelect={{
+							DropMenu: { direction: 'up' },
+						}}
+						TextField={{
+							onSubmit: (value) => {
+								this.setState({ selectedPageIndex: value });
+							},
+							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>
+		);
+	},
+});