@project-r/styleguide - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

lib/components/Form/Field.js

 'use strict';
 
 exports.__esModule = true;
+exports.fieldHeight = undefined;
 
-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 _react = require('react');
@@ -31,2 +30,3 @@
 var lineHeight = 20;
+var fieldHeight = exports.fieldHeight = 40;
 
@@ -40,3 +40,3 @@ var fieldStyle = (0, _glamor.css)({
   textDecoration: 'none',
-  height: 40,
+  height: fieldHeight,
   fontSize: 22,
@@ -47,2 +47,3 @@ boxSizing: 'border-box',
   borderBottom: 'solid ' + colors.disabled + ' ' + borderWidth + 'px',
+  borderRadius: 0,
   color: colors.text,
@@ -59,8 +60,2 @@ ':focus': {
 });
-var errorMessageStyle = (0, _glamor.css)({
-  display: 'inline-block',
-  color: colors.error,
-  margin: '5px 0',
-  fontSize: 14
-});
 
@@ -79,8 +74,8 @@ var containerStyle = (0, _glamor.css)({
   left: xPadding,
-  top: yPadding + lineHeight + borderWidth,
+  bottom: yPadding + borderWidth,
   color: colors.disabled,
-  transition: 'top 200ms, font-size 200ms'
+  transition: 'bottom 200ms, font-size 200ms'
 });
 var labelTextTopStyle = (0, _glamor.css)({
-  top: 0,
+  bottom: fieldHeight,
   fontSize: 14
@@ -91,2 +86,5 @@ });
 });
+var labelTextErrorStyle = (0, _glamor.css)({
+  color: colors.error
+});
 
@@ -102,3 +100,5 @@ var Field = function (_Component) {
     _this.state = {
-      focused: false,
+      isFocused: false,
+      isValidating: false,
+      isDirty: false,
       value: ''
@@ -116,3 +116,3 @@ };
     var _props = this.props,
-        onChange = _props.onChange,
+        _onChange = _props.onChange,
         name = _props.name,
@@ -122,17 +122,22 @@ type = _props.type,
         label = _props.label,
-        error = _props.error;
+        error = _props.error,
+        renderInput = _props.renderInput;
 
 
-    var simulations = {};
-    var focused = this.state.focused;
+    var simulationClassName = void 0;
+    var isFocused = this.state.isFocused;
 
     if (sim) {
-      focused = sim.indexOf('focus') !== -1;
-      simulations = (0, _glamor.simulate)(sim);
+      isFocused = sim.indexOf('focus') !== -1;
+      simulationClassName = (0, _glamor.simulate)(sim).toString();
     }
+    var _state = this.state,
+        isValidating = _state.isValidating,
+        isDirty = _state.isDirty;
 
+
     var value = this.props.value || this.state.value;
 
     var hasError = !!error;
-    var labelStyle = focused || value ? (0, _glamor.merge)(labelTextStyle, labelTextTopStyle, focused && labelTextFocusedStyle) : labelTextStyle;
+    var labelStyle = isFocused || value || hasError ? (0, _glamor.merge)(labelTextStyle, labelTextTopStyle, isFocused && labelTextFocusedStyle, hasError && labelTextErrorStyle) : labelTextStyle;
     var fStyle = hasError ? (0, _glamor.merge)(fieldStyle, fieldErrorStyle) : fieldStyle;
@@ -143,8 +148,18 @@
       containerStyle,
-      _react2.default.createElement('input', _extends({ name: name, type: type, ref: this.inputRef,
-        onChange: onChange || function (event) {
+      renderInput({
+        name: name,
+        type: type,
+        ref: this.inputRef,
+        onChange: function onChange(event) {
           var v = event.target.value;
-          _this2.setState(function () {
-            return { value: v };
-          });
+          if (_onChange) {
+            _onChange(event, v, isValidating);
+            _this2.setState(function () {
+              return { isDirty: true };
+            });
+          } else {
+            _this2.setState(function () {
+              return { isDirty: true, value: v };
+            });
+          }
         },
@@ -154,20 +169,23 @@ value: value,
           return _this2.setState(function () {
-            return { focused: true };
+            return { isFocused: true };
           });
         },
-        onBlur: function onBlur() {
-          return _this2.setState(function () {
-            return { focused: false };
+        onBlur: function onBlur(event) {
+          var v = event.target.value;
+          if (!isValidating && _onChange && isDirty) {
+            _onChange(event, v, true);
+          }
+          _this2.setState(function (state) {
+            return {
+              isFocused: false,
+              isValidating: state.isDirty
+            };
           });
-        }
-      }, fStyle, simulations)),
+        },
+        className: [fStyle.toString(), simulationClassName].filter(Boolean).join(' ')
+      }),
       _react2.default.createElement(
         'span',
         labelStyle,
-        label
-      ),
-      hasError && _react2.default.createElement(
-        'span',
-        errorMessageStyle,
-        error
+        error || label
       )
@@ -180,2 +198,13 @@ );
 
+Field.propTypes = {
+  error: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.bool]),
+  renderInput: _react.PropTypes.func.isRequired
+};
+
+Field.defaultProps = {
+  renderInput: function renderInput(props) {
+    return _react2.default.createElement('input', props);
+  }
+};
+
 exports.default = Field;

lib/components/Typography/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.Quote = exports.P = exports.Lead = exports.H2 = exports.H1 = exports.A = undefined;
+exports.Quote = exports.P = exports.Lead = exports.H2 = exports.H1 = exports.A = exports.linkRule = undefined;
 
@@ -24,3 +24,3 @@ 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 linkRule = (0, _glamor.css)(styles.link);
+var linkRule = exports.linkRule = (0, _glamor.css)(styles.link);
 var A = function A(_ref) {
@@ -27,0 +27,0 @@ var children = _ref.children,

lib/index.js

@@ -85,3 +85,5 @@ 'use strict';
         Button: require('./components/Button'),
-        Field: require('./components/Form/Field.js')
+        Field: require('./components/Form/Field.js'),
+        AutocompleteField: require('./components/Form/AutocompleteField.js'),
+        MaskedInput: require('react-maskedinput')
       },
@@ -88,0 +90,0 @@ src: require('./components/Form/docs.md')

lib/lib.js

 'use strict';
 
 exports.__esModule = true;
-exports.Field = exports.Button = exports.Logo = exports.mediaQueries = exports.colors = undefined;
+exports.AutocompleteField = exports.Field = exports.Button = exports.Logo = exports.mediaQueries = exports.colors = undefined;
 
@@ -33,2 +33,11 @@ var _Logo = require('./components/Logo');
 
+var _AutocompleteField = require('./components/Form/AutocompleteField');
+
+Object.defineProperty(exports, 'AutocompleteField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_AutocompleteField).default;
+  }
+});
+
 var _Grid = require('./components/Grid');
@@ -35,0 +44,0 @@

package.json

 {
   "name": "@project-r/styleguide",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "dependencies": {
@@ -31,2 +31,3 @@ "react-autocomplete": "^1.4.1"
   "scripts": {
+    "prepublishOnly": "npm run prebuild && npm run build:lib",
     "prebuild": "rimraf lib",
@@ -33,0 +34,0 @@ "build:lib": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",

No alert changes

Improved metrics

Total package byte prevSize

9437108

increased by0.07%

Number of package files

140

increased by0.72%

Lines of code

1808

increased by8.52%

No dependency changes