From b5d9275e631b23bb9ff01a611e79cbeac6240d16 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 1 Dec 2019 22:32:03 +0800
Subject: [PATCH] feat: settings for icons

---
 src/components/Node.tsx                       | 14 ++++-
 src/components/SettingsBar.tsx                |  2 +
 .../settings/FileTreeIconSettings.tsx         | 56 +++++++++++++++++++
 src/utils/configHelper.ts                     | 16 +++---
 4 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 src/components/settings/FileTreeIconSettings.tsx

diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index d429ddf..ce178ed 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -1,3 +1,4 @@
+import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import { OperatingSystems, os } from 'utils/general'
@@ -72,14 +73,23 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
   node: TreeNode
   open?: boolean
 }) {
+  const {
+    val: { icons },
+  } = useConfigs()
+
+  if (icons === 'native') return <Icon type={getIconType(node)} />
   const src = React.useMemo(
     () => (node.type === 'tree' ? getFolderIconSrc(node, open) : getFileIconSrc(node)),
     [open],
   )
   return (
     <>
-      <Icon placeholder={node.type === 'blob'} type={getIconType(node)} />
-      {node.type !== 'commit' && <img alt={node.name} className={'node-item-icon'} src={src} />}
+      <Icon placeholder={node.type !== 'tree'} type={getIconType(node)} />
+      {node.type === 'commit' ? (
+        <Icon type={getIconType(node)} />
+      ) : (
+        <img alt={node.name} className={cx('node-item-icon', { dim: icons === 'dim' })} src={src} />
+      )}
     </>
   )
 })
diff --git a/src/components/SettingsBar.tsx b/src/components/SettingsBar.tsx
index 2c365b8..b77ccea 100644
--- a/src/components/SettingsBar.tsx
+++ b/src/components/SettingsBar.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Config } from 'utils/configHelper'
 import { useStates } from 'utils/hooks'
 import { AccessTokenSettings } from './settings/AccessTokenSettings'
+import { FileTreeIconSettings } from './settings/FileTreeIconSettings'
 import { ShortcutSettings } from './settings/ShortcutSettings'
 import { SimpleToggleField } from './SimpleToggleField'
 
@@ -70,6 +71,7 @@ function SettingsBarContent() {
         <div className={'shadow-shelter'} />
         <AccessTokenSettings />
         <ShortcutSettings />
+        <FileTreeIconSettings />
         <div className={'gitako-settings-bar-content-section others'}>
           <h4>More</h4>
           {moreFields.map(field => (
diff --git a/src/components/settings/FileTreeIconSettings.tsx b/src/components/settings/FileTreeIconSettings.tsx
new file mode 100644
index 0000000..53dd023
--- /dev/null
+++ b/src/components/settings/FileTreeIconSettings.tsx
@@ -0,0 +1,56 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { Config } from 'utils/configHelper'
+
+const options: {
+  key: Config['icons']
+  value: Config['icons']
+  label: string
+}[] = [
+  {
+    key: 'rich',
+    value: 'rich',
+    label: `VSCode icons`,
+  },
+  {
+    key: 'dim',
+    value: 'dim',
+    label: `VSCode icons (single color)`,
+  },
+  {
+    key: 'native',
+    value: 'native',
+    label: `Native GitHub icons`,
+  },
+]
+
+type Props = {}
+
+export function FileTreeIconSettings(props: React.PropsWithChildren<Props>) {
+  const configContext = useConfigs()
+  return (
+    <div className={'gitako-settings-bar-content-section toggle-shortcut'}>
+      <h4>File Tree Icons</h4>
+      <span>Icons can make a difference.</span>
+      <br />
+      <div className={'toggle-shortcut-input-control'}>
+        <select
+          onChange={e => {
+            configContext.set({
+              icons: e.target.value as Config['icons'],
+            })
+          }}
+          className={'toggle-shortcut-input form-control'}
+          placeholder={'focus here and press the shortcut keys'}
+          value={configContext.val.icons}
+        >
+          {options.map(option => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index 470a005..61aab6f 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -8,6 +8,7 @@ export type Config = {
   copyFileButton: boolean
   copySnippetButton: boolean
   intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open status
+  icons: 'rich' | 'dim' | 'native'
 }
 
 export enum configKeys {
@@ -18,6 +19,7 @@ export enum configKeys {
   copyFileButton = 'copyFileButton',
   copySnippetButton = 'copySnippetButton',
   intelligentToggle = 'intelligentToggle',
+  icons = 'icons',
 }
 
 export const defaultConfigs: Config = {
@@ -28,19 +30,17 @@ export const defaultConfigs: Config = {
   copyFileButton: true,
   copySnippetButton: true,
   intelligentToggle: null,
+  icons: 'rich',
 }
 
 const configKeyArray = Object.values(configKeys)
 
 function applyDefaultConfigs(configs: Config) {
-  return configKeyArray.reduce(
-    (applied, configKey) => {
-      const key = configKey as keyof Config
-      Object.assign(applied, { [key]: key in configs ? configs[key] : defaultConfigs[key] })
-      return applied
-    },
-    {} as Config,
-  )
+  return configKeyArray.reduce((applied, configKey) => {
+    const key = configKey as keyof Config
+    Object.assign(applied, { [key]: key in configs ? configs[key] : defaultConfigs[key] })
+    return applied
+  }, {} as Config)
 }
 
 export async function get(): Promise<Config> {