@digigov/ui 0.21.2 → 0.23.0

package/esm/admin/AutoComplete/AccesibleAutoComplete/index.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+
+function AccesibleAutoComplete(options) {
+  console.log('options are', options);
+
+  if (!options.element) {
+    throw new Error('element is not defined');
+  }
+
+  if (!options.id) {
+    throw new Error('id is not defined');
+  }
+
+  if (!options.source) {
+    throw new Error('source is not defined');
+  }
+
+  if (Array.isArray(options.source)) {
+    options.source = createSimpleEngine(options.source);
+  }
+
+  ReactDOM.render( /*#__PURE__*/React.createElement(AutoComplete, options), options.element);
+}
+
+var createSimpleEngine = function createSimpleEngine(values) {
+  return function (query, syncResults) {
+    var matches = values.filter(function (r) {
+      return r.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    });
+    syncResults(matches);
+  };
+};
+
+AccesibleAutoComplete.enhanceSelectElement = function (configurationOptions) {
+  if (!configurationOptions.selectElement) {
+    throw new Error('selectElement is not defined');
+  } // Set defaults.
+
+
+  if (!configurationOptions.source) {
+    var availableOptions = [].filter.call(configurationOptions.selectElement.options, function (option) {
+      return option.value || configurationOptions.preserveNullOptions;
+    });
+    configurationOptions.source = availableOptions.map(function (option) {
+      return option.textContent || option.innerText;
+    });
+  }
+
+  configurationOptions.onConfirm = configurationOptions.onConfirm || function (query) {
+    var requestedOption = [].filter.call(configurationOptions.selectElement.options, function (option) {
+      return (option.textContent || option.innerText) === query;
+    })[0];
+
+    if (requestedOption) {
+      requestedOption.selected = true;
+    }
+  };
+
+  if (configurationOptions.selectElement.value || configurationOptions.defaultValue === undefined) {
+    var option = configurationOptions.selectElement.options[configurationOptions.selectElement.options.selectedIndex];
+    configurationOptions.defaultValue = option.textContent || option.innerText;
+  }
+
+  if (configurationOptions.name === undefined) configurationOptions.name = '';
+
+  if (configurationOptions.id === undefined) {
+    if (configurationOptions.selectElement.id === undefined) {
+      configurationOptions.id = '';
+    } else {
+      configurationOptions.id = configurationOptions.selectElement.id;
+    }
+  }
+
+  if (configurationOptions.autoselect === undefined) configurationOptions.autoselect = true;
+  var element = document.createElement('div');
+  configurationOptions.selectElement.parentNode.insertBefore(element, configurationOptions.selectElement);
+  AccesibleAutoComplete(_extends({}, configurationOptions, {
+    element: element
+  }));
+  configurationOptions.selectElement.style.display = 'none';
+  configurationOptions.selectElement.id = configurationOptions.selectElement.id + '-select';
+};
+
+export default AccesibleAutoComplete;

package/esm/admin/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,13 @@
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+export default {
+  title: 'Digigov UI/admin/AutoComplete',
+  component: AutoComplete
+}; // eslint-disable-next-line digigov/no-relative-import
+
+export * from '@digigov/ui/admin/AutoComplete/__stories__/Default';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithAutoSelect';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithInLine';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithDefaultValue';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithPlaceHolder';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithShowAllValues';
+export * from '@digigov/ui/admin/AutoComplete/__stories__/WithMinLength';

package/esm/admin/AutoComplete/Status/index.js

