refactoring

srdjan · Sep 12, 2021 · b071db0 · b071db0
1 parent eb7c679
commit b071db0
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 31 deletions.
diff --git a/example/package.json b/example/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "debug": "esbuild app.js --bundle --format=cjs --outfile=bundle.js --loader:.js=jsx --sourcemap --preserve-symlinks",
     "build": "esbuild app.js --bundle --format=cjs --outfile=bundle.js --loader:.js=jsx",
-    "start": "serve"
+    "start": "npx serve"
   },
   "alias": {
     "react": "./node_modules/react"
@@ -16,6 +16,6 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "esbuild": "0.12.22"
+    "esbuild": "0.12.26"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-multistep",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "Responsive ReactJS multistep form component",
   "main": "dist/index.js",
   "files": [
@@ -27,7 +27,7 @@
     "goober": "2.0.41"
   },
   "devDependencies": {
-    "esbuild": "0.12.25",
+    "esbuild": "0.12.26",
     "react": "17.0.2"
   },
   "peerDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { css, styled, setup } from 'goober'
+import { styled, setup } from 'goober'
 
 setup(React.createElement)
 
@@ -8,29 +8,98 @@ const Ol = styled('ol')`
   padding-bottom: 2.2rem;
   list-style-type: none;
 `
+const LiTodo = styled('li')`
+  display: inline-block;
+  text-align: center;
+  line-height: 4.8rem;
+  padding: 0 0.7rem;
+  cursor: pointer;
+
+  color: silver;
+  border-bottom: 2px solid silver;
+
+  &::before {
+    position: relative;
+    bottom: -3.99rem;
+    float: left;
+    left: 50%;
+
+    content: "\u039F";
+    color: silver;
+    background-color: white;
+    width: 1.2em;
+    line-height: 1.2em;
+    border-radius: 0;
+  }
+  &:hover,
+  &:before {
+    color: #0FA0CE;
+  }
+  &:after {
+    content: "\\00a0\\00a0";
+  }   
+  span {
+    padding: 0 1.5rem;
+  }
+`
+
+const LiDoing = styled('li')`
+  display: inline-block;
+  text-align: center;
+  line-height: 4.8rem;
+  padding: 0 0.7rem;
+  cursor: pointer;
+
+  color: black;
+  border-bottom: 2px solid #33C3F0;
+
+  &::before {
+    position: relative;
+    bottom: -3.99rem;
+    float: left;
+    left: 50%;
+
+    content: "\u2022";
+    color: white;
+    background-color: #33C3F0;  
+    width: 1.2em;
+    line-height: 1.4em;
+    border-radius: 1.2em;
+  }
+  &:hover,
+  &:before {
+    color: #0FA0CE;
+  }
+  &:after {
+    content: "\\00a0\\00a0";
+  }   
+  span {
+    padding: 0 1.5rem;
+  }
+`
 
-const LiClass = props => css`
+const LiDone = styled('li')`
   display: inline-block;
   text-align: center;
-  line-height: 4.5rem;
+  line-height: 4.8rem;
   padding: 0 0.7rem;
   cursor: pointer;
 
-  color: ${props.state === 'todo' ? 'silver' : 'black'};
-  border-bottom: 4px solid ${props.state === 'todo' ? 'silver' : '#33C3F0'};
+  color: black;
+  border-bottom: 2px solid #33C3F0;
 
   &::before {
     position: relative;
     bottom: -3.99rem;
     float: left;
     left: 50%;
 
-    ${props.state === 'todo' ? 'content: "\u039F";' : props.state === 'doing' ? 'content: "\u2022";' : 'content: "\u2713";'}
-    color: ${props.state === 'todo' ? 'silver' : 'white'};
-    background-color: ${props.state === 'todo' ? 'white' : '#33C3F0'};  
+    content: "\u2713";
+    color: 'white';
+    background-color: '#33C3F0';
     width: 1.2em;
-    line-height: ${props.state === 'todo' ? '1.2em' : '1.4em'};
-    border-radius: ${props.state === 'todo' ? '0' : '1.2em'};
+    line-height: 1.4em;
+    border-radius: 1.2em;
   }
   &:hover,
   &:before {
@@ -43,6 +112,7 @@ const LiClass = props => css`
     padding: 0 1.5rem;
   }
 `
+
 const getTopNavStyles = (indx, length) => {
   const styles = []
   for (let i = 0; i < length; i++) {
@@ -79,7 +149,7 @@ const getButtonsState = (indx, length) => {
 export default function MultiStep (props) {
   const { activeComponentClassName, inactiveComponentClassName } = props
   const showNav =
-    typeof props.showNavigation === "undefined" ? true : props.showNavigation;
+    typeof props.showNavigation === 'undefined' ? true : props.showNavigation
 
   const [stylesState, setStyles] = useState(getTopNavStyles(0, props.steps.length))
   const [compState, setComp] = useState(0)
@@ -106,16 +176,39 @@ export default function MultiStep (props) {
   }
 
   const renderSteps = () =>
-    props.steps.map((s, i) => (
-      <li
-        className={LiClass({ state: stylesState[i] })}
-        onClick={handleOnClick}
-        key={i}
-        value={i}
-      >
-        <span>{i + 1}</span>
-      </li>
-    ))
+    props.steps.map((s, i) => {
+      if (stylesState[i] === 'todo') {
+        return (
+          <LiTodo
+            onClick={handleOnClick}
+            key={i}
+            value={i}
+          >
+            <span>{i + 1}</span>
+          </LiTodo>
+        )
+      } else if (stylesState[i] === 'doing') {
+        return (
+          <LiDoing
+            onClick={handleOnClick}
+            key={i}
+            value={i}
+          >
+            <span>{i + 1}</span>
+          </LiDoing>
+        )
+      } else {
+        return (
+          <LiDone
+            onClick={handleOnClick}
+            key={i}
+            value={i}
+          >
+            <span>{i + 1}</span>
+          </LiDone>
+        )
+      }
+    })
 
   const renderNav = (show) =>
     show && (