feat: remove emotion

fix #6

Author: runjuu

package.json

@@ -64,9 +64,6 @@
     "typescript": "^3.1.6"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.4",
-    "@emotion/is-prop-valid": "^0.7.3",
-    "@emotion/styled": "^10.0.4",
     "rxjs": "^6.3.3"
   },
   "peerDependencies": {

src/Bar/Bar.styled.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import { ExpandInteractiveArea } from '../types';
+
+export type StyledBarProps = React.HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const StyledBar = React.forwardRef<HTMLDivElement, StyledBarProps>(
+  ({ size, style, ...props }, ref) => (
+    <div
+      {...props}
+      ref={ref}
+      style={{
+        position: 'relative',
+        flex: `0 0 ${size}px`,
+        ...style,
+      }}
+    />
+  ),
+);
+
+export type StyledInteractiveAreaProps = React.HTMLAttributes<HTMLDivElement> &
+  ExpandInteractiveArea & {
+    vertical: boolean;
+  };
+
+export const StyledInteractiveArea = React.forwardRef<
+  HTMLDivElement,
+  StyledInteractiveAreaProps
+>(
+  (
+    { top = 0, right = 0, bottom = 0, left = 0, vertical, style, ...props },
+    ref,
+  ) => (
+    <div
+      {...props}
+      style={{
+        position: 'absolute',
+        top: -top,
+        left: -left,
+        right: -right,
+        bottom: -bottom,
+        cursor: vertical ? 'row-resize' : 'col-resize',
+        WebkitTapHighlightColor: 'transparent',
+        userSelect: 'none', // disable ios long press popup
+        ...style,
+      }}
+      ref={ref}
+    />
+  ),
+);

src/Bar/Bar.styled.tsx

@@ -7,8 +7,9 @@ import {
   ExpandInteractiveArea,
   Omit,
 } from '../types';
+import { omit } from '../utils';
 import { withResizerContext } from '../context';
-import { StyledBar, StyledInteractiveArea } from './Bar.styled';
+import { StyledBar, StyledInteractiveArea, StyledBarProps } from './Bar.styled';
 import { disablePassive } from './disablePassive';
 
 type Props = React.HTMLAttributes<HTMLDivElement> &
@@ -32,6 +33,10 @@ class BarComponent extends React.PureComponent<Props> {
     return this.props.innerRef || this.defaultInnerRef;
   }
 
+  private get childProps(): StyledBarProps {
+    return omit(this.props, []);
+  }
+
   private isActivated: boolean = false;
 
   private onMouseDown = this.triggerMouseAction(BarActionType.ACTIVATE);
@@ -85,7 +90,7 @@ class BarComponent extends React.PureComponent<Props> {
 
   render() {
     return (
-      <StyledBar {...this.props} ref={this.ref}>
+      <StyledBar {...this.childProps} ref={this.ref}>
         {this.props.children}
         <StyledInteractiveArea
           {...this.props.expandInteractiveArea}

src/Bar/index.tsx

@@ -1,21 +1,20 @@
-import styled from '@emotion/styled';
+import * as React from 'react';
 
-import { ignoreProps } from '../utils';
-
-interface StyledContainerProps {
+export type StyledContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   vertical?: boolean;
-}
-
-const customStyledContainerProps = [
-  'vertical',
-  'onActivate',
-  'beforeApplyResizer',
-  'afterResizing',
-];
+};
 
-export const StyledContainer = styled('div', {
-  shouldForwardProp: ignoreProps(customStyledContainerProps),
-})<StyledContainerProps>(({ vertical }) => ({
-  display: 'flex',
-  flexDirection: vertical ? 'column' : 'row',
-}));
+export const StyledContainer = React.forwardRef<
+  HTMLDivElement,
+  StyledContainerProps
+>(({ vertical, style, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    style={{
+      display: 'flex',
+      flexDirection: vertical ? 'column' : 'row',
+      ...style,
+    }}
+  />
+));

src/Container/Container.styled.tsx

@@ -9,6 +9,7 @@ import {
   ResizerContext,
   SizeRelatedInfo,
 } from '../types';
+import { omit } from '../utils';
 import { ResizerProvider } from '../context';
 
 import { Resizer } from './Resizer';
@@ -19,7 +20,7 @@ import {
   isDisabledResponsive,
   isSolid,
 } from './utils';
-import { StyledContainer } from './Container.styled';
+import { StyledContainer, StyledContainerProps } from './Container.styled';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   vertical?: boolean;
@@ -84,14 +85,25 @@ class Container extends React.PureComponent<Props> {
     };
   }
 
+  private get containerProps(): StyledContainerProps {
+    return omit(this.props, [
+      'onActivate',
+      'beforeApplyResizer',
+      'afterResizing',
+    ]);
+  }
+
   componentDidMount() {
     this.refreshSizeInfos();
   }
 
   render() {
     return (
       <ResizerProvider value={this.contextValue}>
-        <StyledContainer {...this.props} vertical={this.props.vertical}>
+        <StyledContainer
+          {...this.containerProps}
+          vertical={this.props.vertical}
+        >
           {this.props.children}
         </StyledContainer>
       </ResizerProvider>

src/Container/index.tsx

@@ -1,38 +1,43 @@
-import styled from '@emotion/styled';
-import { ChildProps } from '../types';
-import { ignoreProps } from '../utils';
+import * as React from 'react';
 
-interface StyledSectionProps extends ChildProps {
-  flexGrow: number;
-  flexShrink: number;
-  flexBasis: number;
-}
+import { ChildProps } from '../types';
 
-const customProps = [
-  'onSizeChanged',
-  // ChildProps
-  'size',
-  'defaultSize',
-  'maxSize',
-  'minSize',
-  'context',
-  'disableResponsive',
-  'innerRef',
-  // StyledSectionProps
-  'flexGrow',
-  'flexShrink',
-  'flexBasis',
-];
+export type StyledSectionProps = React.HTMLAttributes<HTMLDivElement> &
+  Pick<ChildProps, 'context' | 'maxSize' | 'minSize'> & {
+    flexGrow: number;
+    flexShrink: number;
+    flexBasis: number;
+  };
 
-export const StyledSection = styled('div', {
-  shouldForwardProp: ignoreProps(customProps),
-})<StyledSectionProps>(
-  ({ context, maxSize, minSize, flexGrow, flexShrink, flexBasis }) => ({
-    overflow: 'hidden',
-    [context.vertical ? 'maxHeight' : 'maxWidth']: maxSize,
-    [context.vertical ? 'minHeight' : 'minWidth']: minSize,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-  }),
+export const StyledSection = React.forwardRef<
+  HTMLDivElement,
+  StyledSectionProps
+>(
+  (
+    {
+      context,
+      maxSize,
+      minSize,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      style,
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      style={{
+        overflow: 'hidden',
+        [context.vertical ? 'maxHeight' : 'maxWidth']: maxSize,
+        [context.vertical ? 'minHeight' : 'minWidth']: minSize,
+        flexGrow,
+        flexShrink,
+        flexBasis,
+        ...style,
+      }}
+    />
+  ),
 );

src/Section/Section.styled.tsx

@@ -4,8 +4,8 @@ import { filter, map, tap } from 'rxjs/operators';
 
 import { ChildProps, SizeInfo } from '../types';
 import { withResizerContext } from '../context';
-import { isValidNumber } from '../utils';
-import { StyledSection } from './Section.styled';
+import { isValidNumber, omit } from '../utils';
+import { StyledSection, StyledSectionProps } from './Section.styled';
 
 type Props = ChildProps &
   React.HTMLAttributes<HTMLDivElement> & {
@@ -51,6 +51,18 @@ class SectionComponent extends React.PureComponent<Props> {
     return this.props.innerRef || this.defaultInnerRef;
   }
 
+  private get childProps(): StyledSectionProps {
+    return {
+      ...omit(this.props, [
+        'defaultSize',
+        'defaultSize',
+        'disableResponsive',
+        'innerRef',
+      ]),
+      ...this.getStyle(),
+    };
+  }
+
   componentDidMount() {
     this.subscription.add(this.resize$.subscribe());
     this.props.context.populateInstance(this.id, this.ref);
@@ -61,9 +73,7 @@ class SectionComponent extends React.PureComponent<Props> {
   }
 
   render() {
-    return (
-      <StyledSection {...this.props} {...this.getStyle()} ref={this.ref} />
-    );
+    return <StyledSection {...this.childProps} ref={this.ref} />;
   }
 
   private onSizeChanged(currentSize: number) {

src/Section/index.tsx

@@ -1,12 +1,34 @@
-import isPropValid from '@emotion/is-prop-valid';
+import { Omit } from './types';
 
 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);
+export function omit<P extends object, K extends keyof P>(
+  props: P,
+  ignoreKeys: K[],
+): Omit<P, K> {
+  type IgnoreKeyMap = Partial<Record<keyof P, true>>;
+
+  const ignoreKeyMap = ignoreKeys.reduce<IgnoreKeyMap>(
+    (map, key) => {
+      map[key] = true;
+      return map;
+    },
+    {} as IgnoreKeyMap,
+  );
+
+  return (Object.keys(props) as (keyof P)[]).reduce(
+    (newProps, key) => {
+      if (ignoreKeyMap[key]) {
+        return newProps;
+      } else {
+        newProps[key] = props[key];
+        return newProps;
+      }
+    },
+    {} as P,
+  );
 }