@bit.rhplus/ag-grid 0.0.81 → 0.0.83

package/BulkEdit/BulkEditSelect.jsx

@@ -1,106 +1,106 @@
-/* eslint-disable */
-import React, { useRef, useEffect } from 'react';
-import { createMemoComparison } from '@bit.rhplus/react-memo';
-import { Select, Button, Space } from 'antd';
-import * as LucideIcons from 'lucide-react';
-
-const BulkEditSelect = ({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  loading,
-  options = [],
-  placeholder = 'Vyberte hodnotu...',
-  allowClear = true,
-  fieldLabel = 'value',
-  fieldValue = 'id',
-  fieldIcon = null,
-  showSearch = false,
-}) => {
-  const selectRef = useRef(null);
-
-  useEffect(() => {
-    if (selectRef.current) {
-      setTimeout(() => {
-        selectRef.current?.focus();
-      }, 100);
-    }
-  }, []);
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !loading) {
-      e.preventDefault();
-      onSubmit(value);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      onCancel();
-    }
-  };
-
-  return (
-    <>
-      <div style={{ marginBottom: '12px' }} onClick={(e) => e.stopPropagation()}>
-        <Select
-          ref={selectRef}
-          style={{ width: '100%' }}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          disabled={loading}
-          allowClear={allowClear}
-          showSearch={showSearch}
-          filterOption={showSearch ? (input, option) => {
-            // Najdi původní item podle value pro filtrování
-            const originalItem = options.find(item => item[fieldValue] === option.value);
-            const searchText = originalItem?.[fieldLabel] || '';
-            return searchText.toLowerCase().includes(input.toLowerCase());
-          } : false}
-          options={options.map(item => {
-            const iconName = fieldIcon ? item[fieldIcon] : null;
-            const LucideIcon = iconName ? LucideIcons[iconName] : null;
-
-            return {
-              label: (
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  {LucideIcon && <LucideIcon size={16} />}
-                  <span>{item[fieldLabel]}</span>
-                </div>
-              ),
-              value: item[fieldValue],
-              searchText: item[fieldLabel] // Pro lepší filtrování
-            };
-          })}
-          onKeyDown={handleKeyDown}
-          onClick={(e) => e.stopPropagation()}
-          getPopupContainer={(trigger) => trigger.parentNode}
-        />
-      </div>
-
-      <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
-        <Button size="small" onClick={onCancel} disabled={loading}>
-          Zrušit
-        </Button>
-        <Button
-          type="primary"
-          size="small"
-          onClick={() => onSubmit(value)}
-          loading={loading}
-        >
-          Použít
-        </Button>
-      </Space>
-    </>
-  );
-};
-
-// React.memo optimalizace
-// ✅ PERFORMANCE FIX: Ignore callback references
-const arePropsEqual = createMemoComparison(
-  ['value', 'loading', 'options', 'placeholder', 'allowClear'], // Kritické props
-  ['onChange', 'onSubmit', 'onCancel'], // Ignorované callbacky
-  false,
-  'BulkEditSelect'
-);
-
-export default React.memo(BulkEditSelect, arePropsEqual);
+/* eslint-disable */
+import React, { useRef, useEffect } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
+import { Select, Button, Space } from 'antd';
+import * as LucideIcons from 'lucide-react';
+
+const BulkEditSelect = ({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  loading,
+  options = [],
+  placeholder = 'Vyberte hodnotu...',
+  allowClear = true,
+  fieldLabel = 'value',
+  fieldValue = 'id',
+  fieldIcon = null,
+  showSearch = false,
+}) => {
+  const selectRef = useRef(null);
+
+  useEffect(() => {
+    if (selectRef.current) {
+      setTimeout(() => {
+        selectRef.current?.focus();
+      }, 100);
+    }
+  }, []);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !loading) {
+      e.preventDefault();
+      onSubmit(value);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }} onClick={(e) => e.stopPropagation()}>
+        <Select
+          ref={selectRef}
+          style={{ width: '100%' }}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={loading}
+          allowClear={allowClear}
+          showSearch={showSearch}
+          filterOption={showSearch ? (input, option) => {
+            // Najdi původní item podle value pro filtrování
+            const originalItem = options.find(item => item[fieldValue] === option.value);
+            const searchText = originalItem?.[fieldLabel] || '';
+            return searchText.toLowerCase().includes(input.toLowerCase());
+          } : false}
+          options={options.map(item => {
+            const iconName = fieldIcon ? item[fieldIcon] : null;
+            const LucideIcon = iconName ? LucideIcons[iconName] : null;
+
+            return {
+              label: (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  {LucideIcon && <LucideIcon size={16} />}
+                  <span>{item[fieldLabel]}</span>
+                </div>
+              ),
+              value: item[fieldValue],
+              searchText: item[fieldLabel] // Pro lepší filtrování
+            };
+          })}
+          onKeyDown={handleKeyDown}
+          onClick={(e) => e.stopPropagation()}
+          getPopupContainer={(trigger) => trigger.parentNode}
+        />
+      </div>
+
+      <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+        <Button size="small" onClick={onCancel} disabled={loading}>
+          Zrušit
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          onClick={() => onSubmit(value)}
+          loading={loading}
+        >
+          Použít
+        </Button>
+      </Space>
+    </>
+  );
+};
+
+// React.memo optimalizace
+// ✅ PERFORMANCE FIX: Ignore callback references
+const arePropsEqual = createMemoComparison(
+  ['value', 'loading', 'options', 'placeholder', 'allowClear'], // Kritické props
+  ['onChange', 'onSubmit', 'onCancel'], // Ignorované callbacky
+  false,
+  'BulkEditSelect'
+);
+
+export default React.memo(BulkEditSelect, arePropsEqual);

