ods-component-lib 1.18.188 → 1.18.190

package/dist/components/antd/change/OdsChange.Style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    Wrapper: string;
+    Colls: string;
+    ButtonWrapper: string;
+}>;

package/dist/components/antd/change/OdsChange.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface element {
+    elementItems: elementItem[];
+}
+interface elementItem {
+    key: string;
+    title: string;
+    placeholder: string;
+    dataSource?: RecordType[];
+    type: 'select' | 'switch' | 'input';
+}
+interface RecordType {
+    value: string | number;
+    label: string;
+}
+export interface selectedItem {
+    key: string;
+    type: 'select' | 'switch' | 'input';
+    selectedItem: RecordType;
+}
+interface OdsChangeProps {
+    element: element;
+    leftSectionTitle: string | '';
+    rightSectionTitle: string | '';
+    onSelectedItemChangeLeft?: (selectedItems: selectedItem[] | null) => void;
+    onSelectedItemChangeRight?: (selectedItems: selectedItem[] | null) => void;
+}
+declare const _default: React.NamedExoticComponent<OdsChangeProps>;
+export default _default;

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

@@ -13,6 +13,7 @@ export interface FilterProps {
     buttonAdvancedSearchName?: string;
     buttonClearAllName: string;
     buttonApplyName: string;
+    advancedFilterClosed?: boolean;
 }
 declare const OdsFilter: (props: PropsWithChildren<FilterProps>) => React.JSX.Element;
 export default OdsFilter;

package/dist/index.d.ts

@@ -55,6 +55,7 @@ import OdsTransfer from "./components/devextreme/OdsTransfer";
 import OdsServerSideDatagrid from "./components/devextreme/OdsServerSideDatagrid/OdsServerSideDatagrid";
 import OdsInlineEditDataGrid from "./components/devextreme/OdsInlineEditDataGrid/OdsInlineEditDataGrid";
 import OdsMasterDetailDataGrid from "./components/devextreme/OdsMasterDetailDataGrid/OdsMasterDetailDataGrid";
+import OdsChange from "./components/antd/change/OdsChange";
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };
@@ -111,5 +112,6 @@ export { OdsDisplayGrid };
 export { OdsRemoteDataGrid } from "./components/devextreme/index";
 export { OdsBasicDataGrid };
 export { OdsTransfer };
+export { OdsChange };
 export { OdsServerSideDatagrid };
 export { OdsInlineEditDataGrid };

package/dist/index.js

@@ -1652,15 +1652,14 @@ var OdsFilter = function OdsFilter(props) {
   var _useState = React.useState(true),
     showFilter = _useState[0],
     setShowFilter = _useState[1];
-  var _useState2 = React.useState(true),
+  var _useState2 = React.useState(!props.advancedFilterClosed),
     showAdvanceFilter = _useState2[0],
-    setshowAdvanceFilter = _useState2[1];
+    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();
+    if (props.filterTag && props.filterTag.length > 0) handleHideShowFilter();
   }, [props.filterTag]);
   var onFinish = function onFinish(values) {
     if (props.onFinish) {
@@ -1668,7 +1667,7 @@ var OdsFilter = function OdsFilter(props) {
     }
   };
   var handleHideShowAdvancedFilter = function handleHideShowAdvancedFilter() {
-    setshowAdvanceFilter(!showAdvanceFilter);
+    setShowAdvanceFilter(!showAdvanceFilter);
   };
   var handleHideShowFilter = function handleHideShowFilter() {
     setShowFilter(!showFilter);
@@ -35512,6 +35511,254 @@ var MasterDetailDataGrid = function MasterDetailDataGrid(_ref) {
   })));
 };
 
