add themeSelector to account preview

Author: mydearxym

components/ThemeSelector/index.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * ThemeSelector
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FlexWrapper, ThemeDot } from './style'
+import { makeDebugger } from '../../utils/functions'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:ThemeSelector:index')
+/* eslint-enable no-unused-vars */
+
+const ThemeSelector = ({ themeKeys, curTheme, changeTheme }) => {
+  return (
+    <FlexWrapper>
+      {themeKeys.map(name => (
+        <ThemeDot
+          key={name}
+          active={curTheme === name}
+          type={name}
+          onClick={changeTheme.bind(this, name)}
+        />
+      ))}
+    </FlexWrapper>
+  )
+}
+
+ThemeSelector.propTypes = {
+  themeKeys: PropTypes.array,
+  curTheme: PropTypes.string,
+  changeTheme: PropTypes.func.isRequired,
+  // https://www.npmjs.com/package/prop-types
+}
+
+ThemeSelector.defaultProps = {
+  themeKeys: [],
+  curTheme: '',
+}
+
+export default ThemeSelector

components/ThemeSelector/style/index.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+import { lighten, darken } from 'polished'
+import { selectorColors } from '../../../utils/themes'
+
+const getBackground = props => {
+  const themeName = props.type
+  return themeName === 'yellow'
+    ? darken(0.05, selectorColors[themeName])
+    : lighten(0.05, selectorColors[themeName])
+}
+
+export const ThemeDot = styled.div`
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  margin-right: 10px;
+  background: ${props => getBackground(props)};
+  position: relative;
+  cursor: pointer;
+  color: ${props =>
+    props.active ? lighten(0.4, props.theme.body_bg) : getBackground(props)};
+
+  &:after {
+    content: '✓';
+    position: absolute;
+    top: 15%;
+    left: 35%;
+  }
+`
+export const FlexWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`

components/ThemeSelector/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ThemeSelector from '../index'
+
+describe('<ThemeSelector />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false)
+  })
+})

containers/Header/index.js

@@ -58,7 +58,7 @@ class HeaderContainer extends React.Component {
         <Notification onClick={logic.openPreview}>
           <HeaderIcon path={getSVGIconPath('notification')} />
         </Notification>
-        <User onClick={logic.openPreview.bind(this, 'user')}>
+        <User onClick={logic.openPreview.bind(this, 'account')}>
           <HeaderIcon path={getSVGIconPath('header_user')} />
         </User>
       </Header>

containers/Preview/index.js

@@ -11,6 +11,9 @@ import { inject, observer } from 'mobx-react'
 
 import { makeDebugger, storeSelector } from '../../utils/functions'
 import * as logic from './logic'
+
+import ThemeSelector from '../../components/ThemeSelector'
+
 import {
   PreviewOverlay,
   PreviewWrapper,
@@ -39,16 +42,27 @@ class PreviewContainer extends React.Component {
   }
 
   render() {
-    const { visible, type } = this.props.preview
-    //     debug('visiblei: ', visible)
+    const { visible, type, themeKeys, curTheme } = this.props.preview
+
     return (
       <div>
         <PreviewOverlay visible={visible} onClick={logic.closePreview} />
         <PreviewWrapper visible={visible} type={type}>
           <CloseBtn type={type} />
           <PreviewContent>
             <PreviewHeader>Preview header</PreviewHeader>
-            <PreviewBody>Preview body</PreviewBody>
+            <PreviewBody>
+              <h2>Preview body</h2>
+              {type === 'account' ? (
+                <ThemeSelector
+                  themeKeys={themeKeys}
+                  curTheme={curTheme}
+                  changeTheme={logic.changeTheme}
+                />
+              ) : (
+                <div>post previewer</div>
+              )}
+            </PreviewBody>
           </PreviewContent>
         </PreviewWrapper>
       </div>

containers/Preview/logic.js

@@ -4,11 +4,15 @@ const debug = makeDebugger('L:Preview')
 
 let preview = null
 
-export function init(selectedStore) {
-  preview = selectedStore
+export function changeTheme(name) {
+  preview.changeTheme(name)
 }
 
 export function closePreview() {
   debug('closePreview')
   preview.close()
 }
+
+export function init(selectedStore) {
+  preview = selectedStore
+}

containers/Preview/styles/index.js

@@ -23,14 +23,14 @@ export const PreviewOverlay = styled.div`
 // visibility: ${props => (props.visible ? 'visible' : 'hidden')};
 
 export const PreviewWrapper = styled.div`
-  color: ${theme('drawer.font')};
+  color: ${theme('preview.font')};
   box-sizing: border-box;
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   font-family: Roboto, sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   border-radius: 0px;
   height: 100%;
-  width: ${props => (props.type === 'user' ? '40%' : '70%')};
+  width: ${props => (props.type === 'account' ? '40%' : '70%')};
   right: 0;
   position: fixed;
   transform: ${props => doTransform(props.visible)};
@@ -42,7 +42,7 @@ export const PreviewWrapper = styled.div`
 `
 export const PreviewContent = styled.div`
   width: 90%;
