typescriptize

packages/app/src/components/Admin/Customize/CustomizeThemeOptions.tsx

@@ -2,22 +2,21 @@ import React from 'react';
 
 import { GrowiThemeSchemeType, PresetThemesSummaries } from '@growi/preset-themes';
 import { useTranslation } from 'next-i18next';
-import PropTypes from 'prop-types';
 
-
-import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
-import ThemeColorBox from './ThemeColorBox';
+import { ThemeColorBox } from './ThemeColorBox';
 
 const lightNDarkTheme = PresetThemesSummaries.filter(s => s.schemeType === GrowiThemeSchemeType.BOTH);
 const uniqueTheme = PresetThemesSummaries.filter(s => s.schemeType !== GrowiThemeSchemeType.BOTH);
 
 
-const CustomizeThemeOptions = (props) => {
+type Props = {
+  selectedTheme: string,
+  onSelected?: (themeName: string) => void,
+};
 
-  const { selectedTheme } = props;
+const CustomizeThemeOptions = (props: Props): JSX.Element => {
+
+  const { selectedTheme, onSelected } = props;
 
   const { t } = useTranslation('admin');
 
@@ -33,7 +32,7 @@ const CustomizeThemeOptions = (props) => {
               <ThemeColorBox
                 key={theme.name}
                 isSelected={selectedTheme === theme.name}
-                onSelected={() => props.onSelected(theme.name)}
+                onSelected={() => onSelected?.(theme.name)}
                 {...theme}
               />
             );
@@ -49,7 +48,7 @@ const CustomizeThemeOptions = (props) => {
               <ThemeColorBox
                 key={theme.name}
                 isSelected={selectedTheme === theme.name}
-                onSelected={() => props.onSelected(theme.name)}
+                onSelected={() => onSelected?.(theme.name)}
                 {...theme}
               />
             );
@@ -61,11 +60,5 @@ const CustomizeThemeOptions = (props) => {
 
 };
 
-const CustomizeThemeOptionsWrapper = withUnstatedContainers(CustomizeThemeOptions, [AdminCustomizeContainer]);
-
-CustomizeThemeOptions.propTypes = {
-  onSelected: PropTypes.func,
-  selectedTheme: PropTypes.string,
-};
 
-export default CustomizeThemeOptionsWrapper;
+export default CustomizeThemeOptions;

packages/app/src/components/Admin/Customize/ThemeColorBox.tsx

@@ -1,47 +1,40 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 
+type Props = {
+  isSelected: boolean,
+  name: string,
+  bg: string,
+  topbar: string,
+  sidebar: string,
+  theme: string,
+  onSelected?: () => void,
+};
 
-class ThemeColorBox extends React.PureComponent {
-
-  render() {
-    const {
-      isSelected, onSelected, name, bg, topbar, sidebar, theme,
-    } = this.props;
-
-    return (
-      <div
-        id={`theme-option-${name}`}
-        className={`theme-option-container d-flex flex-column align-items-center ${isSelected && 'active'}`}
-        onClick={onSelected}
-      >
-        <a id={name} role="button" className={`m-0 ${name} theme-button`}>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-            <g>
-              <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill={bg}></path>
-              <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill={topbar}></path>
-              <path d="M -1 15 L15 15 L15 65 L-1 65 L-1 15 Z" fill={sidebar}></path>
-              <path d="M 65 45 L65 65 L45 65 L65 45 Z" fill={theme}></path>
-            </g>
-          </svg>
-        </a>
-        <span className="theme-option-name"><b>{ name }</b></span>
-      </div>
-    );
-  }
-
-}
-
+export const ThemeColorBox = (props: Props): JSX.Element => {
+
+  const {
+    isSelected, onSelected, name, bg, topbar, sidebar, theme,
+  } = props;
+
+  return (
+    <div
+      id={`theme-option-${name}`}
+      className={`theme-option-container d-flex flex-column align-items-center ${isSelected && 'active'}`}
+      onClick={onSelected}
+    >
+      <a id={name} role="button" className={`m-0 ${name} theme-button`}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+          <g>
+            <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill={bg}></path>
+            <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill={topbar}></path>
+            <path d="M -1 15 L15 15 L15 65 L-1 65 L-1 15 Z" fill={sidebar}></path>
+            <path d="M 65 45 L65 65 L45 65 L65 45 Z" fill={theme}></path>
+          </g>
+        </svg>
+      </a>
+      <span className="theme-option-name"><b>{ name }</b></span>
+    </div>
+  );
 
-ThemeColorBox.propTypes = {
-  isSelected: PropTypes.bool.isRequired,
-  onSelected: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  bg: PropTypes.string.isRequired,
-  topbar: PropTypes.string.isRequired,
-  sidebar: PropTypes.string.isRequired,
-  theme: PropTypes.string.isRequired,
 };
-
-export default ThemeColorBox;