@uncinc/uncinc-react-kitchen-sink 2.3.6 → 2.4.1

package/dist/components/Form/SearchField/index.js

@@ -1,32 +1,38 @@
-import React from 'react';
-import { Field } from 'formik';
-import c from 'classnames';
-import withMapping from '../../../Context/withMapping';
-import WysiwygField from '../../WysiwygField';
-const SearchField = props => {
-  const {
-    title,
-    required,
-    description,
-    placeholder,
-    fieldName,
-    validation,
-    touched,
-    error,
-    type,
-    value,
-    className,
-    wrapperClassName,
-    disabled = false
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: c("SearchField", wrapperClassName)
-  }, title && /*#__PURE__*/React.createElement("label", {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _formik = require("formik");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _withMapping = _interopRequireDefault(require("../../../Context/withMapping"));
+var _WysiwygField = _interopRequireDefault(require("../../WysiwygField"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SearchField = function SearchField(props) {
+  var title = props.title,
+    required = props.required,
+    description = props.description,
+    placeholder = props.placeholder,
+    fieldName = props.fieldName,
+    validation = props.validation,
+    touched = props.touched,
+    error = props.error,
+    type = props.type,
+    value = props.value,
+    className = props.className,
+    wrapperClassName = props.wrapperClassName,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('SearchField', wrapperClassName)
+  }, title && /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: fieldName
-  }, title, " ", !required && /*#__PURE__*/React.createElement("div", {
+  }, title, " ", !required && /*#__PURE__*/_react.default.createElement("div", {
     className: "WebformComponent--optional"
-  }, "- ", 'optioneel')), /*#__PURE__*/React.createElement(Field, {
-    className: c(className, {
+  }, "- optioneel")), /*#__PURE__*/_react.default.createElement(_formik.Field, {
+    className: (0, _classnames.default)(className, {
       'error': error && touched
     }),
     name: fieldName,
@@ -35,12 +41,13 @@ const SearchField = props => {
     placeholder: placeholder,
     validate: validation,
     disabled: disabled
-  }), description && /*#__PURE__*/React.createElement(WysiwygField, {
+  }), description && /*#__PURE__*/_react.default.createElement(_WysiwygField.default, {
     property: "schema:text",
     html: description,
     className: "SearchField__description WebformComponent--description"
-  }), error && touched ? /*#__PURE__*/React.createElement("div", {
+  }), error && touched ? /*#__PURE__*/_react.default.createElement("div", {
     className: "SearchField__error WebformComponent--error"
   }, error) : null);
 };
-export default withMapping(SearchField);
+var _default = (0, _withMapping.default)(SearchField);
+exports.default = _default;

package/dist/components/Form/Select/Input/index.js

@@ -1,35 +1,41 @@
-import React from 'react';
-import SelectStyled from 'react-select';
-import c from 'classnames';
-import { Field } from 'formik';
-import './style.scss';
-const SelectInput = props => {
-  const {
-    fieldName,
-    id,
-    validation,
-    value,
-    defaultValue,
-    onChange,
-    options,
-    placeholder,
-    disabled,
-    className,
-    wrapperClassName,
-    isClearable = true,
-    isSearchable = true,
-    multiple = false,
-    size
-  } = props;
-  let {
-    selectedOption
-  } = props;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactSelect = _interopRequireDefault(require("react-select"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _formik = require("formik");
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SelectInput = function SelectInput(props) {
+  var fieldName = props.fieldName,
+    id = props.id,
+    validation = props.validation,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    _onChange = props.onChange,
+    options = props.options,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    className = props.className,
+    wrapperClassName = props.wrapperClassName,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? true : _props$isClearable,
+    _props$isSearchable = props.isSearchable,
+    isSearchable = _props$isSearchable === void 0 ? true : _props$isSearchable,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    size = props.size;
+  var selectedOption = props.selectedOption;
 
   // Check if options is [{value, label}] or {value: label}.
-  let optionsTransformed = options;
+  var optionsTransformed = options;
   if (!Array.isArray(options)) {
-    optionsTransformed = Object.keys(options).map(value => {
-      const label = options[value];
+    optionsTransformed = Object.keys(options).map(function (value) {
+      var label = options[value];
       return {
         value: value,
         label: label
@@ -40,56 +46,53 @@ const SelectInput = props => {
   // If the selected option is not set, find the currently selected option by value.
   if (!selectedOption) {
     if (multiple) {
-      const _value = value !== undefined ? value : defaultValue || [];
-      selectedOption = optionsTransformed.filter(option => {
+      var _value = value !== undefined ? value : defaultValue || [];
+      selectedOption = optionsTransformed.filter(function (option) {
         return _value.includes(option.value);
       });
     } else {
-      const _value = value !== undefined ? value : defaultValue || '';
-      selectedOption = optionsTransformed.find(option => {
-        return option.value === _value;
+      var _value2 = value !== undefined ? value : defaultValue || '';
+      selectedOption = optionsTransformed.find(function (option) {
+        return option.value === _value2;
       });
     }
   }
-  return /*#__PURE__*/React.createElement(Field, {
+  return /*#__PURE__*/_react.default.createElement(_formik.Field, {
     required: true,
     name: fieldName,
     value: value,
     validate: validation
-  }, ({
-    field,
-    form
-  }) => {
-    return /*#__PURE__*/React.createElement(SelectStyled, {
+  }, function (_ref) {
+    var field = _ref.field,
+      form = _ref.form;
+    return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
       id: id,
-      className: c("Select__select", className),
-      classNamePrefix: c("Select__inner", wrapperClassName),
+      className: (0, _classnames.default)('Select__select', className),
+      classNamePrefix: (0, _classnames.default)('Select__inner', wrapperClassName),
       value: selectedOption,
       defaultValue: defaultValue,
       disabled: disabled,
-      onChange: e => {
-        let value = '';
+      onChange: function onChange(e) {
+        var value = '';
         if (e) {
           if (multiple) {
-            value = e.map(item => {
+            value = e.map(function (item) {
               return item.value;
             });
           } else {
             value = e.value;
           }
-        } else {
-          if (multiple) {
-            value = [];
-          }
+        } else if (multiple) {
+          value = [];
         }
-        if (onChange) {
-          onChange(value);
+        if (_onChange) {
+          _onChange(value);
         }
         form.setFieldValue(fieldName, value);
       },
       options: optionsTransformed,
       isMulti: multiple,
-      isOptionDisabled: option => {
+      isOptionDisabled: function isOptionDisabled(option) {
         if (option.disabled) {
           return true;
         }
@@ -104,26 +107,27 @@ const SelectInput = props => {
       theme: {
         borderRadius: 0,
         colors: {
-          danger: "#DE350B",
-          dangerLight: "#FFBDAD",
-          neutral0: "hsl(0, 0%, 100%)",
-          neutral10: "hsl(0, 0%, 90%)",
-          neutral20: "hsl(0, 0%, 80%)",
-          neutral30: "hsl(0, 0%, 70%)",
-          neutral40: "hsl(0, 0%, 60%)",
-          neutral5: "hsl(0, 0%, 95%)",
-          neutral50: "hsl(0, 0%, 50%)",
-          neutral60: "hsl(0, 0%, 40%)",
-          neutral70: "hsl(0, 0%, 30%)",
-          neutral80: "hsl(0, 0%, 20%)",
-          neutral90: "hsl(0, 0%, 10%)",
-          primary: "#f0694b",
-          primary25: "hsla(0,0%,0%, 0)",
-          primary50: "hsla(0,0%,0%, 0)",
-          primary75: "hsla(0,0%,0%, 0)"
+          danger: '#DE350B',
+          dangerLight: '#FFBDAD',
+          neutral0: 'hsl(0, 0%, 100%)',
+          neutral10: 'hsl(0, 0%, 90%)',
+          neutral20: 'hsl(0, 0%, 80%)',
+          neutral30: 'hsl(0, 0%, 70%)',
+          neutral40: 'hsl(0, 0%, 60%)',
+          neutral5: 'hsl(0, 0%, 95%)',
+          neutral50: 'hsl(0, 0%, 50%)',
+          neutral60: 'hsl(0, 0%, 40%)',
+          neutral70: 'hsl(0, 0%, 30%)',
+          neutral80: 'hsl(0, 0%, 20%)',
+          neutral90: 'hsl(0, 0%, 10%)',
+          primary: '#f0694b',
+          primary25: 'hsla(0,0%,0%, 0)',
+          primary50: 'hsla(0,0%,0%, 0)',
+          primary75: 'hsla(0,0%,0%, 0)'
         }
       }
     });
   });
 };
-export default SelectInput;
+var _default = SelectInput;
+exports.default = _default;

package/dist/components/Form/Select/index.js

@@ -1,25 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _Input = _interopRequireDefault(require("./Input"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
-import React from 'react';
-import c from 'classnames';
-import GenericFormElement from '../GenericFormElement';
-import SelectInput from './Input';
-import './style.scss';
-const Select = props => {
-  const {
-    title,
-    fieldName,
-    required,
-    description,
-    error,
-    touched,
-    displayRequiredIndicator,
-    className,
-    wrapperClassName,
-    disabled = false,
-    multiple = false
-  } = props;
-  return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("Select", wrapperClassName),
+var Select = function Select(props) {
+  var title = props.title,
+    fieldName = props.fieldName,
+    required = props.required,
+    description = props.description,
+    error = props.error,
+    touched = props.touched,
+    displayRequiredIndicator = props.displayRequiredIndicator,
+    className = props.className,
+    wrapperClassName = props.wrapperClassName,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple;
+  return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
+    className: (0, _classnames.default)('Select', wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -27,12 +34,13 @@ const Select = props => {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, /*#__PURE__*/React.createElement(SelectInput, _extends({}, props, {
-    className: c(className, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, _extends({}, props, {
+    className: (0, _classnames.default)(className, {
       'error': error && touched
     }),
     disabled: disabled,
     multiple: multiple
   })));
 };
-export default Select;
+var _default = Select;
+exports.default = _default;

package/dist/components/Form/Select/stories.js

@@ -1,11 +1,19 @@
-import React from 'react';
-import FormikWrapper from '../FormikWrapper';
-import FormikSelect from '.';
-export default {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectMultiple = exports.Select = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
   title: 'Molecules/Form'
 };
-export const Select = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+exports.default = _default;
+var Select = function Select() {
+  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -18,20 +26,21 @@ export const Select = () => {
       whisky: 'Whisk(e)y'
     },
     defaultValue: "wine",
-    validation: value => {
-      let error;
+    validation: function validation(value) {
+      var error;
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
       return error;
     },
-    onChange: e => {
+    onChange: function onChange(e) {
       console.log(e);
     }
   }));
 };
-export const SelectMultiple = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikSelect, {
+exports.Select = Select;
+var SelectMultiple = function SelectMultiple() {
+  return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
     title: "Pick your poison",
     required: true,
     description: "This is a test input.",
@@ -46,15 +55,16 @@ export const SelectMultiple = () => {
       whisky: 'Whisk(e)y'
     },
     defaultValue: ['wine'],
-    validation: value => {
-      let error;
+    validation: function validation(value) {
+      var error;
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
       return error;
     },
-    onChange: e => {
+    onChange: function onChange(e) {
       console.log(e);
     }
   }));
-};
+};
+exports.SelectMultiple = SelectMultiple;

package/dist/components/Form/TextField/index.js

@@ -1,31 +1,35 @@
-import React from 'react';
-import { Field } from 'formik';
-import c from 'classnames';
-import withMapping from '../../../Context/withMapping';
-import GenericFormElement from '../GenericFormElement';
-import './style.scss';
-const TextField = props => {
-  const {
-    title,
-    required,
-    description,
-    placeholder,
-    fieldName,
-    validation,
-    touched,
-    error,
-    value,
-    displayRequiredIndicator,
-    onChange,
-    className,
-    wrapperClassName,
-    disabled = false
-  } = props;
-  const type = props.type || "text";
-  const handleChange = e => {
-    const {
-      handleChange
-    } = props;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _formik = require("formik");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _withMapping = _interopRequireDefault(require("../../../Context/withMapping"));
+var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var TextField = function TextField(props) {
+  var title = props.title,
+    required = props.required,
+    description = props.description,
+    placeholder = props.placeholder,
+    fieldName = props.fieldName,
+    validation = props.validation,
+    touched = props.touched,
+    error = props.error,
+    value = props.value,
+    displayRequiredIndicator = props.displayRequiredIndicator,
+    onChange = props.onChange,
+    className = props.className,
+    wrapperClassName = props.wrapperClassName,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+  var type = props.type || 'text';
+  var handleChange = function handleChange(e) {
+    var handleChange = props.handleChange;
     if (handleChange) {
       handleChange(e);
     }
@@ -33,8 +37,8 @@ const TextField = props => {
       onChange(e);
     }
   };
-  return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("TextField", wrapperClassName),
+  return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
+    className: (0, _classnames.default)('TextField', wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -42,8 +46,8 @@ const TextField = props => {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, /*#__PURE__*/React.createElement(Field, {
-    className: c(className, {
+  }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+    className: (0, _classnames.default)(className, {
       'error': error && touched
     }),
     name: fieldName,
@@ -55,4 +59,5 @@ const TextField = props => {
     disabled: disabled
   }));
 };
-export default withMapping(TextField);
+var _default = (0, _withMapping.default)(TextField);
+exports.default = _default;