-  background-color: ${theme('drawer.bg')};
+  background-color: ${theme('preview.bg')};
   height: 100%;
   box-shadow: -5px 0px 14px 0px rgba(189, 189, 189, 0.37);
   padding: 20px;
@@ -64,7 +64,7 @@ const closeWith = '40px'
 export const CloserInner = styled.div`
   width: ${closeWith};
   height: 45px;
-  background-color: ${theme('drawer.bg')};
+  background-color: ${theme('preview.bg')};
   transform-origin: right center 0;
   transform: rotate3d(0, 1, 0, -30deg);
   box-shadow: -7px 4px 19px 0px rgba(50, 50, 50, 0.2);
@@ -77,15 +77,15 @@ export const Closer = styled.div`
   height: ${closeWith};
   perspective: ${closeWith};
   cursor: pointer;
-  display: ${props => (props.type === 'user' ? 'none' : 'block')};
+  display: ${props => (props.type === 'account' ? 'none' : 'block')};
 
   &:after {
     content: '✕';
     position: absolute;
     top: 9px;
     right: 6px;
     font-size: large;
-    color: ${theme('drawer.font')};
+    color: ${theme('preview.font')};
     font-weight: lighter;
   }
 `

stores/PreviewStore/index.js

@@ -12,24 +12,35 @@ import { types as t, getParent } from 'mobx-state-tree'
 const PreviewStore = t
   .model('PreviewStore', {
     visible: t.optional(t.boolean, false),
-    type: t.optional(t.enumeration('visibleType', ['post', 'user']), 'post'),
+    type: t.optional(t.enumeration('visibleType', ['post', 'account']), 'post'),
     // header:
     // body:
   })
   .views(self => ({
     get root() {
       return getParent(self)
     },
+
+    get themeKeys() {
+      return self.root.theme.themeKeys
+    },
+    get curTheme() {
+      return self.root.theme.curTheme
+    },
   }))
   .actions(self => ({
     open(type) {
       self.visible = !self.visible
-      self.type = type === 'user' ? 'user' : 'post'
+      self.type = type === 'account' ? 'account' : 'post'
     },
 
     close() {
       self.visible = false
     },
+
+    changeTheme(name) {
+      self.root.changeTheme(name)
+    },
   }))
 
 export default PreviewStore

utils/scripts/generators/component/stateless.js.hbs

@@ -6,7 +6,6 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-// import styled from 'styled-components'
 
 {{#if wantI18n}}
 import { FormattedMessage as I18n } from 'react-intl'
@@ -30,8 +29,8 @@ const {{ properCase name }} = (props) => {
 
 {{ properCase name }}.propTypes = {
   // https://www.npmjs.com/package/prop-types
-};
+}
 
-{{ properCase name }}.defaultProps = {};
+{{ properCase name }}.defaultProps = {}
 
 export default {{ properCase name }}

utils/themes/Brown.js

@@ -29,7 +29,7 @@ const Slack = {
     text: darken(0.1, fontColor),
     active_bg: darken(0.1, fontColor),
   },
-  drawer: {
+  preview: {
     font: fontColor,
     bg: mainBg,
   },