@wpmudev/react-input - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/react-input.cjs.js

@@ -65,5 +65,6 @@ 'use strict';
 
+var _excluded = ["id", "label", "description", "type", "errorStatus", "errorDescription", "size", "fieldSize", "suffix", "prefix"];
+
 var Input = function Input(_ref) {
   var id = _ref.id,
-      size = _ref.size,
       label = _ref.label,
@@ -73,11 +74,37 @@ description = _ref.description,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      props = _objectWithoutProperties(_ref, ["id", "size", "label", "description", "type"]);
+      errorStatus = _ref.errorStatus,
+      errorDescription = _ref.errorDescription,
+      size = _ref.size,
+      fieldSize = _ref.fieldSize,
+      suffix = _ref.suffix,
+      prefix = _ref.prefix,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var uniqueId = id && '' !== id ? id : props.property;
-  var clazz = 'sui-form-control';
+  var fieldClasses = 'sui-form-field';
 
+  switch (fieldSize) {
+    case 'sm':
+    case 'small':
+      fieldClasses += ' sui-input-sm';
+      break;
+
+    case 'md':
+    case 'medium':
+      fieldClasses += ' sui-input-md';
+      break;
+  }
+
+  if (errorStatus) {
+    fieldClasses += ' sui-form-field-error';
+  }
+
+  var inputClasses = 'sui-form-control';
+  suffix && (inputClasses += ' sui-field-has-suffix');
+  prefix && (inputClasses += ' sui-field-has-prefix');
+
   switch (size) {
     case 'sm':
     case 'small':
-      clazz += ' sui-input-sm';
+      inputClasses += ' sui-input-sm';
       break;
@@ -87,16 +114,22 @@
     case 'medium':
-      clazz += ' sui-input-md';
+      inputClasses += ' sui-input-md';
       break;
   }
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "sui-form-field"
-  }, label && /*#__PURE__*/React__default['default'].createElement("label", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: fieldClasses
+  }, label && /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uniqueId,
     className: "sui-label"
-  }, label), /*#__PURE__*/React__default['default'].createElement("input", _extends({
+  }, label), prefix && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "sui-field-prefix"
+  }, prefix), /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: uniqueId,
     type: type,
-    className: clazz
-  }, props)), description && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: inputClasses
+  }, props)), suffix && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "sui-field-suffix"
+  }, suffix), errorStatus && errorDescription && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sui-error-message"
+  }, errorDescription), description && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "sui-description"
@@ -103,0 +136,0 @@ }, description));

dist/react-input.esm.js

@@ -57,5 +57,6 @@ import React from 'react';
 
+var _excluded = ["id", "label", "description", "type", "errorStatus", "errorDescription", "size", "fieldSize", "suffix", "prefix"];
+
 var Input = function Input(_ref) {
   var id = _ref.id,
-      size = _ref.size,
       label = _ref.label,
@@ -65,11 +66,37 @@ description = _ref.description,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      props = _objectWithoutProperties(_ref, ["id", "size", "label", "description", "type"]);
+      errorStatus = _ref.errorStatus,
+      errorDescription = _ref.errorDescription,
+      size = _ref.size,
+      fieldSize = _ref.fieldSize,
+      suffix = _ref.suffix,
+      prefix = _ref.prefix,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var uniqueId = id && '' !== id ? id : props.property;
-  var clazz = 'sui-form-control';
+  var fieldClasses = 'sui-form-field';
 
+  switch (fieldSize) {
+    case 'sm':
+    case 'small':
+      fieldClasses += ' sui-input-sm';
+      break;
+
+    case 'md':
+    case 'medium':
+      fieldClasses += ' sui-input-md';
+      break;
+  }
+
+  if (errorStatus) {
+    fieldClasses += ' sui-form-field-error';
+  }
+
+  var inputClasses = 'sui-form-control';
+  suffix && (inputClasses += ' sui-field-has-suffix');
+  prefix && (inputClasses += ' sui-field-has-prefix');
+
   switch (size) {
     case 'sm':
     case 'small':
-      clazz += ' sui-input-sm';
+      inputClasses += ' sui-input-sm';
       break;
@@ -79,3 +106,3 @@
     case 'medium':
-      clazz += ' sui-input-md';
+      inputClasses += ' sui-input-md';
       break;
@@ -85,11 +112,17 @@ }
   return /*#__PURE__*/React.createElement("div", {
-    className: "sui-form-field"
+    className: fieldClasses
   }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: uniqueId,
     className: "sui-label"
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
+  }, label), prefix && /*#__PURE__*/React.createElement("span", {
+    className: "sui-field-prefix"
+  }, prefix), /*#__PURE__*/React.createElement("input", _extends({
     id: uniqueId,
     type: type,
-    className: clazz
-  }, props)), description && /*#__PURE__*/React.createElement("p", {
+    className: inputClasses
+  }, props)), suffix && /*#__PURE__*/React.createElement("span", {
+    className: "sui-field-suffix"
+  }, suffix), errorStatus && errorDescription && /*#__PURE__*/React.createElement("div", {
+    className: "sui-error-message"
+  }, errorDescription), description && /*#__PURE__*/React.createElement("p", {
     className: "sui-description"
@@ -96,0 +129,0 @@ }, description));

