Update version of i18next-localstorage-cache to 1.1.0 (#1911)

* Update version number

* new meta key in registry, allow package registry items to override default meta title

* lint fixes

* Rewrite example payment settings pane to react #1817 (#1848)

* Have base to be release20

* Nitpick change on index

* Convert social settings to React with new cards (#1854)

* Convert social settings to React with new cards

* Save card open state

* Add new SettingsCard component

 - SettingsCard component wraps many components necessary for a
dashboard settings card.
- Added method for updating user preferences

* Added a custom React semi-auto Form component

To help standardize all settings cards a new `Form` component has been
added that can use `SimpleSchema` to generate a basic, single level
form with validation.

* Update social settings and form component

- Add success message on submit
- Remove unused code
- Fix glitch with auto form and error messages

* Added prop type for switchName

* Update version of i18next-localstorage-cache to 1.1.0

client/modules/core/main.js

@@ -215,6 +215,14 @@ export default {
     return false;
   },
 
+  updateUserPreferences(packageName, preference, values) {
+    const currentPreference = this.getUserPreferences(packageName, preference, {});
+    return this.setUserPreferences(packageName, preference, {
+      ...currentPreference,
+      ...values
+    });
+  },
+
   getShopId() {
     return this.shopId;
   },

client/modules/router/main.js

@@ -192,14 +192,13 @@ Router.initPackageRoutes = () => {
           // registryItems
           if (registryItem.route) {
             const {
+              meta,
               route,
               template,
               layout,
               workflow
             } = registryItem;
 
-            // console.log(registryItem);
-
             // get registry route name
             const name = getRegistryRouteName(pkg.name, registryItem);
 
@@ -208,6 +207,7 @@ Router.initPackageRoutes = () => {
             const newRouteConfig = {
               route,
               options: {
+                meta,
                 name,
                 template,
                 layout,
@@ -218,6 +218,7 @@ Router.initPackageRoutes = () => {
                 }
               }
             };
+
             // push new routes
             newRoutes.push(newRouteConfig);
           } // end registryItems

imports/plugins/core/ui/client/components/cards/card.js

@@ -20,11 +20,11 @@ class Card extends Component {
   handleExpanderClick = (event) => {
     this.setState({
       expanded: !this.state.expanded
+    }, () => {
+      if (typeof this.props.onExpand === "function") {
+        this.props.onExpand(event, this, this.props.name, this.state.expanded);
+      }
     });
-
-    if (typeof this.props.onExpand === "function") {
-      this.props.onExpand(event, this);
-    }
   }
 
   render() {
@@ -67,6 +67,7 @@ Card.propTypes = {
   children: PropTypes.node,
   expandable: PropTypes.bool,
   expanded: PropTypes.bool,
+  name: PropTypes.string,
   onExpand: PropTypes.func,
   style: PropTypes.object
 };

imports/plugins/core/ui/client/components/cards/cardHeader.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from "react";
 import classnames from "classnames";
 import CardTitle from "./cardTitle";
 import IconButton from "../button/iconButton";
+import Icon from "../icon/icon";
 import Switch from "../switch/switch";
 
 class CardHeader extends Component {
@@ -16,10 +17,13 @@ class CardHeader extends Component {
     expandOnSwitchOn: PropTypes.bool,
     expanded: PropTypes.bool,
     i18nKeyTitle: PropTypes.string,
+    icon: PropTypes.string,
+    imageView: PropTypes.node,
     onClick: PropTypes.func,
     onSwitchChange: PropTypes.func,
     showSwitch: PropTypes.bool,
-    switchChecked: PropTypes.bool,
+    switchName: PropTypes.string,
+    switchOn: PropTypes.bool,
     title: PropTypes.string
   };
 
@@ -53,6 +57,26 @@ class CardHeader extends Component {
     return null;
   }
 
+  renderImage() {
+    if (this.props.icon) {
+      return (
+        <div className="image">
+          <Icon icon={this.props.icon} />
+        </div>
+      );
+    }
+
+    if (this.props.imageView) {
+      return (
+        <div className="image">
+          {this.props.imageView}
+        </div>
+      );
+    }
+
+    return null;
+  }
+
   renderDisclsoureArrow() {
     const expanderClassName = classnames({
       rui: true,
@@ -76,7 +100,8 @@ class CardHeader extends Component {
     if (this.props.showSwitch) {
       return (
         <Switch
-          checked={this.props.switchChecked}
+          checked={this.props.switchOn}
+          name={this.props.switchName}
           onChange={this.handleSwitchChange}
         />
       );
@@ -97,6 +122,7 @@ class CardHeader extends Component {
       return (
         <div className={baseClassName}>
           <div className="content-view" onClick={this.handleClick}>
+            {this.renderImage()}
             {this.renderTitle()}
           </div>
           <div className="action-view">
@@ -109,8 +135,12 @@ class CardHeader extends Component {
 
     return (
       <div className={baseClassName}>
-        {this.renderTitle()}
-        {this.props.children}
+        <div className="content-view">
+          {this.renderTitle()}
+        </div>
+        <div className="action-view">
+          {this.props.children}
+        </div>
       </div>
     );
   }

imports/plugins/core/ui/client/components/cards/index.js

@@ -3,3 +3,4 @@ export { default as CardHeader } from "./cardHeader";
 export { default as CardTitle } from "./cardTitle";
 export { default as CardBody } from "./cardBody";
 export { default as CardGroup } from "./cardGroup";
+export { default as SettingsCard } from "./settingsCard";

imports/plugins/core/ui/client/components/cards/settingsCard.js

@@ -0,0 +1,67 @@
+/**
+ * Settings Card is a composite component to standardize the
+ * creation settings cards (panels) in the dashboard.
+ */
+
+import React, { Component, PropTypes } from "react";
+import Blaze from "meteor/gadicc:blaze-react-component";
+import { Card, CardHeader, CardBody } from "/imports/plugins/core/ui/client/components";
+
+class SettingsCard extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    enabled: PropTypes.bool,
+    expanded: PropTypes.bool,
+    i18nKeyTitle: PropTypes.string,
+    icon: PropTypes.string,
+    name: PropTypes.string,
+    onExpand: PropTypes.func,
+    onSwitchChange: PropTypes.func,
+    template: PropTypes.any,
+    title: PropTypes.string
+  }
+
+  handleSwitchChange = (event, isChecked) => {
+    if (typeof this.props.onSwitchChange === "function") {
+      this.props.onSwitchChange(event, isChecked, this.props.name, this);
+    }
+  }
+
+  renderCardBody() {
+    if (this.props.template) {
+      return (
+        <Blaze template={this.props.template} />
+      );
+    }
+
+    return this.props.children;
+  }
+
+  render() {
+    return (
+      <Card
+        expandable={true}
+        onExpand={this.props.onExpand}
+        expanded={this.props.expanded}
+        name={this.props.name}
+      >
+        <CardHeader
+          i18nKeyTitle={this.props.i18nKeyTitle}
+          icon={this.props.icon}
+          title={this.props.title}
+          showSwitch={true}
+          actAsExpander={true}
+          switchOn={this.props.enabled}
+          switchName={this.props.name}
+          expandOnSwitchOn={true}
+          onSwitchChange={this.handleSwitchChange}
+        />
+        <CardBody expandable={true}>
+          {this.renderCardBody()}
+        </CardBody>
+      </Card>
+    );
+  }
+}
+
+export default SettingsCard;