dibk-design 0.4.31 → 0.4.35

package/dist/components/InputField.js

@@ -11,18 +11,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = _interopRequireDefault(require("./Button"));
-
-var _Label = _interopRequireDefault(require("./Label"));
-
 var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
 
 var _dateFns = require("date-fns");
 
 var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
 
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _Label = _interopRequireDefault(require("./Label"));
+
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 require("react-datepicker/dist/react-datepicker.css");
 
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
@@ -100,65 +102,62 @@ var InputField = /*#__PURE__*/function (_React$Component) {
       return this.props.type === 'date' ? value ? this.convertDateToString(value) : defaultContent : value ? value : defaultContent;
     }
   }, {
-    key: "renderInputField",
-    value: function renderInputField() {
-      var _this$props$width,
-          _this = this;
-
-      var styleRules = _objectSpread(_objectSpread({}, this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), ((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
-        maxWidth: this.props.width
-      });
+    key: "getInputElementProps",
+    value: function getInputElementProps(defaultValue, styleRules) {
+      var _ref;
+
+      return _ref = {
+        name: this.props.name,
+        readOnly: this.props.readOnly,
+        disabled: this.props.disabled,
+        type: this.props.type,
+        id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
+        onChange: this.props.onChange,
+        onBlur: this.props.onBlur
+      }, _defineProperty(_ref, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_ref, "placeholder", this.props.placeholder), _defineProperty(_ref, "className", this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''), _defineProperty(_ref, 'aria-required', this.props.mandatory), _defineProperty(_ref, "style", styleRules), _ref;
+    }
+  }, {
+    key: "getDatePickerElementProps",
+    value: function getDatePickerElementProps(defaultValue) {
+      var _this = this;
 
-      if (this.props.type === 'date') {
-        var value = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
-        var props = {
-          name: this.props.name,
-          readOnly: this.props.readOnly,
-          disabled: this.props.disabled,
-          id: this.props.id,
-          dateFormat: this.props.dateFormat,
-          locale: 'nb',
-          selectsStart: this.props.selectsStart,
-          selectsEnd: this.props.selectsEnd,
-          startDate: this.props.startDate ? new Date(this.props.startDate) : null,
-          endDate: this.props.endDate ? new Date(this.props.endDate) : null,
-          minDate: this.props.minDate || null,
-          maxDate: this.props.maxDate || null,
-          onChange: this.props.onChange ? function (date) {
-            return _this.props.onChange(date);
-          } : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
-          onBlur: this.props.onBlur ? function (date) {
-            return _this.props.onBlur(date);
-          } : null,
-          selected: value ? new Date(value) : null,
-          placeholderText: this.props.placeholder,
-          className: this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''
-        };
-        return /*#__PURE__*/_react.default.createElement("div", {
-          style: styleRules
-        }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, props));
-      } else {
-        var _props2;
-
-        var defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
-
-        var _props = (_props2 = {
-          name: this.props.name,
-          readOnly: this.props.readOnly,
-          disabled: this.props.disabled,
-          type: this.props.type,
-          id: this.props.id,
-          onChange: this.props.onChange,
-          onBlur: this.props.onBlur
-        }, _defineProperty(_props2, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props2, "placeholder", this.props.placeholder), _defineProperty(_props2, "className", this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''), _defineProperty(_props2, 'aria-required', this.props.mandatory), _defineProperty(_props2, "style", styleRules), _props2);
-
-        return /*#__PURE__*/_react.default.createElement("input", _props);
-      }
+      return {
+        name: this.props.name,
+        readOnly: this.props.readOnly,
+        disabled: this.props.disabled,
+        id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
+        dateFormat: this.props.dateFormat,
+        locale: 'nb',
+        selectsStart: this.props.selectsStart,
+        selectsEnd: this.props.selectsEnd,
+        startDate: this.props.startDate ? new Date(this.props.startDate) : null,
+        endDate: this.props.endDate ? new Date(this.props.endDate) : null,
+        minDate: this.props.minDate || null,
+        maxDate: this.props.maxDate || null,
+        onChange: this.props.onChange ? function (date) {
+          return _this.props.onChange(date);
+        } : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
+        onBlur: this.props.onBlur ? function (date) {
+          return _this.props.onBlur(date);
+        } : null,
+        selected: defaultValue ? new Date(defaultValue) : null,
+        placeholderText: this.props.placeholder,
+        className: this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''
+      };
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this$props$width,
+          _this2 = this;
+
+      var defaultValue = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
+
+      var styleRules = _objectSpread(_objectSpread({}, this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), ((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
+        maxWidth: this.props.width
+      });
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[this.props.type])
@@ -175,7 +174,9 @@ var InputField = /*#__PURE__*/function (_React$Component) {
         },
         content: this.props.buttonContent,
         theme: this.props.theme
-      }) : '') : ''), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
+      }) : '') : ''), !this.props.contentOnly ? this.props.type === 'date' ? /*#__PURE__*/_react.default.createElement("div", {
+        style: styleRules
+      }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, this.getDatePickerElementProps(defaultValue))) : /*#__PURE__*/_react.default.createElement("input", this.getInputElementProps(defaultValue, styleRules)) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
         className: _InputFieldModule.default.errorMessage,
         style: this.getThemeErrorMessageStyle(this.props.theme)
       }, this.props.errorMessage ? this.props.errorMessage : ''));

package/dist/components/Select.js

@@ -13,6 +13,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -151,7 +153,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         var props = (_props = {
           name: this.props.name,
           multiple: this.props.multiple
-        }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "onChange", this.props.onChange), _defineProperty(_props, "id", this.props.id), _defineProperty(_props, "className", this.props.hasErrors ? _SelectModule.default.hasErrors : ''), _defineProperty(_props, "style", styleRules), _props);
+        }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "onChange", this.props.onChange), _defineProperty(_props, "id", this.props.id), _defineProperty(_props, "key", "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_props, "className", this.props.hasErrors ? _SelectModule.default.hasErrors : ''), _defineProperty(_props, "style", styleRules), _props);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: _SelectModule.default.select
         }, /*#__PURE__*/_react.default.createElement(_Label.default, {

package/dist/components/Textarea.js

@@ -15,6 +15,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,6 +97,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         type: this.props.type,
         id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
         onChange: this.props.onChange,
         onBlur: this.props.onBlur
       }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "placeholder", this.props.placeholder), _defineProperty(_props, "rows", this.props.rows), _defineProperty(_props, "className", this.props.hasErrors ? _TextareaModule.default.hasErrors : ''), _defineProperty(_props, 'aria-required', this.props.mandatory), _defineProperty(_props, "style", styleRules), _props);

package/dist/functions/generators.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateRandomString = void 0;
+
+var generateRandomString = function generateRandomString(length) {
+  var result = '';
+  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  var charactersLength = characters.length;
+
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+
+  return result;
+};
+
+exports.generateRandomString = generateRandomString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "0.4.31",
+  "version": "0.4.35",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",