@vitrosoftware/common-ui-ts 1.1.69 → 1.1.70

package/css/common.css

@@ -9,6 +9,10 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
 @import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
 
+html, body {
+    overscroll-behavior-x: none;
+}
+
 :global(.vitro-opacity-low) {
     opacity: .3;
 }

package/css/std/controls/criterion/criterion.css

@@ -160,11 +160,13 @@
     width: 16px;
 }
 
-.vitro-condition-list {
+.vitro-condition-list-container,
+.vitro-operator-list-container {
     position: absolute;
     z-index: 1000000;
-    top: 14px;
-    left: 0;
+}
+
+.vitro-condition-list {
     width: fit-content;
     min-width: 270px;
     border-radius: 4px;

package/css/std/controls/search/search.css

@@ -27,12 +27,21 @@
 }
 
 .vitro-filter :global(.ps) {
-    overflow: visible !important;
+    max-height: 300px;
+}
+
+.vitro-filter :global(.ps.ps--active-y) {
+    padding-right: 14px;
+}
+
+.vitro-filter :global(.vitro-block:last-child) > div > div {
+    margin-bottom: 0;
 }
 
 .vitro-add-field {
     position: relative;
     margin-bottom: 16px;
+    margin-top: 18px;
 }
 
 .vitro-add-field-button,

package/dist/controls/Criterion/ConditionSelect.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { Condition } from './Condition';
 interface ConditionSelectProps {
     itemList: Condition[];
     defaultValue?: Condition;
     onSelect: (condition: any) => any;
-    translateX: number;
 }
-export declare const ConditionSelect: (props: ConditionSelectProps) => JSX.Element;
+export declare const ConditionSelect: React.ForwardRefExoticComponent<ConditionSelectProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Search/Search.d.ts

@@ -5,6 +5,7 @@ import { Operator } from '../Criterion/Operator';
 interface SearchProps {
     fieldList: any[];
     visibleFieldList?: any[];
+    searchCriterionList?: SearchCriterion[];
     onFilterChange?: (searchCriterionList: SearchCriterion[]) => any;
     onSubmit: (searchCriterionList: SearchCriterion[]) => any;
     onCancel: () => any;
@@ -22,7 +23,7 @@ interface SearchProps {
     labelAddField: string;
     defaultSearchFieldName: string;
     inputPlaceholder?: string;
-    maxFieldCount: number;
+    maxFieldCount?: number;
 }
 export declare const Search: (props: SearchProps) => JSX.Element;
 export {};

package/dist/index.css

@@ -9,6 +9,10 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
 @import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
 
+html, body {
+    overscroll-behavior-x: none;
+}
+
 .vitro-opacity-low {
     opacity: .3;
 }
@@ -5029,11 +5033,13 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     width: 16px;
 }
 
-._criterion_vitro-condition-list_10UIxJI {
+._criterion_vitro-condition-list-container_ERfumwB,
+._criterion_vitro-operator-list-container_RgT0R_Z {
     position: absolute;
     z-index: 1000000;
-    top: 14px;
-    left: 0;
+}
+
+._criterion_vitro-condition-list_10UIxJI {
     width: -moz-fit-content;
     width: fit-content;
     min-width: 270px;
@@ -5270,12 +5276,21 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._search_vitro-filter_2n-Y-mS .ps {
-    overflow: visible !important;
+    max-height: 300px;
+}
+
+._search_vitro-filter_2n-Y-mS .ps.ps--active-y {
+    padding-right: 14px;
+}
+
+._search_vitro-filter_2n-Y-mS .vitro-block:last-child > div > div {
+    margin-bottom: 0;
 }
 
 ._search_vitro-add-field_2hHt1Z2 {
     position: relative;
     margin-bottom: 16px;
+    margin-top: 18px;
 }
 
 ._search_vitro-add-field-button_30hdXYn,

package/dist/index.js

@@ -64683,16 +64683,20 @@ var ImagePicker = function ImagePicker(props) {
   }), renderPreview()));
 };
 
-var styles$M = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
+var styles$M = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
 
-var ConditionSelect = function ConditionSelect(props) {
+var ROOT_ID = 'root';
+var PX_UNIT$4 = 'px';
+var ConditionSelect = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.defaultValue || props.itemList[0]),
     condition = _useState[0],
     setCondition = _useState[1];
   var _useState2 = React.useState(false),
     showSelectList = _useState2[0],
     setShowSelectList = _useState2[1];
