synapsefi-ui - npm Package Compare versions

Comparing version 1.2.8 to 1.2.9

dist/components/Accordion/Accordion.js

@@ -11,3 +11,3 @@ 'use strict';
     _templateObject2 = _taggedTemplateLiteral(['transform: rotate3d(1, 0, 0, 0);'], ['transform: rotate3d(1, 0, 0, 0);']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  border-top: 1px solid ', ';\n  border-bottom:  1px solid ', ';\n\n  padding: 1rem 2rem;\n'], ['\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  border-top: 1px solid ', ';\n  border-bottom:  1px solid ', ';\n\n  padding: 1rem 2rem;\n']);
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n\n  border-top: 1px solid ', ';\n  border-bottom:  1px solid ', ';\n\n  padding: 1rem 2rem;\n'], ['\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n\n  border-top: 1px solid ', ';\n  border-bottom:  1px solid ', ';\n\n  padding: 1rem 2rem;\n']);
 
@@ -14,0 +14,0 @@ var _react = require('react');

dist/components/AlertMessage/AlertMessage.js

@@ -10,3 +10,3 @@ 'use strict';
     _templateObject3 = _taggedTemplateLiteral(['\n    height: 32px;\n    display: flex;\n    font-size: 16px;\n    position: absolute;\n    box-sizing: border-box;\n    align-items: center;\n    ', ';\n  '], ['\n    height: 32px;\n    display: flex;\n    font-size: 16px;\n    position: absolute;\n    box-sizing: border-box;\n    align-items: center;\n    ', ';\n  ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n        width: 100%;\n        position: fixed;\n        top: 0;\n        right: 0;\n        left: 0;\n        padding: 14px 16px;\n        height: 48px;\n        animation: ', ' 0.2s linear;\n        background-color: ', ';\n      '], ['\n        width: 100%;\n        position: fixed;\n        top: 0;\n        right: 0;\n        left: 0;\n        padding: 14px 16px;\n        height: 48px;\n        animation: ', ' 0.2s linear;\n        background-color: ', ';\n      ']),
+    _templateObject4 = _taggedTemplateLiteral(['\n        width: 100%;\n        position: fixed;\n        top: 0;\n        right: 0;\n        left: 0;\n        padding: 14px 16px;\n        height: 48px;\n        animation: ', ' 0.2s linear;\n        background-color: ', ';\n        z-index: 1;\n      '], ['\n        width: 100%;\n        position: fixed;\n        top: 0;\n        right: 0;\n        left: 0;\n        padding: 14px 16px;\n        height: 48px;\n        animation: ', ' 0.2s linear;\n        background-color: ', ';\n        z-index: 1;\n      ']),
     _templateObject5 = _taggedTemplateLiteral(['\n    height: 20px;\n    width: 20px;\n    ', ';\n    margin-right: 8px;\n\n    path:first-of-type {\n      ', ';\n    }\n  '], ['\n    height: 20px;\n    width: 20px;\n    ', ';\n    margin-right: 8px;\n\n    path:first-of-type {\n      ', ';\n    }\n  ']),
@@ -13,0 +13,0 @@ _templateObject6 = _taggedTemplateLiteral(['\n        fill: ', ';\n      '], ['\n        fill: ', ';\n      ']),

dist/components/buttonRelated/AnchorButton.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  border: none;\n  cursor: pointer;\n  outline: none;\n\n  font-size: ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n  ', ';\n\n  color: ', ';\n  &:hover {\n    color: ', ';\n  }\n  &:active {\n    color: ', ';\n  }\n'], ['\n  border: none;\n  cursor: pointer;\n  outline: none;\n\n  font-size: ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n  ', ';\n\n  color: ', ';\n  &:hover {\n    color: ', ';\n  }\n  &:active {\n    color: ', ';\n  }\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  border: none;\n  cursor: pointer;\n  outline: none;\n\n  background-color: ', '\n  font-size: ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n  ', ';\n\n  color: ', ';\n  &:hover {\n    color: ', ';\n  }\n  &:active {\n    color: ', ';\n  }\n'], ['\n  border: none;\n  cursor: pointer;\n  outline: none;\n\n  background-color: ', '\n  font-size: ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n  ', ';\n\n  color: ', ';\n  &:hover {\n    color: ', ';\n  }\n  &:active {\n    color: ', ';\n  }\n']),
     _templateObject2 = _taggedTemplateLiteral(['', ';'], ['', ';']);
@@ -37,2 +37,4 @@
 var Button = _styledComponents2.default.button(_templateObject, function (props) {
+  return props.backgroundColor ? props.backgroundColor : 'transparent';
+}, function (props) {
   return props.fontSize ? props.fontSize : '14px';
@@ -39,0 +41,0 @@ }, primaryColor, function (props) {

dist/components/Dropdown/components/DropdownHead.js

@@ -30,4 +30,3 @@ 'use strict';
 var DropdownHead = function DropdownHead(props) {
-  var showMenu = props.showMenu,
-      style = props.style,
+  var style = props.style,
       onClick = props.onClick,
@@ -34,0 +33,0 @@ children = props.children;

dist/components/Dropdown/Dropdown.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -14,2 +16,6 @@
 
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _reactOnclickoutside = require('react-onclickoutside');
@@ -95,21 +101,4 @@
 
-    var _ref = _this.props.propValues || _this.props,
-        propValues = _ref.propValues,
-        value = _ref.value,
-        multiselect = _ref.multiselect,
-        searchable = _ref.searchable,
-        placeholder = _ref.placeholder,
-        options = _ref.options;
+    _this.state = _extends({}, Util.getStateFromProps(_this.props));
 
-    var currentValue = propValues ? propValues.value : value;
-
-    _this.state = {
-      showMenu: false,
-
-      selection: multiselect ? Util.getSelectedItems(currentValue, options) : Util.getSelectedItem(currentValue, placeholder, options),
-
-      firstLine: Util.getTextOfSelection(currentValue, options, placeholder, multiselect),
-      inputValue: ''
-    };
-
     _this.toggleMenu = _this.toggleMenu.bind(_this);
@@ -125,13 +114,23 @@ _this.updateSelection = _this.updateSelection.bind(_this);
 
-  // -------------------------------------------------------------------------------------
-  // --------------------------------- Handler Methods -----------------------------------
-  // -------------------------------------------------------------------------------------
+  _createClass(Dropdown, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.value !== nextProps.value || this.props.propValues && this.props.propValues.value !== nextProps.propValues.value) {
+        var omitedValues = nextProps.propValues && nextProps.propValues.multiselect || nextProps.multiselect ? ['showMenu', 'inputValue'] : [];
 
-  _createClass(Dropdown, [{
+        this.setState(_extends({}, _lodash2.default.omit(Util.getStateFromProps(nextProps), omitedValues)));
+      }
+    }
+
+    // -------------------------------------------------------------------------------------
+    // --------------------------------- Handler Methods -----------------------------------
+    // -------------------------------------------------------------------------------------
+
+  }, {
     key: 'checkIfSelectionEmpty',
     value: function checkIfSelectionEmpty() {
-      var _ref2 = this.props.propValues || this.props,
-          multiselect = _ref2.multiselect;
+      var _ref = this.props.propValues || this.props,
+          multiselect = _ref.multiselect;
 
-      return multiselect ? _.isEmpty(this.state.selection) : _.isEmpty(this.state.selection.key);
+      return multiselect ? _lodash2.default.isEmpty(this.state.selection) : _lodash2.default.isEmpty(this.state.selection.key);
     }
@@ -153,7 +152,7 @@ }, {
     value: function updateSelection(e, item, propName) {
-      var _ref3 = this.props.propValues || this.props,
-          multiselect = _ref3.multiselect,
-          onChange = _ref3.onChange,
-          options = _ref3.options,
-          placeholder = _ref3.placeholder;
+      var _ref2 = this.props.propValues || this.props,
+          multiselect = _ref2.multiselect,
+          onChange = _ref2.onChange,
+          options = _ref2.options,
+          placeholder = _ref2.placeholder;
 
@@ -163,17 +162,10 @@ var singleSelection = void 0;
       var firstLine = item.text;
+
       if (multiselect) {
         newSelection = DataUtil.addOrRemove(item.key, this.state.selection);
-        firstLine = Util.getTextOfSelection(newSelection, options, placeholder, multiselect);
       } else {
-        singleSelection = item.key;
+        newSelection = this.state.selection.key !== item.key ? item : '';
       }
 
-      this.setState({
-        selection: newSelection,
-        showMenu: multiselect ? true : false,
-        inputValue: multiselect ? this.state.inputValue : '',
-        firstLine: firstLine
-      }, function () {
-        if (!multiselect) onChange(e, newSelection.key, propName);else onChange(e, newSelection, propName);
-      });
+      if (!multiselect) onChange(e, newSelection.key || '', propName);else onChange(e, newSelection, propName);
     }
@@ -183,10 +175,9 @@ }, {
     value: function selectAllOptions(e) {
-      var _ref4 = this.props.propValues || this.props,
-          onChange = _ref4.onChange,
-          options = _ref4.options,
-          propName = _ref4.propName,
-          placeholder = _ref4.placeholder;
+      var _ref3 = this.props.propValues || this.props,
+          onChange = _ref3.onChange,
+          options = _ref3.options,
+          propName = _ref3.propName,
+          placeholder = _ref3.placeholder;
 
       var newSelection = [];
-      var firstLine = placeholder;
 
@@ -197,11 +188,5 @@ if (this.state.selection.length !== options.length) {
         });
-        firstLine = 'ALL';
       }
 
-      this.setState({
-        selection: newSelection,
-        firstLine: firstLine
-      }, function () {
-        return onChange(e, newSelection, propName);
-      });
+      onChange(e, newSelection, propName);
     }
@@ -216,6 +201,7 @@
     value: function getPlaceHolderText(searchable, placeholder) {
+      var isSelectionEmpty = this.checkIfSelectionEmpty();
+
       return _react2.default.createElement(
         Styles.FlexStartAlign,
         {
-          empty: this.checkIfSelectionEmpty(),
           searchable: searchable },
@@ -228,3 +214,5 @@ _react2.default.createElement(
             Styles.PlaceHolder,
-            { searchable: searchable },
+            {
+              empty: isSelectionEmpty,
+              searchable: searchable },
             this.state.firstLine
@@ -275,3 +263,3 @@ )
             Styles.PlaceHolder,
-            { empty: _.isEmpty(this.state.selection.key) },
+            { empty: _lodash2.default.isEmpty(this.state.selection.key) },
             this.state.firstLine
@@ -288,10 +276,11 @@ )
 
-      var _ref5 = this.props.propValues || this.props,
-          propName = _ref5.propName,
-          multiselect = _ref5.multiselect,
-          displayComponent = _ref5.displayComponent,
-          options = _ref5.options;
+      var _ref4 = this.props.propValues || this.props,
+          propName = _ref4.propName,
+          multiselect = _ref4.multiselect,
+          renderOptionItem = _ref4.renderOptionItem,
+          options = _ref4.options;
 
       var tabs = filteredOptions.map(function (item, idx) {
-        var display = !!displayComponent ? displayComponent({ item: item }) : item.text;
+        var display = !!renderOptionItem ? renderOptionItem(item) : item.text;
+
         return _react2.default.createElement(
@@ -301,3 +290,3 @@ Styles.TabItem,
             key: idx,
-            selected: item.key === _this3.state.selection,
+            selected: item.key === _this3.state.selection.key,
             index: idx,
@@ -328,3 +317,3 @@ value: item.key,
           selected: this.state.selection.length === options.length }),
-        'ALL'
+        'All'
       ));
@@ -342,25 +331,23 @@
     value: function render() {
-      var _ref6 = this.props.propValues || this.props,
-          className = _ref6.className,
-          key = _ref6.key,
-          styles = _ref6.styles,
-          showMenu = _ref6.showMenu,
-          dropdownHeadStyle = _ref6.dropdownHeadStyle,
-          empty = _ref6.empty,
-          onChange = _ref6.onChange,
-          propName = _ref6.propName,
-          searchable = _ref6.searchable,
-          options = _ref6.options,
-          label = _ref6.label,
-          labelWidth = _ref6.labelWidth,
-          description = _ref6.description,
-          placeholder = _ref6.placeholder,
-          error = _ref6.error,
-          errorStyle = _ref6.errorStyle,
-          multiselect = _ref6.multiselect;
+      var _ref5 = this.props.propValues || this.props,
+          className = _ref5.className,
+          key = _ref5.key,
+          styles = _ref5.styles,
+          showMenu = _ref5.showMenu,
+          dropdownHeadStyle = _ref5.dropdownHeadStyle,
+          empty = _ref5.empty,
+          onChange = _ref5.onChange,
+          propName = _ref5.propName,
+          searchable = _ref5.searchable,
+          options = _ref5.options,
+          label = _ref5.label,
+          labelWidth = _ref5.labelWidth,
+          description = _ref5.description,
+          placeholder = _ref5.placeholder,
+          error = _ref5.error,
+          errorStyle = _ref5.errorStyle,
+          multiselect = _ref5.multiselect;
 
       var filteredOptions = Util.getOptionsList(options, searchable, this.state.inputValue);
 
-      var firstLineText = multiselect ? Util.toStringList(this.state.selectedItems, placeholder) : this.getPlaceHolderText(searchable, placeholder);
-
       return _react2.default.createElement(
@@ -413,5 +400,5 @@ Styles.MainContainer,
   singleOrMultiselectValue: function singleOrMultiselectValue(props) {
-    var _ref7 = props.propValues || props,
-        value = _ref7.value,
-        multiselect = _ref7.multiselect;
+    var _ref6 = props.propValues || props,
+        value = _ref6.value,
+        multiselect = _ref6.multiselect;
 
@@ -418,0 +405,0 @@ if (Array.isArray(value) && !multiselect) {

dist/components/Dropdown/styles/Dropdown.styles.js

@@ -16,3 +16,3 @@ 'use strict';
     _templateObject8 = _taggedTemplateLiteral(['\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n\n  border-top: 6px solid ', ';\n\n  border-radius: 2px;\n\n  display: flex;\n  align-self: center;\n'], ['\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n\n  border-top: 6px solid ', ';\n\n  border-radius: 2px;\n\n  display: flex;\n  align-self: center;\n']),
-    _templateObject9 = _taggedTemplateLiteral(['\n  \n  color: ', ';\n  font-size: 16px;\n  // width: ', ';\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n'], ['\n  \n  color: ', ';\n  font-size: 16px;\n  // width: ', ';\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n']),
+    _templateObject9 = _taggedTemplateLiteral(['\n  color: ', ';\n  font-size: 16px;\n  // width: ', ';\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n'], ['\n  color: ', ';\n  font-size: 16px;\n  // width: ', ';\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n']),
     _templateObject10 = _taggedTemplateLiteral(['', ''], ['', '']),
@@ -19,0 +19,0 @@ _templateObject11 = _taggedTemplateLiteral(['85%'], ['85%']),

dist/components/Dropdown/util/Dropdown.util.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getTextOfSelection = exports.toStringList = exports.getOptionsList = exports.getSelectedItems = exports.getSelectedItem = undefined;
+exports.getStateFromProps = exports.getTextOfSelection = exports.toStringList = exports.getOptionsList = exports.getSelectedItems = exports.getSelectedItem = undefined;
 
@@ -16,3 +16,4 @@ var _lodash = require('lodash');
 var getSelectedItem = exports.getSelectedItem = function getSelectedItem(value, placeholder, options) {
-  var selectedItem = { key: '', text: placeholder };
+  var baseSelectedItem = { key: '', text: placeholder };
+  var selectedItem = void 0;
 
@@ -25,3 +26,3 @@ if (value) {
 
-  return selectedItem;
+  return selectedItem ? selectedItem : baseSelectedItem;
 };
@@ -62,6 +63,9 @@
   if (!isMultiselect) {
-    return options.find(function (o) {
+    var selectedItem = options.find(function (o) {
       return o.key === value;
-    }).text;
+    });
+    return selectedItem ? selectedItem.text : placeholder;
   } else {
+    if (value.length === options.length) return 'All';
+
     var collection = options.reduce(function (memo, o) {
@@ -76,2 +80,19 @@ if (value.includes(o.key)) memo.push(o.text);
   return placeholder || '';
+};
+
+var getStateFromProps = exports.getStateFromProps = function getStateFromProps(props) {
+  var _ref = props.propValues || props,
+      multiselect = _ref.multiselect,
+      value = _ref.value,
+      options = _ref.options,
+      placeholder = _ref.placeholder;
+
+  return {
+    showMenu: false,
+
+    selection: multiselect ? getSelectedItems(value, options) : getSelectedItem(value, placeholder, options),
+
+    firstLine: getTextOfSelection(value, options, placeholder, multiselect),
+    inputValue: ''
+  };
 };

dist/components/Form/Form.js

@@ -13,3 +13,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: flex-end;\n\n  button {\n    margin-left: 8px;\n  }\n'], ['\n  display: flex;\n  justify-content: flex-end;\n\n  button {\n    margin-left: 8px;\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: flex-end;\n\n  button {\n    margin-left: 16px;\n  }\n'], ['\n  display: flex;\n  justify-content: flex-end;\n\n  button {\n    margin-left: 16px;\n  }\n']);
 
@@ -59,3 +59,3 @@ var _react = require('react');
         secondary: button.style === 'secondary',
-        onClick: button.action
+        onClick: button.action || button.onClick
       },
@@ -62,0 +62,0 @@ button.text

package.json

 {
   "name": "synapsefi-ui",
   "description": "synapsefi-ui",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "main": "index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

175924

increased by0.42%

Number of package files

31

increased by3.33%

Lines of code

3005

increased by0.03%

No dependency changes