@bit.rhplus/ui.f7.detail-item 0.0.2 → 0.0.3

package/components/Grid.jsx

@@ -0,0 +1,230 @@
+/* eslint-disable */
+import React, { useState, useEffect, useMemo } from 'react';
+import { 
+  Link, 
+  Icon, 
+  Popup, 
+  Navbar,
+  NavLeft, 
+  NavTitle, 
+  NavTitleLarge,
+  NavRight, 
+  Page, 
+  Block, 
+  List, 
+  ListInput, 
+  Button
+} from 'framework7-react';
+import { Table } from 'lucide-react';
+import AgGrid from '@bit.rhplus/ui.grid';
+import SaveButton from '@bit.rhplus/ui.f7.save-button';
+
+// Grid komponenta s modální editací - zobrazuje AG Grid pro výběr položky
+export const Grid = ({ 
+  children, 
+  value, 
+  onSave, 
+  onChange, // Přidáno pro Form.Item kompatibilitu
+  title = 'Editace výběru', 
+  placeholder = 'Vyberte položku',
+  color = '#6887d3', 
+  size = 16,
+  lucideIcon, // Lucide React ikona (např. Table)
+  icon, // Jakákoliv React komponenta ikony
+  rowData = [], // Array dat pro grid
+  columnDefs = [], // Definice sloupců pro AG Grid
+  gridOptions = {}, // Dodatečné možnosti pro AG Grid
+  onRowDoubleClicked, // Callback pro double click na řádek
+  gridHeight = '400px', // Výška gridu
+  selectionMode = 'single', // 'single' nebo 'multiple'
+  displayField = 'name' // Pole, které se zobrazí v detail-item při výběru
+}) => {
+  const [popupOpened, setPopupOpened] = useState(false);
+  // Inicializuj selectedRows pouze jednou při mount
+  const initialSelectedRows = useMemo(() => {
+    return value ? (Array.isArray(value) ? value : [value]) : [];
+  }, []); // Prázdné dependency array - pouze při mount
+
+  const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const handleCancel = () => {
+    // Při zrušení resetuj na původní hodnoty
+    const originalValue = value ? (Array.isArray(value) ? value : [value]) : [];
+    setSelectedRows(originalValue);
+    setPopupOpened(false);
+  };
+
+  const handleOpenPopup = () => {
+    // Při otevření nastav aktuální hodnotu
+    const currentValue = value ? (Array.isArray(value) ? value : [value]) : [];
+    setSelectedRows(currentValue);
+    setPopupOpened(true);
+  };
+
+  const handleRowSelection = (event) => {
+    console.log('Grid selection changed - event:', event);
+    
+    if (event && event.api) {
+      const selectedNodes = event.api.getSelectedNodes();
+      const selectedData = selectedNodes.map(node => node.data);
+      
+      console.log('Grid selection changed:', { 
+        selectedNodes: selectedNodes.length, 
+        selectedData,
+        previousSelectedRows: selectedRows 
+      });
+      
+      // Pro oba režimy pouze aktualizujeme stav - uložení bude přes Save button
+      setSelectedRows(selectedData);
+    } else {
+      console.log('Grid API not available in event');
+    }
+  };
+
+  const handleSaveSelection = () => {
+    // Uložení vybraných položek pro oba režimy
+    let result;
+    
+    if (selectionMode === 'single') {
+      result = selectedRows.length > 0 ? selectedRows[0] : null;
+    } else {
+      result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
+    }
+    
+    // Debug pouze při uložení
+    console.log('Saving Grid selection:', { selectedRows, result, selectionMode, hasOnChange: !!onChange, hasOnSave: !!onSave });
+    
+    if (onChange) {
+      onChange(result);
+      console.log('Grid - onChange called with:', result);
+    } else if (onSave) {
+      onSave(result);
+      console.log('Grid - onSave called with:', result);
+    }
+    
+    setPopupOpened(false);
+  };
+
+
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Table
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <Table size={size} color={color} />;
+  };
+
+
+  // Kombinované grid options
+  const combinedGridOptions = {
+    rowSelection: selectionMode,
+    onSelectionChanged: handleRowSelection,
+    onRowDoubleClicked: onRowDoubleClicked,
+    suppressRowClickSelection: false, // Umožní výběr kliknutím na řádek pro oba režimy
+    ...gridOptions
+  };
+
+  return (
+    <>
+      <Link onClick={handleOpenPopup} className="link" style={linkStyle}>
+        {renderIcon()}
+        {(() => {
+          // Použij value prop pro zobrazení (value obsahuje uloženou hodnotu)
+          const currentValue = value ? (Array.isArray(value) ? value : [value]) : [];
+          
+          if (currentValue.length === 1) {
+            // Pokud je vybraná jedna položka, zobraz hodnotu z displayField
+            const item = currentValue[0];
+            return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
+          } else if (currentValue.length > 1) {
+            return `${currentValue.length} vybraných položek`;
+          }
+          return placeholder;
+        })()}
+      </Link>
+
+      <Popup 
+        opened={popupOpened} 
+        onPopupClosed={() => setPopupOpened(false)}
+        animate
+        backdrop
+        push={false}
+        className="f7-parallax grid-popup"
+        style={{
+          '--f7-popup-tablet-width': '90vw',
+          '--f7-popup-tablet-height': '90vh'
+        }}
+      >
+        <div className="view view-init">
+          <div className="page page-with-navbar-large">
+            <Navbar large className="navbar-transparent">
+              <NavLeft>
+                <Link onClick={handleCancel}>
+                  <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
+                </Link>
+              </NavLeft>
+              <NavTitle>Výběr</NavTitle>
+              <NavTitleLarge>Vyberte položky</NavTitleLarge>
+            </Navbar>
+            
+            <div className="page-content">
+              {/* AG Grid */}
+              <Block style={{ 
+                flex: 1, 
+                display: 'flex', 
+                flexDirection: 'column',
+                height: 'calc(100vh - 230px)', // Více prostoru pro SaveButton
+                padding: '0'
+              }}>
+            <div 
+              className="ag-theme-quartz" 
+              style={{ 
+                height: '100%',
+                width: '100%',
+                flex: 1,
+                '--ag-background-color': 'transparent',
+                '--ag-odd-row-background-color': 'transparent'
+              }}
+            >
+              <AgGrid
+                columnDefs={columnDefs}
+                rowData={rowData}
+                gridOptions={{
+                  ...combinedGridOptions,
+                  popupParent: document.body, // Popup menu se zobrazí v body, ne v popup
+                  rowHeight: 48, // Explicitní výška řádku
+                  headerHeight: 56 // Explicitní výška hlavičky
+                }}
+                height="100%"
+                // appearance="ag-theme-quartz"
+                defaultColDef={{
+                  sortable: true,
+                  filter: true,
+                  resizable: true,
+                  minWidth: 100, // Minimální šířka sloupců pro mobil
+                  ...gridOptions.defaultColDef
+                }}
+              />
+            </div>
+              </Block>
+
+              <SaveButton onClick={handleSaveSelection} variant="black" />
+            </div>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+};

