ods-component-lib 1.18.92 → 1.18.93

package/dist/components/filter/{filter.d.ts → OdsFilter.d.ts}

@@ -14,5 +14,5 @@ export interface FilterProps {
     buttonClearAllName: string;
     buttonApplyName: string;
 }
-declare const Filter: (props: PropsWithChildren<FilterProps>) => React.JSX.Element;
-export default Filter;
+declare const OdsFilter: (props: PropsWithChildren<FilterProps>) => React.JSX.Element;
+export default OdsFilter;

package/dist/components/filter/OdsFilterTagView.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const OdsFilterTagView: ({ preparedFilterTextViewJson }: {
+    preparedFilterTextViewJson: any;
+}) => React.JSX.Element;
+export default OdsFilterTagView;

package/dist/index.d.ts

@@ -47,6 +47,8 @@ import DxTreeList from "./components/devextreme/treeview/DxTreeList";
 import OdsBadge from "./components/antd/badge/OdsBadge";
 import OdsBadgeRibbon from "./components/antd/badge/OdsBadgeRibbon";
 import OdsModal from "./components/antd/modal/OdsModal";
+import OdsFilter from "./components/filter/OdsFilter";
+import OdsFilterTagView from "./components/filter/OdsFilterTagView";
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };
@@ -94,6 +96,8 @@ export { OdsMultiSelect };
 export { OdsBadge };
 export { OdsBadgeRibbon };
 export { OdsModal };
+export { OdsFilter };
+export { OdsFilterTagView };
 export { OdsDataGrid };
 export { OdsDisplayGrid };
 export { OdsRemoteDataGrid } from "./components/devextreme/index";

package/dist/index.js

@@ -1581,6 +1581,143 @@ function OdsModal(props) {
   }), props.content));
 }
 
