Merge pull request #263 from loeck/master

Fix icons stories

src/stories/icons.stories.js

@@ -7,10 +7,23 @@ import Box from 'components/base/Box'
 const stories = storiesOf('Common', module)
 
 const req = require.context('../icons', true, /.js$/)
-const icons = req.keys().map(file => ({
-  file,
-  Component: req(file).default,
-}))
+const icons = req
+  .keys()
+  .map(file => {
+    const filePath = file
+      .split('/')
+      .slice(1)
+      .join('/')
+    let iconName = file.split('/')
+    iconName = iconName[iconName.length - 1]
+    return {
+      filePath: filePath.split('.js')[0],
+      iconName: iconName.split('.js')[0],
+      Component: req(file).default,
+    }
+  })
+  .filter(i => i.Component)
+  .sort((a, b) => a.iconName > b.iconName)
 
 const IconWrapper = styled(Box).attrs({
   align: 'center',
@@ -30,15 +43,14 @@ const Wrapper = styled.div`
 
 const doubleClickMap = {}
 
-function copy(iconName) {
+function copy(filePath, iconName) {
   return () => {
     const now = Date.now()
     const isDoubleClick = iconName in doubleClickMap && now - doubleClickMap[iconName] < 250
     doubleClickMap[iconName] = now
     const fakeNode = document.createElement('textarea')
-    fakeNode.value = isDoubleClick ? `import Icon${iconName} from 'icons/${iconName}'` : iconName
+    fakeNode.value = isDoubleClick ? `import Icon${iconName} from 'icons/${filePath}'` : iconName
     document.body.appendChild(fakeNode)
-    fakeNode.focus()
     fakeNode.select()
     document.execCommand('copy')
     document.body.removeChild(fakeNode)
@@ -47,14 +59,11 @@ function copy(iconName) {
 
 stories.add('Icons', () => (
   <Wrapper>
-    {icons.map(({ file, Component }) => {
-      const iconName = file.match(/\.\/(.*)\./)[1]
-      return (
-        <IconWrapper onClick={copy(iconName)} key={iconName}>
-          <div style={{ marginBottom: 15 }}>{iconName}</div>
-          <Component size={32} />
-        </IconWrapper>
-      )
-    })}
+    {icons.map(({ iconName, filePath, Component }) => (
+      <IconWrapper onClick={copy(filePath, iconName)} key={iconName}>
+        <div style={{ marginBottom: 15 }}>{iconName}</div>
+        <Component size={32} />
+      </IconWrapper>
+    ))}
   </Wrapper>
 ))