@teselagen/ui 0.3.73 → 0.3.74

package/index.cjs.js

@@ -63,6 +63,7 @@ const ReactDOM = require("react-dom");
 const reduxForm = require("redux-form");
 const reactRedux = require("react-redux");
 const select = require("@blueprintjs/select");
+const redux = require("redux");
 const datetime = require("@blueprintjs/datetime");
 function _interopNamespaceDefault(e2) {
   const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -17117,25 +17118,16 @@ var toString$6 = {}.toString;
 var _cof = /* @__PURE__ */ __name(function(it) {
   return toString$6.call(it).slice(8, -1);
 }, "_cof");
-var _iobject;
-var hasRequired_iobject;
-function require_iobject() {
-  if (hasRequired_iobject)
-    return _iobject;
-  hasRequired_iobject = 1;
-  var cof2 = _cof;
-  _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-    return cof2(it) == "String" ? it.split("") : Object(it);
-  };
-  return _iobject;
-}
-__name(require_iobject, "require_iobject");
+var cof$2 = _cof;
+var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+  return cof$2(it) == "String" ? it.split("") : Object(it);
+};
 var _defined = /* @__PURE__ */ __name(function(it) {
   if (it == void 0)
     throw TypeError("Can't call method on  " + it);
   return it;
 }, "_defined");
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = /* @__PURE__ */ __name(function(it) {
   return IObject(defined$2(it));
@@ -17256,7 +17248,7 @@ function require_objectAssign() {
   var gOPS2 = _objectGops;
   var pIE2 = require_objectPie();
   var toObject2 = _toObject;
-  var IObject2 = require_iobject();
+  var IObject2 = _iobject;
   var $assign = Object.assign;
   _objectAssign = !$assign || _fails(function() {
     var A2 = {};
@@ -39054,27 +39046,51 @@ __publicField(_TgSelect, "defaultProps", {
   value: void 0
 });
 let TgSelect = _TgSelect;
-const TgSelect$1 = withProps((props) => {
-  const { multi, value, options } = props;
-  let optionsToRet = options;
-  if (multi && value) {
-    const valArray = getValueArray(value);
-    optionsToRet = options.filter((op) => {
-      const isOptionSelected = valArray.some((val) => {
-        if (!val)
-          return false;
-        const matching = lodashExports.isEqual(val.value, op.value);
-        return matching;
+const withAsyncOptions = /* @__PURE__ */ __name((Component) => (props) => {
+  const _a2 = props, { loadOptions, options } = _a2, rest = __objRest(_a2, ["loadOptions", "options"]);
+  const [asyncOptions, setAsyncOptions] = React$1.useState([]);
+  const [isLoading, setLoading] = React$1.useState(false);
+  React$1.useEffect(() => {
+    if (loadOptions) {
+      setLoading(true);
+      loadOptions().then((options2) => {
+        setAsyncOptions(options2);
+        setLoading(false);
       });
-      return !isOptionSelected;
-    });
-  }
-  return {
-    // unfilteredOptions is needed for finding selected items
-    unfilteredOptions: options,
-    options: optionsToRet
-  };
-})(TgSelect);
+    }
+  }, [loadOptions]);
+  return /* @__PURE__ */ React$1.createElement(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      isLoading: isLoading || rest.isLoading,
+      options: loadOptions ? asyncOptions : options
+    })
+  );
+}, "withAsyncOptions");
+const TgSelect$1 = redux.compose(
+  withAsyncOptions,
+  withProps((props) => {
+    const { multi, value, options = [] } = props;
+    let optionsToRet = options;
+    if (multi && value) {
+      const valArray = getValueArray(value);
+      optionsToRet = options.filter((op) => {
+        const isOptionSelected = valArray.some((val) => {
+          if (!val)
+            return false;
+          const matching = lodashExports.isEqual(val.value, op.value);
+          return matching;
+        });
+        return !isOptionSelected;
+      });
+    }
+    return {
+      // unfilteredOptions is needed for finding selected items
+      unfilteredOptions: options,
+      options: optionsToRet
+    };
+  })
+)(TgSelect);
 const itemDisabled = /* @__PURE__ */ __name((i) => i.disabled, "itemDisabled");
 const noResultsDefault = /* @__PURE__ */ React$1.createElement("div", null, "No Results...");
 const renderCreateNewOption$1 = /* @__PURE__ */ __name((query, active3, handleClick) => /* @__PURE__ */ React$1.createElement(

package/index.es.js

@@ -63,6 +63,7 @@ import ReactDOM, { unstable_batchedUpdates, findDOMNode as findDOMNode$1 } from
 import { FormName, formValueSelector, change, Field, reduxForm, SubmissionError, destroy, initialize, Fields } from "redux-form";
 import { connect, useStore } from "react-redux";
 import { getCreateNewItem, MultiSelect, Suggest } from "@blueprintjs/select";
+import { compose as compose$1 } from "redux";
 import { DateRangeInput, DateInput } from "@blueprintjs/datetime";
 const blueprint = "";
 const blueprintDatetime = "";
@@ -17099,25 +17100,16 @@ var toString$6 = {}.toString;
 var _cof = /* @__PURE__ */ __name(function(it) {
   return toString$6.call(it).slice(8, -1);
 }, "_cof");
-var _iobject;
-var hasRequired_iobject;
-function require_iobject() {
-  if (hasRequired_iobject)
-    return _iobject;
-  hasRequired_iobject = 1;
-  var cof2 = _cof;
-  _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-    return cof2(it) == "String" ? it.split("") : Object(it);
-  };
-  return _iobject;
-}
-__name(require_iobject, "require_iobject");
+var cof$2 = _cof;
+var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+  return cof$2(it) == "String" ? it.split("") : Object(it);
+};
 var _defined = /* @__PURE__ */ __name(function(it) {
   if (it == void 0)
     throw TypeError("Can't call method on  " + it);
   return it;
 }, "_defined");
-var IObject = require_iobject();
+var IObject = _iobject;
 var defined$2 = _defined;
 var _toIobject = /* @__PURE__ */ __name(function(it) {
   return IObject(defined$2(it));
@@ -17238,7 +17230,7 @@ function require_objectAssign() {
   var gOPS2 = _objectGops;
   var pIE2 = require_objectPie();
   var toObject2 = _toObject;
-  var IObject2 = require_iobject();
+  var IObject2 = _iobject;
   var $assign = Object.assign;
   _objectAssign = !$assign || _fails(function() {
     var A2 = {};
@@ -39036,27 +39028,51 @@ __publicField(_TgSelect, "defaultProps", {
   value: void 0
 });
 let TgSelect = _TgSelect;
-const TgSelect$1 = withProps((props) => {
-  const { multi, value, options } = props;
-  let optionsToRet = options;
-  if (multi && value) {
-    const valArray = getValueArray(value);
-    optionsToRet = options.filter((op) => {
-      const isOptionSelected = valArray.some((val) => {
-        if (!val)
-          return false;
-        const matching = lodashExports.isEqual(val.value, op.value);
-        return matching;
+const withAsyncOptions = /* @__PURE__ */ __name((Component2) => (props) => {
+  const _a2 = props, { loadOptions, options } = _a2, rest = __objRest(_a2, ["loadOptions", "options"]);
+  const [asyncOptions, setAsyncOptions] = useState([]);
+  const [isLoading, setLoading] = useState(false);
+  useEffect(() => {
+    if (loadOptions) {
+      setLoading(true);
+      loadOptions().then((options2) => {
+        setAsyncOptions(options2);
+        setLoading(false);
       });
-      return !isOptionSelected;
-    });
-  }
-  return {
-    // unfilteredOptions is needed for finding selected items
-    unfilteredOptions: options,
-    options: optionsToRet
-  };
-})(TgSelect);
+    }
+  }, [loadOptions]);
+  return /* @__PURE__ */ React__default.createElement(
+    Component2,
+    __spreadProps(__spreadValues({}, rest), {
+      isLoading: isLoading || rest.isLoading,
+      options: loadOptions ? asyncOptions : options
+    })
+  );
+}, "withAsyncOptions");
+const TgSelect$1 = compose$1(
+  withAsyncOptions,
+  withProps((props) => {
+    const { multi, value, options = [] } = props;
+    let optionsToRet = options;
+    if (multi && value) {
+      const valArray = getValueArray(value);
+      optionsToRet = options.filter((op) => {
+        const isOptionSelected = valArray.some((val) => {
+          if (!val)
+            return false;
+          const matching = lodashExports.isEqual(val.value, op.value);
+          return matching;
+        });
+        return !isOptionSelected;
+      });
+    }
+    return {
+      // unfilteredOptions is needed for finding selected items
+      unfilteredOptions: options,
+      options: optionsToRet
+    };
+  })
+)(TgSelect);
 const itemDisabled = /* @__PURE__ */ __name((i) => i.disabled, "itemDisabled");
 const noResultsDefault = /* @__PURE__ */ React__default.createElement("div", null, "No Results...");
 const renderCreateNewOption$1 = /* @__PURE__ */ __name((query, active3, handleClick) => /* @__PURE__ */ React__default.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.73",
+  "version": "0.3.74",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/TgSelect/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { MultiSelect, getCreateNewItem } from "@blueprintjs/select";
 import { Keys, Button, MenuItem, Tag } from "@blueprintjs/core";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { filter, isEqual } from "lodash";
 import classNames from "classnames";
 import "./style.css";
@@ -10,6 +10,7 @@ import fuzzysearch from "fuzzysearch";
 import getTextFromEl from "../utils/getTextFromEl";
 import { getTagColorStyle, getTagProps } from "../utils/tagUtils";
 import popoverOverflowModifiers from "../utils/popoverOverflowModifiers";
+import { compose } from "redux";
 
 class TgSelect extends React.Component {
   constructor(props) {
@@ -384,27 +385,54 @@ class TgSelect extends React.Component {
     );
   }
 }
-export default withProps(props => {
-  const { multi, value, options } = props;
-  let optionsToRet = options;
-  // based on incoming value hide those selected options from the option list
-  if (multi && value) {
-    const valArray = getValueArray(value);
-    optionsToRet = options.filter(op => {
-      const isOptionSelected = valArray.some(val => {
-        if (!val) return false;
-        const matching = isEqual(val.value, op.value);
-        return matching;
+
+const withAsyncOptions = Component => props => {
+  const { loadOptions, options, ...rest } = props;
+  const [asyncOptions, setAsyncOptions] = useState([]);
+  const [isLoading, setLoading] = useState(false);
+  useEffect(() => {
+    if (loadOptions) {
+      setLoading(true);
+      loadOptions().then(options => {
+        setAsyncOptions(options);
+        setLoading(false);
       });
-      return !isOptionSelected;
-    });
-  }
-  return {
-    // unfilteredOptions is needed for finding selected items
-    unfilteredOptions: options,
-    options: optionsToRet
-  };
-})(TgSelect);
+    }
+  }, [loadOptions]);
+
+  return (
+    <Component
+      {...rest}
+      isLoading={isLoading || rest.isLoading}
+      options={loadOptions ? asyncOptions : options}
+    />
+  );
+};
+
+export default compose(
+  withAsyncOptions,
+  withProps(props => {
+    const { multi, value, options = [] } = props;
+    let optionsToRet = options;
+    // based on incoming value hide those selected options from the option list
+    if (multi && value) {
+      const valArray = getValueArray(value);
+      optionsToRet = options.filter(op => {
+        const isOptionSelected = valArray.some(val => {
+          if (!val) return false;
+          const matching = isEqual(val.value, op.value);
+          return matching;
+        });
+        return !isOptionSelected;
+      });
+    }
+    return {
+      // unfilteredOptions is needed for finding selected items
+      unfilteredOptions: options,
+      options: optionsToRet
+    };
+  })
+)(TgSelect);
 
 const itemDisabled = i => i.disabled;
 const noResultsDefault = <div>No Results...</div>;
@@ -440,11 +468,13 @@ export const itemListPredicate = (_queryString = "", items, isSimpleSearch) => {
       text: item.toLowerCase
         ? item.toLowerCase()
         : item.label
-        ? item.label.toLowerCase
-          ? item.label.toLowerCase()
-          : getTextFromEl(item.label).toLowerCase()
-        : (item.value && item.value.toLowerCase && item.value.toLowerCase()) ||
-          ""
+          ? item.label.toLowerCase
+            ? item.label.toLowerCase()
+            : getTextFromEl(item.label).toLowerCase()
+          : (item.value &&
+              item.value.toLowerCase &&
+              item.value.toLowerCase()) ||
+            ""
     };
   });
   let toRet = toSearchArr.filter(({ text }) =>