package/Editors/DatePickerEditor.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import { default as DatePicker } from 'antd/es/date-picker';
+import { useGridCellEditor } from 'ag-grid-react';
+import dayjs from 'dayjs';
+
+/**
+ * DatePickerEditor - AG Grid cell editor s Ant Design DatePicker
+ * Automaticky se otevře při vstupu do editačního módu
+ * Podporuje formátování data a validaci
+ * Správně ukládá hodnotu při zavření pickeru nebo přechodu na jinou buňku
+ */
+const DatePickerEditor = React.forwardRef(({ value, initialValue, onValueChange, stopEditing, format = 'DD.MM.YYYY' }, ref) => {
+  const [dateValue, setDateValue] = useState(value ? dayjs(value) : null);
+  const [open, setOpen] = useState(false);
+
+  // Expose getValue method to AG Grid - nutné pro správné uložení hodnoty
+  React.useImperativeHandle(ref, () => ({
+    getValue: () => {
+      return dateValue ? dateValue.toISOString() : null;
+    }
+  }));
+
+  // AG-Grid callback - zrušit editaci pokud se hodnota nezměnila
+  useGridCellEditor({
+    isCancelAfterEnd: () => {
+      return !dateValue || (initialValue && dateValue.isSame(dayjs(initialValue)));
+    }
+  });
+
+  // Auto-open picker při mount
+  useEffect(() => {
+    setOpen(true);
+  }, []);
+
+  const handleChange = (newDate) => {
+    setDateValue(newDate);
+    if (onValueChange) {
+      onValueChange(newDate ? newDate.toISOString() : null);
+    }
+  };
+
+  const handleOk = () => {
+    stopEditing();
+  };
+
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    // Když se picker zavře (uživatel klikl mimo), ukončíme editaci
+    if (!newOpen) {
+      // Malé zpoždění aby se hodnota stihla uložit
+      setTimeout(() => {
+        stopEditing();
+      }, 0);
+    }
+  };
+
+  return (
+    <DatePicker
+      value={dateValue}
+      onChange={handleChange}
+      onOk={handleOk}
+      format={format}
+      style={{ width: '100%' }}
+      open={open}
+      onOpenChange={handleOpenChange}
+      autoFocus
+    />
+  );
+});
+
+DatePickerEditor.displayName = 'DatePickerEditor';
+
+export default DatePickerEditor;
+/* eslint-enable */

package/Editors/index.jsx

@@ -0,0 +1 @@
+export {default as DatePickerEditor} from './DatePickerEditor';

package/Renderers/ImageRenderer.jsx

