feat: add colors pane.

uiwjs · Jun 29, 2021 · f986427 · f986427
1 parent e5ebdce
commit f986427
Show file tree

Hide file tree

Showing 5 changed files with 376 additions and 50 deletions.
diff --git a/src/app/App.module.css b/src/app/App.module.css
@@ -3,13 +3,18 @@ html, body {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
 }
 
-.header {
+.warpper {
+  display: flex;
+  flex-direction: row;
+}
+.pane {
   min-height: 100vh;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
+  flex: 1;
 }
 
 .code {
@@ -23,3 +28,28 @@ html, body {
   font-size: 0.8rem;
   color: #333;
 }
+
+.colors, .colors > div {
+  width: 270px;
+}
+
+.colors {
+  position: relative;
+}
+
+.colors > div {
+  position: fixed;
+  overflow:auto;
+  height: 100%;
+}
+
+.color {
+  background-color: rgb(255 255 255 / 82%);
+  padding: 10px;
+}
+.color label {
+  font-size: 12px;
+  max-width: 180px;
+  display: block;
+  padding-top: 5px;
+}
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,48 +1,101 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
-import { SketchPicker, ColorResult, RGBColor } from 'react-color'
-import styles from './App.module.css'
-import Code from './Code'
+import { SketchPicker, ColorResult, RGBColor, CirclePicker, CirclePickerProps } from 'react-color';
+import styles from './App.module.css';
+import Code from './Code';
+import colorsData from './colors.json';
+
+function CircleColors(props: CirclePickerProps & { title?: string }) {
+  return (
+    <div className={styles.color}>
+      <CirclePicker {...props} />
+      <label>{props.title}</label>
+    </div>
+  );
+}
 
 export default function App() {
-  const [color, setColor] = useState<RGBColor>({r: 224, g: 224, b: 224, a: 0.61})
+  const [color, setColor] = useState<RGBColor>({ r: 224, g: 224, b: 224, a: 0.61 });
   const handleColorChange = (data: ColorResult) => {
-    setColor(data.rgb)
-  }
+    setColor(data.rgb);
+  };
+  const handleSwatchesPicker = (data: ColorResult) => {
+    setColor(data.rgb);
+  };
 
   return (
     <div
       style={{
-        backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+        backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
       }}
     >
-      <GitHubCorners
-        fixed
-        zIndex={999}
-        size={60}
-        target="__blank"
-        href="https://github.com/uiwjs/ui-color"
-      />
-      <div className={styles.header}>
-        <div>
-          <SketchPicker
-            color={color}
-            onChange={handleColorChange}
-          />
-          <div className={styles.footer}>
-            <div>Copyright © uiwjs 2021.</div>
-            <div>Developed by <a href="https://github.com/uiwjs" target="__blank">Kenny</a>.</div>
+      <GitHubCorners fixed zIndex={999} size={60} target="__blank" href="https://github.com/uiwjs/ui-color" />
+      <div className={styles.warpper}>
+        <div className={styles.colors}>
+          <div>
+            {colorsData.map((item, idx) => {
+              return <CircleColors color={color} key={idx} {...item} onChange={handleSwatchesPicker} />;
+            })}
           </div>
         </div>
-        <div className={styles.code}>
-          <Code lang="swift" title="SwiftUI" code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`} />
-          <Code lang="swift" title="Swift for iOS" code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="swift" title="Swift for macOS" code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${color.a})`} />
-          <Code lang="objectivec" title="Objective-C for iOS" code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="objectivec" title="Objective-C for macOS" code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${color.a}];`} />
-          <Code lang="csharp" title="Xamarin (C#)" code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${color.a}f)`} />
+        <div className={styles.pane}>
+          <div>
+            <SketchPicker color={color} onChange={handleColorChange} />
+            <div className={styles.footer}>
+              <div>Copyright © uiwjs 2021.</div>
+              <div>
+                Developed by{' '}
+                <a href="https://github.com/uiwjs" target="__blank">
+                  Kenny
+                </a>
+                .
+              </div>
+            </div>
+          </div>
+          <div className={styles.code}>
+            <Code
+              lang="swift"
+              title="SwiftUI"
+              code={`Color(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}).opacity(${color.a})`}
+            />
+            <Code
+              lang="swift"
+              title="Swift for iOS"
+              code={`UIColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
+                color.a
+              })`}
+            />
+            <Code
+              lang="swift"
+              title="Swift for macOS"
+              code={`NSColor(red: ${color.r / 100}, green: ${color.g / 100}, blue: ${color.b / 100}, alpha: ${
+                color.a
+              })`}
+            />
+            <Code
+              lang="objectivec"
+              title="Objective-C for iOS"
+              code={`[UIColor colorWithRed: ${color.r / 100} green: ${color.g / 100} blue: ${color.b / 100} alpha: ${
+                color.a
+              }];`}
+            />
+            <Code
+              lang="objectivec"
+              title="Objective-C for macOS"
+              code={`[NSColor colorWithCalibratedRed: ${color.r / 100} green: ${color.g / 100} blue: ${
+                color.b / 100
+              } alpha: ${color.a}];`}
+            />
+            <Code
+              lang="csharp"
+              title="Xamarin (C#)"
+              code={`new UIColor(red: ${color.r / 100}f, green: ${color.g / 100}f, blue: ${color.b / 100}f, alpha: ${
+                color.a
+              }f)`}
+            />
+          </div>
         </div>
       </div>
     </div>
-  )
-};
+  );
+}
diff --git a/src/app/Code.tsx b/src/app/Code.tsx
@@ -12,41 +12,43 @@ type CodeProps = {
   title: string;
   lang: string;
   code: string;
-}
+};
 
 export default function Code(props: CodeProps) {
-  const { title, lang, code } = props || {}
-  const [isCopy, setIsCopy] = useState(false)
-  const [html, setHtml] = useState('')
+  const { title, lang, code } = props || {};
+  const [isCopy, setIsCopy] = useState(false);
+  const [html, setHtml] = useState('');
   function copyHandle() {
-    setIsCopy(true)
+    setIsCopy(true);
     copyTextToClipboard(code || '', (isCopy) => {
       let timer = setTimeout(() => {
-        setIsCopy(false)
-        clearTimeout(timer)
-      }, 1000)
+        setIsCopy(false);
+        clearTimeout(timer);
+      }, 1000);
     });
   }
   useEffect(() => {
-    let html = ''
+    let html = '';
     if (lang == 'swift') {
       html = Prism.highlight(code, Prism.languages.swift, 'swift');
     } else if (lang == 'csharp') {
       html = Prism.highlight(code, Prism.languages.csharp, 'csharp');
     } else if (lang == 'objectivec') {
       html = Prism.highlight(code, Prism.languages.objectivec, 'objectivec');
     }
-    setHtml(html)
-  }, [code])
+    setHtml(html);
+  }, [code]);
   return (
     <div className={styles.warpper}>
       <div className={styles.tool}>
         <div className={styles.title}>{title}</div>
-        <div className={`${styles.copy} ${isCopy ? styles.copied: ''}`} onClick={copyHandle}>{isCopy ? 'Copied' : 'Copy'}</div>
+        <div className={`${styles.copy} ${isCopy ? styles.copied : ''}`} onClick={copyHandle}>
+          {isCopy ? 'Copied' : 'Copy'}
+        </div>
       </div>
       <pre className={styles.code}>
-        <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: html}} />
+        <code className={`language-${lang}`} dangerouslySetInnerHTML={{ __html: html }} />
       </pre>
     </div>
-  )
-}
+  );
+}