zhangyuheng/chinese-colors
1
0
Fork 0
forked from mirror/chinese-colors
Code Pull Requests Activity

refactor: modal & param style

Browse Source
This commit is contained in:
Tristan 2019-09-07 12:14:23 +08:00
parent 5bc5969259
commit 9bd8b27a11
2 changed files with 12 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ColorParam.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React from 'react';
import styled from 'styled-components';
import Circle from './CircleProgress';
const Wrapper = styled.section`
@ -33,32 +33,10 @@ const Wrapper = styled.section`
}
}
`;
let interVal = 0;
const ColorParam = ({ CMYK, RGB = [0, 0, 0], ...rest }) => {
const [C, M, Y, K] = CMYK;
const [rgbArr, setRgbArr] = useState([...RGB]);
const [R, G, B] = rgbArr;
useEffect(() => {
let [newR, newG, newB] = RGB;
// let [oldR, oldG, oldB] = rgbArr;
interVal = setInterval(() => {
let [currR, currG, currB] = rgbArr;
if (currR == newR || currB == newB || currG == newG) {
clearInterval(interVal);
}
setRgbArr(prev => {
const [prevR, prevG, prevB] = prev;
const nextR = prevR > newR ? prevR - 1 : prevR < newR ? prevR + 1 : prevR;
const nextG = prevG > newG ? prevG - 1 : prevG < newG ? prevG + 1 : prevG;
const nextB = prevB > newB ? prevB - 1 : prevB < newB ? prevB + 1 : prevB;
return [nextR, nextG, nextB];
});
}, 10);
return () => {
clearInterval(interVal);
};
}, [RGB, rgbArr]);
const [R, G, B] = RGB;
return (
<Wrapper {...rest}>
<div className="item c" data-id="c">

17
src/components/InfoModal.js
View File

@ -28,7 +28,7 @@ const Wrapper = styled.section`
left: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 0.8rem 1rem;
width: 80vw;
width: 20rem;
box-shadow: 0 0 9px black;
border-radius: 8px;
text-shadow: 0 0 8px black;
@ -53,9 +53,10 @@ const Wrapper = styled.section`
&.btns {
margin-top: 2rem;
flex-direction: row;
justify-content: space-between;
width: 44%;
text-shadow: none;
> span:not(:first-child) {
padding-left: 0.4rem;
}
}
}
}
@ -79,6 +80,12 @@ export default function InfoModal({ visible, closeModal, bgColor }) {
http://zhongguose.com
</a>
</span>
</p>
<p>
<span>参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957.</span>
<span>Adobe RGB / CMYK FORGA39, Dot Gain 15% Screenshot</span>
</p>
<p>
<span>
Copyright © 2019 by
<a href="//yangerxiao.com" target="_blank">
@ -86,10 +93,6 @@ export default function InfoModal({ visible, closeModal, bgColor }) {
</a>
</span>
</p>
<p>
<span>参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957.</span>
<span>Adobe RGB / CMYK FORGA39, Dot Gain 15% Screenshot</span>
</p>
<p className="btns">
<GitHubButton
href="https://github.com/zerosoul/chinese-colors"