@bit.rhplus/ui.f7.detail-item 0.0.15 → 0.0.17

package/components/Calendar.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable */
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { f7, Popup, Page, Navbar, NavLeft, NavTitle, NavTitleLarge, NavRight, Link, Block, Icon, Card } from 'framework7-react';
-import { Calendar as CalendarIcon } from 'lucide-react';
+import { f7, Popup, Popover, Page, Navbar, NavLeft, NavTitle, NavTitleLarge, NavRight, Link, Block, Icon, Card, List, ListInput, Picker, Button } from 'framework7-react';
+import { Calendar as CalendarIcon, X } from 'lucide-react';
+import SaveButton from '@bit.rhplus/ui.f7.save-button';
+import SmallButton from '@bit.rhplus/ui.f7.small-button';
 
 export const Calendar = ({ 
   value, 
@@ -16,6 +18,7 @@ export const Calendar = ({
   icon,
   iconSize = 16,
   field = null,
+  enableTime = false, // Nový prop pro povolení výběru času
   calendarParams = {},
   ...restProps 
 }) => {
@@ -24,7 +27,20 @@ export const Calendar = ({
   const isInitializingRef = useRef(false);
   const [displayValue, setDisplayValue] = useState('');
   const [popupOpened, setPopupOpened] = useState(false);
+  const [timePopoverOpened, setTimePopoverOpened] = useState(false);
+  const timePickerRef = useRef(null);
   const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : null);
+  const [selectedTime, setSelectedTime] = useState(() => {
+    if (value && enableTime) {
+      const d = new Date(value);
+      return {
+        hours: String(d.getHours()).padStart(2, '0'),
+        minutes: String(d.getMinutes()).padStart(2, '0'),
+        isSet: true
+      };
+    }
+    return { hours: null, minutes: null, isSet: false };
+  });
 
   // Převod hodnoty na display formát
   const formatDate = (date) => {
@@ -36,7 +52,16 @@ export const Calendar = ({
     const month = String(d.getMonth() + 1).padStart(2, '0');
     const year = d.getFullYear();
     
-    return `${day}.${month}.${year}`;
+    let dateStr = `${day}.${month}.${year}`;
+    
+    // Pokud je povolený čas a je nastaven, přidej ho k formátu
+    if (enableTime && selectedTime.isSet && selectedTime.hours !== null) {
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      dateStr += ` ${hours}:${minutes}`;
+    }
+    
+    return dateStr;
   };
 
   // Aktualizace display hodnoty při změně value
@@ -54,12 +79,21 @@ export const Calendar = ({
   // Cleanup kalendáře při zavírání popup
   useEffect(() => {
     if (!popupOpened && calendarRef.current) {
-      calendarRef.current.destroy();
-      calendarRef.current = null;
-      // Vyčisti i DOM kontejner
-      if (calendarContainerRef.current) {
-        calendarContainerRef.current.innerHTML = '';
-      }
+      // Bezpečný cleanup s timeout pro prevenci konfliktů
+      setTimeout(() => {
+        if (calendarRef.current) {
+          try {
+            calendarRef.current.destroy();
+          } catch (error) {
+            console.warn('Calendar cleanup error:', error);
+          }
+          calendarRef.current = null;
+        }
+        // Vyčisti i DOM kontejner
+        if (calendarContainerRef.current) {
+          calendarContainerRef.current.innerHTML = '';
+        }
+      }, 100);
     }
   }, [popupOpened]);
 
@@ -106,6 +140,10 @@ export const Calendar = ({
         dayNames,
         dayNamesShort: dayNames,
         firstDay: 1, // Pondělí jako první den
+        // Vypne timePicker - použijeme vlastní řešení
+        timePicker: false,
+        // Vypne automatické zavírání při enableTime
+        closeOnSelect: !enableTime,
         on: {
           change: (calendar, value) => {
             // Ignoruj změny během inicializace
@@ -116,14 +154,16 @@ export const Calendar = ({
             if (value && value.length > 0) {
               const newSelectedDate = value[0];
               setSelectedDate(newSelectedDate);
-              // Automaticky potvrď a zavři popup při výběru data
-              if (onChange) {
-                onChange(newSelectedDate);
+              // Pokud není povolen čas, automaticky potvrď a zavři popup
+              if (!enableTime) {
+                if (onChange) {
+                  onChange(newSelectedDate);
+                }
+                // Zavři popup s mírným zpožděním pro lepší UX
+                setTimeout(() => {
+                  setPopupOpened(false);
+                }, 200);
               }
-              // Zavři popup s mírným zpožděním pro lepší UX
-              setTimeout(() => {
-                setPopupOpened(false);
-              }, 200);
             }
           }
         },
@@ -141,25 +181,157 @@ export const Calendar = ({
     return () => {
       clearTimeout(timeoutId);
       if (calendarRef.current) {
-        calendarRef.current.destroy();
+        try {
+          calendarRef.current.destroy();
+        } catch (error) {
+          console.warn('Calendar cleanup error:', error);
+        }
         calendarRef.current = null;
       }
     };
   }, [popupOpened, selectedDate, calendarParams]);
 
+  // Otevření time picker
+  const openTimePicker = useCallback(() => {
+    if (!enableTime) return;
+    
+    // Bezpečný cleanup existujícího pickeru
+    if (timePickerRef.current) {
+      try {
+        timePickerRef.current.destroy();
+      } catch (error) {
+        console.warn('Time picker cleanup error:', error);
+      }
+      timePickerRef.current = null;
+    }
+
+    // Krátký timeout pro zajištění úplného cleanup
+    setTimeout(() => {
+      // Vytvoř hodnoty pro picker
+      const hours = Array.from({ length: 24 }, (_, i) => ({ 
+        value: String(i).padStart(2, '0'), 
+        displayValue: String(i).padStart(2, '0') 
+      }));
+      
+      const minutes = Array.from({ length: 60 }, (_, i) => ({ 
+        value: String(i).padStart(2, '0'), 
+        displayValue: String(i).padStart(2, '0') 
+      }));
+
+      timePickerRef.current = f7.picker.create({
+        inputEl: '.time-picker-button',
+        value: selectedTime.isSet ? [selectedTime.hours, selectedTime.minutes] : ['09', '00'],
+        cols: [
+          {
+            textAlign: 'center',
+            values: hours.map(h => h.value),
+            displayValues: hours.map(h => h.displayValue),
+          },
+          {
+            textAlign: 'center', 
+            values: minutes.map(m => m.value),
+            displayValues: minutes.map(m => m.displayValue),
+          }
+        ],
+        formatValue: (values) => `${values[0]}:${values[1]}`,
+        on: {
+          change: (picker, values) => {
+            setSelectedTime({
+              hours: values[0],
+              minutes: values[1],
+              isSet: true
+            });
+          },
+          close: () => {
+            // Cleanup při zavření
+            setTimeout(() => {
+              if (timePickerRef.current) {
+                try {
+                  timePickerRef.current.destroy();
+                } catch (error) {
+                  console.warn('Time picker close cleanup error:', error);
+                }
+                timePickerRef.current = null;
+              }
+            }, 100);
+          }
+        }
+      });
+
+      timePickerRef.current.open();
+    }, 50);
+  }, [enableTime, selectedTime]);
+
+  // Vynulování času
+  const clearTime = useCallback(() => {
+    setSelectedTime({ hours: null, minutes: null, isSet: false });
+  }, []);
+
+  // Cleanup time pickeru
+  useEffect(() => {
+    return () => {
+      if (timePickerRef.current) {
+        try {
+          timePickerRef.current.destroy();
+        } catch (error) {
+          console.warn('Time picker unmount cleanup error:', error);
+        }
+        timePickerRef.current = null;
+      }
+    };
+  }, []);
+
+  // Cleanup při zavírání hlavního popup
+  useEffect(() => {
+    if (!popupOpened && timePickerRef.current) {
+      try {
+        timePickerRef.current.destroy();
+      } catch (error) {
+        console.warn('Time picker popup cleanup error:', error);
+      }
+      timePickerRef.current = null;
+    }
+  }, [popupOpened]);
+
   // Potvrzení výběru data
   const confirmSelection = useCallback(() => {
     if (selectedDate && onChange) {
-      onChange(selectedDate);
+      let finalDate = new Date(selectedDate);
+      
+      // Pokud je povolen čas a je nastaven, aplikuj vybraný čas
+      if (enableTime && selectedTime.isSet && selectedTime.hours !== null) {
+        finalDate.setHours(parseInt(selectedTime.hours));
+        finalDate.setMinutes(parseInt(selectedTime.minutes));
+      } else if (enableTime && !selectedTime.isSet) {
+        // Pokud čas není nastaven, použij 00:00
+        finalDate.setHours(0);
+        finalDate.setMinutes(0);
+      }
+      
+      onChange(finalDate);
     }
     setPopupOpened(false);
-  }, [selectedDate, onChange]);
+  }, [selectedDate, selectedTime, enableTime, onChange]);
 
   // Zrušení výběru
   const cancelSelection = useCallback(() => {
     setSelectedDate(value ? new Date(value) : null);
-    setPopupOpened(false);
-  }, [value]);
+    // Obnovení původního stavu času
+    if (value && enableTime) {
+      const d = new Date(value);
+      setSelectedTime({
+        hours: String(d.getHours()).padStart(2, '0'),
+        minutes: String(d.getMinutes()).padStart(2, '0'),
+        isSet: true
+      });
+    } else {
+      setSelectedTime({ hours: null, minutes: null, isSet: false });
+    }
+    // Bezpečné zavření s delay
+    setTimeout(() => {
+      setPopupOpened(false);
+    }, 50);
+  }, [value, enableTime]);
 
   const containerStyle = {
     display: 'flex',
@@ -250,11 +422,75 @@ export const Calendar = ({
                     />
                   </Block>
                 </Card>
+                
+                {/* Pokud je povolen čas, zobraz tlačítko pro výběr času */}
+                {enableTime && (
+                  <Block
+                    style={{
+                      padding: '10px 0',
+                    }}
+                  >
+                    <Card>
+                      <Block style={{ padding: '20px' }}>
+                        <div style={{ 
+                          display: 'flex', 
+                          justifyContent: 'space-between',
+                          alignItems: 'center' 
+                        }}>
+                          <h3 style={{ margin: 0, fontSize: '18px', fontWeight: '600' }}>Čas</h3>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <SmallButton
+                              className="time-picker-button"
+                              onClick={openTimePicker}
+                              style={{ 
+                                width: 'auto',
+                                opacity: selectedTime.isSet ? 1 : 0.6,
+                                padding: '16px 22px',
+                              }}
+                            >
+                              {selectedTime.isSet ? `${selectedTime.hours}:${selectedTime.minutes}` : 'Vyberte čas'}
+                            </SmallButton>
+                            {selectedTime.isSet && (
+                              <button
+                                onClick={clearTime}
+                                style={{
+                                  background: 'transparent',
+                                  border: 'none',
+                                  padding: '4px',
+                                  cursor: 'pointer',
+                                  borderRadius: '4px',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  justifyContent: 'center',
+                                  opacity: 0.6,
+                                  transition: 'opacity 0.2s'
+                                }}
+                                onMouseOver={(e) => e.target.style.opacity = '1'}
+                                onMouseOut={(e) => e.target.style.opacity = '0.6'}
+                              >
+                                <X size={16} color="#666" />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      </Block>
+                    </Card>
+                  </Block>
+                )}
+                
+                {/* Tlačítko pro potvrzení */}
+                {enableTime && (
+                  <SaveButton
+                    onClick={confirmSelection}
+                    variant="black"
+                  />
+                )}
               </Block>
             </div>
           </div>
         </div>
       </Popup>
+
     </>
   );
 };

package/components/Contact.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import { ListInput } from 'framework7-react';
+import { ListInput, Block, List } from 'framework7-react';
 import { UserCheck } from 'lucide-react';
 import { Custom } from './Custom';
 
@@ -12,29 +12,36 @@ const ContactRenderer = ({ fields, formData, onChange }) => {
   };
 
   return (
-    <>
-      {fields.map((field, index) => (
-        <ListInput
-          key={field.key || index}
-          type={field.type || 'text'}
-          label={field.label}
-          placeholder={field.placeholder}
-          value={formData[field.key] || ''}
-          onInput={(e) => handleInputChange(field.key, e)}
-          clearButton
-          style={{ fontSize: '18px' }}
-          // Speciální styling pro různé typy polí
-          {...(field.type === 'email' && { 
-            inputMode: 'email',
-            autoComplete: 'email'
-          })}
-          {...(field.type === 'tel' && { 
-            inputMode: 'tel',
-            autoComplete: 'tel'
-          })}
-        />
-      ))}
-    </>
+    <Block inset>
+      <List>
+        {fields.map((field, index) => (
+          <ListInput
+            key={field.key || index}
+            type={field.type || 'text'}
+            label={field.label}
+            placeholder={field.placeholder}
+            value={formData[field.key] || ''}
+            onInput={(e) => handleInputChange(field.key, e)}
+            clearButton
+            style={{ fontSize: '18px' }}
+            // Speciální styling pro různé typy polí
+            {...(field.type === 'email' && { 
+              inputMode: 'email',
+              autoComplete: 'email'
+            })}
+            {...(field.type === 'tel' && { 
+              inputMode: 'tel',
+              autoComplete: 'tel'
+            })}
+            {...(field.type === 'textarea' && { 
+              type: 'textarea',
+              resizable: false,
+              inputStyle: { minHeight: '60px', resize: 'none' }
+            })}
+          />
+        ))}
+      </List>
+    </Block>
   );
 };
 
@@ -48,22 +55,17 @@ export const Contact = ({
   color = '#6887d3',
   size = 16,
   field = null, // Pole pro výběr konkrétní vlastnosti objektu
+  visibleFields = ['name', 'email', 'phone', 'position'], // Pole k zobrazení v popup
   ...restProps 
 }) => {
   // Předdefinovaná pole pro Externí PM
-  const pmFields = [
+  const allFields = [
     { 
-      key: 'firstName', 
+      key: 'fullName', 
       label: 'Jméno', 
       type: 'text', 
       placeholder: 'Zadejte jméno' 
     },
-    { 
-      key: 'lastName', 
-      label: 'Příjmení', 
-      type: 'text', 
-      placeholder: 'Zadejte příjmení' 
-    },
     { 
       key: 'email', 
       label: 'Email', 
@@ -81,11 +83,48 @@ export const Contact = ({
       label: 'Pozice', 
       type: 'text', 
       placeholder: 'Zadejte pozici' 
+    },
+    { 
+      key: 'note', 
+      label: 'Poznámka', 
+      type: 'textarea', 
+      placeholder: 'Zadejte poznámku' 
     }
   ];
 
-  // Pole pro zobrazení v linku - jméno, příjmení a pozice
-  const displayFields = ['firstName', 'lastName', 'position'];
+  // Filtrování polí podle visibleFields
+  const pmFields = allFields.filter(field => visibleFields.includes(field.key));
+
+  // Funkce pro generování zobrazovaného textu
+  const getContactDisplayText = (contactData) => {
+    if (!contactData || typeof contactData !== 'object') {
+      return placeholder;
+    }
+
+    // Priorita: fullName > firstName + lastName > email > phone > position
+    if (contactData.fullName) {
+      return contactData.fullName + (contactData.position ? ` - ${contactData.position}` : '');
+    }
+    
+    if (contactData.firstName || contactData.lastName) {
+      const name = [contactData.firstName, contactData.lastName].filter(Boolean).join(' ');
+      return name + (contactData.position ? ` - ${contactData.position}` : '');
+    }
+    
+    if (contactData.email) {
+      return contactData.email + (contactData.position ? ` - ${contactData.position}` : '');
+    }
+    
+    if (contactData.phone) {
+      return contactData.phone + (contactData.position ? ` - ${contactData.position}` : '');
+    }
+    
+    if (contactData.position) {
+      return contactData.position;
+    }
+
+    return placeholder;
+  };
 
   return (
     <Custom
@@ -99,7 +138,7 @@ export const Contact = ({
       lucideIcon={UserCheck}
       FormRenderer={ContactRenderer}
       fields={pmFields}
-      displayFields={displayFields}
+      getDisplayText={getContactDisplayText}
       field={field}
       {...restProps}
     />

package/components/Custom.jsx

@@ -36,6 +36,7 @@ export const Custom = ({
     { key: 'position', label: 'Pozice', type: 'text', placeholder: 'Zadejte pozici' }
   ],
   displayFields = ['firstName', 'lastName', 'position'], // Pole pro zobrazení v linku
+  getDisplayText = null, // Custom funkce pro generování zobrazovaného textu
   field = null, // Pole pro výběr konkrétní vlastnosti objektu
   ...restProps 
 }) => {
@@ -164,8 +165,15 @@ export const Custom = ({
   };
 
   // Zobrazí text v linku podle vyplněných dat
-  const getDisplayText = () => {
+  const getDisplayTextInternal = () => {
     const currentObject = findObjectByValue(value);
+    
+    // Pokud je poskytnut custom getDisplayText, použij ho
+    if (getDisplayText && typeof getDisplayText === 'function') {
+      return getDisplayText(currentObject);
+    }
+    
+    // Jinak použij defaultní logiku
     if (currentObject && typeof currentObject === 'object') {
       const displayValues = displayFields
         .map(fieldKey => currentObject[fieldKey])
@@ -182,7 +190,7 @@ export const Custom = ({
     <div {...restProps}>
       <Link onClick={handleOpenPopup} className="link" style={linkStyle}>
         {renderIcon()}
-        {getDisplayText()}
+        {getDisplayTextInternal()}
       </Link>
 
       <Popup 

package/components/InputText.jsx

@@ -108,17 +108,18 @@ export const InputText = ({
             <NavTitleLarge>{title}</NavTitleLarge>
           </Navbar>
           
-          <Block style={{ marginTop: '20px' }}>
+          <Block inset>
             <List>
               <ListInput
-                type="text"
-                label="Typ dokladu"
+                type="textarea"
                 placeholder={placeholder}
                 value={inputValue}
                 onInput={(e) => setInputValue(e.target.value)}
                 clearButton
                 autoFocus
+                resizable
                 style={{ fontSize: '18px' }}
+                inputStyle={{ minHeight: '24px' }}
               />
             </List>
           </Block>

package/components/List.jsx

@@ -82,12 +82,15 @@ export const List = ({
     }
   };
 
-  // Inicializuj selectedItems pouze jednou při mount
-  const initialSelectedItems = useMemo(() => {
-    return findItemsByValue(value);
-  }, []); // Prázdné dependency array - pouze při mount
+  // State pro vybrané položky - inicializace s prázdným polem
+  const [selectedItems, setSelectedItems] = useState([]);
 
-  const [selectedItems, setSelectedItems] = useState(initialSelectedItems);
+  // Synchronizace selectedItems s value prop
+  useEffect(() => {
+    const items = findItemsByValue(value);
+    console.log("🚀 ~ List ~ items:", items, value)
+    setSelectedItems(items);
+  }, [value, options, field]);
 
   const linkStyle = {
     color,
@@ -98,13 +101,16 @@ export const List = ({
   };
 
   const handleCancel = () => {
-    setSelectedItems(findItemsByValue(value));
+    // Reset selected items na aktuální value
+    const items = findItemsByValue(value);
+    setSelectedItems(items);
     setPopupOpened(false);
   };
 
   const handleOpenPopup = () => {
-    // Reset selected items při otevření
-    setSelectedItems(findItemsByValue(value));
+    // Reset selected items při otevření na aktuální value
+    const items = findItemsByValue(value);
+    setSelectedItems(items);
     setPopupOpened(true);
   };
 

package/dist/components/Calendar.d.ts

@@ -1,4 +1,4 @@
-export function Calendar({ value, title, onChange, placeholder, format, color, style, disabled, lucideIcon, icon, iconSize, field, calendarParams, ...restProps }: {
+export function Calendar({ value, title, onChange, placeholder, format, color, style, disabled, lucideIcon, icon, iconSize, field, enableTime, calendarParams, ...restProps }: {
     [x: string]: any;
     value: any;
     title: any;
@@ -12,6 +12,7 @@ export function Calendar({ value, title, onChange, placeholder, format, color, s
     icon: any;
     iconSize?: number | undefined;
     field?: null | undefined;
+    enableTime?: boolean | undefined;
     calendarParams?: {} | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 import React from 'react';