-  var selectRef = React.useRef(null);
+  var _useState3 = React.useState(null),
+    conditionListContainer = _useState3[0],
+    setConditionListContainer = _useState3[1];
   var listRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.MOUSEDOWN, onBlur);
@@ -64701,13 +64705,12 @@ var ConditionSelect = function ConditionSelect(props) {
     };
   });
   React.useEffect(function () {
-    if (selectRef && selectRef.current) {
-      selectRef.current.style.transform = "translateX(" + props.translateX + "px)";
-    }
-  }, [props.translateX]);
-  React.useEffect(function () {
-    if (listRef && listRef.current) {
-      listRef.current.style.transform = "translateX(" + props.translateX + "px)";
+    if (showSelectList) {
+      showList();
+    } else {
+      if (conditionListContainer) {
+        conditionListContainer.remove();
+      }
     }
   }, [showSelectList]);
   var toggleSelect = function toggleSelect() {
@@ -64719,34 +64722,61 @@ var ConditionSelect = function ConditionSelect(props) {
     props.onSelect(item);
   };
   var onBlur = function onBlur(e) {
-    if (listRef.current && !listRef.current.contains(e.target) && selectRef.current && !selectRef.current.contains(e.target)) {
+    if (listRef.current && !listRef.current.contains(e.target) && ref.current && !ref.current.contains(e.target)) {
       setShowSelectList(false);
     }
   };
+  var getListPosition = function getListPosition() {
+    if (ref.current) {
+      var selectPosition = ref.current.getBoundingClientRect();
+      var top = selectPosition.top + selectPosition.height + 10;
+      return {
+        left: selectPosition.left,
+        top: top
+      };
+    }
+    return null;
+  };
+  var showList = function showList() {
+    var position = getListPosition();
+    var root = document.getElementById(ROOT_ID);
+    if (position && root) {
+      var container = document.createElement('div');
+      container.className = styles$M['vitro-condition-list-container'];
+      container.style.left = position.left + PX_UNIT$4;
+      container.style.top = position.top + PX_UNIT$4;
+      setConditionListContainer(container);
+      var content = React__default.createElement("ul", {
+        ref: listRef,
+        className: styles$M['vitro-condition-list'],
+        onBlur: onBlur
+      }, props.itemList.map(function (item) {
+        return React__default.createElement("li", {
+          onClick: function onClick() {
+            return _onClick(item);
+          }
+        }, item.imageUrl && React__default.createElement(Icon, {
+          defaultUrl: item.imageUrl,
+          className: styles$M['vitro-icon']
+        }), item.text);
+      }));
+      reactDom.render(content, container);
+      root.appendChild(container);
+    }
+  };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
-    ref: selectRef,
+    ref: ref,
     className: styles$M['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Icon, {
     defaultUrl: condition.imageUrl,
     className: styles$M['vitro-icon']
-  }) : condition.text)), showSelectList && React__default.createElement("ul", {
-    ref: listRef,
-    className: styles$M['vitro-condition-list'],
-    onBlur: onBlur
-  }, props.itemList.map(function (item) {
-    return React__default.createElement("li", {
-      onClick: function onClick() {
-        return _onClick(item);
-      }
-    }, item.imageUrl && React__default.createElement(Icon, {
-      defaultUrl: item.imageUrl,
-      className: styles$M['vitro-icon']
-    }), item.text);
-  })));
-};
+  }) : condition.text)));
+});
 
+var PX_UNIT$5 = 'px';
+var ROOT_ID$1 = 'root';
 var Criterion = function Criterion(props) {
   var _useState = React.useState(props.operatorList[0]),
     operator = _useState[0],
@@ -64754,9 +64784,9 @@ var Criterion = function Criterion(props) {
   var _useState2 = React.useState(false),
     showOperatorSelectList = _useState2[0],
     setShowOperatorSelectList = _useState2[1];
-  var _useState3 = React.useState(0),
-    translate = _useState3[0],
-    setTranslate = _useState3[1];
+  var _useState3 = React.useState(null),
+    operatorListContainer = _useState3[0],
+    setOperatorListContainer = _useState3[1];
   var _useState4 = React.useState(CTRL.EMPTY),
     state = _useState4[0],
     setState = _useState4[1];
@@ -64779,8 +64809,9 @@ var Criterion = function Criterion(props) {
       condition: defaultCondition.type
     };
   }, []);
-  var selectRef = React.useRef(null);
+  var operatorSelectRef = React.useRef(null);
   var labelRef = React.useRef(null);
+  var conditionSelectRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.CLICK, onBlurSelect);
     setOperator(defaultOperator);