lib/react-input.js

@@ -20,3 +20,3 @@ import React from 'react';
 
-	switch ( fieldSize ) {
+	switch (fieldSize) {
 		case 'sm':
@@ -37,3 +37,3 @@ case 'small':
 
-	if ( errorStatus ) {
+	if (errorStatus) {
 		fieldClasses += ' sui-form-field-error';
@@ -47,3 +47,3 @@ }
 
-	switch ( size ) {
+	switch (size) {
 		case 'sm':
@@ -65,24 +65,20 @@ case 'small':
 	return (
-		<div className={ fieldClasses }>
-			{ label && (
-				<label htmlFor={ uniqueId } className="sui-label">
-					{ label }
+		<div className={fieldClasses}>
+			{label && (
+				<label htmlFor={uniqueId} className="sui-label">
+					{label}
 				</label>
 			)}
 
-			{prefix && (
-				<span class="sui-field-prefix">{prefix}</span>
-			)}
+			{prefix && <span className="sui-field-prefix">{prefix}</span>}
 
-			<input id={ uniqueId } type={ type } className={ inputClasses } { ...props } />
+			<input id={uniqueId} type={type} className={inputClasses} {...props} />
 
-			{suffix && (
-				<span class="sui-field-suffix">{suffix}</span>
-			)}
+			{suffix && <span className="sui-field-suffix">{suffix}</span>}
 
-			{ errorStatus && errorDescription && (
-				<div className="sui-error-message">{ errorDescription }</div>
+			{errorStatus && errorDescription && (
+				<div className="sui-error-message">{errorDescription}</div>
 			)}
 
-			{ description && <p className="sui-description">{ description }</p> }
+			{description && <p className="sui-description">{description}</p>}
 		</div>
@@ -89,0 +85,0 @@ );

package.json

 {
   "name": "@wpmudev/react-input",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "WPMU DEV Shared UI React Input Component",
@@ -12,2 +12,10 @@ "keywords": [],
       "url": "https://wpmudev.com/"
+    },
+    {
+      "name": "Gowtham Ravipati",
+      "email": "[e-mail]",
+      "url": "https://gowtham369.github.io/Gowtham_Portfolio/"
+    },
+    {
+      "name": "Pawan Kumar"
     }
@@ -47,3 +55,3 @@ ],
   },
-  "gitHead": "d018b92bf334f4ca454ae1dda1ff25ac6db8af91"
+  "gitHead": "37388c0fa68cdeece8fdc1fe4701ecfabcc3da3d"
 }

No alert changes

Improved metrics

Total package byte prevSize

45389

5.44%

Lines of code

278

23.01%

No dependency changes