FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(textinput): support passing a ref by boaz0 · Pull Request #3168 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(textinput): support passing a ref #3168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmcfaul merged 1 commit into from
Dec 2, 2019
Conversation 12 Commits 1 Checks 0 Files changed
Merged

feat(textinput): support passing a ref #3168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension .js  (1) .md  (1) .snap  (4) .ts  (1) .tsx  (2) All 5 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
          • TextInput.test.js
          • TextInput.tsx
            • TextInput.md
        • index.ts
        • withInnerRef.tsx
      • TableTextInput.test.js.snap
9 changes: 1 addition & 8 deletions ...y-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.tsx.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,12 @@ exports[`Renders ContextSelector open 1`] = `
className="pf-c-context-selector__menu-input"
>
<Component>
<TextInput
aria-label={null}
<ForwardRef
aria-labelledby="pf-context-selector-search-button-id-0"
className=""
isDisabled={false}
isReadOnly={false}
isRequired={false}
isValid={true}
onChange={[Function]}
onKeyPress={[Function]}
placeholder="Search"
type="search"
validated="default"
value=""
/>
<Component
Expand Down
42 changes: 6 additions & 36 deletions ...es/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginForm.test.tsx.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,14 @@ exports[`LoginForm with rememberMeLabel 1`] = `
isValid={true}
label="Username"
>
<TextInput
aria-label={null}
<ForwardRef
autoFocus={true}
className=""
id="pf-login-username-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-username-id"
onChange={[Function]}
type="text"
validated="default"
value=""
/>
</Component>
Expand All @@ -36,18 +31,13 @@ exports[`LoginForm with rememberMeLabel 1`] = `
isValid={true}
label="Password"
>
<TextInput
aria-label={null}
className=""
<ForwardRef
id="pf-login-password-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-password-id"
onChange={[Function]}
type="password"
validated="default"
value=""
/>
</Component>
Expand Down Expand Up @@ -92,19 +82,14 @@ exports[`LoginForm with rememberMeLabel and rememberMeAriaLabel uses the remembe
isValid={true}
label="Username"
>
<TextInput
aria-label={null}
<ForwardRef
autoFocus={true}
className=""
id="pf-login-username-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-username-id"
onChange={[Function]}
type="text"
validated="default"
value=""
/>
</Component>
Expand All @@ -114,18 +99,13 @@ exports[`LoginForm with rememberMeLabel and rememberMeAriaLabel uses the remembe
isValid={true}
label="Password"
>
<TextInput
aria-label={null}
className=""
<ForwardRef
id="pf-login-password-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-password-id"
onChange={[Function]}
type="password"
validated="default"
value=""
/>
</Component>
Expand Down Expand Up @@ -170,19 +150,14 @@ exports[`should render Login form 1`] = `
isValid={true}
label="Username"
>
<TextInput
aria-label={null}
<ForwardRef
autoFocus={true}
className=""
id="pf-login-username-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-username-id"
onChange={[Function]}
type="text"
validated="default"
value=""
/>
</Component>
Expand All @@ -192,18 +167,13 @@ exports[`should render Login form 1`] = `
isValid={true}
label="Password"
>
<TextInput
aria-label={null}
className=""
<ForwardRef
id="pf-login-password-id"
isDisabled={false}
isReadOnly={false}
isRequired={true}
isValid={true}
name="pf-login-password-id"
onChange={[Function]}
type="password"
validated="default"
value=""
/>
</Component>
Expand Down
32 changes: 16 additions & 16 deletions packages/patternfly-4/react-core/src/components/TextInput/TextInput.test.js
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
import { TextInput } from './TextInput';
import { mount, shallow } from 'enzyme';
import { TextInput,TextInputBase } from './TextInput';
import { ValidatedOptions } from '../../helpers/constants';

const props = {
Expand All @@ -13,33 +13,33 @@ test('input passes value and event to onChange handler', () => {
const event = {
currentTarget: { value: newValue }
};
const view = shallow(<TextInput {...props} aria-label="test input" />);
const view = shallow(<TextInputBase {...props} aria-label="test input" />);
view.find('input').simulate('change', event);
expect(props.onChange).toBeCalledWith(newValue, event);
});

test('simple text input', () => {
const view = shallow(<TextInput {...props} aria-label="simple text input" />);
expect(view).toMatchSnapshot();
const view = mount(<TextInput {...props} aria-label="simple text input" />);
expect(view.find('input')).toMatchSnapshot();
});

test('disabled text input', () => {
const view = shallow(<TextInput isDisabled aria-label="disabled text input" />);
expect(view).toMatchSnapshot();
const view = mount(<TextInput isDisabled aria-label="disabled text input" />);
expect(view.find('input')).toMatchSnapshot();
});

test('readonly text input', () => {
const view = shallow(<TextInput isReadOnly value="read only" aria-label="readonly text input" />);
expect(view).toMatchSnapshot();
const view = mount(<TextInput isReadOnly value="read only" aria-label="readonly text input" />);
expect(view.find('input')).toMatchSnapshot();
});

test('invalid text input', () => {
const view = shallow(<TextInput {...props} required isValid={false} aria-label="invalid text input" />);
expect(view).toMatchSnapshot();
const view = mount(<TextInput {...props} required isValid={false} aria-label="invalid text input" />);
expect(view.find('input')).toMatchSnapshot();
});

test('validated text input success', () => {
const view = shallow(<TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />);
const view = mount(<TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />);
expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1);
expect(view).toMatchSnapshot();
});
Expand All @@ -52,27 +52,27 @@ test('validated text input', () => {
test('should throw console error when no aria-label, id or aria-labelledby is given', () => {
const myMock = jest.fn();
global.console = { error: myMock };
shallow(<TextInput {...props} />);
mount(<TextInput {...props} />);
expect(myMock).toBeCalled();
});

test('should not throw console error when id is given but no aria-label or aria-labelledby', () => {
const myMock = jest.fn();
global.console = { error: myMock };
shallow(<TextInput {...props} id="5" />);
mount(<TextInput {...props} id="5" />);
expect(myMock).not.toBeCalled();
});

test('should not throw console error when aria-label is given but no id or aria-labelledby', () => {
const myMock = jest.fn();
global.console = { error: myMock };
shallow(<TextInput {...props} aria-label="test input" />);
mount(<TextInput {...props} aria-label="test input" />);
expect(myMock).not.toBeCalled();
});

test('should not throw console error when aria-labelledby is given but no id or aria-label', () => {
const myMock = jest.fn();
global.console = { error: myMock };
shallow(<TextInput {...props} aria-labelledby="test input" />);
mount(<TextInput {...props} aria-labelledby="test input" />);
expect(myMock).not.toBeCalled();
});
15 changes: 11 additions & 4 deletions packages/patternfly-4/react-core/src/components/TextInput/TextInput.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
import { css, getModifier } from '@patternfly/react-styles';
import { Omit } from '../../helpers/typeUtils';
import { Omit, withInnerRef } from '../../helpers'
import { ValidatedOptions } from '../../helpers/constants';

export enum TextInputTypes {
Expand Down Expand Up @@ -53,18 +53,20 @@ export interface TextInputProps extends Omit<React.HTMLProps<HTMLInputElement>,
value?: string | number;
/** Aria-label. The input requires an associated id or aria-label. */
'aria-label'?: string;
/** A reference object to attach to the input box. */
innerRef?: React.Ref<any>;
}

export class TextInput extends React.Component<TextInputProps> {
class TextInputBase extends React.Component<TextInputProps> {
static defaultProps = {
'aria-label': null as string,
className: '',
isRequired: false,
isValid: true,
validated: 'default',
validated: 'default' as 'success' | 'error' | 'default',
isDisabled: false,
isReadOnly: false,
type: 'text',
type: TextInputTypes.text,
onChange: (): any => undefined
};

Expand All @@ -84,6 +86,7 @@ export class TextInput extends React.Component<TextInputProps> {

render() {
const {
innerRef,
className,
type,
value,
Expand All @@ -110,7 +113,11 @@ export class TextInput extends React.Component<TextInputProps> {
required={isRequired}
disabled={isDisabled}
readOnly={isReadOnly}
ref={innerRef}
/>
);
}
}

const TextInputFR = withInnerRef<HTMLInputElement, TextInputProps>(TextInputBase)
export { TextInputFR as TextInput, TextInputBase }
58 changes: 42 additions & 16 deletions ...ges/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -56,29 +56,55 @@ exports[`simple text input 1`] = `
`;

exports[`validated text input 1`] = `
<input
aria-invalid={true}
<TextInputBase
aria-label="validated text input"
className="pf-c-form-control"
disabled={false}
onChange={[Function]}
readOnly={false}
required={false}
className=""
innerRef={null}
isDisabled={false}
isReadOnly={false}
isRequired={false}
isValid={true}
onChange={[MockFunction]}
required={true}
type="text"
validated="error"
value="test input"
/>
`;

exports[`validated text input success 1`] = `
<input
aria-invalid={false}
<ForwardRef
aria-label="validated text input"
className="pf-c-form-control pf-m-success"
disabled={false}
onChange={[Function]}
readOnly={false}
required={false}
type="text"
onChange={[MockFunction]}
required={true}
validated="success"
value="test input"
/>
>
<TextInputBase
aria-label="validated text input"
className=""
innerRef={null}
isDisabled={false}
isReadOnly={false}
isRequired={false}
isValid={true}
onChange={[MockFunction]}
required={true}
type="text"
validated="success"
value="test input"
>
<input
aria-invalid={false}
aria-label="validated text input"
className="pf-c-form-control pf-m-success"
disabled={false}
onChange={[Function]}
readOnly={false}
required={false}
type="text"
value="test input"
/>
</TextInputBase>
</ForwardRef>
`;
17 changes: 16 additions & 1 deletion packages/patternfly-4/react-core/src/components/TextInput/examples/TextInput.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ propComponents: ['TextInput']
typescript: true
---

import { TextInput } from '@patternfly/react-core';
import { TextInput, Button } from '@patternfly/react-core';

## Examples
```js title=Basic
Expand Down Expand Up @@ -79,3 +79,18 @@ class InvalidTextInput extends React.Component {
}
}
```

```js title=Select-text-using-ref
import React from 'react';
import { TextInput, Button } from '@patternfly/react-core';

TextInputSelectAll = () => {
const [value, setValue] = React.useState('select all on click');
const ref = React.useRef(null);
return (
<React.Fragment>
<TextInput ref={ref} value={value} onFocus={() => ref && ref.current && ref.current.select()} onChange={value => setValue(value)} aria-label="select-all" />
</React.Fragment>
)
}
```
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/helpers/index.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from './util';
export * from './constants';
export * from './htmlConstants';
export * from './typeUtils';
export * from './withInnerRef';
7 changes: 7 additions & 0 deletions packages/patternfly-4/react-core/src/helpers/withInnerRef.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';

export function withInnerRef<R, P extends { innerRef?: React.Ref<R> }>(

nicolethoen Oct 25, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I can imagine this will be very helpful, thanks!
WrappedComponent: React.ComponentType<P>
): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>> {
return React.forwardRef<R, P>((props, ref) => <WrappedComponent {...props} innerRef={ref} />);
}
Loading
Back | FazBrowse Home | New Git URL