-
Notifications
You must be signed in to change notification settings - Fork 103
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.
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
refactoring: replace innerComponentRef with ref for Web Components #44
Merged
Merged
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
27b95dd
WIP: refactor ObjectPageAnchor, AutoCloseOnOutsideClick and Segmented…
vbersch 908ed32
WIP: upgrade react-jss
vbersch 07c051a
WIP: refactor WithStyles to functional component
vbersch 1d9b404
WIP: remove withCustomStyles
vbersch 4ae7dea
WIP: refactor ObjectPage refs to new ref api
vbersch e84b438
WIP: First version of functional WithWebComponent
vbersch abb0061
refactoring: move components to new ref api
vbersch 8733b5c
WIP: move Popover to new ref api
vbersch 679339d
WIP: Update tests
vbersch dcf4216
Merge branch 'master' into feature/refs
vbersch 7f02b99
WIP: Changes according to PR comments
vbersch 0040320
WIP: Removed interfaces from lib to fix build
MarcusNotheis 916cdd8
WIP: Updated yarn lock
MarcusNotheis File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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 |
|---|---|---|
| @@ -1,66 +1,34 @@ | ||
| import deepMerge from 'deepmerge'; | ||
| import hoistNonReactStatics from 'hoist-non-react-statics'; | ||
| import React, { ComponentType, Ref } from 'react'; | ||
| import injectSheet from 'react-jss'; | ||
| import { createGenerateClassName } from './createGenerateClassName'; | ||
|
|
||
| const generateClassName = createGenerateClassName(); | ||
|
|
||
| const getStyle = (style) => (...args) => (typeof style === 'function' ? style(...args) : style); | ||
|
|
||
| const mergeStyles = (styles, ...newStyles) => { | ||
| return (...args) => | ||
| deepMerge.all([getStyle(styles)(...args), ...newStyles.map((newStyle) => getStyle(newStyle)(...args))]); | ||
| }; | ||
| import React, { ComponentType, ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'; | ||
| // @ts-ignore | ||
| import { createUseStyles, useTheme } from 'react-jss'; | ||
|
|
||
| const getDisplayName = (Component) => Component.displayName || Component.name || 'Component'; | ||
| const wrapComponentName = (componentName) => `WithStyles(${componentName})`; | ||
|
|
||
| export interface WithStylesPropTypes { | ||
| innerComponentRef: Ref<any>; | ||
| export interface WithStylesComponent<T = {}> extends ForwardRefExoticComponent<RefAttributes<T>> { | ||
| InnerComponent?: ComponentType<any>; | ||
| } | ||
|
|
||
| export const withStyles = (styles) => (Component: ComponentType<any>) => { | ||
| class WithStyles extends React.Component<WithStylesPropTypes> { | ||
| static defaultProps = Component.defaultProps; | ||
| static InnerComponent = Component; | ||
| static displayName = wrapComponentName(getDisplayName(Component)); | ||
| static withCustomStyles = (...newStyles) => { | ||
| return withStyles(mergeStyles(styles, ...newStyles))(Component); | ||
| }; | ||
| export function withStyles<T>(styles): any { | ||
| return (Component: ComponentType<T>) => { | ||
| const displayName = wrapComponentName(getDisplayName(Component)); | ||
|
|
||
| state = { | ||
| error: false | ||
| }; | ||
| const useStyles = createUseStyles(styles, { | ||
| name: displayName | ||
| }); | ||
|
|
||
| componentDidUpdate(prevProps) { | ||
| if (prevProps !== this.props) { | ||
| // retry rendering of Component | ||
| this.setState({ error: false }); | ||
| } | ||
| } | ||
| const WithStyles: WithStylesComponent<T> = React.forwardRef((props: T, ref: RefObject<any>) => { | ||
| const classes = useStyles(props); | ||
| const theme = useTheme(); | ||
|
|
||
| componentDidCatch(error, info) { | ||
| // Logger.error(error.message, Component.displayName || WithStyles.displayName); | ||
| this.setState({ error: true }); | ||
| } | ||
| return <Component {...props} ref={ref} classes={classes} theme={theme} />; | ||
| }); | ||
|
|
||
| render() { | ||
| const { innerComponentRef, ...rest } = this.props; | ||
| const { error } = this.state; | ||
|
|
||
| // props containing theme, classes generated by react-jss as well as | ||
| // user defined props | ||
| if (!error) { | ||
| return <Component ref={innerComponentRef} {...rest} />; | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| hoistNonReactStatics(WithStyles, Component); | ||
| return injectSheet(styles, { | ||
| generateClassName | ||
| })(WithStyles); | ||
| }; | ||
| WithStyles.defaultProps = Component.defaultProps; | ||
| WithStyles.displayName = displayName; | ||
| WithStyles.InnerComponent = Component; | ||
| hoistNonReactStatics(WithStyles, Component); | ||
| return WithStyles; | ||
| }; | ||
| } |
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should use a fixed version for the alpha release