diff --git a/src/components/Paginator/Paginator.spec.tsx b/src/components/Paginator/Paginator.spec.tsx index 31c1da6a0..a1582b4db 100644 --- a/src/components/Paginator/Paginator.spec.tsx +++ b/src/components/Paginator/Paginator.spec.tsx @@ -256,6 +256,9 @@ describe('Paginator', () => { selectedPageIndex={1} totalPages={3} onPageSelect={onPageSelect} + TextField={{ + isDisabled: true, + }} /> ); wrapper.find(TextField).prop(propName)(1, 3); diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index 54986f2c9..e7551e754 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/src/components/Paginator/Paginator.tsx @@ -27,6 +27,10 @@ type IPaginatorSingleSelectProps = Partial; type ShowTotalObjects = (count: number) => string; +interface IExtendedTextFieldProps extends Omit { + value?: string; +} + export interface IPaginatorProps extends StandardProps, React.DetailedHTMLProps< @@ -108,7 +112,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 { @@ -303,10 +307,10 @@ class Paginator extends React.Component { {!_.isNil(totalPages) && of {totalPages.toLocaleString()}} diff --git a/src/components/Paginator/examples/5.text-field-props.tsx b/src/components/Paginator/examples/5.text-field-props.tsx new file mode 100644 index 000000000..3c3ff4efe --- /dev/null +++ b/src/components/Paginator/examples/5.text-field-props.tsx @@ -0,0 +1,90 @@ +import React from 'react'; +import createClass from 'create-react-class'; +import { Paginator } from '../../../index'; + +export default createClass({ + getInitialState() { + return { + selectedPageIndex: 0, + }; + }, + render() { + return ( +
+

A paginator where textField is disabled using textFieldProps.

+ +
+ +
+ +

+ A paginator where textField is not disabled using TextField props, but + disabled from Paginator props +

+ +
+ +
+ +

On submit

+ +
+ { + this.setState({ selectedPageIndex: value }); + }, + isDisabled: true, + }} + /> +
+ +

On blur

+ +
+ { + this.setState({ selectedPageIndex: value }); + }, + }} + /> +
+
+ ); + }, +});