Merge pull request #1 from Codebrahma/feature/RemovingStyledComponents

Feature/removing styled components

Author: DivyanshBatham

README.md

@@ -29,7 +29,3 @@ Read the full Documentation [here](https://react-flexible-sliding-menu.netlify.c
 ## Motivation
 
 There are a lot of libraries out there which set out to do the same thing, some accomplished it some don't. But, I always found one or another thing missing in them. Hence, I built this library to fulfill my needs and possibly yours.
-
-## Dependencies
-
-Right now the only main Dependency is [Styled-Components](https://www.styled-components.com/), which I'll soon be replacing with vanilla css to reduce the library size even more.

docs/introduction.mdx

@@ -32,7 +32,3 @@ A **React** library which provides **Flexible Sliding Menu** with an easy to use
 ## Motivation
 
 There are a lot of libraries out there which set out to do the same thing, some accomplished it some don't. But, I always found one or another thing missing in them. Hence, I built this library to fulfill my needs and possibly yours.
-
-## Dependencies
-
-Right now the only main Dependency is [Styled-Components](https://www.styled-components.com/), which I'll soon be replacing with vanilla css to reduce the library size even more.

package-lock.json

@@ -1,6 +1,6 @@
 {
  "name": "react-flexible-sliding-menu",
- "version": "0.0.9",
+ "version": "0.1.0",
  "description": "A React library which provides Flexible Sliding Menu with an easy to use API and a bunch of other awesome features. Also, you get to choose which animation you want for the sliding menu.",
  "main": "dist/index.js",
  "homepage": "https://react-flexible-sliding-menu.netlify.com/",
@@ -50,8 +50,7 @@
  "react": "^16.12.0"
  },
  "dependencies": {
- "prop-types": "^15.7.2",
- "styled-components": "^4.4.1"
+ "prop-types": "^15.7.2"
  },
  "devDependencies": {
  "@babel/cli": "^7.7.4",

package.json

@@ -0,0 +1,31 @@
+// This is a factory function (also called a higher-order function)
+function createCustomWidthPropType(isRequired) {
+ // The factory returns a custom prop type
+ return function(props, propName, componentName) {
+ const { width } = props;
+ if (width == null) {
+ // Prop is missing
+ if (isRequired) {
+ // Prop is required but wasn't specified. Throw an error.
+ throw new Error(
+ `The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`undefined\`.`
+ );
+ }
+ // Prop is optional. Do nothing.
+ } else {
+ const validCSSDimension = /^(\d+|\d*\.\d+)(px|rem|em|%|vw|vh|cm|mm|Q|in|pc|pt|ex|ch|lh|vmin|vmax)$/;
+ if (!validCSSDimension.test(width)) {
+ return new Error(
+ `Invalid prop \`${propName}\` of value \`${width}\` supplied to \`${componentName}\`, expected a valid css length with unit (https://developer.mozilla.org/en-US/docs/Web/CSS/length).`
+ );
+ }
+ }
+ return null;
+ };
+}
+
+// Using the factory, create two different versions of your prop type
+const widthPropType = createCustomWidthPropType(false);
+widthPropType.isRequired = createCustomWidthPropType(true);
+
+export default widthPropType;

src/CustomProps/width.js

@@ -1,29 +1,71 @@
 import React, { useEffect, useState } from 'react';
-import { PushingDiv } from './styles';
+import PropTypes from 'prop-types';
+import widthPropType from '../CustomProps/width';
 
-const Push = ({ show, children, direction, width }) => {
- const [shouldRender, setRender] = useState(show);
+const AppContainerForPush = ({ direction, width, menuIsClosing, children }) => {
+ const appContainerStyles = {
+ transform: menuIsClosing
+ ? 'translateX(0)'
+ : `translateX(${direction === 'right' ? '-' : '+'}${width})`,
+ transition: 'transform 0.3s ease'
+ };
+
+ return <div style={appContainerStyles}>{children}</div>;
+};
+
+const Push = ({ direction, width, menuIsClosing, setIsMenuOpen, children }) => {
+ const [menuIsOpening, setMenuIsOpening] = useState(false);
+
+ const menuContainerStyles = {
+ position: 'fixed',
+ width,
+ zIndex: 9999999999,
+ top: 0,
+ left: direction === 'right' ? null : 0,
+ right: direction === 'right' ? 0 : null,
+ height: '100vh',
+ background: 'whitesmoke',
+ transform: menuIsOpening
+ ? 'translateX(0)'
+ : `translateX(${direction === 'right' ? '+' : '-'}100%)`,
+ transition: 'transform 0.3s ease'
+ };
 
  useEffect(() => {
- if (show) setRender(true);
- }, [show]);
+ setMenuIsOpening(true);
+ }, []);
 
- const onAnimationEnd = () => {
- if (!show) setRender(false);
+ useEffect(() => {
+ if (menuIsClosing) setMenuIsOpening(false);
+ }, [menuIsClosing]);
+
+ const onTransitionEnd = () => {
+ if (menuIsClosing) {
+ setIsMenuOpen(false);
+ }
  };
 
  return (
- shouldRender && (
- <PushingDiv
- show={show}
- width={width}
- direction={direction}
- onAnimationEnd={onAnimationEnd}
- >
- {children}
- </PushingDiv>
- )
+ <div style={menuContainerStyles} onTransitionEnd={onTransitionEnd}>
+ {children}
+ </div>
  );
 };
 
+Push.propTypes = {
+ direction: PropTypes.oneOf(['left', 'right']).isRequired,
+ width: widthPropType.isRequired,
+ menuIsClosing: PropTypes.bool.isRequired,
+ setIsMenuOpen: PropTypes.func.isRequired,
+ children: PropTypes.node.isRequired
+};
+
+AppContainerForPush.propTypes = {
+ direction: PropTypes.oneOf(['left', 'right']).isRequired,
+ width: widthPropType.isRequired,
+ menuIsClosing: PropTypes.bool.isRequired,
+ children: PropTypes.node.isRequired
+};
+
+export { AppContainerForPush };
 export default Push;

src/Push/index.jsx

@@ -1,29 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import SlidingDiv from './styles';
+import PropTypes from 'prop-types';
+import widthPropType from '../CustomProps/width';
 
-const Slide = ({ show, children, direction, width }) => {
- const [shouldRender, setRender] = useState(show);
+const Slide = ({
+ direction,
+ width,
+ menuIsClosing,
+ setIsMenuOpen,
+ children
+}) => {
+ const [menuIsOpening, setMenuIsOpening] = useState(false);
+
+ const menuContainerStyles = {
+ position: 'fixed',
+ width,
+ zIndex: 9999999999,
+ top: 0,
+ left: direction === 'right' ? null : 0,
+ right: direction === 'right' ? 0 : null,
+ height: '100vh',
+ background: 'whitesmoke',
+ transform: menuIsOpening
+ ? 'translateX(0)'
+ : `translateX(${direction === 'right' ? '+' : '-'}100%)`,
+ transition: 'transform 0.3s ease'
+ };
+
+ useEffect(() => {
+ setMenuIsOpening(true);
+ }, []);
 
  useEffect(() => {
- if (show) setRender(true);
- }, [show]);
+ if (menuIsClosing) setMenuIsOpening(false);
+ }, [menuIsClosing]);
 
- const onAnimationEnd = () => {
- if (!show) setRender(false);
+ const onTransitionEnd = () => {
+ if (menuIsClosing) {
+ setIsMenuOpen(false);
+ }
  };
 
  return (
- shouldRender && (
- <SlidingDiv
- show={show}
- width={width}
- direction={direction}
- onAnimationEnd={onAnimationEnd}
- >
- {children}
- </SlidingDiv>
- )
+ <div style={menuContainerStyles} onTransitionEnd={onTransitionEnd}>
+ {children}
+ </div>
  );
 };
 
+Slide.propTypes = {
+ direction: PropTypes.oneOf(['left', 'right']).isRequired,
+ width: widthPropType.isRequired,
+ menuIsClosing: PropTypes.bool.isRequired,
+ setIsMenuOpen: PropTypes.func.isRequired,
+ children: PropTypes.node.isRequired
+};
+
 export default Slide;