iguazio.dashboard-react-controls 0.0.7 → 0.0.10

package/dist/index.js

@@ -5,12 +5,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.types = exports.hooks = exports.constants = exports.components = void 0;
+exports.types = exports.hooks = exports.elements = exports.constants = exports.components = void 0;
 
 var components = _interopRequireWildcard(require("./components"));
 
 exports.components = components;
 
+var constants = _interopRequireWildcard(require("./constants"));
+
+exports.constants = constants;
+
+var elements = _interopRequireWildcard(require("./elements"));
+
+exports.elements = elements;
+
 var hooks = _interopRequireWildcard(require("./hooks"));
 
 exports.hooks = hooks;
@@ -19,10 +27,6 @@ var types = _interopRequireWildcard(require("./types"));
 
 exports.types = types;
 
-var constants = _interopRequireWildcard(require("./constants"));
-
-exports.constants = constants;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/scss/common.scss

@@ -48,6 +48,41 @@ textarea {
   line-height: 18px;
   white-space: nowrap;
   text-overflow: ellipsis;
+  border: 0;
+  color: inherit;
+  background-color: transparent;
+  padding: 0;
+  resize: none;
+  width: 100%;
+
+  &::placeholder {
+    color: $spunPearl;
+  }
+
+  &::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: $spunPearl;
+  }
+
+  &::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $spunPearl;
+  }
+
+  &:-ms-input-placeholder {
+    /* IE 10+ */
+    color: $spunPearl;
+  }
+
+  &:-moz-placeholder {
+    /* Firefox 18- */
+    color: $spunPearl;
+  }
+
+  &:disabled {
+    background: transparent;
+    cursor: not-allowed;
+  }
 
   &:active,
   &:focus {

package/dist/scss/mixins.scss

@@ -1,5 +1,6 @@
 @import './colors';
 @import './borders';
+@import './variables.scss';
 
 @mixin fixed {
   position: fixed;
@@ -983,6 +984,10 @@
 }
 
 @mixin fieldWrapper {
+  display: flex;
+  flex: 1;
+  flex-flow: row nowrap;
+  align-items: center;
   position: relative;
   width: 100%;
   color: $primary;
@@ -990,3 +995,99 @@
   border: $primaryBorder;
   border-radius: 4px;
 }
+
+@mixin formField {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
+
+  &__label {
+    margin-bottom: 5px;
+    color: $topaz;
+    font-size: 12px;
+    text-align: left;
+    text-transform: capitalize;
+    background-color: transparent;
+
+    &-mandatory {
+      color: $amaranth;
+    }
+
+    &-disabled {
+      color: $spunPearl;
+
+      .form-field__label-mandatory {
+        color: $spunPearl;
+      }
+    }
+  }
+
+  &__wrapper {
+    @include fieldWrapper;
+
+    &-disabled {
+      color: $spunPearl;
+      cursor: not-allowed;
+    }
+
+    &-invalid {
+      border: $errorBorder;
+    }
+
+    &.without-border {
+      border-color: transparent;
+    }
+
+    &-dense {
+      .form-field__control > *:first-child {
+        height: $fieldDense;
+      }
+    }
+
+    &-normal {
+      .form-field__control > *:first-child {
+        height: $fieldNormal;
+      }
+    }
+
+    &-medium {
+      .form-field__control > *:first-child {
+        height: $fieldMedium;
+      }
+    }
+
+    &-chunky {
+      .form-field__control > *:first-child {
+        height: $fieldChunky;
+      }
+    }
+  }
+
+  &__control {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 8px 0 16px;
+  }
+
+  &__icons {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    min-height: 25px;
+
+    & > * {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+
+      &:last-child {
+        margin-right: 4px;
+      }
+    }
+  }
+}

package/dist/scss/variables.scss

@@ -12,3 +12,9 @@ $headerHeight: 64px;
 
 $primaryTextColor: $primary;
 $secondaryTextColor: $topaz;
+
+//Fields and button heights
+$fieldDense: 36px;
+$fieldNormal: 40px;
+$fieldMedium: 44px;
+$fieldChunky: 48px;

package/dist/utils/form.util.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setFieldState = void 0;
+
+var _lodash = require("lodash");
+
+var setFieldState = function setFieldState(args, state) {
+  var fieldName = args[0];
+  var states = args[1];
+  var field = state.fields[fieldName];
+
+  if (field) {
+    for (var stateName in states) {
+      (0, _lodash.set)(field, stateName, states[stateName]);
+    }
+  }
+};
+
+exports.setFieldState = setFieldState;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "0.0.7",
+    "version": "0.0.10",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -26,8 +26,10 @@
         "react-dom": "*",
         "react-modal-promise": "*",
         "react-transition-group": "*",
-        "final-form": "^4.20.7",
-        "react-final-form": "^6.5.9"
+        "final-form": "*",
+        "final-form-arrays": "*",
+        "react-final-form": "*",
+        "react-final-form-arrays": "*"
     },
     "devDependencies": {
         "@babel/cli": "^7.17.6",
@@ -59,13 +61,15 @@
         "eslint-plugin-storybook": "^0.5.10",
         "eslint-webpack-plugin": "^3.1.1",
         "lodash": "^4.17.21",
-        "node": "14.18.1",
+        "node": "14.19.0",
         "prettier": "^2.5.1",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "final-form": "^4.20.7",
+        "final-form-arrays": "^3.0.2",
         "react-final-form": "^6.5.9",
+        "react-final-form-arrays": "^3.1.3",
         "react-modal-promise": "^1.0.2",
         "react-scripts": "5.0.0",
         "react-transition-group": "^4.4.2",