Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #354 from reactioncommerce/345-machikoyasuda-regio…
…ninput-component feat(regioninput): add RegionInput component, use in AddressForm
- Loading branch information
Showing
10 changed files
with
267 additions
and
26 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { Component, Fragment } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { withComponents } from "@reactioncommerce/components-context"; | ||
| import { CustomPropTypes } from "../../../utils"; | ||
|
|
||
| class RegionInput extends Component { | ||
| static propTypes = { | ||
| /** | ||
| * You can provide a `className` prop that will be applied to the outermost DOM element | ||
| * rendered by this component. We do not recommend using this for styling purposes, but | ||
| * it can be useful as a selector in some situations. | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * If you've set up a components context using | ||
| * [@reactioncommerce/components-context](https://github.com/reactioncommerce/components-context) | ||
| * (recommended), then this prop will come from there automatically. If you have not | ||
| * set up a components context or you want to override one of the components in a | ||
| * single spot, you can pass in the components prop directly. | ||
| */ | ||
| components: PropTypes.shape({ | ||
| /** | ||
| * Pass either the Reaction TextInput component or your own component that is | ||
| * compatible with ReactoForm. | ||
| */ | ||
| TextInput: CustomPropTypes.component.isRequired, | ||
| /** | ||
| * Pass either the Reaction Select component or your own component that is | ||
| * compatible with ReactoForm. | ||
| */ | ||
| Select: CustomPropTypes.component.isRequired | ||
| }).isRequired, | ||
| /** | ||
| * Name of input | ||
| */ | ||
| name: PropTypes.string.isRequired, | ||
| /** | ||
| * Region options to populate the form's region fields | ||
| */ | ||
| options: PropTypes.array, | ||
| /** | ||
| * Prepopulate the input's value | ||
| */ | ||
| value: PropTypes.string | ||
| }; | ||
|
|
||
| render() { | ||
| const { | ||
| className, | ||
| components: { Select, TextInput }, | ||
| options, | ||
| value, | ||
| ...props | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| { | ||
| options && options.length > 1 ? ( | ||
| <Select | ||
| className={className} | ||
| alphabetize | ||
| isSearchable | ||
| options={options} | ||
| value={value} | ||
| {...props} | ||
| /> | ||
| ) : ( | ||
| <TextInput | ||
| className={className} | ||
| value={value} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
| </Fragment> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withComponents(RegionInput); |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| ### Overview | ||
|
|
||
| The `RegionInput` component renders either a `Select` or `TextInput`, based on the number of region options. | ||
|
|
||
| ### Usage | ||
|
|
||
| Use the `RegionInput` in a form with country and region locales. In the `AddressForm` component, for example, the form's `activeCountry` state, set by the country select, will trigger the `RegionInput` to appear as a plain text input or a dropdown of regions specified in a locale object or file. | ||
|
|
||
| Pass any related form input props, like `isReadOnly`, `placeholder`, `maxLength`, `name`, `id` and more through from the parent component into `RegionInput`. See [Select](./#!/Select) and [TextInput](./#!/TextInput) for more props. | ||
|
|
||
| #### With a value in a TextInput | ||
|
|
||
| ```jsx | ||
| <RegionInput name="region" isOnDarkBackground isReadOnly value="California" /> | ||
| ``` | ||
|
|
||
| #### With a value in a Select | ||
|
|
||
| ```jsx | ||
| const options = [ | ||
| { | ||
| "value": "AA", | ||
| "label": "A State" | ||
| }, | ||
| { | ||
| "value": "BB", | ||
| "label": "B State" | ||
| } | ||
| ]; | ||
|
|
||
| <RegionInput name="region" options={options} value="BB" /> | ||
| ``` | ||
|
|
||
| #### Implemented in an AddressForm | ||
|
|
||
| ```jsx | ||
| const locales = { | ||
| "NR": { | ||
| "name": "Country Without Regions", | ||
| }, | ||
| "WR": { | ||
| "name": "Country With Regions", | ||
| "states": { | ||
| "AA": { | ||
| "name": "A State" | ||
| }, | ||
| "BB": { | ||
| "name": "B State" | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| class AddressExample extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this._addressForm; | ||
| this.bindForm.bind(this); | ||
| } | ||
|
|
||
| bindForm(formEl) { | ||
| if (formEl) { | ||
| this._addressForm = formEl; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <AddressForm | ||
| locales={locales} | ||
| ref={(formEl) => { this.bindForm(formEl) }} | ||
| onSubmit={(address) => console.log("Address submitted", address)} | ||
| /> | ||
| <Button onClick={() => this._addressForm.submit()}>Submit</Button> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| <AddressExample /> | ||
| ``` | ||
|
|
||
| ### Theme | ||
|
|
||
| Refer to [Select](./#!/Select), [TextInput](./#!/TextInput) and [AddressForm](./#!/AddressForm) themes. |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from "react"; | ||
| import renderer from "react-test-renderer"; | ||
| import mockComponents from "../../../tests/mockComponents"; | ||
| import RegionInput from "./RegionInput"; | ||
|
|
||
| test("basic snapshot with only the components and required props should render a TextInput", () => { | ||
| const component = renderer.create(<RegionInput name="region" components={mockComponents} />); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("basic snapshot with other form props", () => { | ||
| const component = renderer.create(<RegionInput components={mockComponents} value="California" name="region" isReadOnly />); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("basic snapshot with pre-filled value in TextInput", () => { | ||
| const component = renderer.create(<RegionInput name="region" components={mockComponents} value="California"/>); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("basic snapshot with pre-filled value in Select", () => { | ||
| const options = [ | ||
| { | ||
| value: "AA", | ||
| label: "A State" | ||
| }, | ||
| { | ||
| value: "BB", | ||
| label: "B State" | ||
| } | ||
| ]; | ||
|
|
||
| const component = renderer.create(<RegionInput name="region" components={mockComponents} options={options} value="BB"/>); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test("basic snapshot with options should render a Select", () => { | ||
| const options = [ | ||
| { | ||
| value: "AA", | ||
| label: "A State" | ||
| }, | ||
| { | ||
| value: "BB", | ||
| label: "B State" | ||
| } | ||
| ]; | ||
|
|
||
| const component = renderer.create(<RegionInput name="region" components={mockComponents} options={options}/>); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); |
11 changes: 11 additions & 0 deletions
11
package/src/components/RegionInput/v1/__snapshots__/RegionInput.test.js.snap
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`basic snapshot with only the components and required props should render a TextInput 1`] = `"TextInput(undefined)"`; | ||
|
|
||
| exports[`basic snapshot with options should render a Select 1`] = `"Select(undefined)"`; | ||
|
|
||
| exports[`basic snapshot with other form props 1`] = `"TextInput(undefined)"`; | ||
|
|
||
| exports[`basic snapshot with pre-filled value in Select 1`] = `"Select(undefined)"`; | ||
|
|
||
| exports[`basic snapshot with pre-filled value in TextInput 1`] = `"TextInput(undefined)"`; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from "./RegionInput"; |
This file contains 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
This file contains 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
This file contains 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
This file contains 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