ods-component-lib 1.18.92 → 1.18.94

package/dist/index.modern.js

@@ -1,6 +1,6 @@
-import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, Form as Form$1, Row, Col, Tooltip } from 'antd';
+import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, Menu, Form as Form$1, Row, Col, Tooltip } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useEffect, Fragment, useMemo, useCallback } from 'react';
 import Marquee from 'react-fast-marquee';
 import Card from 'antd/es/card/Card';
 import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, InfoCircleOutlined } from '@ant-design/icons';
@@ -16,7 +16,7 @@ import jsPDF from 'jspdf';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
-import { GridIcon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Loop1Icon } from 'ods-icon/react/24/outline';
+import { GridIcon, ChevronDownIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon } from 'ods-icon/react/24/outline';
 import { TreeList, Lookup } from 'devextreme-react';
 
 function _extends() {
@@ -1576,6 +1576,143 @@ function OdsModal(props) {
   }), props.content));
 }
 
+var OdsFilterTagView = function OdsFilterTagView(_ref) {
+  var preparedFilterTextViewJson = _ref.preparedFilterTextViewJson;
+  var _useState = useState([]),
+    menuItems = _useState[0],
+    setMenuItems = _useState[1];
+  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.createElement(React.Fragment, null, React.createElement(Menu, {
+    expandIcon: React.createElement("div", null, React.createElement(ChevronDownIcon, null)),
+    defaultSelectedKeys: ["1"],
+    mode: "horizontal",
+    style: {
+      width: "85%",
+      border: "0"
+    }
+  }, menuItems.map(function (tagObj) {
+    return React.createElement(Menu.Item, {
+      key: tagObj.fieldName
+    }, React.createElement(Tag, null, tagObj.tag + ": " + (tagObj.fieldValue.length > 10 ? tagObj.fieldValue.substring(0, 10) + " ..." : tagObj.fieldValue)));
+  })));
+};
+
+var useToken$1 = theme.useToken;
+var Title = Typography.Title;
+var OdsFilter = function OdsFilter(props) {
+  var _useToken = useToken$1(),
+    token = _useToken.token;
+  var _useState = useState(true),
+    showFilter = _useState[0],
+    setShowFilter = _useState[1];
+  var _useState2 = useState(false),
+    showAdvanceFilter = _useState2[0],
+    setshowAdvanceFilter = _useState2[1];
+  var hasAdvancedFilters = props.advancedFilterRow !== undefined;
+  var hasTagFilter = props.tabs !== undefined;
+  var hasFilterRow = props.filterRow !== undefined;
+  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.createElement(OdsCard, {
+    style: {
+      width: "100%",
+      padding: token.padding,
+      borderRadius: token.borderRadiusLG * 2,
+      marginBottom: token.margin
+    }
+  }, React.createElement(Form$1, {
+    form: props.form,
+    onFinish: onFinish,
+    layout: "vertical"
+  }, React.createElement(Row, {
+    gutter: [12, 12],
+    align: "middle"
+  }, React.createElement(Col, {
+    flex: "1 1 auto",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      overflow: "hidden"
+    }
+  }, React.createElement(Title, {
+    level: 5,
+    style: {
+      margin: 0
+    }
+  }, props.title), props.filterTag && props.filterTag.length > 0 && React.createElement(OdsFilterTagView, {
+    preparedFilterTextViewJson: props.filterTag
+  })), hasAdvancedFilters && React.createElement(Col, null, React.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.createElement(UpArrow5Icon, null) : React.createElement(DownArrow5Icon, null),
+    onClick: handleHideShowAdvancedFilter
+  }, props.buttonAdvancedSearchName)), props.savedFilter, React.createElement(Col, null, React.createElement(OdsButton, {
+    className: "filter-arrow-btn",
+    size: "large",
+    type: "default",
+    icon: showFilter ? React.createElement(UpArrow5Icon, null) : React.createElement(DownArrow5Icon, null),
+    onClick: handleHideShowFilter
+  }))), showFilter && React.createElement(Fragment, null, hasTagFilter && React.createElement(OdsTab, {
+    items: props.tabs
+  }), hasFilterRow && props.filterRow, showAdvanceFilter && props.advancedFilterRow, React.createElement(Row, {
+    gutter: [12, 12],
+    justify: "end"
+  }, React.createElement(Col, null, React.createElement(OdsButton, {
+    type: "text",
+    onClick: onClearSearch,
+    icon: React.createElement(Loop1Icon, null),
+    style: {
+      display: "flex"
+    }
+  }, props.buttonClearAllName)), React.createElement(Col, null, React.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";
@@ -33393,7 +33530,7 @@ var onCancelEditEvent = new CustomEvent("cancelEdit", {
   }
 });
 
-var useToken$1 = theme.useToken;
+var useToken$2 = 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,
@@ -33409,7 +33546,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 = Form$1.useForm(),
     fastUpdateForm = _AntForm$useForm[0];
@@ -34422,5 +34559,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFilter, OdsFilterTagView, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
 //# sourceMappingURL=index.modern.js.map