[core] rename Drawer to Preview

Drawer is kind of conflict with Doraomon in search

Author: mydearxym

containers/Body/index.js

@@ -47,10 +47,10 @@ const AppHeader = () => {
       <Search onClick={logic.openDoraemon}>
         <SearchIcon />
       </Search>
-      <Notification onClick={logic.openDrawer}>
+      <Notification onClick={logic.openPreview}>
         <NotificationIcon />
       </Notification>
-      <User onClick={logic.openDrawer.bind(this, 'user')}>
+      <User onClick={logic.openPreview.bind(this, 'user')}>
         <UserIcon />
       </User>
     </Header>

containers/Body/logic.js

@@ -5,8 +5,8 @@ const debug = makeDebugger('L:Body')
 
 let store = null
 
-export function openDrawer(type) {
-  store.openDrawer(type)
+export function openPreview(type) {
+  store.openPreview(type)
 }
 
 export function changeTheme(name) {

containers/Drawer/index.js

@@ -5,8 +5,8 @@ const debug = makeDebugger('L:IntroBody')
 
 let store = null
 
-export function openDrawer() {
-  store.openDrawer()
+export function openPreview() {
+  store.openPreview()
 }
 
 export function changeTheme(name) {

containers/IntroBody/logic.js

@@ -0,0 +1,63 @@
+/*
+*
+* Preview
+*
+*/
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+// import Link from 'next/link'
+
+import { makeDebugger } from '../../utils/functions'
+import * as logic from './logic'
+import {
+  PreviewOverlay,
+  PreviewWrapper,
+  PreviewCloser,
+  PreviewContent,
+  PreviewHeader,
+  PreviewBody,
+  Closer,
+  CloserInner,
+} from './styles'
+
+const debug = makeDebugger('C:Preview')
+
+const CloseBtn = ({ type }) => (
+  <PreviewCloser onClick={logic.closePreview}>
+    <Closer type={type}>
+      <CloserInner />
+    </Closer>
+  </PreviewCloser>
+)
+
+const selector = ({ store }) => ({
+  store: store.preview,
+})
+
+class PreviewContainer extends React.Component {
+  componentWillMount() {
+    debug('mount')
+    logic.init(this.props.store)
+  }
+
+  render() {
+    const { visible, type } = this.props.store
+    //     debug('visiblei: ', visible)
+    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>
+          </PreviewContent>
+        </PreviewWrapper>
+      </div>
+    )
+  }
+}
+
+export default inject(selector)(observer(PreviewContainer))

containers/Preview/index.js

@@ -1,14 +1,14 @@
 import { makeDebugger } from '../../utils/functions'
 
-const debug = makeDebugger('L:Drawer')
+const debug = makeDebugger('L:Preview')
 
 let store = null
 
 export function init(selectedStore) {
   store = selectedStore
 }
 
-export function closeDrawer() {
-  debug('closeDrawer')
+export function closePreview() {
+  debug('closePreview')
   store.close()
 }

containers/Drawer/logic.js renamed to containers/Preview/logic.js

@@ -6,7 +6,7 @@ function doTransform(visible) {
   return visible ? 'translate(0px, 0px)' : 'translate(105%, 0px)'
 }
 
-export const DrawerOverlay = styled.div`
+export const PreviewOverlay = styled.div`
   bottom: 0;
   left: 0;
   overflow: auto;
@@ -22,7 +22,7 @@ export const DrawerOverlay = styled.div`
 // display: ${props => (props.visible ? 'block' : 'none')};
 // visibility: ${props => (props.visible ? 'visible' : 'hidden')};
 
-export const DrawerWrapper = styled.div`
+export const PreviewWrapper = styled.div`
   color: ${theme('drawer.font')};
   box-sizing: border-box;
   transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
@@ -40,24 +40,24 @@ export const DrawerWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
 `
-export const DrawerContent = styled.div`
+export const PreviewContent = styled.div`
   width: 90%;
   background-color: ${theme('drawer.bg')};
   height: 100%;
   box-shadow: -5px 0px 14px 0px rgba(189, 189, 189, 0.37);
   padding: 20px;
 `
-export const DrawerHeader = styled.div`
+export const PreviewHeader = styled.div`
   border-bottom: 1px solid tomato;
   text-align: center;
   line-height: 30px;
 `
-export const DrawerBody = styled.div`
+export const PreviewBody = styled.div`
   text-align: center;
   margin-top: 20%;
 `
 
-export const DrawerCloser = styled.div`width: 10%;`
+export const PreviewCloser = styled.div`width: 10%;`
 
 const closeWith = '40px'
 

containers/Drawer/styles/index.js renamed to containers/Preview/styles/index.js

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

containers/Drawer/tests/index.test.js renamed to containers/Preview/tests/index.test.js

@@ -31,6 +31,7 @@
 
 ## TODO
 
+- [ ] rename Drawer -> Preview
 - [ ] use header section footer main ... html tags
 - [ ] [字体问题参考](http://element.eleme.io/2.0/#/zh-CN/component/typography)
 - [ ] [字体](https://github.com/ethantw/Han)

docs/ideas.md

@@ -9,7 +9,7 @@ import MultiLanguage from '../containers/MultiLanguage'
 import Sidebar from '../containers/Sidebar'
 import Body from '../containers/Body'
 
-import Drawer from '../containers/Drawer'
+import Preview from '../containers/Preview'
 import Doraemon from '../containers/Doraemon'
 
 // try to fix safari bug
@@ -46,7 +46,7 @@ export default class Index extends React.Component {
       <Provider store={this.store}>
         <Decrator>
           <MultiLanguage>
-            <Drawer />
+            <Preview />
             <Body route={route} />
             <Sidebar route={route} />
             <Doraemon />