package/components/InputNumber.jsx

@@ -15,6 +15,7 @@ import {
   ListInput, 
   Button 
 } from 'framework7-react';
+import { Hash } from 'lucide-react';
 import SaveButton from '@bit.rhplus/ui.f7.save-button';
 
 // InputNumber komponenta s modální editací číselných hodnot kompatibilní s Ant Design Form
@@ -29,7 +30,9 @@ export const InputNumber = ({
   size = 16,
   min,
   max,
-  step = 1
+  step = 1,
+  lucideIcon, // Lucide React ikona
+  icon // Jakákoliv React komponenta ikony
 }) => {
   const [popupOpened, setPopupOpened] = useState(false);
   const [inputValue, setInputValue] = useState(value || children || '');
@@ -83,10 +86,22 @@ export const InputNumber = ({
     }
   };
 
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Hash
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <Hash size={size} color={color} />;
+  };
+
   return (
     <>
       <Link onClick={() => setPopupOpened(true)} className="link" style={linkStyle}>
-        <Icon f7="pencil" size={size} />
+        {renderIcon()}
         {(value !== null && value !== undefined && value !== '') ? (value || children) : placeholder}
       </Link>
 

package/components/InputText.jsx

@@ -15,6 +15,7 @@ import {
   ListInput, 
   Button 
 } from 'framework7-react';
+import { Pencil } from 'lucide-react';
 import SaveButton from '@bit.rhplus/ui.f7.save-button';
 
 // Input komponenta s modální editací kompatibilní s Ant Design Form
@@ -26,7 +27,9 @@ export const InputText = ({
   title = 'Editace', 
   placeholder = 'Zadejte hodnotu',
   color = '#6887d3', 
-  size = 16 
+  size = 16,
+  lucideIcon, // Lucide React ikona (např. Pencil, Edit3)
+  icon // Jakákoliv React komponenta ikony
 }) => {
   const [popupOpened, setPopupOpened] = useState(false);
   const [inputValue, setInputValue] = useState(value || children || '');
@@ -61,10 +64,22 @@ export const InputText = ({
     setPopupOpened(false);
   };
 
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Pencil
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <Pencil size={size} color={color} />;
+  };
+
   return (
     <>
       <Link onClick={() => setPopupOpened(true)} className="link" style={linkStyle}>
-        <Icon f7="pencil" size={size} />
+        {renderIcon()}
         {(value !== null && value !== undefined && value !== '') ? (value || children) : placeholder}
       </Link>
 

package/components/List.jsx

@@ -0,0 +1,305 @@
+/* eslint-disable */
+import React, { useState, useEffect, useMemo } from 'react';
+import { 
+  Link, 
+  Icon, 
+  Popup, 
+  Navbar,
+  NavLeft, 
+  NavTitle, 
+  NavTitleLarge,
+  NavRight, 
+  Page, 
+  Block, 
+  List as F7List, 
+  ListItem, 
+  Card,
+  Button
+} from 'framework7-react';
+import { List as ListIcon } from 'lucide-react';
+import SaveButton from '@bit.rhplus/ui.f7.save-button';
+
+// List komponenta s modální editací - zobrazuje seznam jako ListItem komponenty
+export const List = ({ 
+  children, 
+  value, 
+  onSave, 
+  onChange, // Přidáno pro Form.Item kompatibilitu
+  title = 'Editace výběru', 
+  placeholder = 'Vyberte položku',
+  color = '#6887d3', 
+  size = 16,
+  lucideIcon, // Lucide React ikona (např. List)
+  icon, // Jakákoliv React komponenta ikony
+  options = [], // Array možností pro výběr
+  selectionMode = 'single', // 'single' nebo 'multiple'
+  displayField = 'name', // Pole, které se zobrazí v detail-item při výběru
+  titleField = 'name', // Pole pro nadpis v ListItem
+  subtitleField = 'description', // Pole pro popis v ListItem
+  iconField = 'icon', // Pole pro ikonu v ListItem
+  colorField = 'color', // Pole pro barvu v ListItem
+  ItemRenderer // Custom komponenta pro renderování jednotlivých položek
+}) => {
+  const [popupOpened, setPopupOpened] = useState(false);
+  // Inicializuj selectedItems pouze jednou při mount
+  const initialSelectedItems = useMemo(() => {
+    return value ? (Array.isArray(value) ? value : [value]) : [];
+  }, []); // Prázdné dependency array - pouze při mount
+
+  const [selectedItems, setSelectedItems] = useState(initialSelectedItems);
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const handleCancel = () => {
+    const originalValue = value ? (Array.isArray(value) ? value : [value]) : [];
+    setSelectedItems(originalValue);
+    setPopupOpened(false);
+  };
+
+  const handleOpenPopup = () => {
+    // Reset selected items při otevření
+    const currentValue = value ? (Array.isArray(value) ? value : [value]) : [];
+    setSelectedItems(currentValue);
+    setPopupOpened(true);
+  };
+
+  const isSelected = (item) => {
+    return selectedItems.some(selected => selected.id === item.id);
+  };
+
+  const handleItemClick = (item) => {
+    if (selectionMode === 'single') {
+      // Single selection - přímé uložení položky bez použití state
+      if (onChange) {
+        onChange(item);
+      } else if (onSave) {
+        onSave(item);
+      }
+      
+      // Zavři popup
+      setPopupOpened(false);
+      return;
+    } else {
+      // Multiple selection - toggle výběr
+      let newSelection;
+      if (isSelected(item)) {
+        newSelection = selectedItems.filter(selected => selected.id !== item.id);
+      } else {
+        newSelection = [...selectedItems, item];
+      }
+      
+      setSelectedItems(newSelection);
+    }
+  };
+
+  const handleSaveSelection = () => {
+    // Uložení vybraných položek pro oba režimy
+    let result;
+    
+    if (selectionMode === 'single') {
+      result = selectedItems.length > 0 ? selectedItems[0] : null;
+    } else {
+      result = selectedItems.length === 1 ? selectedItems[0] : selectedItems;
+    }
+    
+    if (onChange) {
+      onChange(result);
+    } else if (onSave) {
+      onSave(result);
+    }
+    
+    setPopupOpened(false);
+  };
+
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí List
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <ListIcon size={size} color={color} />;
+  };
+
+  // Renderování ikony pro ListItem
+  const renderItemIcon = (item) => {
+    const itemIcon = item[iconField];
+    const itemColor = item[colorField] || color;
+    
+    if (React.isValidElement(itemIcon)) {
+      return React.cloneElement(itemIcon, { size: 20, color: itemColor });
+    }
+    
+    return <Icon f7="circle_fill" color={itemColor} size="20" />;
+  };
+
+  return (
+    <>
+      <Link onClick={handleOpenPopup} className="link" style={linkStyle}>
+        {renderIcon()}
+        {(() => {
+          // Použij value prop pro zobrazení (ne selectedItems state)
+          const currentValue = value ? (Array.isArray(value) ? value : [value]) : [];
+          
+          if (currentValue.length === 1) {
+            // Pokud je vybraná jedna položka, zobraz hodnotu z displayField
+            const item = currentValue[0];
+            return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
+          } else if (currentValue.length > 1) {
+            return `${currentValue.length} vybraných položek`;
+          }
+          return placeholder;
+        })()}
+      </Link>
+
+      <Popup 
+        opened={popupOpened} 
+        onPopupClosed={() => setPopupOpened(false)}
+        animate
+        backdrop
+        push={false}
+        className="f7-parallax list-popup"
+        style={{
+          '--f7-popup-tablet-width': '90vw',
+          '--f7-popup-tablet-height': '90vh'
+        }}
+      >
+        <div className="view view-init">
+          <div className="page page-with-navbar-large">
+            <Navbar large className="navbar-transparent">
+              <NavLeft>
+                <Link onClick={handleCancel}>
+                  <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
+                </Link>
+              </NavLeft>
+              <NavTitle>Vyberte položku</NavTitle>
+              <NavTitleLarge>Vyberte položku</NavTitleLarge>
+            </Navbar>
+            
+            <div className="page-content">
+              <Block style={{ 
+                padding: '10px 0'
+              }}>            
+                <Card>
+              <F7List style={{ 
+                marginTop: '0',
+                marginBottom: '0'
+              }}>
+                {options.map((item, index) => {
+                  const selected = isSelected(item);
+                  
+                  // Pokud je předán custom ItemRenderer, použij ho
+                  if (ItemRenderer) {
+                    return (
+                      <ItemRenderer
+                        key={item.id || index}
+                        item={item}
+                        index={index}
+                        selected={selected}
+                        onItemClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleItemClick(item);
+                        }}
+                        titleField={titleField}
+                        subtitleField={subtitleField}
+                        iconField={iconField}
+                        colorField={colorField}
+                        color={color}
+                      />
+                    );
+                  }
+                  
+                  // Defaultní renderování
+                  const title = item[titleField] || item.name || item.title || `Položka ${index + 1}`;
+                  const subtitle = item[subtitleField] || item.description;
+                  
+                  return (
+                    <ListItem
+                      key={item.id || index}
+                      link="#"
+                      noChevron
+                      onClick={() => handleItemClick(item)}
+                      style={{
+                        '--f7-list-item-padding-horizontal': '15px',
+                        '--f7-list-item-padding-vertical': '12px',
+                        backgroundColor: selected ? '#f0f9ff' : 'transparent'
+                      }}
+                    >
+                      <div 
+                        slot="media"
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          marginRight: '12px'
+                        }}
+                      >
+                        {renderItemIcon(item)}
+                      </div>
+                      
+                      <div 
+                        slot="inner"
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          width: '100%',
+                          minHeight: '50px'
+                        }}
+                      >
+                        {/* Title row */}
+                        <div style={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                          marginBottom: subtitle ? '4px' : '0'
+                        }}>
+                          <span style={{ 
+                            fontWeight: selected ? 600 : 500, 
+                            fontSize: '16px',
+                            color: selected ? '#007aff' : '#000'
+                          }}>
+                            {title}
+                          </span>
+                          {selected && (
+                            <Icon 
+                              f7="checkmark_circle_fill" 
+                              color="#007aff" 
+                              size="20"
+                            />
+                          )}
+                        </div>
+
+                        {/* Subtitle */}
+                        {subtitle && (
+                          <div style={{
+                            fontSize: '14px',
+                            color: '#666',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap'
+                          }}>
+                            {subtitle}
+                          </div>
+                        )}
+                      </div>
+                    </ListItem>
+                  );
+                })}
+              </F7List>
+                </Card>
+              </Block>
+            </div>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+};