feat: add favorite & copy hex

zerosoul · Sep 11, 2019 · ca9f58e · ca9f58e
1 parent 1daccbb
commit ca9f58e
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "color-convert": "^2.0.1",
     "pinyin": "^2.9.0",
     "react": "^16.9.0",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.9.0",
     "react-github-btn": "^1.0.6",
     "react-redux": "^7.1.1",

diff --git a/src/App.js b/src/App.js
@@ -12,8 +12,10 @@ import ColorSet from './components/ColorSet';
 import { useModal, useColor } from './hooks';
 import colors from './assets/colors.json';
 
-window.wtf = colors;
-
+colors.push({
+  name: '',
+  colors: JSON.parse(localStorage.getItem('FAV_COLORS') || '[]')
+});
 const Colors = colors.map(set => {
   set.RGB = convert.hex.rgb(set.hex);
   set.colors = set.colors.map(c => {

diff --git a/src/components/ColorSet/IconCollection.js b/src/components/ColorSet/IconCollection.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.li`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #ef7a82;
+  .icon {
+    width: 1.4rem;
+    path {
+      transition: all 0.5s ease-in;
+    }
+  }
+`;
+const IconCollection = ({ currColorHex, showCollection, ...rest }) => {
+  const handleCollectClick = () => {
+    console.log('collect t');
+    showCollection();
+  };
+  return (
+    <Wrapper {...rest} onClick={handleCollectClick}>
+      <svg
+        t="1568178514471"
+        className="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="8559"
+        width="32"
+        height="32"
+      >
+        <path
+          d="M914.304 182.848H109.696v36.608h804.608v-36.608z m-73.152-109.696H182.848v36.544h658.304v-36.544z m109.696 256h36.544v-36.608H36.544v621.696h950.912v-512h-36.608v475.456H73.152V329.152h877.696zM510.464 440.064a130.112 130.112 0 0 0-181.056-2.112 132.8 132.8 0 0 0 1.6 188.224l166.784 165.952a17.984 17.984 0 0 0 25.6 0l166.528-165.952a132.8 132.8 0 0 0 1.28-188.288 130.112 130.112 0 0 0-180.736 2.176z m182.848 88.256a100.288 100.288 0 0 1-29.184 71.936l-153.6 152.896-153.6-152.896a100.288 100.288 0 0 1-29.12-71.936 88.384 88.384 0 0 1 26.944-64 93.504 93.504 0 0 1 130.112 1.536l25.6 25.6 25.6-25.6a93.504 93.504 0 0 1 130.112-1.536 88.384 88.384 0 0 1 27.136 63.936z"
+          fill="#fff"
+          p-id="8560"
+        ></path>
+      </svg>
+    </Wrapper>
+  );
+};
+
+export default IconCollection;
diff --git a/src/components/ColorSet.js → src/components/ColorSet/index.js b/src/components/ColorSet.js → src/components/ColorSet/index.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import styled from 'styled-components';
-
+import IconCollection from './IconCollection';
 const Wrapper = styled.div`
   ul {
     display: flex;
@@ -19,7 +19,9 @@ const Wrapper = styled.div`
       align-items: center;
       font-size: 0.8rem;
       font-weight: 800;
-      margin-right: -1rem;
+      &:not(:first-child) {
+        margin-right: -1rem;
+      }
       &.selected {
         transform: translateY(-1.6rem);
       }
@@ -83,19 +85,27 @@ const ColorSet = ({ currSetName, setCurrSet, sets }) => {
   return (
     <Wrapper className={`sets ${isHover ? 'expand' : ''}`}>
       <ul>
+        <IconCollection
+          className={'' == currSetName ? 'selected' : ''}
+          showCollection={handleSetClick.bind(null, '')}
+        />
+
         {sets.map(({ name, RGB }) => {
-          return (
-            <li
-              onClick={handleSetClick.bind(null, name)}
-              key={name}
-              style={{
-                background: `rgba(${RGB.join(',')})`
-              }}
-              className={name == currSetName ? 'selected' : ''}
-            >
-              {name}
-            </li>
-          );
+          if (name) {
+            return (
+              <li
+                onClick={handleSetClick.bind(null, name)}
+                key={name}
+                style={{
+                  background: `rgba(${RGB.join(',')})`
+                }}
+                className={name == currSetName ? 'selected' : ''}
+              >
+                {name}
+              </li>
+            );
+          }
+          return null;
         })}
       </ul>
       <i className="divider">|</i>

diff --git a/src/components/ColorTitle/IconCopy.js b/src/components/ColorTitle/IconCopy.js
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const Wrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  > .hex {
+    font-size: 0.6rem;
+    padding: 0.2rem;
+    background: rgba(51, 51, 51, 0.5);
+    border-radius: 0.2rem;
+    text-transform: uppercase;
+  }
+  .copyTip {
+    position: absolute;
+    left: 0.3rem;
+    top: 2rem;
+    font-size: 0.6rem;
+    padding: 0.3rem 0.4rem;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 0.2rem;
+  }
+`;
+const IconFav = ({ currColorHex }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    console.log('copy click');
+  };
+  return (
+    <CopyToClipboard
+      text={currColorHex}
+      onCopy={() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 1800);
+      }}
+    >
+      <Wrapper onClick={handleCopyClick}>
+        <svg
+          t="1568174087144"
+          className="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="7098"
+          width="36"
+          height="36"
+        >
+          <path
+            d="M220.429 838.029c-18.2 0-32.9-14.7-32.9-32.9v-437c0-18.2 14.7-32.9 32.9-32.9h440c18.2 0 32.9 14.7 32.9 32.9v436.9c0 18.2-14.7 32.9-32.9 32.9h-440z m407-65.9v-371.1h-374.1v371.1h374.1z"
+            fill="#fff"
+            p-id="7099"
+          ></path>
+          <path
+            d="M438.129 254.029c-18.2 0-32.9-14.7-32.9-32.9s14.7-32.9 32.9-32.9h369.6c18.2 0 32.9 14.7 32.9 32.9v363.5c0 18.2-14.7 32.9-32.9 32.9s-32.9-14.7-32.9-32.9v-330.6h-336.7z"
+            fill="#fff"
+            p-id="7100"
+          ></path>
+        </svg>
+        <span className="hex">{currColorHex}</span>
+        {copied ? <span className="copyTip">已复制!</span> : null}
+      </Wrapper>
+    </CopyToClipboard>
+  );
+};
+
+export default IconFav;
diff --git a/src/components/ColorTitle/IconFav.js b/src/components/ColorTitle/IconFav.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .icon path {
+    transition: all 0.5s ease-in;
+  }
+`;
+const FavStoreKey = 'FAV_COLORS';
+const IconFav = ({ currColor }) => {
+  const [isFav, setIsFav] = useState(false);
+
+  useEffect(() => {
+    const favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
+    console.log('favs e', favs);
+
+    if (favs.some(f => f.name == currColor.name)) {
+      setIsFav(true);
+    } else {
+      setIsFav(false);
+    }
+  }, [currColor]);
+  const toggleFav = () => {
+    let favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
+    console.log('favs t', favs);
+
+    if (isFav) {
+      favs = favs.filter(color => {
+        return color.name != currColor.name;
+      });
+    } else {
+      favs.push(currColor);
+    }
+    setIsFav(prev => !prev);
+    localStorage.setItem(FavStoreKey, JSON.stringify(favs));
+  };
+  return (
+    <Wrapper onClick={toggleFav}>
+      <svg
+        t="1568172188297"
+        className="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="2640"
+        width="32"
+        height="32"
+      >
+        <path
+          d="M512 910.933333l-61.866667-56.106667c-219.733333-199.466667-364.8-331.093333-364.8-492.16 0-131.626667 103.04-234.666667 234.666667-234.666667 74.24 0 145.493333 34.56 192 88.96 46.506667-54.4 117.76-88.96 192-88.96 131.626667 0 234.666667 103.04 234.666667 234.666667 0 161.066667-145.066667 292.693333-364.8 492.16l-61.866667 56.106667z"
+          p-id="2641"
+          fill={isFav ? '#ef7a82' : '#fff'}
+        ></path>
+      </svg>
+    </Wrapper>
+  );
+};
+
+export default IconFav;
diff --git a/src/components/ColorTitle.js → src/components/ColorTitle/index.js b/src/components/ColorTitle.js → src/components/ColorTitle/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import IconFav from './IconFav';
+import IconCopy from './IconCopy';
 
 const Wrapper = styled.hgroup`
   color: #333;
@@ -10,31 +12,22 @@ const Wrapper = styled.hgroup`
   align-self: center;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
   border-radius: 6px;
-  padding: 0.6rem 0.8rem;
-  padding-top: 1rem;
+  padding: 1rem 0.8rem;
   position: relative;
-  transition: transform 0.4s ease-in;
   width: 4.6rem;
   cursor: pointer;
   margin-top: -6rem;
 
-  &:hover {
-    transform: rotate(3deg) scale(1.1);
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0.4rem;
-    right: 0.4rem;
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: 50%;
-    background: rgba(255, 255, 200, 0.4);
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  &:hover > h1 {
+    transform: scale(1.1);
   }
+
   > h1 {
     font-size: 3.2rem;
+    letter-spacing: -0.8rem;
     writing-mode: vertical-lr;
+    transition: transform 0.4s ease-in;
+
     font-family: 'TChinese', 'SimSun', 'FangSong', 'STSong', 'STZhongsong', 'LiSu', 'KaiTi',
       'Microsoft YaHei';
   }
@@ -47,13 +40,24 @@ const Wrapper = styled.hgroup`
     bottom: 0.4rem;
     color: rgba(255, 255, 255, 0.66);
   }
+  > h3 {
+    width: 100%;
+    position: absolute;
+    left: -0.4rem;
+    bottom: -2.8rem;
+    display: flex;
+  }
 `;
 
-const ColorTitle = ({ name, pinyin }) => {
+const ColorTitle = ({ name, pinyin, hex, RGB, CMYK }) => {
   return (
     <Wrapper>
       <h1>{name}</h1>
+      <IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
       <h2>{pinyin}</h2>
+      <h3>
+        <IconCopy currColorHex={hex} />
+      </h3>
     </Wrapper>
   );
 };

diff --git a/src/hooks.js b/src/hooks.js
@@ -25,7 +25,9 @@ const useColor = initialValue => {
       case 'UPDATE_COLOR_SET': {
         let cs = sets.find(cs => cs.name === payload.name);
         localStorage.setItem('SELECTED_COLOR_SET', JSON.stringify(cs));
-
+        if (payload.name == '') {
+          cs.colors = JSON.parse(localStorage.getItem('FAV_COLORS') || '[]');
+        }
         return { ...state, currSet: cs };
       }
       default: