refactor: format and lint codebase (#971)

2022-04-13 22:02:34 +05:30
parent dc9c1ea0fc
commit 8e467f9e6d
367 changed files with 13778 additions and 16093 deletions
--- a/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/app/assets/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -0,0 +1,87 @@
+import { WebApplication } from '@/UIModels/Application'
+import { FeatureStatus } from '@standardnotes/snjs'
+import { FunctionComponent } from 'preact'
+import { useMemo } from 'preact/hooks'
+import { JSXInternal } from 'preact/src/jsx'
+import { Icon } from '@/Components/Icon'
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+import { Switch } from '@/Components/Switch'
+import { ThemeItem } from './ThemeItem'
+
+type Props = {
+  item: ThemeItem
+  application: WebApplication
+  onBlur: (event: { relatedTarget: EventTarget | null }) => void
+}
+
+export 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: JSXInternal.MouseEventHandler<HTMLButtonElement> = (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`)
+    }
+  }
+
+  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>
+  )
+}