Fixed #213

webdevstar · webdevstar · commit 1a05f29db029 · 2018-12-02T21:40:41.000+08:00
diff --git a/src/admin/client/modules/app/head/components/appBar.js b/src/admin/client/modules/app/head/components/appBar.js
@@ -5,8 +5,8 @@ import messages from 'lib/text'
 import ProductCategoryHead from 'modules/product-categories/head/index'
 import CustomerGroupHead from 'modules/customer-groups/head/index'
 import CustomersHead from 'modules/customers/head/index'
-import ProductsHead from 'modules/products/list/head/index'
-import ProductHead from 'modules/products/edit/head/index'
+import ProductsHead from 'modules/products/head-list/index'
+import ProductHead from 'modules/products/head-edit/index'
 import OrdersHead from 'modules/orders/head/index'
 import PaymentMethodHead from 'modules/settings/paymentsEdit/head'
 import ShippingMethodHead from 'modules/settings/shippingEdit/head'
diff --git a/src/admin/client/modules/product-categories/head/components/buttons.js b/src/admin/client/modules/product-categories/head/components/buttons.js
@@ -84,17 +84,17 @@ export default class Buttons extends React.Component {
     ];
 
     return (
-      <span style={{ marginRight: 12 }}>
-        <IconButton touch={true} tooltip={messages.actions_moveUp} onTouchTap={onMoveUp}>
+      <span>
+        <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_moveUp} onTouchTap={onMoveUp}>
           <FontIcon color="#fff" className="material-icons">arrow_upward</FontIcon>
         </IconButton>
-        <IconButton touch={true} tooltip={messages.actions_moveDown} onTouchTap={onMoveDown}>
+        <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_moveDown} onTouchTap={onMoveDown}>
           <FontIcon color="#fff" className="material-icons">arrow_downward</FontIcon>
         </IconButton>
-        <IconButton touch={true} tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
+        <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
           <FontIcon color="#fff" className="material-icons">delete</FontIcon>
         </IconButton>
-        <IconButton touch={true} tooltip={messages.actions_moveTo} onTouchTap={this.showMoveTo}>
+        <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_moveTo} onTouchTap={this.showMoveTo}>
           <FontIcon color="#fff" className="material-icons">move_to_inbox</FontIcon>
         </IconButton>
         <Dialog
diff --git a/src/admin/client/modules/products/edit/inventory/components/form.js b/src/admin/client/modules/products/edit/inventory/components/form.js
@@ -166,12 +166,12 @@ class ProductInventoryForm extends React.Component {
                     marginTop: 10,
                     marginBottom: 10
                   }}/>
-                  <Field name="enabled" component={CustomToggle} label={messages.enabled}/>
+                  <Field name="discontinued" component={CustomToggle} label={messages.products_discontinued}/>
                   <Divider style={{
                     marginTop: 10,
                     marginBottom: 10
                   }}/>
-                  <Field name="discontinued" component={CustomToggle} label={messages.products_discontinued}/>
+                  <Field name="enabled" component={CustomToggle} label={messages.enabled}/>
                 </div>
                 <div className="buttons-box">
                   <Link to={'/admin/products'}>