@@ -64789,17 +64820,26 @@ var Criterion = function Criterion(props) {
     };
   }, []);
   React.useEffect(function () {
-    if (labelRef && labelRef.current) {
-      setTranslate(labelRef.current.offsetWidth + 8);
+    if (labelRef && labelRef.current && conditionSelectRef && conditionSelectRef.current) {
+      conditionSelectRef.current.style.left = labelRef.current.offsetWidth + 8 + PX_UNIT$5;
     }
   }, [labelRef]);
+  React.useEffect(function () {
+    if (showOperatorSelectList) {
+      showOperatorList();
+    } else {
+      if (operatorListContainer) {
+        operatorListContainer.remove();
+      }
+    }
+  }, [showOperatorSelectList]);
   var onOperatorClick = function onOperatorClick(operator) {
     setOperator(operator);
     value.operator = operator.type;
     onChange(value);
   };
   var onBlurSelect = function onBlurSelect(e) {
-    var select = selectRef.current;
+    var select = operatorSelectRef.current;
     if (select && e.target !== select && e.target !== select.children.item(0)) {
       setShowOperatorSelectList(false);
     }
@@ -64832,31 +64872,56 @@ var Criterion = function Criterion(props) {
     value.valueList = Array.isArray(val) ? val : [val];
     onChange(value);
   };
+  var getOperatorListPosition = function getOperatorListPosition() {
+    if (operatorSelectRef.current) {
+      var selectPosition = operatorSelectRef.current.getBoundingClientRect();
+      var top = selectPosition.top + selectPosition.height + 2;
+      return {
+        right: selectPosition.right,
+        top: top
+      };
+    }
+    return null;
+  };
+  var showOperatorList = function showOperatorList() {
+    var position = getOperatorListPosition();
+    var root = document.getElementById(ROOT_ID$1);
+    if (position && root) {
+      var container = document.createElement('div');
+      container.className = styles$M['vitro-operator-list-container'];
+      container.style.left = position.right + PX_UNIT$5;
+      container.style.top = position.top + PX_UNIT$5;
+      setOperatorListContainer(container);
+      var content = React__default.createElement("ul", {
+        className: styles$M['vitro-operator-list']
+      }, props.operatorList.map(function (item) {
+        return React__default.createElement("li", {
+          onClick: function onClick() {
+            return onOperatorClick(item);
+          }
+        }, item.text);
+      }));
+      reactDom.render(content, container);
+      root.appendChild(container);
+    }
+  };
   return React__default.createElement("div", {
     className: styles$M['vitro-criterion-container']
   }, React__default.createElement("div", {
     className: styles$M['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
-    ref: selectRef,
+    ref: operatorSelectRef,
     className: styles$M['vitro-operator-select'],
     onClick: toggleOperatorSelect
-  }, React__default.createElement("div", null, operator.text), showOperatorSelectList && React__default.createElement("ul", {
-    className: styles$M['vitro-operator-list']
-  }, props.operatorList.map(function (item) {
-    return React__default.createElement("li", {
-      onClick: function onClick() {
-        return onOperatorClick(item);
-      }
-    }, item.text);
-  })))), React__default.createElement("div", {
+  }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
     className: styles$M['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
     className: styles$M['vitro-label']
   }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
+    ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
-    translateX: translate,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
     className: styles$M['vitro-control'],
@@ -65365,21 +65430,24 @@ var Search = function Search(props) {
   var _useState3 = React.useState(false),
     isShowAddFieldDialog = _useState3[0],
     setIsShowAddFieldDialog = _useState3[1];
-  var _useState4 = React.useState([]),
-    filterFieldList = _useState4[0],
-    setFilterFieldList = _useState4[1];
+  var _useState4 = React.useState(true),
+    isShowAddFieldButton = _useState4[0],
+    setIsShowAddFieldButton = _useState4[1];
   var _useState5 = React.useState([]),
-    searchCriterionList = _useState5[0],
-    setSearchCriterionList = _useState5[1];
+    filterFieldList = _useState5[0],
+    setFilterFieldList = _useState5[1];
   var _useState6 = React.useState([]),
-    selectedSearchCriterionList = _useState6[0],
-    setSelectedSearchCriterionList = _useState6[1];
+    searchCriterionList = _useState6[0],
+    setSearchCriterionList = _useState6[1];
   var _useState7 = React.useState([]),
-    checkboxFieldList = _useState7[0],
-    setCheckboxFieldList = _useState7[1];
-  var _useState8 = React.useState(CTRL.EMPTY),
-    state = _useState8[0],
-    setState = _useState8[1];
+    selectedSearchCriterionList = _useState7[0],
+    setSelectedSearchCriterionList = _useState7[1];
+  var _useState8 = React.useState([]),
+    checkboxFieldList = _useState8[0],
+    setCheckboxFieldList = _useState8[1];
+  var _useState9 = React.useState(CTRL.EMPTY),
+    state = _useState9[0],
+    setState = _useState9[1];
   var addFieldDialogRef = React.useRef(null);
   var searchRef = React.useRef(null);
   React.useEffect(function () {
@@ -65397,24 +65465,18 @@ var Search = function Search(props) {
     var checkboxList = props.fieldList;
     if (props.visibleFieldList) {
       setFilterFieldList(props.visibleFieldList);
-      checkboxList = props.fieldList.map(function (field) {
-        var _props$visibleFieldLi;
-        if ((_props$visibleFieldLi = props.visibleFieldList) !== null && _props$visibleFieldLi !== void 0 && _props$visibleFieldLi.find(function (f) {
-          return f.id === field.id;
-        })) {
-          return _extends({}, field, {
-            value: true
-          });
-        } else {
-          return field;
-        }
-      });
+      checkboxList = getCheckboxFieldList(props.visibleFieldList);
     }
     setCheckboxFieldList(checkboxList);
   }, [props.visibleFieldList]);
   React.useEffect(function () {
-    if (filterFieldList.length >= props.maxFieldCount) {
-      setIsShowAddFieldDialog(false);
+    if (props.maxFieldCount) {
+      if (filterFieldList.length >= props.maxFieldCount) {
+        setIsShowAddFieldButton(false);
+        setIsShowAddFieldDialog(false);
+      } else {
+        setIsShowAddFieldButton(true);
+      }
     }
   }, [filterFieldList]);
   React.useEffect(function () {
@@ -65425,6 +65487,15 @@ var Search = function Search(props) {
       setState(styles$O['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
+  React.useEffect(function () {
+    if (props.searchCriterionList && props.searchCriterionList.length) {
+      var list = getSelectedCriterionList(props.searchCriterionList);
+      setSelectedSearchCriterionList(list);
+      var selectedFieldList = getSelectedFieldList(list);
+      setFilterFieldList(selectedFieldList);
+      setCheckboxFieldList(getCheckboxFieldList(selectedFieldList));
+    }
+  }, [props.searchCriterionList]);
   var handleResize = function handleResize() {
     window.innerWidth < 800 ? setIsMobileView(true) : setIsMobileView(false);
   };
@@ -65488,7 +65559,11 @@ var Search = function Search(props) {
   var onSubmit = function onSubmit(value, criterionList) {
     var list = criterionList ? criterionList : searchCriterionList;
     props.onSubmit(list);
-    var selectedList = list.map(function (x) {
+    setSelectedSearchCriterionList(getSelectedCriterionList(list));
+    closeSettings();
+  };
+  var getSelectedCriterionList = function getSelectedCriterionList(criterionList) {
+    var list = criterionList.map(function (x) {
       var fieldName = props.fieldList.find(function (field) {
         return field.internalName === x.internalName;
       }).name;
@@ -65496,8 +65571,31 @@ var Search = function Search(props) {
         name: fieldName
       });
     });
-    setSelectedSearchCriterionList(selectedList);
-    closeSettings();
+    return list;
+  };
+  var getSelectedFieldList = function getSelectedFieldList(criterionList) {
+    var fieldList = [];
+    criterionList.map(function (x) {
+      var field = props.fieldList.find(function (field) {
+        return field.internalName === x.internalName;
+      });
+      fieldList.push(field);
+    });
+    return fieldList;
+  };
+  var getCheckboxFieldList = function getCheckboxFieldList(visibleFieldList) {
+    var checkboxList = props.fieldList.map(function (field) {
+      if (visibleFieldList.find(function (f) {
+        return f.id === field.id;
+      })) {
+        return _extends({}, field, {
+          value: true
+        });
+      } else {
+        return field;
+      }
+    });
+    return checkboxList;
   };
   var onCancel = function onCancel() {
     setSearchCriterionList([]);
@@ -65559,7 +65657,7 @@ var Search = function Search(props) {
     operatorList: props.operatorList,
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
-  }), filterFieldList.length < props.maxFieldCount && React__default.createElement("div", {
+  }), isShowAddFieldButton && React__default.createElement("div", {
     className: styles$O['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,