+var _templateObject$s, _templateObject2$4;
+var useStyles$3 = antdStyle.createStyles(function (_ref) {
+  var token = _ref.token,
+    css = _ref.css,
+    cx = _ref.cx;
+  return {
+    Wrapper: cx('relative', css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n            & .ant-card {\n                border-radius: ", "px;\n                & > .ant-card-body {\n                        padding: ", "px;\n                    }\n            }\n        "])), token.borderRadiusLG * 2, token.padding)),
+    Colls: cx('relative z-10'),
+    ButtonWrapper: cx('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex justify-center items-center bg-white', css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n                border-radius: ", "px;\n            "])), token.borderRadius))
+  };
+});
+
+var Text$1 = antd.Typography.Text;
+var OdsChange = function OdsChange(props) {
+  var _useState = React.useState(null),
+    selectedItemsLeft = _useState[0],
+    setSelectedItemsLeft = _useState[1];
+  var _useState2 = React.useState(null),
+    selectedItemsRight = _useState2[0],
+    setSelectedItemsRight = _useState2[1];
+  var _useStyles = useStyles$3(),
+    styles = _useStyles.styles;
+  var addOrUpdateSelectedItem = React.useCallback(function (newItem, key, section, type) {
+    var updateItem = function updateItem(prevItems) {
+      var items = prevItems ? [].concat(prevItems) : [];
+      var itemIndex = items.findIndex(function (item) {
+        return item.key === key;
+      });
+      if (newItem) {
+        var newSelectedItem = {
+          key: key,
+          type: type,
+          selectedItem: newItem
+        };
+        if (itemIndex > -1) {
+          items[itemIndex] = newSelectedItem;
+        } else {
+          items.push(newSelectedItem);
+        }
+      } else if (itemIndex > -1) {
+        items.splice(itemIndex, 1);
+      }
+      return items;
+    };
+    if (section === 'Left') {
+      setSelectedItemsLeft(updateItem);
+    } else {
+      setSelectedItemsRight(updateItem);
+    }
+  }, []);
+  var renderSelect = React.useCallback(function (key, section, value, placeholder, dataSource) {
+    return React__default.createElement(OdsSelect, {
+      value: value,
+      onChange: function onChange(value) {
+        var selectedItem = dataSource.find(function (item) {
+          return item.value === value;
+        });
+        if (selectedItem) {
+          addOrUpdateSelectedItem(selectedItem, key, section, 'select');
+        }
+      },
+      placeholder: placeholder,
+      showSearch: true,
+      allowClear: true,
+      style: {
+        width: '100%',
+        margin: "8px 0 0"
+      },
+      options: dataSource
+    });
+  }, [addOrUpdateSelectedItem]);
+  var renderSwitch = React.useCallback(function (key, section, value) {
+    return React__default.createElement(OdsSwitch, {
+      onChange: function onChange(checked) {
+        addOrUpdateSelectedItem({
+          value: checked.toString(),
+          label: checked.toString()
+        }, key, section, 'switch');
+      },
+      style: {
+        margin: "8px 0 0",
+        display: "block"
+      },
+      defaultChecked: false,
+      value: value === 'true',
+      id: key + '_' + section
+    });
+  }, [addOrUpdateSelectedItem]);
+  var renderInput = React.useCallback(function (key, section, placeholder) {
+    var _selectedItemsLeft$fi, _selectedItemsRight$f;
+    return React__default.createElement(OdsInput, {
+      placeholder: placeholder,
+      style: {
+        width: "100%",
+        margin: "8px 0 0"
+      },
+      maxLength: 50,
+      autoComplete: "off",
+      value: section === 'Left' ? (selectedItemsLeft === null || selectedItemsLeft === void 0 ? void 0 : (_selectedItemsLeft$fi = selectedItemsLeft.find(function (item) {
+        return item.key === key;
+      })) === null || _selectedItemsLeft$fi === void 0 ? void 0 : _selectedItemsLeft$fi.selectedItem.value) || '' : (selectedItemsRight === null || selectedItemsRight === void 0 ? void 0 : (_selectedItemsRight$f = selectedItemsRight.find(function (item) {
+        return item.key === key;
+      })) === null || _selectedItemsRight$f === void 0 ? void 0 : _selectedItemsRight$f.selectedItem.value) || '',
+      onChange: function onChange(e) {
+        var newValue = e.target.value;
+        addOrUpdateSelectedItem({
+          value: newValue,
+          label: newValue
+        }, key, section, 'input');
+      }
+    });
+  }, [addOrUpdateSelectedItem, selectedItemsLeft, selectedItemsRight]);
+  React.useEffect(function () {
+    if (props.onSelectedItemChangeLeft) {
+      props.onSelectedItemChangeLeft(selectedItemsLeft);
+    }
+  }, [selectedItemsLeft, props.onSelectedItemChangeLeft]);
+  React.useEffect(function () {
+    if (props.onSelectedItemChangeRight) {
+      props.onSelectedItemChangeRight(selectedItemsRight);
+    }
+  }, [selectedItemsRight, props.onSelectedItemChangeRight]);
+  var handleExchange = React.useCallback(function () {
+    if (!selectedItemsLeft || !selectedItemsRight) return;
+    var newSelectedItemsLeft = selectedItemsLeft.map(function (leftItem) {
+      var correspondingRightItem = selectedItemsRight.find(function (rightItem) {
+        return rightItem.key === leftItem.key;
+      });
+      if (leftItem.type === 'switch' && correspondingRightItem) {
+        return _extends({}, leftItem, {
+          selectedItem: correspondingRightItem.selectedItem
+        });
+      }
+      return correspondingRightItem ? _extends({}, leftItem, {
+        selectedItem: correspondingRightItem.selectedItem
+      }) : leftItem;
+    });
+    var newSelectedItemsRight = selectedItemsRight.map(function (rightItem) {
+      var correspondingLeftItem = selectedItemsLeft.find(function (leftItem) {
+        return leftItem.key === rightItem.key;
+      });
+      if (rightItem.type === 'switch' && correspondingLeftItem) {
+        return _extends({}, rightItem, {
+          selectedItem: correspondingLeftItem.selectedItem
+        });
+      }
+      return correspondingLeftItem ? _extends({}, rightItem, {
+        selectedItem: correspondingLeftItem.selectedItem
+      }) : rightItem;
+    });
+    var missingSwitchesLeft = selectedItemsRight.filter(function (rightItem) {
+      return rightItem.type === 'switch' && !selectedItemsLeft.some(function (leftItem) {
+        return leftItem.key === rightItem.key;
+      });
+    }).map(function (item) {
+      return {
+        key: item.key,
+        selectedItem: false,
+        type: 'switch'
+      };
+    });
+    var missingSwitchesRight = selectedItemsLeft.filter(function (leftItem) {
+      return leftItem.type === 'switch' && !selectedItemsRight.some(function (rightItem) {
+        return rightItem.key === leftItem.key;
+      });
+    }).map(function (item) {
+      return {
+        key: item.key,
+        selectedItem: false,
+        type: 'switch'
+      };
+    });
+    setSelectedItemsLeft([].concat(newSelectedItemsLeft, missingSwitchesLeft));
+    setSelectedItemsRight([].concat(newSelectedItemsRight, missingSwitchesRight));
+    if (props.onSelectedItemChangeLeft) {
+      props.onSelectedItemChangeLeft([].concat(newSelectedItemsLeft, missingSwitchesLeft));
+    }
+    if (props.onSelectedItemChangeRight) {
+      props.onSelectedItemChangeRight([].concat(newSelectedItemsRight, missingSwitchesRight));
+    }
+  }, [selectedItemsLeft, selectedItemsRight]);
+  var allItemsSelected = React.useCallback(function (selectedItems) {
+    var _props$element$elemen, _props$element;
+    return (_props$element$elemen = (_props$element = props.element) === null || _props$element === void 0 ? void 0 : _props$element.elementItems.filter(function (element) {
+      return element.type !== 'switch';
+    }).every(function (element) {
+      return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+        return item.key === element.key && item.selectedItem;
+      });
+    })) != null ? _props$element$elemen : false;
+  }, [props.element]);
+  var DynamicForm = React.useMemo(function () {
+    var renderSelectColumns = function renderSelectColumns(selectedItems, section) {
+      return props.element.elementItems.map(function (el) {
+        var _selectedItems$find, _selectedItems$find$s, _selectedItems$find2, _selectedItems$find2$;
+        return React__default.createElement(antd.Col, {
+          key: el.key,
+          span: 8
+        }, React__default.createElement(Text$1, {
+          className: 'ant-form-item-label'
+        }, el.title), el.type === 'select' && renderSelect(el.key, section, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$find = selectedItems.find(function (item) {
+          return item.key === el.key;
+        })) === null || _selectedItems$find === void 0 ? void 0 : (_selectedItems$find$s = _selectedItems$find.selectedItem) === null || _selectedItems$find$s === void 0 ? void 0 : _selectedItems$find$s.value, el.placeholder, el.dataSource || []), el.type === 'switch' && renderSwitch(el.key, section, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$find2 = selectedItems.find(function (item) {
+          return item.key === el.key;
+        })) === null || _selectedItems$find2 === void 0 ? void 0 : (_selectedItems$find2$ = _selectedItems$find2.selectedItem) === null || _selectedItems$find2$ === void 0 ? void 0 : _selectedItems$find2$.value), el.type === 'input' && renderInput(el.key, section, el.placeholder));
+      });
+    };
+    return React__default.createElement("div", {
+      className: styles.Wrapper
+    }, React__default.createElement(antd.Row, {
+      gutter: [12, 12],
+      justify: "center",
+      className: styles.Colls
+    }, React__default.createElement(antd.Col, {
+      xs: 24,
+      md: 12
+    }, React__default.createElement(antd.Card, null, React__default.createElement(antd.Row, {
+      gutter: [16, 8]
+    }, React__default.createElement(antd.Col, {
+      span: 24
+    }, React__default.createElement(Text$1, {
+      strong: true
+    }, props.leftSectionTitle)), renderSelectColumns(selectedItemsLeft, 'Left')))), React__default.createElement("div", {
+      className: styles.ButtonWrapper
+    }, React__default.createElement(antd.Button, {
+      icon: React__default.createElement(outline.Slide1Icon, {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24'
+      }),
+      disabled: !allItemsSelected(selectedItemsLeft) || !allItemsSelected(selectedItemsRight),
+      onClick: handleExchange
+    })), React__default.createElement(antd.Col, {
+      xs: 24,
+      md: 12,
+      className: styles.Colls
+    }, React__default.createElement(antd.Card, null, React__default.createElement(antd.Row, {
+      gutter: [16, 8]
+    }, React__default.createElement(antd.Col, {
+      span: 24
+    }, React__default.createElement(Text$1, {
+      strong: true
+    }, props.rightSectionTitle)), renderSelectColumns(selectedItemsRight, 'Right'))))));
+  }, [props.element, selectedItemsLeft, selectedItemsRight]);
+  return React__default.createElement(React__default.Fragment, null, DynamicForm);
+};
+var OdsChange$1 = React__default.memo(OdsChange);
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -37171,6 +37418,7 @@ exports.OdsBasicTable = OdsBasicTable;
 exports.OdsButton = OdsButton;
 exports.OdsCalendar = OdsCalendar;
 exports.OdsCard = OdsCard;
+exports.OdsChange = OdsChange$1;
 exports.OdsCheckbox = OdsCheckbox;
 exports.OdsCheckboxGroup = OdsCheckboxGroup;
 exports.OdsCollapse = OdsCollapse;