[new svg loader] load svg from dir && refactor file/code structures

Author: mydearxym

containers/Body/index.js

@@ -11,9 +11,7 @@ import keydown from 'react-keydown'
 // import Link from 'next/link'
 import { Button } from '../../components'
 
-import { storeSelector } from '../../utils/functions'
-
-import * as SuggestionIcons from '../Doraemon/styles/suggestionIcons'
+import { storeSelector, getSVGIconPath } from '../../utils/functions'
 import * as logic from './logic'
 
 import {
@@ -28,11 +26,9 @@ import {
   NotificationIcon,
   User,
   UserIcon,
-  AddonSVGIconWrapper,
+  BannerLogo,
 } from './styles'
 
-const Icons = { ...SuggestionIcons }
-
 const AppHeader = () => {
   return (
     <Header>
@@ -56,16 +52,12 @@ const AppHeader = () => {
 const AppBanner = ({ curUrlPath }) => {
   const defaultIcon = 'js'
   const iconKey = curUrlPath === '/' ? defaultIcon : curUrlPath
-
   // debug('AppBanner curUrlPath: ', curUrlPath)
   // debug('iconKey: ', iconKey)
 
-  const Icon = Icons[iconKey]
   return (
     <Banner>
-      <AddonSVGIconWrapper>
-        <Icon />
-      </AddonSVGIconWrapper>
+      <BannerLogo path={getSVGIconPath(iconKey)} />
     </Banner>
   )
 }

containers/Body/styles/index.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import ReactSVG from 'react-svg'
 
 import { theme } from '../../../utils/themes'
 
@@ -71,7 +72,6 @@ export const Banner = styled.div`
   height: 15vh;
   border-bottom: 1px solid tomato;
 `
-
 export const Button = styled.button`
   font-size: 1em;
   margin: 1em;
@@ -87,11 +87,8 @@ export const Button = styled.button`
     outline: 0;
   }
 `
-
-export const AddonSVGIconWrapper = styled.div`
-  > svg {
-    width: 80px;
-    height: 80px;
-    margin-top: 20px;
-  }
+export const BannerLogo = styled(ReactSVG)`
+  margin-top: 2em;
+  width: 100px;
+  height: 100px;
 `

containers/Doraemon/InputEditor.js

@@ -7,38 +7,33 @@
 import React from 'react'
 import keydown from 'react-keydown'
 
-// import { makeDebugger } from '../../utils/functions'
+import { getSVGIconPath } from '../../utils/functions'
 import * as logic from './logic'
 
 import {
   EditorBar,
   InputBar,
   AddOn,
   LoadingIcon,
-  AddonSVGIconWrapper,
+  PrefixSVGIcon,
+  PrefixSearchIcon,
+  PrefixMagicIcon,
 } from './styles'
 
-import * as SuggestionIcons from './styles/suggestionIcons'
-
-const allIcons = { ...SuggestionIcons }
-const defaultIcon = SuggestionIcons.search
-
-// import { theme, magic, search } from './styles/suggestionIcons'
 // const debug = makeDebugger('C:Doraemon:InputEditor')
 
 const PrefixIcon = ({ prefix }) => {
-  let Icon
-  if (prefix === '/') {
-    Icon = SuggestionIcons.magic
-  } else {
-    Icon = allIcons[prefix] ? allIcons[prefix] : defaultIcon
+  switch (prefix) {
+    case '': {
+      return <PrefixSearchIcon path={getSVGIconPath('search')} />
+    }
+    case '/': {
+      return <PrefixMagicIcon path={getSVGIconPath('magic')} />
+    }
+    default: {
+      return <PrefixSVGIcon path={getSVGIconPath(prefix)} />
+    }
   }
-
-  return (
-    <AddonSVGIconWrapper>
-      <Icon />
-    </AddonSVGIconWrapper>
-  )
 }
 
 export default class InputEditor extends React.Component {

containers/Doraemon/NodeIcon.js

@@ -6,39 +6,31 @@
 import React from 'react'
 import R from 'ramda'
 
-import { SVGIconWrapper } from './styles'
-import * as SuggestionIcons from './styles/suggestionIcons'
-// import { makeDebugger } from '../../utils/functions'
-
+import { getSVGIconPath } from '../../utils/functions'
+import { NodeSVGIcon, ThemeDot } from './styles'
 import { themeColorMap } from '../../utils/themes/'
 
-const Icons = { ...SuggestionIcons }
-const DefaultIcon = SuggestionIcons.javascript
-
 // const debug = makeDebugger('C:Doraemon:NodeIcon')
 
 const getIconKey = R.compose(R.last, R.split('--'), R.toLower)
 
 // sucks need refactor
 const NodeIcon = ({ raw }) => {
   const lowerRaw = R.toLower(raw)
-
   const iconKey = getIconKey(lowerRaw)
+  let specialStyle = {}
+
   if (R.startsWith('themes--', lowerRaw)) {
-    return <Icons.themeDot bg={themeColorMap[iconKey]} />
-  } else if (iconKey === 'hforward') {
-    return <Icons.forward />
+    return <ThemeDot bg={themeColorMap[iconKey]} />
   } else if (iconKey === 'hbackward') {
-    return <Icons.backward />
-  } else if (iconKey === 'question') {
-    return <Icons.question />
+    return <NodeSVGIcon reverse path={getSVGIconPath('forward')} />
+  } else if (iconKey === 'write') {
+    specialStyle = { width: '70%', marginLeft: 5 }
+  } else if (iconKey === 'login') {
+    specialStyle = { width: '70%', marginLeft: 5 }
   }
-  const Icon = Icons[iconKey] ? Icons[iconKey] : DefaultIcon
-  return (
-    <SVGIconWrapper>
-      <Icon />
-    </SVGIconWrapper>
-  )
+
+  return <NodeSVGIcon path={getSVGIconPath(iconKey)} style={specialStyle} />
 }
 
 export default NodeIcon

containers/Doraemon/index.js

@@ -10,14 +10,16 @@ import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
 // import styled from 'styled-components'
 
-import { makeDebugger, storeSelector } from '../../utils/functions'
+import {
+  makeDebugger,
+  storeSelector,
+  getSVGIconPath,
+} from '../../utils/functions'
 
 import InputEditor from './InputEditor'
 import NodeIcon from './NodeIcon'
 import * as logic from './logic'
 
-import * as SuggestionIcons from './styles/suggestionIcons'
-
 import {
   PageOverlay,
   PanelContainer,
@@ -37,9 +39,7 @@ const debug = makeDebugger('C:Doraemon')
 
 const HintIcon = ({ index, active, cur }) => {
   return active === cur ? (
-    <HintEnter>
-      <SuggestionIcons.enter />
-    </HintEnter>
+    <HintEnter path={getSVGIconPath('enter')} />
   ) : (
     <Hint>^ {index}</Hint>
   )

containers/Doraemon/logic.js

@@ -92,6 +92,7 @@ const initCmdResolver = () => {
         debug('communityLinker: ', cmdpath)
 
         // Router.push(url, as)
+        // TODO: use route store  method
         Router.push(
           {
             pathname: '/',
@@ -113,8 +114,7 @@ const initCmdResolver = () => {
 
 const doCmd = () => {
   const cmd = clearfyCmd(doraemon.activeRaw)
-  //  debug('clearfyCmd: ', cmd)
-  // Do not use forEach, cause forEach will not break
+  /* Do not use forEach, cause forEach will not break */
   for (let i = 0; i < cmdResolver.length; i += 1) {
     if (cmdResolver[i].match(cmd)) {
       return cmdResolver[i].action(cmd)

containers/Doraemon/styles/index.js

@@ -1,15 +1,10 @@
 import styled, { keyframes } from 'styled-components'
-import { theme } from '../../../utils/themes'
+import ReactSVG from 'react-svg'
 
+import { theme } from '../../../utils/themes'
 import { Img } from '../../../components'
-
 import loadingIcon from '../../../static/searchLoading.svg'
 
-// import javascriptIcon from '../../../static/nodeIcons/javascript.svg'
-
-// import * as SuggestionIcons from './suggestionIcons'
-export * from './suggestionIcons'
-
 const rotate360 = keyframes`
 	from {
 		transform: rotate(0deg);
@@ -155,11 +150,16 @@ export const Hint = styled.div`
   margin-top: 10px;
   margin-right: 15px;
   width: 30px;
+  font-size: 1.1rem;
 `
-export const HintEnter = styled.div`
+export const HintEnter = styled(ReactSVG)`
   color: ${theme('u_panel.text')};
   margin-top: 10px;
-  margin-right: 10px;
+  margin-right: 1.5em;
+  width: 30px;
+  height: 30px;
+  transform: rotateX(180deg);
+  fill: ${theme('u_panel.text')};
 `
 
 export const SubInfoWraper = styled.div`
@@ -178,22 +178,38 @@ export const RepoStar = styled.div`
   margin-right: 10px;
 `
 
-export const ImgIconWrapper = styled(Img)`
+export const NodeSVGIcon = styled(ReactSVG)`
   width: 40px;
   height: 40px;
+  margin-top: 3px;
+  transform: ${props => (props.reverse ? 'rotate(180deg)' : '')};
 `
 
-export const SVGIconWrapper = styled.div`
-  > svg {
-    width: 40px;
-    height: 40px;
-    margin-top: 3px;
-  }
+export const ThemeDot = styled.div`
+  width: 35px;
+  height: 35px;
+  margin-top: 5px;
+  background: ${props => props.bg};
+  border-radius: 50%;
 `
-export const AddonSVGIconWrapper = styled.div`
-  > svg {
-    width: 30px;
-    height: 30px;
-    margin-top: 20px;
-  }
+
+// TODO: rename -> PrefixIcon
+export const PrefixSVGIcon = styled(ReactSVG)`
+  width: 30px;
+  height: 30px;
+  margin-top: 20px;
+`
+
+export const PrefixSearchIcon = styled(ReactSVG)`
+  width: 30px;
+  height: 30px;
+  margin-top: 20px;
+  fill: ${theme('u_panel.search_icon')};
+`
+
+export const PrefixMagicIcon = styled(ReactSVG)`
+  width: 30px;
+  height: 25px;
+  margin-top: 20px;
+  transform: rotate(-30deg);
 `