Add new limit custom property to show character count in form fields

packages/vulcan-base-styles/lib/stylesheets/_forms.scss

@@ -111,4 +111,20 @@ div.ReactTags__suggestions mark{
     right: 5px;
     color: $light-grey;
   }
+}
+
+.form-input{
+  position: relative;
+}
+.form-control-limit{
+  position: absolute;
+  background: white;
+  padding: 5px;
+  bottom: 5px;
+  right: 5px;
+  color: $light-grey;
+  font-size: 80%;
+  &.danger{
+    color: #EF1642;
+  }
 }

packages/vulcan-forms/lib/Form.jsx

@@ -164,6 +164,11 @@ class Form extends Component {
         field.help = typeof fieldSchema.form.help === "function" ? fieldSchema.form.help.call(fieldSchema) : fieldSchema.form.help;
       }
 
+      // add limit
+      if (fieldSchema.limit) {
+       field.limit = fieldSchema.limit;
+      }
+      
       // add placeholder
       if (fieldSchema.placeholder) {
        field.placeholder = fieldSchema.placeholder;

packages/vulcan-forms/lib/FormComponent.jsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Formsy from 'formsy-react';
 import FRC from 'formsy-react-components';
 import { intlShape } from 'meteor/vulcan:i18n';
 import DateTime from './DateTime.jsx';
+import classNames from 'classnames';
 
 // import Utils from './utils.js';
 
@@ -19,6 +19,13 @@ class FormComponent extends PureComponent {
   constructor(props) {
     super(props);
     this.handleBlur = this.handleBlur.bind(this);
+    this.updateCharacterCount = this.updateCharacterCount.bind(this);
+
+    if (props.limit) {
+      this.state = {
+        limit: props.value ? props.limit - props.value.length : props.limit
+      }
+    }
   }
 
   handleBlur() {
@@ -28,10 +35,18 @@ class FormComponent extends PureComponent {
     }
   }
 
+  updateCharacterCount(name, value) {
+    if (this.props.limit) {
+      this.setState({
+        limit: this.props.limit - value.length
+      });
+    }
+  }
+
   renderComponent() {
 
     // see https://facebook.github.io/react/warnings/unknown-prop.html
-    const { control, group, updateCurrentValues, document, beforeComponent, afterComponent, ...rest } = this.props; // eslint-disable-line
+    const { control, group, updateCurrentValues, document, beforeComponent, afterComponent, limit, ...rest } = this.props; // eslint-disable-line
 
     // const base = typeof this.props.control === "function" ? this.props : rest;
 
@@ -50,9 +65,9 @@ class FormComponent extends PureComponent {
 
       switch (this.props.control) {
         case "text":
-          return <Input         {...properties} type="text" />;
+          return <Input         {...properties} type="text" onChange={this.updateCharacterCount} />;
         case "textarea":
-          return <Textarea      {...properties} />;
+          return <Textarea      {...properties} onChange={this.updateCharacterCount} />;
         case "checkbox":
           return <Checkbox      {...properties} />;
         case "checkboxgroup":
@@ -74,9 +89,10 @@ class FormComponent extends PureComponent {
 
   render() {
     return (
-      <div className={"input-"+this.props.name}>
+      <div className={classNames('form-input', `input-${this.props.name}`)}>
         {this.props.beforeComponent ? this.props.beforeComponent : null}
         {this.renderComponent()}
+        {this.props.limit ? <div className={classNames('form-control-limit', {danger: this.state.limit < 10})}>{this.state.limit}</div> : null}
         {this.props.afterComponent ? this.props.afterComponent : null}
       </div>
     )

packages/vulcan-lib/lib/modules/collections.js

@@ -6,13 +6,6 @@ import { runCallbacks } from './callbacks.js';
 
 export const Collections = [];
 
-SimpleSchema.extendOptions([
-  'viewableBy',
-  'insertableBy',
-  'editableBy',
-  'resolveAs',
-]);
-
 /**
  * @summary replacement for Collection2's attachSchema. Pass either a schema, to
  * initialize or replace the schema, or some fields, to extend the current schema
@@ -177,7 +170,7 @@ export const createCollection = options => {
 
   // ------------------------------------- Parameters -------------------------------- //
 
-  collection.getParameters = (terms = {}, apolloClient, currentUser) => {
+  collection.getParameters = (terms = {}, apolloClient) => {
 
     // console.log(terms)
 
@@ -214,11 +207,6 @@ export const createCollection = options => {
     // limit number of items to 200
     parameters.options.limit = (terms.limit < 1 || terms.limit > 200) ? 200 : terms.limit;
 
-    // limit fields to viewable fields
-    if (currentUser) {
-      parameters.options.fields = currentUser.getViewableFields(collection);
-    }
-
     // console.log(parameters);
 
     return parameters;

packages/vulcan-lib/lib/modules/config.js

@@ -26,6 +26,11 @@ SimpleSchema.extendOptions([
   'onInsert', // field insert callback
   'onEdit', // field edit callback
   'onRemove', // field remove callback
+  'viewableBy',
+  'insertableBy',
+  'editableBy',
+  'resolveAs',
+  'limit',
 ]);
 
 export default Vulcan;