@true-engineering/true-react-common-ui-kit 3.0.0-alpha.14 → 3.0.0-alpha.16

package/dist/components/FlexibleTable/FlexibleTable.d.ts

@@ -7,7 +7,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>> extends
     headerContent?: Partial<Record<keyof Values, any>>;
     enabledColumns?: Array<keyof Values>;
     activeRows?: number[];
-    config?: IFlexibleTableConfigType<Values>;
+    config: IFlexibleTableConfigType<Values>;
     isHorizontallyScrollable?: boolean;
     isFirstColumnSticky?: boolean;
     infinityScrollConfig?: IInfinityScrollConfig;

package/dist/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.d.ts

@@ -5,7 +5,7 @@ import { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 export interface IFlexibleTableCellProps<Values extends Record<string, any>> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
     item: Values;
     columnName: keyof Values;
-    config?: IFlexibleTableConfigType<Values>;
+    config: IFlexibleTableConfigType<Values>;
     isFocusedRow?: boolean;
     isSecond?: boolean;
     isSticky?: boolean;

package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.d.ts

@@ -7,7 +7,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>> exte
     uniqueField?: keyof Values;
     isFirstColumnSticky?: boolean;
     isActive: boolean;
-    config?: IFlexibleTableConfigType<Values>;
+    config: IFlexibleTableConfigType<Values>;
     enabledColumns?: Array<keyof Values>;
     rowAttributes?: Array<keyof Values>;
     expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;

package/dist/components/FlexibleTable/helpers.d.ts

@@ -1 +1,3 @@
+import { IFlexibleTableConfigType } from './types';
 export declare const hasHorizontalScrollBar: (el: HTMLElement | null | undefined) => boolean;
+export declare const formatCellContent: <Values>(value: unknown, config?: IFlexibleTableConfigType<Values>[keyof Values] | undefined) => string;

package/dist/components/FlexibleTable/types.d.ts

@@ -17,7 +17,7 @@ export declare type IFlexibleTableConfigType<Values> = {
     [Key in keyof Values]?: {
         title?: ReactNode;
         titleComponent?: ITitleComponent<unknown>;
-        component?: IValueComponent<Values, Values[Key]>;
+        component?: IValueComponent<NonNullable<Values>, Values[Key]>;
         dateFormat?: string;
         minWidth?: string | number;
         width?: string | number;

package/dist/true-react-common-ui-kit.js

@@ -21741,6 +21741,20 @@ var Flag = function(param) {
   });
 };
 var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
+function _instanceof(left2, right2) {
+  if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
+    return !!right2[Symbol.hasInstance](left2);
+  } else {
+    return left2 instanceof right2;
+  }
+}
+var hasHorizontalScrollBar = function(el) {
+  return isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+};
+var _config_dateFormat;
+var formatCellContent = function(value, config) {
+  return _instanceof(value, Date) ? format$1(value, (_config_dateFormat = config === null || config === void 0 ? void 0 : config.dateFormat) !== null && _config_dateFormat !== void 0 ? _config_dateFormat : DEFAULT_DATE_FORMAT) : String(value);
+};
 var STICKY_SHADOW_PADDING = 12;
 var useStyles$h = createThemedStyles("FlexibleTable", {
   root: {
@@ -21919,47 +21933,34 @@ function _define_property$i(obj, key, value) {
   }
   return obj;
 }
-function _instanceof(left2, right2) {
-  if (right2 != null && typeof Symbol !== "undefined" && right2[Symbol.hasInstance]) {
-    return !!right2[Symbol.hasInstance](left2);
-  } else {
-    return left2 instanceof right2;
-  }
-}
 function FlexibleTableCell(param) {
   var item = param.item, columnName = param.columnName, config = param.config, isFocusedRow = param.isFocusedRow, isSecond = param.isSecond, isSticky = param.isSticky, isNestedComponentExpanded = param.isNestedComponentExpanded, isRowNestedComponentExpanded = param.isRowNestedComponentExpanded, tweakStyles = param.tweakStyles, onSetNestedComponent = param.onSetNestedComponent;
   var classes = useStyles$g({
     theme: tweakStyles
   });
-  var itemConfig = config === null || config === void 0 ? void 0 : config[columnName];
+  var _config_columnName;
+  var _ref = (_config_columnName = config[columnName]) !== null && _config_columnName !== void 0 ? _config_columnName : {}, component = _ref.component, cellAlign = _ref.cellAlign, position = _ref.position, right2 = _ref.right, left2 = _ref.left, cellVerticalAlign = _ref.cellVerticalAlign;
   var value = item[columnName];
-  var content = null;
-  if (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component) {
-    var ValueComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.component;
-    content = ValueComponent({
-      value,
-      row: item,
-      isFocusedRow,
-      isNestedComponentExpanded,
-      isRowNestedComponentExpanded,
-      onSetNestedComponent
-    });
-  } else if (typeof value === "string" || typeof value === "number") {
-    content = value;
-  } else if (_instanceof(value, Date)) {
-    content = format$1(value, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.dateFormat) || DEFAULT_DATE_FORMAT);
-  }
   var _obj;
   return /* @__PURE__ */ jsx("td", {
     className: clsx(classes.root, (_obj = {}, _define_property$i(_obj, classes.sticky, isSticky), _define_property$i(_obj, classes.second, isSecond), _obj)),
     style: {
-      textAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellAlign,
-      position: isSticky ? "sticky" : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.position,
-      right: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.right,
-      left: isSticky ? 0 : itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.left,
-      verticalAlign: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.cellVerticalAlign
+      textAlign: cellAlign,
+      position: isSticky ? "sticky" : position,
+      right: right2,
+      left: isSticky ? 0 : left2,
+      verticalAlign: cellVerticalAlign
     },
-    children: content
+    children: isNotEmpty(value) && /* @__PURE__ */ jsx(Fragment, {
+      children: isNotEmpty(component) ? component({
+        value,
+        row: item,
+        isFocusedRow,
+        isNestedComponentExpanded,
+        isRowNestedComponentExpanded,
+        onSetNestedComponent
+      }) : formatCellContent(value, config[columnName])
+    })
   }, columnName);
 }
 var useStyles$f = createThemedStyles("FlexibleTableRow", {
@@ -22187,9 +22188,6 @@ function FlexibleTableRowInner(param) {
   });
 }
 var FlexibleTableRow = /* @__PURE__ */ memo(FlexibleTableRowInner);
-var hasHorizontalScrollBar = function(el) {
-  return isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
-};
 function _array_like_to_array$8(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -22343,17 +22341,17 @@ function FlexibleTable(param) {
       return;
     }
     var scrollHandler = function() {
-      return setIsHorizontallyScrolled(scrollContainer.scrollLeft > 0);
+      setIsHorizontallyScrolled(scrollContainer.scrollLeft > 0);
     };
     var resizeHandler = function() {
-      return setHasScrollBar(hasHorizontalScrollBar(scrollContainer));
+      setHasScrollBar(hasHorizontalScrollBar(scrollContainer));
     };
     resizeHandler();
     scrollContainer.addEventListener("scroll", scrollHandler);
-    document.addEventListener("resize", resizeHandler);
+    window.addEventListener("resize", resizeHandler);
     return function() {
       scrollContainer.removeEventListener("scroll", scrollHandler);
-      document.removeEventListener("resize", resizeHandler);
+      window.removeEventListener("resize", resizeHandler);
     };
   }, [
     ref