guestbell-forms 3.0.18 → 3.0.19

package/build/components/tags/Tags.js

@@ -4,109 +4,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultTagsTranslations = exports.default = exports.TagsRaw = exports.Tags = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _InputGroup = require("../inputGroup/InputGroup");
-
 var _Text = require("../text/Text");
-
 var _BaseInput = require("../base/input/BaseInput");
-
 var _Button = require("../button/Button");
-
 var _TagsSuggestions = _interopRequireDefault(require("./subComponents/TagsSuggestions"));
-
 var _withFormContext = require("../form/withFormContext");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _withThemeContext = require("../themeProvider/withThemeContext");
-
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-
 var _Portal = _interopRequireDefault(require("@mui/material/Portal"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
 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); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Libs
 var PlusIcon = function PlusIcon(props) {
   return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
     d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
   }));
 };
-
 PlusIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
-
 var LeftArrowIcon = function LeftArrowIcon(props) {
   return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
     d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
   }));
 };
-
 LeftArrowIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
+// Misc
 
 const defaultTagsTranslations = _objectSpread(_objectSpread({}, _BaseInput.defaultBaseTranslations), {}, {
   addNew: 'Add new'
 });
-
 exports.defaultTagsTranslations = defaultTagsTranslations;
-
 const TagButtonComponent = p => /*#__PURE__*/React.createElement("a", {
   className: p.className,
   id: p.id,
   onClick: p.onClick
 }, p.children);
