-
Notifications
You must be signed in to change notification settings - Fork 7
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 #616 from shopgate/PWA-1618-Provide-simple-custom-…
…page-route-helper Add theme, router and current product, React Hooks and HOC to easily access the appropriate data
- Loading branch information
Showing
11 changed files
with
126 additions
and
14 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,19 @@ | ||
| import React from 'react'; | ||
| import { ThemeContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Injects the current Product Context information into the desired component. | ||
| * @param {Function} WrappedComponent The react component to wrap. | ||
| * @returns {JSX} | ||
| */ | ||
| export function withCurrentProduct(WrappedComponent) { | ||
| return props => ( | ||
| <ThemeContext.Consumer> | ||
| {({ contexts: { ProductContext } }) => ( | ||
| <ProductContext.Consumer> | ||
| {productProps => <WrappedComponent {...productProps} {...props} />} | ||
| </ProductContext.Consumer> | ||
| )} | ||
| </ThemeContext.Consumer> | ||
| ); | ||
| } |
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,17 @@ | ||
| import React from 'react'; | ||
| import { RouteContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Injects the route properties into the desired component. | ||
| * @param {Function} WrappedComponent The react component to wrap. | ||
| * @returns {JSX} | ||
| */ | ||
| export function withRoute(WrappedComponent) { | ||
| return props => ( | ||
| <RouteContext.Consumer> | ||
| {routeContext => ( | ||
| <WrappedComponent {...routeContext} {...props} /> | ||
| )} | ||
| </RouteContext.Consumer> | ||
| ); | ||
| } |
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,17 @@ | ||
| import React from 'react'; | ||
| import { ThemeContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Injects the theme API into the desired component. This does not include the contexts. | ||
| * @param {Function} WrappedComponent The react component to wrap. | ||
| * @returns {JSX} | ||
| */ | ||
| export function withTheme(WrappedComponent) { | ||
| return props => ( | ||
| <ThemeContext.Consumer> | ||
| {({ contexts, ...themeContext }) => ( // The contexts are left out in favor of other HOCs. | ||
| <WrappedComponent {...themeContext} {...props} /> | ||
| )} | ||
| </ThemeContext.Consumer> | ||
| ); | ||
| } |
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,13 @@ | ||
| import { useContext } from 'react'; | ||
| import { ThemeContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Provides the current product context props. | ||
| * @returns {Object} | ||
| */ | ||
| export function useCurrentProduct() { | ||
| // The contexts are left out in favor of other hooks. | ||
| const { contexts: { ProductContext } } = useContext(ThemeContext); | ||
| const productProps = useContext(ProductContext); | ||
| return productProps; | ||
| } |
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 @@ | ||
| import { useContext } from 'react'; | ||
| import { RouteContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Provides the route parameters. | ||
| * @returns {Object} | ||
| */ | ||
| export function useRoute() { | ||
| const routeContext = useContext(RouteContext); | ||
| return routeContext; | ||
| } |
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,12 @@ | ||
| import { useContext } from 'react'; | ||
| import { ThemeContext } from '@shopgate/pwa-common/context'; | ||
|
|
||
| /** | ||
| * Provides the theme API. This does not include the contexts. | ||
| * @returns {Object} | ||
| */ | ||
| export function useTheme() { | ||
| // The contexts are left out in favor of other hooks. | ||
| const { contexts, ...themeContext } = useContext(ThemeContext); | ||
| return themeContext; | ||
| } |
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