@@ -1,103 +1,103 @@
-/* eslint-disable */
-import * as React from 'react';
-import { createMemoComparison } from '@bit.rhplus/react-memo';
-
-function ImageRenderer(props) {
-  const { data, value, colDef: { imageRendererParams = {} } = {} } = props;
-
-  if (!imageRendererParams) return null;
-  
-  const {
-    cellAlign = 'center',
-    visibleGetter,
-    showOnGroup = false,
-    imageUrl,
-    fallbackText = true,
-    alt,
-    imageSize = 24,
-    imageStyle,
-  } = imageRendererParams;
-
-  const [hasError, setHasError] = React.useState(false);
-
-  const visibleResult = React.useMemo(() =>
-    visibleGetter ? visibleGetter(data) : true,
-    [visibleGetter, data]
-  );
-
-  const computedImageUrl = React.useMemo(() => {
-    if (!imageUrl) return null;
-
-    if (typeof imageUrl === 'function') {
-      return imageUrl({ data, value, props });
-    }
-
-    return imageUrl;
-  }, [imageUrl, data, value, props]);
-
-  const handleImageError = React.useCallback(() => {
-    setHasError(true);
-  }, []);
-
-  React.useEffect(() => {
-    setHasError(false);
-  }, [computedImageUrl]);
-
-  const showCondition = React.useMemo(() => {
-    const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
-    return !newItem && (showOnGroup || !!data) && visibleResult;
-  }, [data, showOnGroup, visibleResult]);
-
-  const containerStyle = React.useMemo(() => ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: cellAlign || 'center',
-    alignItems: 'center',
-    height: '100%',
-  }), [cellAlign]);
-
-  const finalImageStyle = React.useMemo(() => ({
-    width: imageSize,
-    height: imageSize,
-    objectFit: 'contain',
-    ...(typeof imageStyle === 'function' ? imageStyle({ data, value, props }) : imageStyle || {}),
-  }), [imageSize, imageStyle, data, value, props]);
-
-  if (!showCondition) return null;
-
-  if (hasError || !computedImageUrl) {
-    if (fallbackText && value) {
-      return (
-        <span style={containerStyle}>
-          {value}
-        </span>
-      );
-    }
-    return null;
-  }
-
-  return (
-    <span style={containerStyle}>
-      <img
-        src={computedImageUrl}
-        alt={alt || value || 'Image'}
-        style={finalImageStyle}
-        onError={handleImageError}
-        loading="lazy"
-      />
-    </span>
-  );
-}
-
-ImageRenderer.displayName = 'ImageRenderer';
-
-// React.memo optimalizace pro AG-Grid renderer
-// ✅ PERFORMANCE FIX: colDef NESMÍ být v kritických props!
-const arePropsEqual = createMemoComparison(
-  ['value', 'data'],
-  ['colDef'],
-  false,
-  'ImageRenderer'
-);
-
-export default React.memo(ImageRenderer, arePropsEqual);
+/* eslint-disable */
+import * as React from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
+
+function ImageRenderer(props) {
+  const { data, value, colDef: { imageRendererParams = {} } = {} } = props;
+
+  if (!imageRendererParams) return null;
+  
+  const {
+    cellAlign = 'center',
+    visibleGetter,
+    showOnGroup = false,
+    imageUrl,
+    fallbackText = true,
+    alt,
+    imageSize = 24,
+    imageStyle,
+  } = imageRendererParams;
+
+  const [hasError, setHasError] = React.useState(false);
+
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
+
+  const computedImageUrl = React.useMemo(() => {
+    if (!imageUrl) return null;
+
+    if (typeof imageUrl === 'function') {
+      return imageUrl({ data, value, props });
+    }
+
+    return imageUrl;
+  }, [imageUrl, data, value, props]);
+
+  const handleImageError = React.useCallback(() => {
+    setHasError(true);
+  }, []);
+
+  React.useEffect(() => {
+    setHasError(false);
+  }, [computedImageUrl]);
+
+  const showCondition = React.useMemo(() => {
+    const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
+    return !newItem && (showOnGroup || !!data) && visibleResult;
+  }, [data, showOnGroup, visibleResult]);
+
+  const containerStyle = React.useMemo(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: cellAlign || 'center',
+    alignItems: 'center',
+    height: '100%',
+  }), [cellAlign]);
+
+  const finalImageStyle = React.useMemo(() => ({
+    width: imageSize,
+    height: imageSize,
+    objectFit: 'contain',
+    ...(typeof imageStyle === 'function' ? imageStyle({ data, value, props }) : imageStyle || {}),
+  }), [imageSize, imageStyle, data, value, props]);
+
+  if (!showCondition) return null;
+
+  if (hasError || !computedImageUrl) {
+    if (fallbackText && value) {
+      return (
+        <span style={containerStyle}>
+          {value}
+        </span>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <span style={containerStyle}>
+      <img
+        src={computedImageUrl}
+        alt={alt || value || 'Image'}
+        style={finalImageStyle}
+        onError={handleImageError}
+        loading="lazy"
+      />
+    </span>
+  );
+}
+
+ImageRenderer.displayName = 'ImageRenderer';
+
+// React.memo optimalizace pro AG-Grid renderer
+// ✅ PERFORMANCE FIX: colDef NESMÍ být v kritických props!
+const arePropsEqual = createMemoComparison(
+  ['value', 'data'],
+  ['colDef'],
+  false,
+  'ImageRenderer'
+);
+
+export default React.memo(ImageRenderer, arePropsEqual);