@teselagen/ui 0.3.5 → 0.3.6

package/index.umd.js

@@ -55039,12 +55039,20 @@
     return toString$4.call(it).slice(8, -1);
   };
 
-  // fallback for non-array-like ES3 and non-enumerable old V8 strings
-  var cof$2 = _cof;
-  // eslint-disable-next-line no-prototype-builtins
-  var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
-    return cof$2(it) == 'String' ? it.split('') : Object(it);
-  };
+  var _iobject;
+  var hasRequired_iobject;
+
+  function require_iobject () {
+  	if (hasRequired_iobject) return _iobject;
+  	hasRequired_iobject = 1;
+  	// fallback for non-array-like ES3 and non-enumerable old V8 strings
+  	var cof = _cof;
+  	// eslint-disable-next-line no-prototype-builtins
+  	_iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
+  	  return cof(it) == 'String' ? it.split('') : Object(it);
+  	};
+  	return _iobject;
+  }
 
   // 7.2.1 RequireObjectCoercible(argument)
   var _defined = function (it) {
@@ -55053,7 +55061,7 @@
   };
 
   // to indexed object, toObject with fallback for non-array-like ES3 strings
-  var IObject = _iobject;
+  var IObject = require_iobject();
   var defined$2 = _defined;
   var _toIobject = function (it) {
     return IObject(defined$2(it));
@@ -55173,7 +55181,14 @@
 
   var _objectPie = {};
 
-  _objectPie.f = {}.propertyIsEnumerable;
+  var hasRequired_objectPie;
+
+  function require_objectPie () {
+  	if (hasRequired_objectPie) return _objectPie;
+  	hasRequired_objectPie = 1;
+  	_objectPie.f = {}.propertyIsEnumerable;
+  	return _objectPie;
+  }
 
   // 7.1.13 ToObject(argument)
   var defined$1 = _defined;
@@ -55191,9 +55206,9 @@
   	var DESCRIPTORS = _descriptors;
   	var getKeys = _objectKeys;
   	var gOPS = _objectGops;
-  	var pIE = _objectPie;
+  	var pIE = require_objectPie();
   	var toObject = _toObject;
-  	var IObject = _iobject;
+  	var IObject = require_iobject();
   	var $assign = Object.assign;
 
   	// should work with symbols and should have deterministic property order (V8 bug)
@@ -55906,7 +55921,7 @@
   // all enumerable object keys, includes symbols
   var getKeys = _objectKeys;
   var gOPS$1 = _objectGops;
-  var pIE$1 = _objectPie;
+  var pIE$1 = require_objectPie();
   var _enumKeys = function (it) {
     var result = getKeys(it);
     var getSymbols = gOPS$1.f;
@@ -55959,7 +55974,7 @@
 
   var _objectGopd = {};
 
-  var pIE = _objectPie;
+  var pIE = require_objectPie();
   var createDesc$1 = _propertyDesc;
   var toIObject$1 = _toIobject;
   var toPrimitive$1 = _toPrimitive;
@@ -56127,7 +56142,7 @@
     $GOPD.f = $getOwnPropertyDescriptor;
     $DP.f = $defineProperty;
     _objectGopn.f = gOPNExt.f = $getOwnPropertyNames;
-    _objectPie.f = $propertyIsEnumerable;
+    require_objectPie().f = $propertyIsEnumerable;
     $GOPS.f = $getOwnPropertySymbols;
 
     if (DESCRIPTORS && !_library) {
@@ -90726,7 +90741,7 @@
       stringFilterValue = stringFilterValue || "";
     }
     const filterValLower = stringFilterValue.toLowerCase && stringFilterValue.toLowerCase();
-    const arrayFilterValue = Array.isArray(filterValue) ? filterValue : stringFilterValue.split(".");
+    const arrayFilterValue = Array.isArray(filterValue) ? filterValue : stringFilterValue.split(";");
     if (ccSelectedFilter === "startsWith") {
       return qb ? qb.startsWith(stringFilterValue) : (fieldVal) => {
         if (!fieldVal || !fieldVal.toLowerCase)
@@ -96652,6 +96667,31 @@
     window.toastr.default = preventDuplicates(generateToast(Intent.NONE));
   }
 
+  const filterTypesDictionary = {
+    none: "",
+    startsWith: "text",
+    endsWith: "text",
+    contains: "text",
+    notContains: "text",
+    isExactly: "text",
+    isEmpty: "text",
+    notEmpty: "text",
+    inList: "list",
+    notInList: "list",
+    true: "boolean",
+    false: "boolean",
+    dateIs: "date",
+    notBetween: "dateRange",
+    isBetween: "dateRange",
+    isBefore: "date",
+    isAfter: "date",
+    greaterThan: "number",
+    lessThan: "number",
+    inRange: "numberRange",
+    outsideRange: "numberRange",
+    equalTo: "number",
+    regex: "text"
+  };
   const isInvalidFilterValue = (value) => {
     if (Array.isArray(value) && value.length) {
       return value.some((item) => isInvalidFilterValue(item));
@@ -96669,6 +96709,16 @@
       };
     }
     handleFilterChange = (selectedFilter) => {
+      const { filterValue } = this.state;
+      if (filterValue && !Array.isArray(filterValue) && filterTypesDictionary[selectedFilter] === "list") {
+        this.setState({
+          filterValue: filterValue?.split(" ") || []
+        });
+      } else if (filterTypesDictionary[selectedFilter] === "text" && Array.isArray(filterValue)) {
+        this.setState({
+          filterValue: filterValue.join(" ")
+        });
+      }
       this.setState({ selectedFilter: lodashExports.camelCase(selectedFilter) });
     };
     handleFilterValueChange = (filterValue) => {
@@ -96711,36 +96761,7 @@
     render() {
       const { selectedFilter, filterValue } = this.state;
       const { dataType, currentFilter, removeSingleFilter } = this.props;
-      const {
-        handleFilterChange,
-        handleFilterValueChange,
-        handleFilterSubmit
-      } = this;
-      const filterTypesDictionary = {
-        none: "",
-        startsWith: "text",
-        endsWith: "text",
-        contains: "text",
-        notContains: "text",
-        isExactly: "text",
-        isEmpty: "text",
-        notEmpty: "text",
-        inList: "list",
-        notInList: "list",
-        true: "boolean",
-        false: "boolean",
-        dateIs: "date",
-        notBetween: "dateRange",
-        isBetween: "dateRange",
-        isBefore: "date",
-        isAfter: "date",
-        greaterThan: "number",
-        lessThan: "number",
-        inRange: "numberRange",
-        outsideRange: "numberRange",
-        equalTo: "number",
-        regex: "text"
-      };
+      const { handleFilterChange, handleFilterValueChange, handleFilterSubmit } = this;
       const filterMenuItems = getFilterMenuItems(dataType);
       const ccSelectedFilter = lodashExports.camelCase(selectedFilter);
       const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
@@ -96906,7 +96927,7 @@
           if (Array.isArray(filterValue)) {
             filterValueToUse = filterValue;
           } else {
-            filterValueToUse = filterValue && filterValue.split && filterValue.split(".");
+            filterValueToUse = filterValue && filterValue.split && filterValue.split(";");
           }
           inputGroup = /* @__PURE__ */ React$1.createElement("div", { className: "custom-menu-item" }, /* @__PURE__ */ React$1.createElement(
             DateRangeInput,
@@ -113646,7 +113667,7 @@
           ({ displayName, path, selectedFilter, filterValue }) => {
             let filterValToDisplay = filterValue;
             if (selectedFilter === "inList") {
-              filterValToDisplay = Array.isArray(filterValToDisplay) ? filterValToDisplay : filterValToDisplay && filterValToDisplay.split(".");
+              filterValToDisplay = Array.isArray(filterValToDisplay) ? filterValToDisplay : filterValToDisplay && filterValToDisplay.split(";");
             }
             if (Array.isArray(filterValToDisplay)) {
               filterValToDisplay = filterValToDisplay.join(", ");

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "./src/index.js",
   "dependencies": {
-    "@teselagen/file-utils": "0.3.5",
-    "@teselagen/bounce-loader": "0.3.5",
+    "@teselagen/file-utils": "0.3.6",
+    "@teselagen/bounce-loader": "0.3.6",
     "@blueprintjs/core": "3.52.0",
     "@blueprintjs/datetime": "3.23.19",
     "@blueprintjs/icons": "3.33.0",

package/src/DataTable/FilterAndSortMenu.js

@@ -21,9 +21,35 @@ import "@teselagen/react-table/react-table.css";
 import "./style.css";
 import "../toastr";
 
-const isInvalidFilterValue = value => {
+const filterTypesDictionary = {
+  none: "",
+  startsWith: "text",
+  endsWith: "text",
+  contains: "text",
+  notContains: "text",
+  isExactly: "text",
+  isEmpty: "text",
+  notEmpty: "text",
+  inList: "list",
+  notInList: "list",
+  true: "boolean",
+  false: "boolean",
+  dateIs: "date",
+  notBetween: "dateRange",
+  isBetween: "dateRange",
+  isBefore: "date",
+  isAfter: "date",
+  greaterThan: "number",
+  lessThan: "number",
+  inRange: "numberRange",
+  outsideRange: "numberRange",
+  equalTo: "number",
+  regex: "text"
+};
+
+const isInvalidFilterValue = (value) => {
   if (Array.isArray(value) && value.length) {
-    return value.some(item => isInvalidFilterValue(item));
+    return value.some((item) => isInvalidFilterValue(item));
   }
   return value === "" || value === undefined || value.length === 0;
 };
@@ -38,10 +64,27 @@ export default class FilterAndSortMenu extends React.Component {
       ...this.props.currentFilter
     };
   }
-  handleFilterChange = selectedFilter => {
+  handleFilterChange = (selectedFilter) => {
+    const { filterValue } = this.state;
+    if (
+      filterValue &&
+      !Array.isArray(filterValue) &&
+      filterTypesDictionary[selectedFilter] === "list"
+    ) {
+      this.setState({
+        filterValue: filterValue?.split(" ") || []
+      });
+    } else if (
+      filterTypesDictionary[selectedFilter] === "text" &&
+      Array.isArray(filterValue)
+    ) {
+      this.setState({
+        filterValue: filterValue.join(" ")
+      });
+    }
     this.setState({ selectedFilter: camelCase(selectedFilter) });
   };
-  handleFilterValueChange = filterValue => {
+  handleFilterValueChange = (filterValue) => {
     this.setState({ filterValue });
   };
   handleFilterSubmit = () => {
@@ -65,7 +108,7 @@ export default class FilterAndSortMenu extends React.Component {
       if (dataType === "number") {
         filterValToUse =
           filterValue &&
-          filterValue.map(val => parseFloat(val.replaceAll(",", "")));
+          filterValue.map((val) => parseFloat(val.replaceAll(",", "")));
       }
     }
 
@@ -91,36 +134,9 @@ export default class FilterAndSortMenu extends React.Component {
   render() {
     const { selectedFilter, filterValue } = this.state;
     const { dataType, currentFilter, removeSingleFilter } = this.props;
-    const {
-      handleFilterChange,
-      handleFilterValueChange,
-      handleFilterSubmit
-    } = this;
-    const filterTypesDictionary = {
-      none: "",
-      startsWith: "text",
-      endsWith: "text",
-      contains: "text",
-      notContains: "text",
-      isExactly: "text",
-      isEmpty: "text",
-      notEmpty: "text",
-      inList: "list",
-      notInList: "list",
-      true: "boolean",
-      false: "boolean",
-      dateIs: "date",
-      notBetween: "dateRange",
-      isBetween: "dateRange",
-      isBefore: "date",
-      isAfter: "date",
-      greaterThan: "number",
-      lessThan: "number",
-      inRange: "numberRange",
-      outsideRange: "numberRange",
-      equalTo: "number",
-      regex: "text"
-    };
+    const { handleFilterChange, handleFilterValueChange, handleFilterSubmit } =
+      this;
+
     const filterMenuItems = getFilterMenuItems(dataType);
     const ccSelectedFilter = camelCase(selectedFilter);
     const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
@@ -130,13 +146,13 @@ export default class FilterAndSortMenu extends React.Component {
         <div className="custom-menu-item">
           <div className={classNames(Classes.SELECT, Classes.FILL)}>
             <select
-              onChange={function(e) {
+              onChange={function (e) {
                 const ccSelectedFilter = camelCase(e.target.value);
                 handleFilterChange(ccSelectedFilter);
               }}
               value={ccSelectedFilter}
             >
-              {filterMenuItems.map(function(menuItem, index) {
+              {filterMenuItems.map(function (menuItem, index) {
                 return (
                   <option key={index} value={camelCase(menuItem)}>
                     {menuItem}
@@ -176,12 +192,8 @@ export default class FilterAndSortMenu extends React.Component {
 }
 
 const dateMinMaxHelpers = {
-  minDate: dayjs()
-    .subtract(25, "years")
-    .toDate(),
-  maxDate: dayjs()
-    .add(25, "years")
-    .toDate()
+  minDate: dayjs().subtract(25, "years").toDate(),
+  maxDate: dayjs().add(25, "years").toDate()
 };
 const renderCreateNewOption = (query, active, handleClick) => (
   <MenuItem
@@ -213,7 +225,7 @@ class FilterInput extends React.Component {
             <div className="custom-menu-item">
               <InputGroup
                 placeholder="Value"
-                onChange={function(e) {
+                onChange={function (e) {
                   handleFilterValueChange(e.target.value);
                 }}
                 autoFocus
@@ -232,15 +244,15 @@ class FilterInput extends React.Component {
               noResults={null}
               multi={true}
               creatable={true}
-              value={(filterValue || []).map(val => ({
+              value={(filterValue || []).map((val) => ({
                 label: val,
                 value: val
               }))}
-              onChange={selectedOptions => {
-                selectedOptions.some(opt => opt.value === "")
+              onChange={(selectedOptions) => {
+                selectedOptions.some((opt) => opt.value === "")
                   ? handleFilterSubmit()
                   : handleFilterValueChange(
-                      selectedOptions.map(opt => opt.value)
+                      selectedOptions.map((opt) => opt.value)
                     );
               }}
               options={[]}
@@ -253,7 +265,7 @@ class FilterInput extends React.Component {
           <div className="custom-menu-item">
             <NumericInput
               placeholder="Value"
-              onValueChange={function(numVal) {
+              onValueChange={function (numVal) {
                 handleFilterValueChange(isNaN(numVal) ? 0 : numVal);
               }}
               autoFocus
@@ -268,7 +280,7 @@ class FilterInput extends React.Component {
           <div className="custom-menu-item">
             <NumericInput
               placeholder="Low"
-              onValueChange={function(numVal) {
+              onValueChange={function (numVal) {
                 handleFilterValueChange([
                   isNaN(numVal) ? 0 : numVal,
                   filterValue[1]
@@ -279,7 +291,7 @@ class FilterInput extends React.Component {
             />
             <NumericInput
               placeholder="High"
-              onValueChange={function(numVal) {
+              onValueChange={function (numVal) {
                 handleFilterValueChange([
                   filterValue[0],
                   isNaN(numVal) ? 0 : numVal
@@ -298,7 +310,7 @@ class FilterInput extends React.Component {
               value={filterValue ? dayjs(filterValue).toDate() : undefined}
               {...getDayjsFormatter("L")}
               {...dateMinMaxHelpers}
-              onChange={selectedDates => {
+              onChange={(selectedDates) => {
                 handleFilterValueChange(selectedDates);
               }}
             />
@@ -312,7 +324,7 @@ class FilterInput extends React.Component {
           filterValueToUse = filterValue;
         } else {
           filterValueToUse =
-            filterValue && filterValue.split && filterValue.split(".");
+            filterValue && filterValue.split && filterValue.split(";");
         }
         inputGroup = (
           <div className="custom-menu-item">
@@ -329,13 +341,13 @@ class FilterInput extends React.Component {
                 captureDismiss: true
               }}
               {...{
-                formatDate: date =>
+                formatDate: (date) =>
                   date == null ? "" : date.toLocaleDateString(),
-                parseDate: str => new Date(Date.parse(str)),
+                parseDate: (str) => new Date(Date.parse(str)),
                 placeholder: "JS Date"
               }}
               {...dateMinMaxHelpers}
-              onChange={selectedDates => {
+              onChange={(selectedDates) => {
                 if (selectedDates[0] && selectedDates[1]) {
                   handleFilterValueChange(selectedDates);
                 }

package/src/DataTable/index.js

@@ -1310,7 +1310,7 @@ class DataTable extends React.Component {
           if (selectedFilter === "inList") {
             filterValToDisplay = Array.isArray(filterValToDisplay)
               ? filterValToDisplay
-              : filterValToDisplay && filterValToDisplay.split(".");
+              : filterValToDisplay && filterValToDisplay.split(";");
           }
           if (Array.isArray(filterValToDisplay)) {
             filterValToDisplay = filterValToDisplay.join(", ");

package/src/DataTable/utils/queryParams.js

@@ -306,7 +306,7 @@ function getSubFilter(
     stringFilterValue.toLowerCase && stringFilterValue.toLowerCase();
   const arrayFilterValue = Array.isArray(filterValue)
     ? filterValue
-    : stringFilterValue.split(".");
+    : stringFilterValue.split(";");
   if (ccSelectedFilter === "startsWith") {
     return qb
       ? qb.startsWith(stringFilterValue) //filter using qb (aka we're backend connected)