Adding error message.

2026-08-13 12:40:11 +08:00 · 2016-12-12 18:10:47 -05:00
parent 48b1f7fc2b
commit 4a4b92299c
3 changed files with 134 additions and 96 deletions
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component, PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
@@ -8,108 +8,136 @@ import {
  ListItemContent,
  ListItemAction,
  Textfield,
-  Checkbox
+  Checkbox,
+  Icon
 } from 'react-mdl';

-const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-  const charCountEnable = !charCountChecked;
-  updateSettings({charCountEnable});
-};
+class CommentSettings extends Component {

-const updateCharCount = (updateSettings) => (event) => {
-  const charCount = event.target.value;
-  if (charCount.match(/[^0-9]/)) {
-    //Show error
+  state = {
+    charCountError: false
  }
-  updateSettings({charCount: charCount});
-};

-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'pre' ? 'post' : 'pre';
-  updateSettings({moderation});
-};
+  static propTypes = {
+    updateSettings: PropTypes.func.isRequired,
+    settings: PropTypes.object.isRequired
+  }

-const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
-  const infoBoxEnable = !infoBox;
-  updateSettings({infoBoxEnable});
-};
+  updateCharCountEnable = (updateSettings, charCountChecked) => () => {
+    const charCountEnable = !charCountChecked;
+    updateSettings({charCountEnable});
+  };

-const updateInfoBoxContent = (updateSettings) => (event) => {
-  const infoBoxContent =  event.target.value;
-  updateSettings({infoBoxContent});
-};
+  updateCharCount = (updateSettings) => (event) => {
+    const charCount = event.target.value;
+    if (charCount.match(/[^0-9]/)) {
+      this.setState({charCountError: true});
+    } else {
+      this.setState({charCountError: false});
+    }
+    updateSettings({charCount: charCount});
+  };

-const updateClosedMessage = (updateSettings) => (event) => {
-  const closedMessage = event.target.value;
-  updateSettings({closedMessage});
-};
+  updateModeration = (updateSettings, mod) => () => {
+    const moderation = mod === 'pre' ? 'post' : 'pre';
+    updateSettings({moderation});
+  };