diff --git a/src/admin/client/modules/products/head-edit/components/buttons.js b/src/admin/client/modules/products/head-edit/components/buttons.js
@@ -44,7 +44,7 @@ export default class Buttons extends React.Component {
 
     return (
       <span>
-        <IconButton touch={true} tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
+        <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
           <FontIcon color="#fff" className="material-icons">delete</FontIcon>
         </IconButton>
         <Dialog
diff --git a/src/admin/client/modules/products/head-edit/index.js b/src/admin/client/modules/products/head-edit/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { deleteCurrentProduct } from '../../actions'
+import { deleteCurrentProduct } from '../actions'
 import Buttons from './components/buttons'
 
 const mapStateToProps = (state) => {
diff --git a/src/admin/client/modules/products/head-list/components/buttons.js b/src/admin/client/modules/products/head-list/components/buttons.js
@@ -90,10 +90,10 @@ export default class Buttons extends React.Component {
         <Search value={search} setSearch={setSearch} />
         {selectedCount > 0 &&
           <span>
-            <IconButton touch={true} tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
+            <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_delete} onTouchTap={this.showDelete}>
               <FontIcon color="#fff" className="material-icons">delete</FontIcon>
             </IconButton>
-            <IconButton touch={true} tooltip={messages.actions_moveTo} onTouchTap={this.showMoveTo}>
+            <IconButton touch={true} tooltipPosition="bottom-left" tooltip={messages.actions_moveTo} onTouchTap={this.showMoveTo}>
               <FontIcon color="#fff" className="material-icons">move_to_inbox</FontIcon>
             </IconButton>
             <Dialog
diff --git a/src/admin/client/modules/products/head-list/components/search.js b/src/admin/client/modules/products/head-list/components/search.js
diff --git a/src/admin/client/modules/products/head-list/index.js b/src/admin/client/modules/products/head-list/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { fetchProducts, deleteProducts, setCategory, setFilter } from '../../actions'
+import { fetchProducts, deleteProducts, setCategory, setFilter } from '../actions'
 import Buttons from './components/buttons'
 
 const mapStateToProps = (state) => {
diff --git a/src/admin/client/modules/settings/pages/edit/components/form.js b/src/admin/client/modules/settings/pages/edit/components/form.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import {Field, reduxForm} from 'redux-form'
-import {TextField, Toggle} from 'redux-form-material-ui'
+import {TextField} from 'redux-form-material-ui'
 
+import { CustomToggle } from 'modules/shared/form'
+import Editor from 'modules/shared/editor'
 import messages from 'lib/text'
 import style from './style.css'
 import api from 'lib/api'
-import Editor from 'modules/shared/editor'
 
 import Divider from 'material-ui/Divider';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -73,7 +74,7 @@ class EditPageForm extends React.Component {
             <Field name="meta_title" component={TextField} floatingLabelText={messages.pageTitle} fullWidth={true}/><br/>
             <Field name="meta_description" component={TextField} floatingLabelText={messages.metaDescription} fullWidth={true}/>
             <div style={{maxWidth: 256}}>
-              <Field component={Toggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}} disabled={initialValues.is_system}/>
+              <Field component={CustomToggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}} disabled={initialValues.is_system}/>
             </div>
           </div>
           <div style={{
diff --git a/src/admin/client/modules/settings/paymentsEdit/components/form.js b/src/admin/client/modules/settings/paymentsEdit/components/form.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import {Field, reduxForm} from 'redux-form'
-import {TextField, SelectField, Toggle} from 'redux-form-material-ui'
+import {TextField, SelectField} from 'redux-form-material-ui'
 
+import { CustomToggle } from 'modules/shared/form'
 import messages from 'lib/text'
 import style from './style.css'
 
@@ -101,7 +102,7 @@ class EditPaymentMethodForm extends React.Component {
               <Field component={TextField} fullWidth={true} name="description" multiLine={true} floatingLabelText={messages.description}/>
             </div>
             <div style={{maxWidth: 256}}>
-              <Field component={Toggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}}/>
+              <Field component={CustomToggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}}/>
               <Divider />
             </div>
             <div className="blue-title">{messages.settings_conditions}</div>
diff --git a/src/admin/client/modules/settings/shippingEdit/components/form.js b/src/admin/client/modules/settings/shippingEdit/components/form.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import {Field, reduxForm} from 'redux-form'
-import {TextField, SelectField, Toggle} from 'redux-form-material-ui'
+import {TextField, SelectField} from 'redux-form-material-ui'
 
+import { CustomCustomToggle } from 'modules/shared/form'
 import messages from 'lib/text'
 import style from './style.css'
 
@@ -50,7 +51,7 @@ class EditShippingMethodForm extends React.Component {
               <Field component={TextField} name="price" type="number" floatingLabelText={messages.settings_shippingRate + ` (${settings.currency_symbol})`}/>
             </div>
             <div style={{maxWidth: 256}}>
-              <Field component={Toggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}}/>
+              <Field component={CustomToggle} name="enabled" label={messages.enabled} style={{paddingTop:16, paddingBottom:16}}/>
               <Divider />
             </div>
             <div className="blue-title">{messages.settings_conditions}</div>
diff --git a/src/admin/client/modules/shared/editor/index.js b/src/admin/client/modules/shared/editor/index.js
@@ -12,19 +12,48 @@ const config = {
     toolbar2: 'undo redo | forecolor paste removeformat table | outdent indent | preview code'
   }
 
-const Editor = ({ input: { onChange, value } }) =>
-  <TinyMCE
-    content={value}
-    config={{
-      language: settings.language,
-      themes: config.themes,
-      inline: config.inline,
-      plugins: config.plugins,
-      toolbar1: config.toolbar1,
-      toolbar2: config.toolbar2,
-      menubar: false
-    }}
-    onChange={e => {onChange(e.target.getContent())}}
-  />
+export default class Editor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.input.value
+    }
+    this.onChange = this.onChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.state.value !== nextProps.input.value) {
+      this.setState({
+        value: nextProps.input.value
+      });
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.value !== nextProps.input.value;
+  }
+
+  onChange = (e) => {
+    const content = e.target.getContent();
+    this.setState({ value: content });
+    this.props.input.onChange(content);
+  }
 
-export default Editor
+  render() {
+    return (
+      <TinyMCE
+        content={this.state.value}
+        config={{
+          language: settings.language,
+          themes: config.themes,
+          inline: config.inline,
+          plugins: config.plugins,
+          toolbar1: config.toolbar1,
+          toolbar2: config.toolbar2,
+          menubar: false
+        }}
+        onChange={this.onChange}
+      />
+    )
+  }
+}
diff --git a/src/admin/client/modules/shared/form/index.js b/src/admin/client/modules/shared/form/index.js
@@ -1,11 +1,13 @@
 import React from 'react'
 import Toggle from 'material-ui/Toggle';
 
-export const CustomToggle = ({ input, label, className }) => (
+export const CustomToggle = ({ input, label, className = '', disabled = false, style }) => (
   <Toggle
     label={label}
     toggled={input.value ? true : false}
     onToggle={input.onChange}
     className={className}
+    disabled={disabled}
+    style={style}
   />
 )
