Refine react code structure

Related to #CE-9

https://jira.hyperledger.org/browse/CE-9

Change-Id: I5ea0d2fdbb3dadc457a09e654df4d127a59479c5
Signed-off-by: Haitao Yue <hightall@me.com>

src/themes/react/static/js/components/DataTable/AnimTableBody.js

@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react'
+import { TweenOneGroup } from 'rc-tween-one'
+
+const enterAnim = [
+  {
+    opacity: 0,
+    x: 30,
+    backgroundColor: '#fffeee',
+    duration: 0,
+  }, {
+    height: 0,
+    duration: 200,
+    type: 'from',
+    delay: 250,
+    ease: 'easeOutQuad',
+    onComplete: (e) => {
+      e.target.style.height = 'auto'
+    },
+  }, {
+    opacity: 1,
+    x: 0,
+    duration: 250,
+    ease: 'easeOutQuad',
+  }, {
+    delay: 1000,
+    backgroundColor: '#fff',
+  },
+]
+
+const leaveAnim = [
+  {
+    duration: 250,
+    x: -30,
+    opacity: 0,
+  }, {
+    height: 0,
+    duration: 200,
+    ease: 'easeOutQuad',
+  },
+]
+
+const AnimTableBody = ({ body, page = 1, current }) => {
+  if (current !== +page) {
+    return body
+  }
+
+  return (
+    <TweenOneGroup
+      component="tbody"
+      className={body.props.className}
+      enter={enterAnim}
+      leave={leaveAnim}
+      appear={false}
+    >
+      {body.props.children}
+    </TweenOneGroup>
+  )
+}
+
+AnimTableBody.propTypes = {
+  body: PropTypes.element,
+  page: PropTypes.any,
+  current: PropTypes.number.isRequired,
+}
+
+export default AnimTableBody

src/themes/react/static/js/components/DataTable/DataTable.js

@@ -0,0 +1,111 @@
+import React, { PropTypes } from 'react'
+import { Table } from 'antd'
+import { request } from '../../utils'
+import lodash from 'lodash'
+import './DataTable.less'
+
+class DataTable extends React.Component {
+  constructor (props) {
+    super(props)
+    const { dataSource, pagination = {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `共 ${total} 条`,
+      current: 1,
+      total: 100 },
+    } = props
+    this.state = {
+      loading: false,
+      dataSource,
+      fetchData: {},
+      pagination,
+    }
+  }
+
+  componentDidMount () {
+    if (this.props.fetch) {
+      this.fetch()
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const staticNextProps = lodash.cloneDeep(nextProps)
+    delete staticNextProps.columns
+    const { columns, ...otherProps } = this.props
+
+    if (!lodash.isEqual(staticNextProps, otherProps)) {
+      this.props = nextProps
+      this.fetch()
+    }
+  }
+
+  handleTableChange = (pagination, filters, sorter) => {
+    const pager = this.state.pagination
+    pager.current = pagination.current
+    this.setState({
+      pagination: pager,
+      fetchData: {
+        results: pagination.pageSize,
+        page: pagination.current,
+        sortField: sorter.field,
+        sortOrder: sorter.order,
+        ...filters,
+      },
+    }, () => {
+      this.fetch()
+    })
+  }
+
+  fetch = () => {
+    const { fetch: { url, data, dataKey } } = this.props
+    const { fetchData } = this.state
+    this.setState({ loading: true })
+    this.promise = request({
+      url,
+      data: {
+        ...data,
+        ...fetchData,
+      },
+    }).then((result) => {
+      if (!this.refs.DataTable) {
+        return
+      }
+      const { pagination } = this.state
+      pagination.total = result.total || pagination.total
+      this.setState({
+        loading: false,
+        dataSource: dataKey ? result[dataKey] : result.data,
+        pagination,
+      })
+    })
+  }
+
+  render () {
+    const { fetch, ...tableProps } = this.props
+    const { loading, dataSource, pagination } = this.state
+
+    return (<Table
+      ref="DataTable"
+      bordered
+      loading={loading}
+      onChange={this.handleTableChange}
+      {...tableProps}
+      pagination={pagination}
+      dataSource={dataSource}
+    />)
+  }
+}
+
+
+DataTable.propTypes = {
+  fetch: PropTypes.object,
+  rowKey: PropTypes.string,
+  pagination: React.PropTypes.oneOfType([
+    React.PropTypes.bool,
+    React.PropTypes.object,
+  ]),
+  columns: PropTypes.array,
+  dataSource: PropTypes.array,
+}
+
+export default DataTable

src/themes/react/static/js/components/DataTable/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DataTable",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DataTable.js"
+}