-const CommentSettings = (props) => <List>
-  <ListItem className={`${styles.configSetting} ${props.settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
-    <ListItemAction>
-      <Checkbox
-        onClick={updateModeration(props.updateSettings, props.settings.moderation)}
-        checked={props.settings.moderation === 'pre'} />
-    </ListItemAction>
-    <ListItemContent>
-    <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
-    <p className={props.settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
-      {lang.t('configure.enable-pre-moderation-text')}
-    </p>
-  </ListItemContent>
-  </ListItem>
-  <ListItem className={`${styles.configSetting} ${props.settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-    <ListItemAction>
-      <Checkbox
-        onClick={updateCharCountEnable(props.updateSettings, props.settings.charCountEnable)}
-        checked={props.settings.charCountEnable} />
-    </ListItemAction>
-    <ListItemContent>
-      <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
-      <p className={props.settings.charCountEnable ? '' : styles.disabledSettingText}>
-        <span>{lang.t('configure.comment-count-text-pre')}</span>
-        <input type='text'
-          className={styles.charCountTexfield}
-          htmlFor='charCount'
-          onChange={updateCharCount(props.updateSettings)}
-          value={props.settings.charCount}/>
-        <span>{lang.t('configure.comment-count-text-post')}</span>
-      </p>
-    </ListItemContent>
-  </ListItem>
-  <ListItem threeLine className={`${styles.configSettingInfoBox} ${props.settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-    <ListItemAction>
-      <Checkbox
-        onClick={updateInfoBoxEnable(props.updateSettings, props.settings.infoBoxEnable)}
-        checked={props.settings.infoBoxEnable} />
-    </ListItemAction>
-    <ListItemContent>
-      {lang.t('configure.include-comment-stream')}
-      <p>
-        {lang.t('configure.include-comment-stream-desc')}
-      </p>
-    </ListItemContent>
-  </ListItem>
-  <ListItem className={`${styles.configSettingInfoBox} ${props.settings.infoBoxEnable ? null : styles.hidden}`} >
-    <ListItemContent>
-      <Textfield
-        onChange={updateInfoBoxContent(props.updateSettings)}
-        value={props.settings.infoBoxContent}
-        label={lang.t('configure.include-text')}
-        rows={3}/>
-    </ListItemContent>
-  </ListItem>
-  <ListItem className={styles.configSettingInfoBox}>
-    <ListItemContent>
-      {lang.t('configure.closed-comments-desc')}
-      <Textfield
-        onChange={updateClosedMessage(props.updateSettings)}
-        value={props.settings.closedMessage}
-        label={lang.t('configure.closed-comments-label')}
-        rows={3}/>
-    </ListItemContent>
-  </ListItem>
-</List>;
+  updateInfoBoxEnable = (updateSettings, infoBox) => () => {
+    const infoBoxEnable = !infoBox;
+    updateSettings({infoBoxEnable});
+  };
+
+  updateInfoBoxContent = (updateSettings) => (event) => {
+    const infoBoxContent =  event.target.value;
+    updateSettings({infoBoxContent});
+  };
+
+  updateClosedMessage = (updateSettings) => (event) => {
+    const closedMessage = event.target.value;
+    updateSettings({closedMessage});
+  };
+
+  render() {
+
+    const {updateSettings, settings} = this.props;
+
+    return <List>
+      <ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateModeration(updateSettings, settings.moderation)}
+            checked={settings.moderation === 'pre'} />
+        </ListItemAction>
+        <ListItemContent>
+        <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+        <p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
+          {lang.t('configure.enable-pre-moderation-text')}
+        </p>
+      </ListItemContent>
+      </ListItem>
+      <ListItem className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateCharCountEnable(updateSettings, settings.charCountEnable)}
+            checked={settings.charCountEnable} />
+        </ListItemAction>
+        <ListItemContent>
+          <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
+          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
+            <span>{lang.t('configure.comment-count-text-pre')}</span>
+            <input type='text'
+              className={styles.charCountTexfield}
+              htmlFor='charCount'
+              onChange={this.updateCharCount(updateSettings)}
+              value={settings.charCount}/>
+            <span>{lang.t('configure.comment-count-text-post')}</span>
+              {
+                this.state.charCountError &&
+                <span className={styles.settingsError}>
+                  <br/>
+                  <Icon name="error_outline"/>
+                  {lang.t('configure.comment-count-error')}
+                </span>
+              }
+          </p>
+        </ListItemContent>
+      </ListItem>
+      <ListItem threeLine className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
+            checked={settings.infoBoxEnable} />
+        </ListItemAction>
+        <ListItemContent>
+          {lang.t('configure.include-comment-stream')}
+          <p>
+            {lang.t('configure.include-comment-stream-desc')}
+          </p>
+        </ListItemContent>
+      </ListItem>
+      <ListItem className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+        <ListItemContent>
+          <Textfield
+            onChange={this.updateInfoBoxContent(updateSettings)}
+            value={settings.infoBoxContent}
+            label={lang.t('configure.include-text')}
+            rows={3}/>
+        </ListItemContent>
+      </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
+        <ListItemContent>
+          {lang.t('configure.closed-comments-desc')}
+          <Textfield
+            onChange={this.updateClosedMessage(updateSettings)}
+            value={settings.closedMessage}
+            label={lang.t('configure.closed-comments-label')}
+            rows={3}/>
+        </ListItemContent>
+      </ListItem>
+    </List>;
+  }
+}

 export default CommentSettings;

@@ -18,11 +18,20 @@
 .configSetting {
  border: 1px solid #ccc;
  border-radius: 4px;
-  height: 90px;
+  height: 95px;
  margin-bottom: 10px;
  align-items: flex-start;
 }

+.settingsError {
+  color: #d50000;
+}
+
+.settingsError i {
+  font-size: 14px;
+  margin-right: 3px;
+}
+
 .settingsHeader {
  margin-top: 3px;
  margin-bottom: 10px;
@@ -59,7 +59,8 @@
      "closed-comments-label": "Write a message...",
      "comment-count-header": "Limit Content Length",
      "comment-count-text-pre":  "Comments will be limited to ",
-      "comment-count-text-post": " characters."
+      "comment-count-text-post": " characters.",
+      "comment-count-error": "Please enter a valid number."
    },
    "bandialog": {
      "ban_user": "Ban User?",