fix: unknown event handler property issue

Author: runjuu

package.json

@@ -65,6 +65,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.4",
+    "@emotion/is-prop-valid": "^0.7.3",
     "@emotion/styled": "^10.0.4",
     "rxjs": "^6.3.3"
   },

src/Bar/Bar.styled.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { ExpandInteractiveArea } from '../types';
+import { ignoreProps } from '../utils';
 
 interface StyledBarProps {
   size?: number;
@@ -10,7 +11,20 @@ interface StyledInteractiveAreaProps extends ExpandInteractiveArea {
   vertical: boolean;
 }
 
-export const StyledBar = styled.div<StyledBarProps>(({ size = 10 }) => ({
+const customStyledBarProps = [
+  // ChildProps
+  'context',
+  'innerRef',
+  // BarProps
+  'size',
+  'onClick',
+  'expandInteractiveArea',
+  'onStatusChanged',
+];
+
+export const StyledBar = styled('div', {
+  shouldForwardProp: ignoreProps(customStyledBarProps),
+})<StyledBarProps>(({ size = 10 }) => ({
   position: 'relative',
   flex: `0 0 ${size}px`,
 }));

src/Bar/index.tsx

@@ -83,10 +83,8 @@ class BarComponent extends React.PureComponent<Props> {
   }
 
   render() {
-    const { onClick: _, ...props } = this.props;
-
     return (
-      <StyledBar {...props} ref={this.ref}>
+      <StyledBar {...this.props} ref={this.ref}>
         {this.props.children}
         <StyledInteractiveArea
           {...this.props.expandInteractiveArea}

src/Container/Container.styled.tsx

@@ -1,12 +1,21 @@
 import styled from '@emotion/styled';
 
+import { ignoreProps } from '../utils';
+
 interface StyledContainerProps {
   vertical?: boolean;
 }
 
-export const StyledContainer = styled.div<StyledContainerProps>(
-  ({ vertical }) => ({
-    display: 'flex',
-    flexDirection: vertical ? 'column' : 'row',
-  }),
-);
+const customStyledContainerProps = [
+  'vertical',
+  'onActivate',
+  'beforeApplyResizer',
+  'afterResizing',
+];
+
+export const StyledContainer = styled('div', {
+  shouldForwardProp: ignoreProps(customStyledContainerProps),
+})<StyledContainerProps>(({ vertical }) => ({
+  display: 'flex',
+  flexDirection: vertical ? 'column' : 'row',
+}));

src/Section/Section.styled.tsx

@@ -1,13 +1,32 @@
 import styled from '@emotion/styled';
 import { ChildProps } from '../types';
+import { ignoreProps } from '../utils';
 
 interface StyledSectionProps extends ChildProps {
   flexGrow: number;
   flexShrink: number;
   flexBasis: number;
 }
 
-export const StyledSection = styled.div<StyledSectionProps>(
+const customProps = [
+  'onSizeChanged',
+  // ChildProps
+  'size',
+  'defaultSize',
+  'maxSize',
+  'minSize',
+  'context',
+  'disableResponsive',
+  'innerRef',
+  // StyledSectionProps
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+];
+
+export const StyledSection = styled('div', {
+  shouldForwardProp: ignoreProps(customProps),
+})<StyledSectionProps>(
   ({ context, maxSize, minSize, flexGrow, flexShrink, flexBasis }) => ({
     overflow: 'hidden',
     [context.vertical ? 'maxHeight' : 'maxWidth']: maxSize,

src/utils.ts

@@ -1,5 +1,12 @@
+import isPropValid from '@emotion/is-prop-valid';
+
 export function isValidNumber(num?: number): num is number {
   return typeof num === 'number' && num === num;
 }
 
 export function noop() {}
+
+export function ignoreProps(ignoreList: string[]) {
+  return (propName: string) =>
+    ignoreList.indexOf(propName) === -1 && isPropValid(propName);
+}

yarn.lock

@@ -664,7 +664,7 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
   integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
 
-"@emotion/is-prop-valid@0.7.3":
+"@emotion/is-prop-valid@0.7.3", "@emotion/is-prop-valid@^0.7.3":
   version "0.7.3"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
   integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==