+var OdsFilterTagView = function OdsFilterTagView(_ref) {
+  var preparedFilterTextViewJson = _ref.preparedFilterTextViewJson;
+  var _useState = React.useState([]),
+    menuItems = _useState[0],
+    setMenuItems = _useState[1];
+  React.useEffect(function () {
+    var tags = preparedFilterTextViewJson.map(function (item) {
+      var fieldValue = item.value;
+      var transformedValue = fieldValue;
+      var realValue = item.realValue;
+      if (transformedValue !== null && transformedValue !== undefined && transformedValue !== "" && (realValue === null || realValue === void 0 ? void 0 : realValue.length) !== 0) {
+        return {
+          fieldName: item.key,
+          fieldValue: transformedValue,
+          tag: item.Label
+        };
+      }
+      return null;
+    }).filter(function (tag) {
+      return tag !== null;
+    });
+    setMenuItems(tags);
+  }, [preparedFilterTextViewJson]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Menu, {
+    expandIcon: React__default.createElement("div", null, React__default.createElement(outline.ChevronDownIcon, null)),
+    defaultSelectedKeys: ["1"],
+    mode: "horizontal",
+    style: {
+      width: "70%",
+      border: "0"
+    }
+  }, menuItems.map(function (tagObj) {
+    return React__default.createElement(antd.Menu.Item, {
+      key: tagObj.fieldName
+    }, React__default.createElement(antd.Tag, null, tagObj.tag + ": " + (tagObj.fieldValue.length > 10 ? tagObj.fieldValue.substring(0, 10) + " ..." : tagObj.fieldValue)));
+  })));
+};
+
+var useToken$1 = antd.theme.useToken;
+var Title = antd.Typography.Title;
+var OdsFilter = function OdsFilter(props) {
+  var _useToken = useToken$1(),
+    token = _useToken.token;
+  var _useState = React.useState(true),
+    showFilter = _useState[0],
+    setShowFilter = _useState[1];
+  var _useState2 = React.useState(false),
+    showAdvanceFilter = _useState2[0],
+    setshowAdvanceFilter = _useState2[1];
+  var hasAdvancedFilters = props.advancedFilterRow !== undefined;
+  var hasTagFilter = props.tabs !== undefined;
+  var hasFilterRow = props.filterRow !== undefined;
+  React.useEffect(function () {
+    var _props$filterTag;
+    if (props.filterTag && ((_props$filterTag = props.filterTag) === null || _props$filterTag === void 0 ? void 0 : _props$filterTag.length) > 0) handleHideShowFilter();
+  }, [props.filterTag]);
+  var onFinish = function onFinish(values) {
+    if (props.onFinish) {
+      props.onFinish(values);
+    }
+  };
+  var handleHideShowAdvancedFilter = function handleHideShowAdvancedFilter() {
+    setshowAdvanceFilter(!showAdvanceFilter);
+  };
+  var handleHideShowFilter = function handleHideShowFilter() {
+    setShowFilter(!showFilter);
+  };
+  var onClearSearch = function onClearSearch() {
+    if (props.onClickClear) {
+      props.onClickClear();
+    }
+  };
+  return React__default.createElement(OdsCard, {
+    style: {
+      width: "100%",
+      padding: token.padding,
+      borderRadius: token.borderRadiusLG * 2,
+      marginBottom: token.margin
+    }
+  }, React__default.createElement(antd.Form, {
+    form: props.form,
+    onFinish: onFinish,
+    layout: "vertical"
+  }, React__default.createElement(antd.Row, {
+    gutter: [12, 12],
+    align: "middle"
+  }, React__default.createElement(antd.Col, {
+    flex: "1 1 auto",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      overflow: "hidden"
+    }
+  }, React__default.createElement(Title, {
+    level: 5,
+    style: {
+      margin: 0
+    }
+  }, props.title), props.filterTag && props.filterTag.length > 0 && React__default.createElement(OdsFilterTagView, {
+    preparedFilterTextViewJson: props.filterTag
+  })), hasAdvancedFilters && React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
+    style: {
+      border: "none",
+      color: "#1677FF",
+      display: "flex",
+      alignItems: "flex-end"
+    },
+    title: "Advanced Search",
+    className: "filter-arrow-btn",
+    size: "medium",
+    type: "default",
+    icon: showAdvanceFilter ? React__default.createElement(outline.UpArrow5Icon, null) : React__default.createElement(outline.DownArrow5Icon, null),
+    onClick: handleHideShowAdvancedFilter
+  }, props.buttonAdvancedSearchName)), props.savedFilter, React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
+    className: "filter-arrow-btn",
+    size: "large",
+    type: "default",
+    icon: showFilter ? React__default.createElement(outline.UpArrow5Icon, null) : React__default.createElement(outline.DownArrow5Icon, null),
+    onClick: handleHideShowFilter
+  }))), showFilter && React__default.createElement(React.Fragment, null, hasTagFilter && React__default.createElement(OdsTab, {
+    items: props.tabs
+  }), hasFilterRow && props.filterRow, showAdvanceFilter && props.advancedFilterRow, React__default.createElement(antd.Row, {
+    gutter: [12, 12],
+    justify: "end"
+  }, React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
+    type: "text",
+    onClick: onClearSearch,
+    icon: React__default.createElement(outline.Loop1Icon, null),
+    style: {
+      display: "flex"
+    }
+  }, props.buttonClearAllName)), React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
+    type: "primary",
+    htmlType: "submit"
+  }, props.buttonApplyName))))));
+};
+
 // A type of promise-like that resolves synchronously and supports only one observer
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
@@ -33398,7 +33535,7 @@ var onCancelEditEvent = new CustomEvent("cancelEdit", {
   }
 });
 
-var useToken$1 = antd.theme.useToken;
+var useToken$2 = antd.theme.useToken;
 var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var _props$axiosRequest4, _props$axiosRequest5, _props$axiosRequest6, _props$axiosRequest7, _props$axiosRequest8, _props$axiosRequest9, _props$axiosRequest10, _props$axiosRequest11, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
   var keyExpr = props.keyExpr,
@@ -33414,7 +33551,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     onFastUpdateFinish = props.onFastUpdateFinish,
     onFastUpdateCancel = props.onFastUpdateCancel,
     onFastUpdateFailed = props.onFastUpdateFailed;
-  var _useToken = useToken$1(),
+  var _useToken = useToken$2(),
     token = _useToken.token;
   var _AntForm$useForm = antd.Form.useForm(),
     fastUpdateForm = _AntForm$useForm[0];
@@ -34447,6 +34584,8 @@ exports.OdsDisplayGrid = OdsDisplayGrid;
 exports.OdsDivider = OdsDivider;
 exports.OdsDropdown = OdsDropdown;
 exports.OdsDropdownButton = OdsDropdownButton;
+exports.OdsFilter = OdsFilter;
+exports.OdsFilterTagView = OdsFilterTagView;
 exports.OdsImage = OdsImage;
 exports.OdsInput = OdsInput;
 exports.OdsInputNumber = OdsInputNumber;