@@ -0,0 +1,153 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import AutoCompleteStatusWrapper from '@digigov/react-extensions/admin/AutoCompleteStatusWrapper';
+import AutoCompleteStatus from '@digigov/react-extensions/admin/AutoCompleteStatus';
+
+var debounce = function debounce(func, wait, immediate) {
+  var timeout;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    var context = this;
+
+    var later = function later() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+var statusDebounceMillis = 1400;
+
+var Status = /*#__PURE__*/function (_Component) {
+  _inherits(Status, _Component);
+
+  var _super = _createSuper(Status);
+
+  function Status() {
+    var _this;
+
+    _classCallCheck(this, Status);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      bump: false,
+      debounced: false,
+      silenced: false
+    };
+    _this.debounceStatusUpdate = void 0;
+    return _this;
+  }
+
+  _createClass(Status, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var that = this;
+      this.debounceStatusUpdate = debounce(function () {
+        if (!that.state.debounced) {
+          var shouldSilence = !that.props.isInFocus || that.props.validChoiceMade;
+          that.setState(function (_ref) {
+            var bump = _ref.bump;
+            return {
+              bump: !bump,
+              debounced: true,
+              silenced: shouldSilence
+            };
+          });
+        }
+      }, statusDebounceMillis);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps() {
+      this.setState({
+        debounced: false
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          length = _this$props.length,
+          queryLength = _this$props.queryLength,
+          minQueryLength = _this$props.minQueryLength,
+          selectedOption = _this$props.selectedOption,
+          selectedOptionIndex = _this$props.selectedOptionIndex,
+          tQueryTooShort = _this$props.tQueryTooShort,
+          tNoResults = _this$props.tNoResults,
+          tSelectedOption = _this$props.tSelectedOption,
+          tResults = _this$props.tResults;
+      var _this$state = this.state,
+          bump = _this$state.bump,
+          debounced = _this$state.debounced,
+          silenced = _this$state.silenced;
+      var queryTooShort = queryLength < minQueryLength;
+      var noResults = length === 0;
+      var contentSelectedOption = selectedOption ? tSelectedOption(selectedOption, length, selectedOptionIndex) : '';
+      var content;
+
+      if (queryTooShort) {
+        content = tQueryTooShort === null || tQueryTooShort === void 0 ? void 0 : tQueryTooShort(minQueryLength);
+      } else if (noResults) {
+        content = tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults();
+      } else {
+        content = tResults === null || tResults === void 0 ? void 0 : tResults(length, contentSelectedOption);
+      }
+
+      this.debounceStatusUpdate();
+      return /*#__PURE__*/React.createElement(AutoCompleteStatusWrapper, null, /*#__PURE__*/React.createElement(AutoCompleteStatus, {
+        id: id + '__status--A'
+      }, !silenced && debounced && bump ? content : ' '), /*#__PURE__*/React.createElement(AutoCompleteStatus, {
+        id: id + '__status--B'
+      }, !silenced && debounced && !bump ? content : ' '));
+    }
+  }]);
+
+  return Status;
+}(Component);
+
+Status.defaultProps = {
+  tQueryTooShort: function tQueryTooShort(minQueryLength) {
+    return "Type in ".concat(minQueryLength, " or more characters for results");
+  },
+  tNoResults: function tNoResults() {
+    return 'No search results';
+  },
+  tSelectedOption: function tSelectedOption(selectedOption, length, index) {
+    return "".concat(selectedOption, " ").concat(index + 1, " of ").concat(length, " is highlighted");
+  },
+  tResults: function tResults(length, contentSelectedOption) {
+    var words = {
+      result: length === 1 ? 'result' : 'results',
+      is: length === 1 ? 'is' : 'are'
+    };
+    return "".concat(length, " ").concat(words.result, " ").concat(words.is, " available. ").concat(contentSelectedOption);
+  }
+};
+export { Status as default };
+export { AutoCompleteStatusWrapper, AutoCompleteStatus };

package/esm/admin/AutoComplete/__stories__/Default.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  cellWidth: "one-third",
+  id: "govgr"
+}));
+
+var _ref2 = /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/esm/admin/AutoComplete/__stories__/WithAutoSelect.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal");
+
+export var WithAutoSelect = function WithAutoSelect() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+    source: suggest,
+    autoselect: true,
+    id: "govgr",
+    tNoResults: function tNoResults() {
+      return 'Δεν υπάρχουν αποτελέσματα';
+    }
+  })), _ref);
+};
+export default WithAutoSelect;

package/esm/admin/AutoComplete/__stories__/WithDefaultValue.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  defaultValue: "Germany",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithDefaultValue = function WithDefaultValue() {
+  return _ref;
+};
+export default WithDefaultValue;

package/esm/admin/AutoComplete/__stories__/WithInLine.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  displayMenu: "inline",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithInLine = function WithInLine() {
+  return _ref;
+};
+export default WithInLine;

package/esm/admin/AutoComplete/__stories__/WithMinLength.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Paragraph, null, "This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)"), /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  minLength: 2,
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithMinLength = function WithMinLength() {
+  return _ref;
+};
+export default WithMinLength;

package/esm/admin/AutoComplete/__stories__/WithPlaceHolder.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  placeholder: "Search for a country",
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithPlaceHolder = function WithPlaceHolder() {
+  return _ref;
+};
+export default WithPlaceHolder;

package/esm/admin/AutoComplete/__stories__/WithShowAllValues.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import AutoComplete from '@digigov/ui/admin/AutoComplete';
+import Field from '@digigov/ui/core/Field';
+import suggest from '@digigov/ui/admin/AutoComplete/utils';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(AutoComplete, {
+  source: suggest,
+  autoselect: true,
+  showAllValues: true,
+  id: "govgr"
+})), /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal"));
+
+export var WithShowAllValues = function WithShowAllValues() {
+  return _ref;
+};
+export default WithShowAllValues;