refactor: repo (#1070)

2022-06-07 07:18:41 -05:00
parent 4c65784421
commit f4ef63693c
1102 changed files with 5786 additions and 3366 deletions
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -0,0 +1,81 @@
+import { WebApplication } from '@/Application/Application'
+import { FeatureStatus } from '@standardnotes/snjs'
+import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import Switch from '@/Components/Switch/Switch'
+import { ThemeItem } from './ThemeItem'
+
+type Props = {
+  item: ThemeItem
+  application: WebApplication
+  onBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
+
+const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
+  const premiumModal = usePremiumModal()
+
+  const isThirdPartyTheme = useMemo(
+    () => application.features.isThirdPartyFeature(item.identifier),
+    [application, item.identifier],
+  )
+  const isEntitledToTheme = useMemo(
+    () => application.features.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
+    [application, item.identifier],
+  )
+  const canActivateTheme = useMemo(() => isEntitledToTheme || isThirdPartyTheme, [isEntitledToTheme, isThirdPartyTheme])
+
+  const toggleTheme: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (e) => {
+      e.preventDefault()
+
+      if (item.component && canActivateTheme) {
+        const themeIsLayerableOrNotActive = item.component.isLayerable() || !item.component.active
+
+        if (themeIsLayerableOrNotActive) {
+          application.mutator.toggleTheme(item.component).catch(console.error)
+        }
+      } else {
+        premiumModal.activate(`${item.name} theme`)
+      }
+    },
+    [application, canActivateTheme, item, premiumModal],
+  )
+
+  return (
+    <button
+      className={'sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between'}
+      onClick={toggleTheme}
+      onBlur={onBlur}
+    >
+      {item.component?.isLayerable() ? (
+        <>
+          <div className="flex items-center">
+            <Switch className="px-0 mr-2" checked={item.component?.active} />
+            {item.name}
+          </div>
+          {!canActivateTheme && <Icon type="premium-feature" />}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center">
+            <div className={`pseudo-radio-btn ${item.component?.active ? 'pseudo-radio-btn--checked' : ''} mr-2`}></div>
+            <span className={item.component?.active ? 'font-semibold' : undefined}>{item.name}</span>
+          </div>
+          {item.component && canActivateTheme ? (
+            <div
+              className="w-5 h-5 rounded-full"
+              style={{
+                backgroundColor: item.component.package_info?.dock_icon?.background_color,
+              }}
+            ></div>
+          ) : (
+            <Icon type="premium-feature" />
+          )}
+        </>
+      )}
+    </button>
+  )
+}
+
+export default ThemesMenuButton