@goldenpine/react-form-builder2 0.20.3-build.30 → 0.20.3-build.31

package/lib/form-elements/index.js

@@ -1,22 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isomorphicFetch = _interopRequireDefault(require("isomorphic-fetch"));
 var _fileSaver = require("file-saver");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
 var _reactBootstrapSlider = _interopRequireDefault(require("@goldenpine/react-bootstrap-slider"));
@@ -25,10 +28,85 @@ var _datePicker = _interopRequireDefault(require("./date-picker"));
 var _componentHeader = _interopRequireDefault(require("./component-header"));
 var _componentLabel = _interopRequireDefault(require("./component-label"));
 var _myxss = _interopRequireDefault(require("./myxss"));
+var _excluded = ["placeholder"];
+/* eslint-disable quote-props */
+// eslint-disable-next-line max-classes-per-file
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable quote-props */ // eslint-disable-next-line max-classes-per-file
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// This component is used for text inputs (text, email, tel, number) and textarea 
+// to provide a floating placeholder that moves above the input 
+// when the user focuses on the input or when there is a value in the input. 
+// It accepts the following props:
+// - Tag: the HTML tag to use for the input (default is 'input', can be 'textarea' for multiline input)
+var FloatingPlaceholderInput = function FloatingPlaceholderInput(_ref) {
+  var _ref$Tag = _ref.Tag,
+    Tag = _ref$Tag === void 0 ? 'input' : _ref$Tag,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$mutable = _ref.mutable,
+    mutable = _ref$mutable === void 0 ? false : _ref$mutable;
+  var _useState = (0, _react.useState)(!!(defaultValue && String(defaultValue).length > 0)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hasValue = _useState2[0],
+    setHasValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setHasValue(!!(defaultValue && String(defaultValue).length > 0));
+  }, [defaultValue]);
+  var handleChange = function handleChange(e) {
+    var val = e.target.value;
+    setHasValue(val !== '' && val !== undefined && val !== null);
+    if (typeof inputProps.onChange === 'function') {
+      inputProps.onChange(e);
+    }
+  };
+  var handleFocus = function handleFocus(e) {
+    setFocused(true);
+    if (typeof inputProps.onFocus === 'function') {
+      inputProps.onFocus(e);
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    setFocused(false);
+    // If no value, ensure placeholder returns to original position
+    if (!ref.current || !ref.current.value) {
+      setHasValue(false);
+    }
+    if (typeof inputProps.onBlur === 'function') {
+      inputProps.onBlur(e);
+    }
+  };
+
+  // remove placeholder attribute from actual input to avoid duplicate text
+  var _ph = inputProps.placeholder,
+    restProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded);
+  var shrunken = hasValue || focused;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "floating-input-wrapper".concat(placeholder ? ' has-placeholder' : ''),
+    onClick: function onClick() {
+      if (ref.current) ref.current.focus();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, restProps, {
+    ref: ref,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    defaultValue: mutable ? defaultValue : undefined
+  })), placeholder && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "fb-placeholder ".concat(shrunken ? 'shrunken' : '')
+  }, placeholder));
+};
 var FormElements = {};
 
 // Helper function to format placeholder with asterisk if the field is required and label is hidden. 
@@ -197,7 +275,12 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         className: ["form-label",
         // In app, it's leveraged to identify element labels. Additionally removed !important of its specificity in scss to make it work with labelHidden.
         this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
@@ -238,7 +321,12 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
@@ -285,7 +373,12 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
@@ -326,7 +419,12 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("input", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
@@ -366,7 +464,13 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         className: "mb-3"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
         className: ["form-label", this.props.className, labelHidden ? "d-none" : ""].filter(Boolean).join(" ")
-      })), /*#__PURE__*/_react["default"].createElement("textarea", props)));
+      })), /*#__PURE__*/_react["default"].createElement(FloatingPlaceholderInput, {
+        Tag: "textarea",
+        inputProps: props,
+        placeholder: props.placeholder,
+        defaultValue: props.defaultValue,
+        mutable: this.props.mutable
+      })));
     }
   }]);
 }(_react["default"].Component);
@@ -832,9 +936,9 @@ var Camera = /*#__PURE__*/function (_React$Component17) {
   (0, _inherits2["default"])(Camera, _React$Component17);
   return (0, _createClass2["default"])(Camera, [{
     key: "getImageSizeProps",
-    value: function getImageSizeProps(_ref) {
-      var width = _ref.width,
-        height = _ref.height;
+    value: function getImageSizeProps(_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
       var imgProps = {
         width: '100%'
       };
@@ -1011,7 +1115,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
       });
     });
     (0, _defineProperty2["default"])(_this14, "saveFile", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
         var sourceUrl, response, dispositionHeader, resBlob, blob, fileName, _fileName;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -1052,7 +1156,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component18) {
         }, _callee);
       }));
       return function (_x) {
-        return _ref2.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     _this14.state = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.30",
+  "version": "0.20.3-build.31",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",