From 6d22b073b16faa2f8b0fd767eaa5b58db337fd8f Mon Sep 17 00:00:00 2001 From: Annabelle Wright Date: Wed, 14 Jul 2021 15:20:10 -0700 Subject: [PATCH 1/5] BWAP-806 updating paginator component to hand textField properties --- src/components/Paginator/Paginator.tsx | 15 ++-- .../Paginator/examples/5.text-field-props.tsx | 85 +++++++++++++++++++ 2 files changed, 95 insertions(+), 5 deletions(-) create mode 100644 src/components/Paginator/examples/5.text-field-props.tsx diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index 03eb82e58..ed7d58419 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/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; type ShowTotalObjects = (count: number) => string; +interface IExtendedTextFieldProps extends Omit { + 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 { 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 { {!_.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..5ab4c7abf --- /dev/null +++ b/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 ( +
+

A paginator where textField is disabled using textFieldProps.

+ +
+ +
+ +

A paginator where textField is disabled using textFieldProps and is passed an index value.

+ +
+ +
+ +

On submit

+ +
+ +
+ +

On blur

+ +
+ {this.setState( + {selectedPageIndex: value} + )} + }} + /> +
+
+ ); + }, +}); From f520924f81a476d190a47f4c493d418059587360 Mon Sep 17 00:00:00 2001 From: Annabelle Wright Date: Mon, 19 Jul 2021 09:56:27 -0700 Subject: [PATCH 2/5] BWAP-806 removed console.log and fixed lint issues --- src/components/Paginator/Paginator.tsx | 10 ++++++---- .../Paginator/examples/5.text-field-props.tsx | 11 +++++++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index ed7d58419..8e46f3669 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/src/components/Paginator/Paginator.tsx @@ -11,7 +11,10 @@ import { SingleSelectDumb as SingleSelect, ISingleSelectState, } from '../SingleSelect/SingleSelect'; -import TextField, { ITextFieldProps, ITextFieldPropsWithPassThroughs } 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'; @@ -36,7 +39,7 @@ type IPaginatorSingleSelectProps = Partial; type ShowTotalObjects = (count: number) => string; interface IExtendedTextFieldProps extends Omit { - value?: string | number + value?: string | number; } export interface IPaginatorProps @@ -246,7 +249,6 @@ class Paginator extends React.Component { event: React.FocusEvent | React.FormEvent; } ): void => { - console.log(pageNum); const { onPageSelect, selectedPageIndex, totalPages } = this.props; const parsedPageNum = _.parseInt(pageNum); if (_.isNaN(parsedPageNum)) { @@ -315,7 +317,7 @@ class Paginator extends React.Component { -

A paginator where textField is disabled using textFieldProps and is passed an index value.

+

+ A paginator where textField is disabled using textFieldProps and is + passed an index value. +

{this.setState( - {selectedPageIndex: value} - )} + onBlur: (value) => { + this.setState({ selectedPageIndex: value }); + }, }} />
From 9d3a00571e8963497ae9bd026e5b0d3845bad0fe Mon Sep 17 00:00:00 2001 From: Annabelle Wright Date: Mon, 19 Jul 2021 15:32:38 -0700 Subject: [PATCH 3/5] BWAP-806 moved isDisabled to after textFieldProps --- src/components/Paginator/Paginator.tsx | 5 ++--- .../Paginator/examples/5.text-field-props.tsx | 13 ++++++------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index 8e46f3669..ccb88be93 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/src/components/Paginator/Paginator.tsx @@ -13,7 +13,6 @@ import { } from '../SingleSelect/SingleSelect'; import TextField, { ITextFieldProps, - ITextFieldPropsWithPassThroughs, } from '../TextField/TextField'; import { IButtonProps, Button } from '../Button/Button'; import ArrowIcon from '../Icon/ArrowIcon/ArrowIcon'; @@ -39,7 +38,7 @@ type IPaginatorSingleSelectProps = Partial; type ShowTotalObjects = (count: number) => string; interface IExtendedTextFieldProps extends Omit { - value?: string | number; + value?: string; } export interface IPaginatorProps @@ -320,8 +319,8 @@ class Paginator extends React.Component { lazyLevel={100} onBlur={this.handleTextFieldChange} onSubmit={this.handleTextFieldChange} - isDisabled={isDisabled || textFieldProps.isDisabled} {...textFieldProps} + isDisabled={isDisabled || textFieldProps.isDisabled} value={selectedPageIndex + 1} /> {!_.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 index 11286b545..95848d432 100644 --- a/src/components/Paginator/examples/5.text-field-props.tsx +++ b/src/components/Paginator/examples/5.text-field-props.tsx @@ -27,13 +27,11 @@ export default createClass({ /> -

- A paginator where textField is disabled using textFieldProps and is - passed an index value. -

+

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

@@ -58,7 +55,9 @@ export default createClass({ DropMenu: { direction: 'up' }, }} TextField={{ - value: 3, + onSubmit: (value) => { + this.setState({ selectedPageIndex: value }); + }, isDisabled: true, }} /> From 5b4417390364d59fbd153701f9a0cbe6f63bdd84 Mon Sep 17 00:00:00 2001 From: Annabelle Wright Date: Wed, 18 Aug 2021 14:26:03 -0700 Subject: [PATCH 4/5] BWAP-806 fixed lint issues --- src/components/Paginator/Paginator.tsx | 4 +--- src/components/Paginator/examples/5.text-field-props.tsx | 5 ++++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index ccb88be93..7c810a850 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/src/components/Paginator/Paginator.tsx @@ -11,9 +11,7 @@ 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'; diff --git a/src/components/Paginator/examples/5.text-field-props.tsx b/src/components/Paginator/examples/5.text-field-props.tsx index 95848d432..3c3ff4efe 100644 --- a/src/components/Paginator/examples/5.text-field-props.tsx +++ b/src/components/Paginator/examples/5.text-field-props.tsx @@ -27,7 +27,10 @@ export default createClass({ /> -

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

+

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

Date: Wed, 25 Aug 2021 16:06:10 -0700 Subject: [PATCH 5/5] BWAP-806 fixed failing test with paginator change --- src/components/Paginator/Paginator.spec.tsx | 3 +++ 1 file changed, 3 insertions(+) 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);