adjust colorBox

src/client/js/components/Admin/Customize/ThemeColorBox.jsx

@@ -1,27 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
 
 class ThemeColorBox extends React.Component {
 
-  isThemeSelected(name) {
-    return (this.props.adminCustomizeContainer.state.currentTheme === name);
-  }
-
   render() {
     const { name } = this.props;
 
     return (
       <div
         id={`theme-option-${name}`}
-        className={`theme-option-container d-flex flex-column align-items-center ${this.isThemeSelected(name) && 'active'}`}
-        onClick={() => this.props.adminCustomizeContainer.switchThemeType(name)}
+        className={`theme-option-container d-flex flex-column align-items-center ${this.props.isSelected && 'active'}`}
+        onClick={this.props.onSelected}
       >
         <a
           className={`m-0 ${name} theme-button`}
@@ -42,19 +32,15 @@ class ThemeColorBox extends React.Component {
 
 }
 
-const ThemeColorBoxWrapper = (props) => {
-  return createSubscribedElement(ThemeColorBox, props, [AppContainer, AdminCustomizeContainer]);
-};
 
 ThemeColorBox.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 
+  isSelected: PropTypes.bool.isRequired,
+  onSelected: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   bg: PropTypes.string.isRequired,
   topbar: PropTypes.string.isRequired,
   theme: PropTypes.string.isRequired,
 };
 
-export default withTranslation()(ThemeColorBoxWrapper);
+export default ThemeColorBox;