src/themes/react/static/js/components/DropOption/DropOption.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import { Dropdown, Button, Icon, Menu } from 'antd'
+
+const DropOption = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => {
+  const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)
+  return (<Dropdown
+    overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
+    {...dropdownProps}
+  >
+    <Button style={{ border: 'none', ...buttonStyle }}>
+      <Icon style={{ marginRight: 2 }} type="bars" />
+      <Icon type="down" />
+    </Button>
+  </Dropdown>)
+}
+
+DropOption.propTypes = {
+  onMenuClick: PropTypes.func,
+  menuOptions: PropTypes.array.isRequired,
+  buttonStyle: PropTypes.object,
+  dropdownProps: PropTypes.object,
+}
+
+export default DropOption

src/themes/react/static/js/components/DropOption/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DropOption",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DropOption.js"
+}

src/themes/react/static/js/components/Editor/Editor.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Editor } from 'react-draft-wysiwyg'
+import styles from './Editor.less'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+
+
+const DraftEditor = (props) => {
+  return (<Editor toolbarClassName={styles.toolbar} wrapperClassName={styles.wrapper} editorClassName={styles.editor} {...props} />)
+}
+
+export default DraftEditor

src/themes/react/static/js/components/Editor/Editor.less

@@ -0,0 +1,111 @@
+.wrapper {
+  height: 500px;
+
+  :global {
+    .rdw-dropdownoption-default {
+      padding: 6px;
+    }
+
+    .rdw-dropdown-optionwrapper {
+      box-sizing: content-box;
+      width: 100%;
+      border-radius: 0 0 2px 2px;
+    }
+
+    .rdw-inline-wrapper {
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      .rdw-option-wrapper {
+        margin-bottom: 6px;
+      }
+    }
+
+    .rdw-option-active {
+      box-shadow: 1px 1px 0 #e8e8e8 inset;
+    }
+
+    .rdw-dropdown-optionwrapper {
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    .rdw-colorpicker-option {
+      box-shadow: none;
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-emoji-modal,
+    .rdw-image-modal,
+    .rdw-link-modal {
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-link-modal {
+      height: auto;
+    }
+
+    .rdw-emoji-modal {
+      width: 214px;
+    }
+
+    .rdw-colorpicker-modal {
+      width: auto;
+    }
+
+    .rdw-embedded-modal-btn,
+    .rdw-image-modal-btn,
+    .rdw-link-modal-btn {
+      height: 32px;
+      margin-top: 12px;
+    }
+
+    .rdw-embedded-modal-input,
+    .rdw-embedded-modal-size-input,
+    .rdw-link-modal-input {
+      padding: 2px 6px;
+      height: 32px;
+    }
+
+    .rdw-dropdown-selectedtext {
+      color: #000;
+    }
+
+    .rdw-dropdown-wrapper,
+    .rdw-option-wrapper {
+      min-width: 36px;
+      transition: all 0.2s ease;
+      height: 30px;
+
+      &:active {
+        box-shadow: 1px 1px 0 #e8e8e8 inset;
+      }
+
+      &:hover {
+        box-shadow: 1px 1px 0 #e8e8e8;
+      }
+    }
+
+    .rdw-dropdown-wrapper {
+      min-width: 60px;
+    }
+
+    .rdw-editor-main {
+      box-sizing: border-box;
+    }
+  }
+
+  .editor {
+    border: 1px solid #F1F1F1;
+    padding: 5px;
+    border-radius: 2px;
+    height: auto;
+    min-height: 200px;
+  }
+
+  .toolbar {}
+}

src/themes/react/static/js/components/Editor/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Editor",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Editor.js"
+}

src/themes/react/static/js/components/Iconfont/Iconfont.js

@@ -0,0 +1,14 @@
+import React, { PropTypes } from 'react'
+import './iconfont.less'
+
+const Iconfont = ({ type }) => <span
+  dangerouslySetInnerHTML={{
+    __html: `<svg class="iconfont" aria-hidden="true"><use xlink:href="#anticon-${type}"></use></svg>`,
+  }}
+/>
+
+Iconfont.propTypes = {
+  type: PropTypes.string,
+}
+
+export default Iconfont

src/themes/react/static/js/components/Iconfont/iconfont.less

@@ -0,0 +1,8 @@
+:global .iconfont {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+  font-size: 16px;
+}

src/themes/react/static/js/components/Iconfont/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Iconfont",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Iconfont.js"
+}