@bit.rhplus/ag-grid 0.0.80 → 0.0.82

package/BulkEdit/BulkEditDatePicker.jsx

@@ -1,305 +1,305 @@
-/* eslint-disable */
-import React, { useState, useCallback, useMemo } from 'react';
-import { createMemoComparison } from '@bit.rhplus/react-memo';
-import { Calendar, Button, Space, Tooltip } from 'antd';
-import dayjs from 'dayjs';
-import 'dayjs/locale/cs';
-import styled from 'styled-components';
-import Holidays from 'date-holidays';
-
-dayjs.locale('cs');
-
-const CalendarContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
-  width: 900px;
-  justify-content: space-between;
-  
-  .ant-picker-calendar {
-    max-width: 260px;
-    flex: 1;
-  }
-  
-  .ant-picker-calendar-header {
-    padding: 8px 12px;
-  }
-  
-  .ant-picker-cell-selected .ant-picker-cell-inner {
-    background: transparent !important;
-    color: inherit !important;
-    font-weight: normal !important;
-  }
-  
-  .ant-picker-cell-disabled {
-    pointer-events: none;
-  }
-  
-  .ant-picker-cell-disabled .ant-picker-cell-inner {
-    color: rgba(0, 0, 0, 0.25) !important;
-    background: transparent !important;
-  }
-  
-  .ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-cell-inner {
-    color: rgba(0, 0, 0, 0.25) !important;
-    background: transparent !important;
-  }
-`;
-
-const BulkEditDatePicker = ({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  loading,
-  format = 'DD.MM.YYYY',
-  showTime = false,
-}) => {
-  const today = dayjs();
-  const [selectedDate, setSelectedDate] = useState(value ? dayjs(value) : null);
-  const [baseMonth, setBaseMonth] = useState(today);
-  
-  const month1 = baseMonth;
-  const month2 = baseMonth.add(1, 'month');
-  const month3 = baseMonth.add(2, 'month');
-
-  const hd = useMemo(() => new Holidays('CZ'), []);
-
-  const handleDateSelect = (date) => {
-    setSelectedDate(date);
-    if (showTime) {
-      onChange(date.toISOString());
-    } else {
-      onChange(date.format('YYYY-MM-DD'));
-    }
-  };
-
-  const getHoliday = useCallback((date) => {
-    const holidays = hd.isHoliday(date.toDate());
-    return holidays && holidays.length > 0 ? holidays[0].name : null;
-  }, [hd]);
-
-  const getVisibleHolidays = useCallback(() => {
-    const holidays = [];
-    const months = [month1, month2, month3];
-    
-    months.forEach(month => {
-      const startOfMonth = month.startOf('month');
-      const endOfMonth = month.endOf('month');
-      let current = startOfMonth;
-      
-      while (current.isBefore(endOfMonth) || current.isSame(endOfMonth, 'day')) {
-        const holidayName = getHoliday(current);
-        if (holidayName) {
-          holidays.push({
-            date: current.format('DD.MM.YYYY'),
-            name: holidayName,
-          });
-        }
-        current = current.add(1, 'day');
-      }
-    });
-    
-    return holidays;
-  }, [month1, month2, month3, getHoliday]);
-
-  const visibleHolidays = useMemo(() => getVisibleHolidays(), [getVisibleHolidays]);
-
-  const createCellRender = useCallback((monthValue) => {
-    return (current, info) => {
-      const isSelected = selectedDate && 
-        current.date() === selectedDate.date() && 
-        current.month() === selectedDate.month() && 
-        current.year() === selectedDate.year();
-      const isToday = current.isSame(today, 'day');
-      const holidayName = getHoliday(current);
-      
-      if (isSelected) {
-        return (
-          <div className="ant-picker-cell-inner" style={{
-            background: '#1890ff',
-            color: 'white',
-            fontWeight: 600,
-          }}>
-            {current.date()}
-          </div>
-        );
-      }
-
-      if (holidayName) {
-        return (
-          <div className="ant-picker-cell-inner" style={{
-            background: '#fff1f0',
-            color: '#cf1322',
-            fontWeight: 600,
-          }}>
-            {current.date()}
-          </div>
-        );
-      }
-      
-      if (isToday) {
-        return (
-          <div className="ant-picker-cell-inner" style={{
-            background: '#e6f7ff',
-            color: '#1890ff',
-            fontWeight: 600,
-            border: '1px solid #1890ff',
-          }}>
-            {current.date()}
-          </div>
-        );
-      }
-      
-      return (
-        <div className="ant-picker-cell-inner">
-          {current.date()}
-        </div>
-      );
-    };
-  }, [selectedDate, today, getHoliday]);
-
-  return (
-    <>
-      <CalendarContainer onClick={(e) => e.stopPropagation()}>
-        <Calendar
-          fullscreen={false}
-          value={month1}
-          onSelect={handleDateSelect}
-          fullCellRender={createCellRender(month1)}
-          headerRender={({ value: currentValue }) => (
-            <div style={{ 
-              padding: '8px 12px', 
-              fontWeight: 500, 
-              textAlign: 'center',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between'
-            }}>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
-              >
-                ‹
-              </span>
-              <span>{currentValue.format('MMMM YYYY')}</span>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
-              >
-                ›
-              </span>
-            </div>
-          )}
-        />
-        <Calendar
-          fullscreen={false}
-          value={month2}
-          onSelect={handleDateSelect}
-          fullCellRender={createCellRender(month2)}
-          headerRender={({ value: currentValue }) => (
-            <div style={{ 
-              padding: '8px 12px', 
-              fontWeight: 500, 
-              textAlign: 'center',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between'
-            }}>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
-              >
-                ‹
-              </span>
-              <span>{currentValue.format('MMMM YYYY')}</span>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
-              >
-                ›
-              </span>
-            </div>
-          )}
-        />
-        <Calendar
-          fullscreen={false}
-          value={month3}
-          onSelect={handleDateSelect}
-          fullCellRender={createCellRender(month3)}
-          headerRender={({ value: currentValue }) => (
-            <div style={{ 
-              padding: '8px 12px', 
-              fontWeight: 500, 
-              textAlign: 'center',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between'
-            }}>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
-              >
-                ‹
-              </span>
-              <span>{currentValue.format('MMMM YYYY')}</span>
-              <span 
-                style={{ cursor: 'pointer', padding: '0 4px' }}
-                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
-              >
-                ›
-              </span>
-            </div>
-          )}
-        />
-      </CalendarContainer>
-
-      {visibleHolidays.length > 0 && (
-        <div style={{ marginBottom: '12px', fontSize: '11px', color: '#666' }}>
-          {visibleHolidays.map((holiday, index) => {
-            const isSelectedHoliday = selectedDate && holiday.date === selectedDate.format('DD.MM.YYYY');
-            return (
-              <div 
-                key={index} 
-                style={{ 
-                  marginBottom: '2px',
-                  background: isSelectedHoliday ? '#e6f7ff' : 'transparent',
-                  padding: isSelectedHoliday ? '2px 4px' : '0',
-                  borderRadius: '2px',
-                  fontWeight: isSelectedHoliday ? 600 : 'normal',
-                }}
-              >
-                <span style={{ color: '#cf1322', fontWeight: 500 }}>{holiday.date}</span> - {holiday.name}
-              </div>
-            );
-          })}
-        </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'], // Kritické props
-  ['onChange', 'onSubmit', 'onCancel'], // Ignorované callbacky
-  false,
-  'BulkEditDatePicker'
-);
-
-export default React.memo(BulkEditDatePicker, arePropsEqual);
+/* eslint-disable */
+import React, { useState, useCallback, useMemo } from 'react';
+import { createMemoComparison } from '@bit.rhplus/react-memo';
+import { Calendar, Button, Space, Tooltip } from 'antd';
+import dayjs from 'dayjs';
+import 'dayjs/locale/cs';
+import styled from 'styled-components';
+import Holidays from 'date-holidays';
+
+dayjs.locale('cs');
+
+const CalendarContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  width: 900px;
+  justify-content: space-between;
+  
+  .ant-picker-calendar {
+    max-width: 260px;
+    flex: 1;
+  }
+  
+  .ant-picker-calendar-header {
+    padding: 8px 12px;
+  }
+  
+  .ant-picker-cell-selected .ant-picker-cell-inner {
+    background: transparent !important;
+    color: inherit !important;
+    font-weight: normal !important;
+  }
+  
+  .ant-picker-cell-disabled {
+    pointer-events: none;
+  }
+  
+  .ant-picker-cell-disabled .ant-picker-cell-inner {
+    color: rgba(0, 0, 0, 0.25) !important;
+    background: transparent !important;
+  }
+  
+  .ant-picker-cell:not(.ant-picker-cell-in-view) .ant-picker-cell-inner {
+    color: rgba(0, 0, 0, 0.25) !important;
+    background: transparent !important;
+  }
+`;
+
+const BulkEditDatePicker = ({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  loading,
+  format = 'DD.MM.YYYY',
+  showTime = false,
+}) => {
+  const today = dayjs();
+  const [selectedDate, setSelectedDate] = useState(value ? dayjs(value) : null);
+  const [baseMonth, setBaseMonth] = useState(today);
+  
+  const month1 = baseMonth;
+  const month2 = baseMonth.add(1, 'month');
+  const month3 = baseMonth.add(2, 'month');
+
+  const hd = useMemo(() => new Holidays('CZ'), []);
+
+  const handleDateSelect = (date) => {
+    setSelectedDate(date);
+    if (showTime) {
+      onChange(date.toISOString());
+    } else {
+      onChange(date.format('YYYY-MM-DD'));
+    }
+  };
+
+  const getHoliday = useCallback((date) => {
+    const holidays = hd.isHoliday(date.toDate());
+    return holidays && holidays.length > 0 ? holidays[0].name : null;
+  }, [hd]);
+
+  const getVisibleHolidays = useCallback(() => {
+    const holidays = [];
+    const months = [month1, month2, month3];
+    
+    months.forEach(month => {
+      const startOfMonth = month.startOf('month');
+      const endOfMonth = month.endOf('month');
+      let current = startOfMonth;
+      
+      while (current.isBefore(endOfMonth) || current.isSame(endOfMonth, 'day')) {
+        const holidayName = getHoliday(current);
+        if (holidayName) {
+          holidays.push({
+            date: current.format('DD.MM.YYYY'),
+            name: holidayName,
+          });
+        }
+        current = current.add(1, 'day');
+      }
+    });
+    
+    return holidays;
+  }, [month1, month2, month3, getHoliday]);
+
+  const visibleHolidays = useMemo(() => getVisibleHolidays(), [getVisibleHolidays]);
+
+  const createCellRender = useCallback((monthValue) => {
+    return (current, info) => {
+      const isSelected = selectedDate && 
+        current.date() === selectedDate.date() && 
+        current.month() === selectedDate.month() && 
+        current.year() === selectedDate.year();
+      const isToday = current.isSame(today, 'day');
+      const holidayName = getHoliday(current);
+      
+      if (isSelected) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#1890ff',
+            color: 'white',
+            fontWeight: 600,
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+
+      if (holidayName) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#fff1f0',
+            color: '#cf1322',
+            fontWeight: 600,
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+      
+      if (isToday) {
+        return (
+          <div className="ant-picker-cell-inner" style={{
+            background: '#e6f7ff',
+            color: '#1890ff',
+            fontWeight: 600,
+            border: '1px solid #1890ff',
+          }}>
+            {current.date()}
+          </div>
+        );
+      }
+      
+      return (
+        <div className="ant-picker-cell-inner">
+          {current.date()}
+        </div>
+      );
+    };
+  }, [selectedDate, today, getHoliday]);
+
+  return (
+    <>
+      <CalendarContainer onClick={(e) => e.stopPropagation()}>
+        <Calendar
+          fullscreen={false}
+          value={month1}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month1)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+        <Calendar
+          fullscreen={false}
+          value={month2}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month2)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+        <Calendar
+          fullscreen={false}
+          value={month3}
+          onSelect={handleDateSelect}
+          fullCellRender={createCellRender(month3)}
+          headerRender={({ value: currentValue }) => (
+            <div style={{ 
+              padding: '8px 12px', 
+              fontWeight: 500, 
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between'
+            }}>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.subtract(1, 'month'))}
+              >
+                ‹
+              </span>
+              <span>{currentValue.format('MMMM YYYY')}</span>
+              <span 
+                style={{ cursor: 'pointer', padding: '0 4px' }}
+                onClick={() => setBaseMonth(baseMonth.add(1, 'month'))}
+              >
+                ›
+              </span>
+            </div>
+          )}
+        />
+      </CalendarContainer>
+
+      {visibleHolidays.length > 0 && (
+        <div style={{ marginBottom: '12px', fontSize: '11px', color: '#666' }}>
+          {visibleHolidays.map((holiday, index) => {
+            const isSelectedHoliday = selectedDate && holiday.date === selectedDate.format('DD.MM.YYYY');
+            return (
+              <div 
+                key={index} 
+                style={{ 
+                  marginBottom: '2px',
+                  background: isSelectedHoliday ? '#e6f7ff' : 'transparent',
+                  padding: isSelectedHoliday ? '2px 4px' : '0',
+                  borderRadius: '2px',
+                  fontWeight: isSelectedHoliday ? 600 : 'normal',
+                }}
+              >
+                <span style={{ color: '#cf1322', fontWeight: 500 }}>{holiday.date}</span> - {holiday.name}
+              </div>
+            );
+          })}
+        </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'], // Kritické props
+  ['onChange', 'onSubmit', 'onCancel'], // Ignorované callbacky
+  false,
+  'BulkEditDatePicker'
+);
+
+export default React.memo(BulkEditDatePicker, arePropsEqual);