Merge pull request #2014 from hovoodd/collapsible-list

Made Banned/Suspended Word Lists collapsible in Admin > Configure

client/coral-admin/src/routes/Configure/components/Wordlist.js

@@ -6,7 +6,7 @@ import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
   <div>
-    <ConfigureCard title={t('configure.banned_words_title')}>
+    <ConfigureCard collapsible title={t('configure.banned_words_title')}>
       <p>{t('configure.banned_word_text')}</p>
       <TagsInput
         value={bannedWords}
@@ -16,7 +16,7 @@ const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
         onChange={tags => onChangeWordlist('banned', tags)}
       />
     </ConfigureCard>
-    <ConfigureCard title={t('configure.suspect_word_title')}>
+    <ConfigureCard collapsible title={t('configure.suspect_word_title')}>
       <p>{t('configure.suspect_word_text')}</p>
       <TagsInput
         value={suspectWords}

client/coral-framework/components/ConfigureCard.css

@@ -1,49 +1,48 @@
 .card {
-  margin-bottom: 20px;
-  align-items: flex-start;
-  min-height: 100px;
   max-width: 600px;
+  min-height: 100px;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 20px;
   overflow: visible;
 }
 
+.collapsibleCard {
+  min-height: auto;
+}
+
+.enabledCard {
+  border-left: 7px solid #00796b;
+}
+
+.action {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.wrapper {
+  flex-grow: 1;
+}
+
 .header {
-  margin-top: 3px;
-  margin-bottom: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 2px;
+}
+
+.title {
   font-size: 18px;
   font-weight: 500;
 }
 
-.wrapper {
-  width: 100%;
+.body {
+  margin-top: 7px;
   font-size: 14px;
   letter-spacing: 0;
 }
 
-.action {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 20px;
-}
-
-.content {
-  display: inline-block;
-  padding: 0px 30px;
-  box-sizing: border-box;
-}
-
-.enabledSetting {
-  border-left-color: #00796b;
-  border-left-style: solid;
-  border-left-width: 7px;
-}
-
-.disabledSetting {
-  padding-left: 22px;
-}
-
-.disabledSettingText {
+.disabledBody {
   color: #ccc;
   pointer-events: none;
 }

client/coral-framework/components/ConfigureCard.js

@@ -1,46 +1,69 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import styles from './ConfigureCard.css';
+import classnames from 'classnames/bind';
 import { Card } from 'coral-ui';
-import { Checkbox } from 'react-mdl';
-import cn from 'classnames';
+import { Checkbox, IconButton } from 'react-mdl';
 
-const ConfigureCard = ({
-  title,
-  children,
-  className,
-  onCheckbox,
-  checked,
-  ...rest
-}) => (
-  <Card
-    {...rest}
-    className={cn(styles.card, className, {
-      [styles.enabledSetting]: checked === true,
-      [styles.disabledSetting]: checked === false,
-    })}
-  >
-    {checked !== undefined && (
-      <div className={styles.action}>
-        <Checkbox onChange={onCheckbox} checked={checked} />
-      </div>
-    )}
-    <div
-      className={cn(styles.wrapper, {
-        [styles.content]: checked !== undefined,
-      })}
-    >
-      <div className={styles.header}>{title}</div>
-      <div
-        className={cn({
-          [styles.disabledSettingText]: checked === false,
+import styles from './ConfigureCard.css';
+
+const cn = classnames.bind(styles);
+
+class ConfigureCard extends PureComponent {
+  state = {
+    isOpen: !this.props.collapsible,
+  };
+
+  toggle = () => this.setState({ isOpen: !this.state.isOpen });
+
+  render() {
+    const {
+      title,
+      children,
+      className,
+      onCheckbox,
+      checked,
+      collapsible,
+      ...rest
+    } = this.props;
+
+    const { isOpen } = this.state;
+
+    const iconName = isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+
+    return (
+      <Card
+        {...rest}
+        className={cn(styles.card, className, {
+          enabledCard: checked === true,
+          collapsibleCard: collapsible,
         })}
       >
-        {children}
-      </div>
-    </div>
-  </Card>
-);
+        {checked !== undefined && (
+          <div className={styles.action}>
+            <Checkbox onChange={onCheckbox} checked={checked} />
+          </div>
+        )}
+        <div className={styles.wrapper}>
+          <div className={styles.header}>
+            <div className={styles.title}>{title}</div>
+            {collapsible && (
+              <IconButton onClick={this.toggle} name={iconName} ripple />
+            )}
+          </div>
+          {isOpen && (
+            <div
+              className={cn(styles.body, {
+                disabledBody: checked === false,
+              })}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+      </Card>
+    );
+  }
+}
 
 ConfigureCard.propTypes = {
   title: PropTypes.string,
@@ -48,6 +71,7 @@ ConfigureCard.propTypes = {
   onCheckbox: PropTypes.func,
   checked: PropTypes.bool,
   children: PropTypes.node,
+  collapsible: PropTypes.bool,
 };
 
 export default ConfigureCard;