-
 class TagsRaw extends _BaseInput.BaseInput {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
-
-    _defineProperty(this, "textRef", void 0);
-
-    _defineProperty(this, "suggestionsRef", void 0);
-
-    _defineProperty(this, "isMobile", false);
-
-    _defineProperty(this, "onTextErrorsChanged", textErrors => this.setState(() => ({
+    this.isMobile = false;
+    this.onTextErrorsChanged = textErrors => this.setState(() => ({
       textErrors
-    }), () => this.handleErrors()));
-
-    _defineProperty(this, "onFocus", () => {
+    }), () => this.handleErrors());
+    this.onFocus = () => {
       var _this$props$onFocus, _this$props;
-
       (_this$props$onFocus = (_this$props = this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props);
-
       if (!this.state.suggestionsVisible) {
         var _this$props$onSuggest, _this$props2;
-
         (_this$props$onSuggest = (_this$props2 = this.props).onSuggestionsOpened) === null || _this$props$onSuggest === void 0 ? void 0 : _this$props$onSuggest.call(_this$props2);
       }
-
       this.fetchExistingTags(this.state.value);
       this.setState(() => ({
         textIsFocused: true,
@@ -114,29 +80,24 @@ class TagsRaw extends _BaseInput.BaseInput {
         touched: true
       }), () => this.handleErrors());
       const showMobileVersion = this.props.mobileVersionEnabled && this.isMobile && (this.state.textIsFocused || this.state.suggestionsVisible);
-
       if (!showMobileVersion && this.props.mobileVersionEnabled && this.isMobile) {
         setTimeout(() => {
           var _this$textRef$current;
-
           return (_this$textRef$current = this.textRef.current) === null || _this$textRef$current === void 0 ? void 0 : _this$textRef$current.focus();
         }, 100);
       }
-    });
-
-    _defineProperty(this, "onKeyDown", suggestions => async e => {
+    };
+    this.onKeyDown = suggestions => async e => {
       if (e.key === 'Tab') {
         this.setState({
           suggestionsVisible: false,
           preselectedSuggestion: undefined
         });
       }
-
       if (e.key === 'Enter' && (this.state.value !== '' || this.state.preselectedSuggestion !== undefined) && this.state.textErrors.length === 0) {
         e.preventDefault();
         e.stopPropagation();
         const existingTag = this.props.existingTags && this.props.existingTags.find(et => et.name === this.state.value);
-
         if (this.state.preselectedSuggestion !== undefined) {
           this.props.onTagsChanged(this.props.tags.concat(suggestions[this.state.preselectedSuggestion]));
           this.setState({
@@ -159,7 +120,6 @@ class TagsRaw extends _BaseInput.BaseInput {
           this.handleErrors();
         }
       }
-
       if (suggestions.length > 0 && this.state.suggestionsVisible) {
         if (e.key === 'ArrowUp') {
           const preselectedSuggestion = this.state.preselectedSuggestion === undefined ? suggestions.length - 1 : this.state.preselectedSuggestion === 0 ? suggestions.length - 1 : this.state.preselectedSuggestion - 1;
@@ -177,18 +137,15 @@ class TagsRaw extends _BaseInput.BaseInput {
           });
         }
       }
-    });
-
-    _defineProperty(this, "addNewTag", async () => {
+    };
+    this.addNewTag = async () => {
       const newTag = await this.props.onNewTagAdded(this.state.value);
       this.setState({
         suggestionsVisible: this.props.closeSuggestionsAfterCreate ? false : this.state.suggestionsVisible
       });
-
       if (newTag) {
         this.props.onTagsChanged(this.props.tags ? this.props.tags.concat(newTag) : [newTag]);
       }
-
       this.setState({
         value: '',
         textErrors: []
@@ -196,9 +153,8 @@ class TagsRaw extends _BaseInput.BaseInput {
         this.fetchExistingTags();
         this.handleErrors();
       });
-    });
-
-    _defineProperty(this, "onSuggestionSelected", (tag, lastSelected) => {
+    };
+    this.onSuggestionSelected = (tag, lastSelected) => {
       const newTags = this.props.tags.concat(tag);
       this.props.onTagsChanged(newTags);
       const isMax = newTags.length === this.props.maxTags;
@@ -212,22 +168,18 @@ class TagsRaw extends _BaseInput.BaseInput {
         if (!this.props.maxTags || this.props.tags.length + 1 < this.props.maxTags) {
           this.fetchExistingTags(finalValue);
         }
-
         this.handleErrors();
       });
-    });
-
-    _defineProperty(this, "onBlur", () => {
+    };
+    this.onBlur = () => {
       var _this$props$onBlur, _this$props3;
-
       (_this$props$onBlur = (_this$props3 = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
       this.setState({
         textIsFocused: false,
         preselectedSuggestion: undefined
       }, () => this.handleErrors());
-    });
-
-    _defineProperty(this, "onTextChanged", (e, isValid) => {
+    };
+    this.onTextChanged = (e, isValid) => {
       const value = e.target.value;
       this.setState(() => ({
         value,
@@ -236,25 +188,20 @@ class TagsRaw extends _BaseInput.BaseInput {
         suggestionsVisible: true
       }), () => this.handleErrors());
       this.fetchExistingTags(e.target.value);
-    });
-
-    _defineProperty(this, "handleErrors", function () {
+    };
+    this.handleErrors = function () {
       let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.tags;
-
       let errors = _this.getErrors(tags);
-
       if (errors.length > 0) {
         _this.setInvalid(errors);
       } else {
         _this.setValid();
       }
-    });
-
-    _defineProperty(this, "tagClick", tag => () => {
+    };
+    this.tagClick = tag => () => {
       this.props.onTagClick && this.props.onTagClick(tag);
-    });
-
-    _defineProperty(this, "tagRemoveClick", tag => e => {
+    };
+    this.tagRemoveClick = tag => e => {
       e.stopPropagation();
       const newTags = this.props.tags.filter(sv => sv.id !== tag.id);
       /*if (newTags.length === 0) {
@@ -263,11 +210,10 @@ class TagsRaw extends _BaseInput.BaseInput {
       this.setState({
         suggestionsVisible: false,
       });*/
-
       this.props.onTagsChanged && this.props.onTagsChanged(newTags);
-      this.handleErrors(newTags); // this.fetchExistingTags();
-    });
-
+      this.handleErrors(newTags);
+      // this.fetchExistingTags();
+    };
     this.state = _objectSpread(_objectSpread({}, this.state), {}, {
       textErrors: [],
       textIsFocused: false,
@@ -280,26 +226,21 @@ class TagsRaw extends _BaseInput.BaseInput {
     this.suggestionsRef = /*#__PURE__*/React.createRef();
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.handleLeaveMobileClick = this.handleLeaveMobileClick.bind(this);
-
     if (props.mobileVersionEnabled) {
       var _require;
-
       this.isMobile = (_require = require('react-device-detect')) === null || _require === void 0 ? void 0 : _require.isMobile;
     }
   }
-
   focus() {
     if (this.textRef.current) {
       this.textRef.current.focus();
     }
   }
-
   componentDidUpdate(oldProps) {
     if (oldProps.tags !== this.props.tags || oldProps.validators !== this.props.validators || oldProps.customValidators !== this.props.customValidators || oldProps.required !== this.props.required) {
       this.handleErrors(this.props.tags);
     }
   }
-
   handleLeaveMobileClick() {
     this.setState({
       textIsFocused: false,
@@ -307,39 +248,30 @@ class TagsRaw extends _BaseInput.BaseInput {
       preselectedSuggestion: undefined
     });
   }
-
   handleClickOutside(e) {
     var _this$containerRef$cu, _this$containerRef$cu2;
-
     if (!this.containerRef.current || (_this$containerRef$cu = this.containerRef.current.querySelector('.tags-input__tag__wrapper')) !== null && _this$containerRef$cu !== void 0 && _this$containerRef$cu.contains(e.target) || (_this$containerRef$cu2 = this.containerRef.current.querySelector('.tags-input__text-input')) !== null && _this$containerRef$cu2 !== void 0 && _this$containerRef$cu2.contains(e.target) || !this.suggestionsRef.current || this.suggestionsRef.current.contains(e.target)) {
       return;
     }
-
     if (this.state.suggestionsVisible) {
       var _this$props$onSuggest2, _this$props4;
-
       (_this$props$onSuggest2 = (_this$props4 = this.props).onSuggestionsClosed) === null || _this$props$onSuggest2 === void 0 ? void 0 : _this$props$onSuggest2.call(_this$props4);
     }
-
     this.setState({
       suggestionsVisible: false,
       preselectedSuggestion: undefined
     });
-
     if (this.props.addNewOnBlur && this.state.value) {
       const suggestions = this.getSuggestions();
       const existing = suggestions.find(s => s.name === this.state.value);
-
       if (existing) {
         this.onSuggestionSelected(existing, suggestions.length === 1);
       } else if (this.props.allowNew) {
         this.addNewTag();
       }
-    }
-    /* else if (this.state.value) {
-    this.setState({ value: '' });
-    }*/
-
+    } /* else if (this.state.value) {
+      this.setState({ value: '' });
+      }*/
   }
 
   componentDidMount() {
@@ -347,13 +279,11 @@ class TagsRaw extends _BaseInput.BaseInput {
     document.addEventListener('touchstart', this.handleClickOutside);
     this.handleErrors(this.props.tags);
   }
-
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClickOutside);
     document.removeEventListener('touchstart', this.handleClickOutside);
     super.componentWillUnmount();
   }
-
   render() {
     const translations = this.getTranslations(defaultTagsTranslations);
     const textProps = this.props.textProps ? this.props.textProps : {};
@@ -443,32 +373,24 @@ class TagsRaw extends _BaseInput.BaseInput {
       className: this.state.value !== '' || this.state.textIsFocused || this.props.readOnly || this.props.tags.length >= this.props.maxTags || showMobileVersion ? 'label--focused' : ''
     }, this.renderLabel()))));
   }
-
   getErrors(tags) {
     let errors = [];
-
     if (tags.length < this.props.maxTags) {
       errors = errors.concat(this.state.textErrors);
     }
-
     if (this.state.value !== '' && tags.length === 0 && this.props.required) {
       errors = errors.concat(this.getTranslations(this.props.translations).required);
     }
-
     if (this.state.value && this.props.allowNew && !this.state.textIsFocused) {
       errors = errors.concat(this.props.valueNotAddedError);
     }
-
     if (this.props.maxTags < (this.props.tags && this.props.tags.length)) {
       errors = errors.concat(this.props.maxTagsSurpassedError);
     }
-
     return errors.filter(i => i);
   }
-
   fetchExistingTags() {
     let startsWith = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
     if (this.props.fetchExistingTags && startsWith.length >= this.props.minLettersToFetch) {
       const timer = setTimeout(() => this.setState(() => ({
         fetchingExistingTags: true
@@ -482,14 +404,12 @@ class TagsRaw extends _BaseInput.BaseInput {
       });
     }
   }
-
   getSuggestions() {
     const existingTags = [].concat(this.props.existingTags ? this.props.existingTags : []).concat(this.state.fetchedExistingTags ? this.state.fetchedExistingTags : []);
     const filteredTags = this.props.filterExistingTags(this.state.value ? this.state.value.toLowerCase() : '', existingTags);
     let suggestions = filteredTags.filter(tag => this.props.allowSameTagMultipleTimes || !this.props.tags.some(t => t.id === tag.id)).slice(0, this.props.maxSuggestions);
     return suggestions;
   }
-
   renderTag(tag, index) {
     const body = /*#__PURE__*/React.createElement(React.Fragment, null, tag.name, !this.props.readOnly && /*#__PURE__*/React.createElement(_Button.Button, _extends({}, this.props.id && {
       id: this.props.id + '-tag-' + index.toString()
@@ -504,7 +424,6 @@ class TagsRaw extends _BaseInput.BaseInput {
     const className = (0, _classnames.default)('tags-input__tag', {
       'tags-input__tag-chip': this.props.showChips
     });
-
     if (this.props.onTagClick) {
       return /*#__PURE__*/React.createElement(_Button.Button, {
         onClick: this.tagClick(tag),
@@ -513,19 +432,15 @@ class TagsRaw extends _BaseInput.BaseInput {
         key: index
       }, body);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       onClick: this.tagClick(tag),
       className: className,
       key: index
     }, body);
   }
-
 }
-
 exports.TagsRaw = TagsRaw;
-
-_defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseInput.BaseInput.defaultProps), {}, {
+TagsRaw.defaultProps = _objectSpread(_objectSpread({}, _BaseInput.BaseInput.defaultProps), {}, {
   disabled: false,
   className: '',
   tags: [],
@@ -552,9 +467,9 @@ _defineProperty(TagsRaw, "defaultProps", _objectSpread(_objectSpread({}, _BaseIn
   minLettersToFetch: 0,
   mobileVersionEnabled: true,
   closeSuggestionsAfterCreate: false
-}));
-
-const Tags = (0, _withThemeContext.withThemeContext)( // tslint:disable-next-line: no-any
+});
+const Tags = (0, _withThemeContext.withThemeContext)(
+// tslint:disable-next-line: no-any
 (0, _withFormContext.withFormContext)(TagsRaw), 'tags');
 exports.Tags = Tags;
 var _default = Tags;