ldx-widgets - npm Package Compare versions

Comparing version 1.0.17 to 1.1.0

dist/components/select.js

 // Generated by CoffeeScript 1.10.0
 (function() {
-  var FormValidation, React, ReactDOM, Select, div, ref, select, ul;
+  var ENTER, Flux, Input, InputMixin, React, ReactDOM, Select, Spinner, div, label, makeGuid, option, ref, ref1, select, synthesizeMouseEvent;
 
@@ -9,12 +9,71 @@ React = require('react');
 
-  FormValidation = require('../mixins/form_validation');
+  Flux = require('delorean').Flux;
 
-  ref = React.DOM, div = ref.div, select = ref.select, ul = ref.ul;
+  Input = React.createFactory(require('./input_placeholder'));
 
+  Spinner = React.createFactory(require('./spinner'));
 
+  InputMixin = require('../mixins/input_mixin');
+
+  ref = require('../utils'), makeGuid = ref.makeGuid, synthesizeMouseEvent = ref.synthesizeMouseEvent;
+
+  ENTER = require('../constants/keyboard').ENTER;
+
+  ref1 = React.DOM, div = ref1.div, select = ref1.select, label = ref1.label, option = ref1.option;
+
+
   /*
   Select Props
   
-  @props.loading - OPTIONAL - Boolean
+  @value - REQUIRED - string
+    The value of the input
+    w/ out this props, the input will not work
+  
+  @options - REQUIRED - array/collection
+    An array of objects w/ a value and label property
+  
+  @onChange - REQUIRED 
+    method that will change the value of the input prop
+    gets passed a single param that is the new value of the input
+    w/ out this method, the input will not update
+  
+  @className - OPTIONAL - string - default 'select-input'
+    optional class to be added the select element itself
+  
+  @id - OPTIONAL - string - default null
+    optional id to be added the input element itself
+  
+  @wrapperClass - OPTIONAL - string default null
+    class to be added to the wrapper div
+  
+  @wrapperLabel - OPTIONAL - default null
+    text for wrapping label element
+  
+  @loading - OPTIONAL - Boolean
     indicator to determine that the input is loading a value from the server
+  
+  @tabIndex - OPTIONAL - int - default null
+    tab index for the input
+  
+  @onEnterKey/onBlur/onFocus
+    optional handlers for various events
+  
+  @disabled - OPTIONAL - Boolean - default no
+    disabled state of the input
+  
+  @validation - OPTIONAL - method
+    a method that takes the value and returns an arry of validation objects
+    always return an empty array for a valid value
+    see the validation store for more documentation on validation objects
+  
+  @isInPopover - OPTIONAL - default no
+    set this to yes if the form is inside a popover or modal, forces the
+    validation to display above the popover/modal layer
+    Inconsequential if validation is not being used
+  
+  @delayedActionOnChange - OPTIONAL - Object
+    Takes action and interval parameters, will fire the action after the set interval everytime the data changes
+  
+  @openOnMount - boolean -default no
+    opens the drop down when it mounts
    */
@@ -24,39 +83,113 @@
     displayName: 'Select',
-    mixins: [FormValidation],
+    mixins: [Flux.mixins.storeListener, InputMixin],
+    watchStores: ['validation'],
+    propTypes: {
+      onChange: React.PropTypes.func.isRequired,
+      options: React.PropTypes.array.isRequired,
+      validation: React.PropTypes.func
+    },
     getDefaultProps: function() {
-      return {};
+      return {
+        type: 'text',
+        className: 'select-menu',
+        id: null,
+        wrapperClass: null,
+        wrapperLabel: null,
+        loading: false,
+        tabIndex: null,
+        onKeyDown: null,
+        onKeyPress: null,
+        onFocus: null,
+        onBlur: null,
+        onKeyUp: null,
+        onEnterKey: null,
+        onChange: null,
+        disabled: false,
+        validation: function() {
+          return null;
+        },
+        isInPopover: false,
+        delayedActionOnChange: null,
+        openOnMount: false
+      };
     },
     render: function() {
-      var children, className, disabled, onChange, ref1, tabIndex, value;
-      ref1 = this.props, children = ref1.children, value = ref1.value, tabIndex = ref1.tabIndex, onChange = ref1.onChange, className = ref1.className, disabled = ref1.disabled;
-      this.getErrors();
+      var className, disabled, id, index, input, inputClass, isInvalid, item, loading, onBlur, onFocus, onKeyDown, onKeyPress, optionEls, options, outerClass, ref2, tabIndex, validation, value, wrapperClass, wrapperLabel;
+      ref2 = this.props, value = ref2.value, options = ref2.options, tabIndex = ref2.tabIndex, className = ref2.className, loading = ref2.loading, onKeyDown = ref2.onKeyDown, onKeyPress = ref2.onKeyPress, onBlur = ref2.onBlur, onFocus = ref2.onFocus, wrapperClass = ref2.wrapperClass, wrapperLabel = ref2.wrapperLabel, id = ref2.id, disabled = ref2.disabled, validation = ref2.validation;
+      isInvalid = validation(value) != null;
+      outerClass = 'field-wrap';
+      if (wrapperClass != null) {
+        outerClass += " " + wrapperClass;
+      }
+      if (isInvalid) {
+        outerClass += ' invalid';
+      }
+      inputClass = 'loading-spinner';
+      if (className != null) {
+        inputClass += " " + className;
+      }
+      optionEls = (function() {
+        var i, len, results;
+        results = [];
+        for (index = i = 0, len = options.length; i < len; index = ++i) {
+          item = options[index];
+          results.push(option({
+            key: item.value + "_" + index,
+            value: item.value
+          }, item.label));
+        }
+        return results;
+      })();
+      input = select({
+        ref: 'input',
+        key: 'selectMenu',
+        onChange: this.handleSelectChange,
+        onKeyUp: this.handleKeyUp,
+        className: className,
+        id: id,
+        tabIndex: tabIndex,
+        value: value,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onKeyPress: onKeyPress
+      }, optionEls);
+      if (wrapperLabel) {
+        input = label({
+          key: 'textInputLabel'
+        }, [wrapperLabel, input]);
+      }
       return div({
-        className: 'field-wrap select-menu' + this.invalidClass
+        className: "" + outerClass
       }, [
-        select({
-          className: className,
-          ref: 'selectMenu',
-          key: 'selectMenu',
-          tabIndex: tabIndex,
-          value: value,
-          onChange: onChange,
-          disabled: disabled
-        }, children), this.validationErrors.length ? div({
+        input, loading ? div({
+          key: 'input-spinner',
+          className: 'input-spinner'
+        }, Spinner({
+          length: 3
+        })) : void 0, div({
           className: 'field-errors-show',
-          key: 'textInputErrorsShow'
-        }, [
-          div({
-            className: 'field-errors',
-            key: 'textInputErrors'
-          }, ul({
-            className: 'field-errors-list'
-          }, this.validationErrors))
-        ]) : void 0
+          key: 'textInputErrorsShow',
+          ref: 'errorAnchor',
+          onMouseOver: this.handleErrorMouseOver,
+          onMouseOut: this.handleErrorMouseOut
+        })
       ]);
     },
-    getFormData: function() {
-      return ReactDOM.findDOMNode(this.refs.selectMenu).value;
+    componentDidMount: function() {
+      if (this.props.openOnMount) {
+        return setTimeout((function(_this) {
+          return function() {
+            return synthesizeMouseEvent(_this.refs.input, 'mousedown');
+          };
+        })(this), 15);
+      }
     },
-    getValue: function() {
-      return this.getFormData();
+    handleSelectChange: function(e) {
+      var onChange, value;
+      value = e.target.value;
+      onChange = this.props.onChange;
+      this.props.onChange(value);
+      this.validate(value);
+      return this.fireDelayedAction();
     }
@@ -63,0 +196,0 @@ });

dist/mixins/input_mixin.js

@@ -84,3 +84,7 @@ // Generated by CoffeeScript 1.10.0
     getValue: function() {
-      return this.refs.input.getValue();
+      if (this.refs.input.getValue != null) {
+        return this.refs.input.getValue();
+      } else {
+        return this.refs.input.value;
+      }
     },
@@ -87,0 +91,0 @@ clear: function() {

dist/utils.js

@@ -115,4 +115,10 @@ // Generated by CoffeeScript 1.10.0
       if (phone != null) {
+        phone = "" + phone;
         phone = phone.replace(/[^0-9]/g, '');
-        phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
+        if (phone.length === 10) {
+          phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
+        }
+        if (phone.length === 7) {
+          phone = phone.replace(/(\d{3})(\d{4})/, "$1-$2");
+        }
         return phone;
@@ -126,18 +132,18 @@ } else {
       orgName = options.orgName, facilityName = options.facilityName, systemName = options.systemName;
-      sourceName = "";
+      sourceName = '';
       if (orgName != null) {
         sourceName += orgName;
       }
-      if ((orgName != null) && (facilityName != null) && orgName !== facilityName) {
-        sourceName += " -";
+      if ((facilityName != null) && (facilityName !== orgName && facilityName !== '')) {
+        if (sourceName !== '') {
+          sourceName += ' - ';
+        }
+        sourceName += facilityName;
       }
-      if ((facilityName != null) && orgName !== facilityName) {
-        sourceName += " " + facilityName;
-      }
       if (((facilityName != null) || (orgName != null)) && (systemName != null) && systemName !== '') {
-        sourceName += " -";
+        if (sourceName !== '') {
+          sourceName += ' - ';
+        }
+        sourceName += systemName;
       }
-      if (systemName != null) {
-        sourceName += " " + systemName;
-      }
       return sourceName;
@@ -202,9 +208,14 @@ },
     formatFileName: function(name, targetLength) {
-      var endRemove, fileEnd, fileLength, fileStart, removeCount, startRemove;
+      var charactersFromEnd, endRemove, fileEnd, fileLength, fileStart, removeCount, startRemove;
       fileLength = name.length;
-      if (fileLength < targetLength) {
+      if (fileLength <= targetLength) {
         return name;
       }
-      removeCount = fileLength - (targetLength + 3);
-      endRemove = fileLength - 6;
+      removeCount = (fileLength + 3) - targetLength;
+      if ((targetLength - removeCount) <= 6) {
+        charactersFromEnd = 4;
+      } else {
+        charactersFromEnd = 6;
+      }
+      endRemove = fileLength - charactersFromEnd;
       startRemove = endRemove - removeCount;
@@ -218,3 +229,3 @@ fileStart = name.substr(0, startRemove);
       filenameSplit = filename.split('.');
-      return name = filenameSplit.length ? filenameSplit[filenameSplit.length - 1] : '';
+      return name = filenameSplit.length > 1 ? filenameSplit[filenameSplit.length - 1] : '';
     },
@@ -249,2 +260,5 @@ makeGuid: function() {
       return !isNaN(parseFloat(input)) && isFinite(input);
+    },
+    toFixed: function(value) {
+      return Math.round(value * 100) / 100;
     }
@@ -251,0 +265,0 @@ };

index.js

@@ -25,3 +25,2 @@ React = require('react');
   Select: require('./dist/components/select'),
-  SelectInput2: require('./dist/components/select_input_2'),
   SelectPvr: require('./dist/components/select_pvr'),
@@ -55,4 +54,4 @@ Spinner: require('./dist/components/spinner'),
 
-  // Factories
-  f: {}
+  // Plain JS files for JSX implementations
+  jsx: {}
 };
@@ -62,3 +61,3 @@
 for(var key in exports) {
-  if(key === 'f') {
+  if(key === 'jsx') {
     continue;
@@ -69,3 +68,3 @@ }
   else if(key.toLowerCase().search('mixin') > -1 || key === key.toUpperCase() || key === 'utils' || key === 'validation') {
-    exports.f[key] = exports[key];
+    exports.jsx[key] = exports[key];
   }
@@ -75,3 +74,7 @@
   else { 
-    exports.f[key] = React.createFactory(exports[key]);
+    // Add the JS file to the JSX object
+    exports.jsx[key] = exports[key];
+
+    // Add the factory version to replace the original JS
+    exports[key] = React.createFactory(exports[key]);
   }
@@ -78,0 +81,0 @@ }

package.json

 {
   "name": "ldx-widgets",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "description": "widgets",
@@ -16,2 +16,3 @@ "main": "index.js",
     "lodash": "^3.5.0",
+    "moment": "^2.8.3",
     "owasp-password-strength-test": "^1.1.0",
@@ -25,2 +26,3 @@ "react": "^0.14.0",
   "devDependencies": {
+    "aliasify": "^1.9.0",
     "autoprefixer-stylus": "^0.8.1",
@@ -49,8 +51,14 @@ "browserify": "^6.2.0",
   },
+  "aliasify": {
+    "aliases": {
+      "moment": "moment/min/moment.min"
+    }
+  },
   "browserify": {
     "transform": [
       "coffeeify",
-      "envify"
+      "envify",
+      "aliasify"
     ]
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

365089

increased by4.15%

Number of package files

117

increased by0.86%

Lines of code

5198

increased by2.67%

Worsened metrics

Dependency count

12

increased by9.09%

Dev dependency count

23

increased by4.55%

Dependency changes

• + Addedmoment@^2.8.3