@bit.rhplus/ui.f7.detail-item 0.0.9 → 0.0.11

package/components/Category.jsx

@@ -17,6 +17,7 @@ import {
 } from 'framework7-react';
 import { Tag } from 'lucide-react';
 import CircleButton from '@bit.rhplus/ui.circle-button';
+import CategoryItems from '@bit.rhplus/ui.f7.category';
 
 // Category komponenta s modální editací - zobrazuje výběr jedné kategorie jako avatar
 export const Category = ({ 
@@ -135,7 +136,7 @@ export const Category = ({
       >
         <div className="view view-init">
           <div className="page page-with-navbar-large">
-            <Navbar large className="navbar-transparent">
+            <Navbar large>
               <NavLeft>
                 <Link onClick={handleCancel}>
                   <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
@@ -146,44 +147,7 @@ export const Category = ({
             </Navbar>
             
             <div className="page-content">
-              {/* Dostupné kategorie */}
-              <Block>
-            <div style={{ 
-              display: 'grid', 
-              gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
-              gap: '15px', 
-              marginTop: '15px',
-              padding: '10px 5px'
-            }}>
-              {categories.map((category, index) => {
-                const isSelected = selectedCategory && selectedCategory.id === category.id;
-                return (
-                  <div key={category.id} style={{ 
-                    display: 'flex', 
-                    justifyContent: 'center',
-                    minWidth: '80px'
-                  }}>
-                    <CircleButton
-                      icon={category.icon || 'tag'}
-                      name={category.name}
-                      bgColor={isSelected ? '#28a745' : (category.color ? (category.color.startsWith('#') ? category.color : `#${category.color}`) : undefined)}  
-                      colorIndex={index}
-                      iconColor="white"
-                      textColor="#333"
-                      onClick={() => selectCategory(category)}
-                      style={{ 
-                        opacity: isSelected ? 1 : 0.7,
-                        transform: isSelected ? 'scale(1.05)' : 'scale(1)',
-                        transition: 'all 0.2s ease',
-                        width: '100%',
-                        maxWidth: '100px'
-                      }}
-                    />
-                  </div>
-                );
-              })}
-            </div>
-              </Block>
+              <CategoryItems categories={categories} onCategorySelect={selectCategory} />
             </div>
           </div>
         </div>

package/components/Grid.jsx

@@ -174,7 +174,7 @@ export const Grid = ({
       >
         <div className="view view-init">
           <div className="page page-with-navbar-large">
-            <Navbar large className="navbar-transparent">
+            <Navbar large>
               <NavLeft>
                 <Link onClick={handleCancel}>
                   <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />

package/components/InputText.jsx

@@ -51,29 +51,18 @@ export const InputText = ({
   };
 
   const handleSave = () => {
-    console.log("🔥 InputText handleSave called!");
-    console.log("🔥 inputValue:", inputValue);
-    console.log("🔥 value prop:", value);
-    console.log("🔥 children prop:", children);
-    console.log("🔥 onChange exists:", !!onChange);
-    console.log("🔥 onSave exists:", !!onSave);
-
+    
     // Rozhodni jakou hodnotu vrátit podle field parametru (pro InputText nevyžíváme pole objektu)
     const returnValue = inputValue;
-    console.log("🔥 returnValue:", returnValue);
-
+    
     // Preferuj onChange pro Form.Item kompatibilitu, jinak použij onSave
     if (onChange) {
-      console.log("🔥 Calling onChange with:", returnValue);
       onChange(returnValue);
     } else if (onSave) {
-      console.log("🔥 Calling onSave with:", returnValue);
       onSave(returnValue);
     } else {
-      console.log("❌ No onChange or onSave handler available!");
     }
 
-    console.log("🔥 Closing popup");
     setPopupOpened(false);
   };
 
@@ -135,9 +124,6 @@ export const InputText = ({
           </Block>
           <SaveButton
             onClick={() => {
-              console.log("🔥 SaveButton onClick triggered!");
-              console.log("🔥 SaveButton - inputValue před handleSave:", inputValue);
-              console.log("🔥 SaveButton - onChange existuje:", !!onChange);
               handleSave();
             }}
             variant="black"

package/components/List.jsx

@@ -1,33 +1,34 @@
 /* eslint-disable */
-import React, { useState, useEffect, useMemo } from 'react';
-import { 
-  Link, 
-  Icon, 
-  Popup, 
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  Link,
+  Icon,
+  Popup,
   Navbar,
-  NavLeft, 
-  NavTitle, 
+  NavLeft,
+  NavTitle,
   NavTitleLarge,
-  NavRight, 
-  Page, 
-  Block, 
-  List as F7List, 
-  ListItem, 
+  NavRight,
+  Page,
+  Block,
+  List as F7List,
+  ListItem,
   Card,
-  Button
+  Button,
 } from 'framework7-react';
 import { List as ListIcon, Globe } from 'lucide-react';
 import SaveButton from '@bit.rhplus/ui.f7.save-button';
+import Filter from '@bit.rhplus/ui.f7.filter';
 
 // List komponenta s modální editací - zobrazuje seznam jako ListItem komponenty
-export const List = ({ 
-  children, 
-  value, 
-  onSave, 
+export const List = ({
+  children,
+  value,
+  onSave,
   onChange, // Přidáno pro Form.Item kompatibilitu
-  title = 'Editace výběru', 
+  title = 'Editace výběru',
   placeholder = 'Vyberte položku',
-  color = '#6887d3', 
+  color = '#6887d3',
   size = 16,
   lucideIcon, // Lucide React ikona (např. List)
   icon, // Jakákoliv React komponenta ikony
@@ -42,25 +43,45 @@ export const List = ({
   showCountryFlag = false, // Zda zobrazit vlajku země místo standardní ikony
   flagSize = 16, // Velikost vlajky
   ItemRenderer, // Custom komponenta pro renderování jednotlivých položek
-  field = null // Pole pro výběr konkrétní vlastnosti objektu
+  field = null, // Pole pro výběr konkrétní vlastnosti objektu
+  filterMultiSelect = false,
+  filterPopupContent,
+  onFilterTextClear,
+  onFilter, // Filtrovací funkce
+  filterFunction // Funkce pro aplikování filtrů
 }) => {
   const [popupOpened, setPopupOpened] = useState(false);
-  
+  const [activeFilters, setActiveFilters] = useState(null);
+
+  // Filtrovaná data na základě aktivních filtrů
+  const filteredOptions = useMemo(() => {
+    const baseOptions = Array.isArray(options) ? options : [];
+    
+    // Pokud existuje filterFunction, použij ji
+    if (filterFunction && activeFilters) {
+      return filterFunction(baseOptions, activeFilters.filters, activeFilters.searchText);
+    }
+    
+    return baseOptions;
+  }, [options, activeFilters, filterFunction]);
+
   // Najíst objekty na základě value (pokud je field nastaven, value může být jen pole konkrétních vlastností)
   const findItemsByValue = (val) => {
     if (!val || !options.length) return [];
-    
+
     const valueArray = Array.isArray(val) ? val : [val];
-    
+
     if (field) {
       // Pokud je field nastaven, hledej objekty podle této vlastnosti
-      return valueArray.map(v => options.find(opt => opt[field] === v)).filter(Boolean);
+      return valueArray
+        .map((v) => options.find((opt) => opt[field] === v))
+        .filter(Boolean);
     } else {
       // Pokud field není nastaven, očekáváme objekty
       return valueArray;
     }
   };
-  
+
   // Inicializuj selectedItems pouze jednou při mount
   const initialSelectedItems = useMemo(() => {
     return findItemsByValue(value);
@@ -68,12 +89,12 @@ export const List = ({
 
   const [selectedItems, setSelectedItems] = useState(initialSelectedItems);
 
-  const linkStyle = { 
-    color, 
+  const linkStyle = {
+    color,
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
-    gap: '6px'
+    gap: '6px',
   };
 
   const handleCancel = () => {
@@ -88,22 +109,22 @@ export const List = ({
   };
 
   const isSelected = (item) => {
-    return selectedItems.some(selected => selected.id === item.id);
+    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
-      
+
       // Rozhodni jakou hodnotu vrátit podle field parametru
       const returnValue = field && item ? item[field] : item;
-      
+
       if (onChange) {
         onChange(returnValue);
       } else if (onSave) {
         onSave(returnValue);
       }
-      
+
       // Zavři popup
       setPopupOpened(false);
       return;
@@ -111,11 +132,13 @@ export const List = ({
       // Multiple selection - toggle výběr
       let newSelection;
       if (isSelected(item)) {
-        newSelection = selectedItems.filter(selected => selected.id !== item.id);
+        newSelection = selectedItems.filter(
+          (selected) => selected.id !== item.id
+        );
       } else {
         newSelection = [...selectedItems, item];
       }
-      
+
       setSelectedItems(newSelection);
     }
   };
@@ -123,32 +146,58 @@ export const List = ({
   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;
     }
-    
+
     // Rozhodni jakou hodnotu vrátit podle field parametru
-    const returnValue = field && result ? (Array.isArray(result) ? result.map(item => item[field]) : result[field]) : result;
-    
+    const returnValue =
+      field && result
+        ? Array.isArray(result)
+          ? result.map((item) => item[field])
+          : result[field]
+        : result;
+
     if (onChange) {
       onChange(returnValue);
     } else if (onSave) {
       onSave(returnValue);
     }
-    
+
     setPopupOpened(false);
   };
 
+  // Handle filtrování - aplikuj filtry a informuj rodiče
+  const handleFilterApply = useCallback((searchText, filters) => {
+    setActiveFilters({ searchText, filters });
+    
+    // Spočítej počet filtrovaných položek pomocí filterFunction
+    let filteredOptions = options;
+    if (filterFunction) {
+      filteredOptions = filterFunction(options, filters, searchText);
+    }
+    
+    // Informuj rodiče o aplikovaných filtrech
+    if (onFilter) {
+      onFilter({
+        searchText: searchText,
+        filters: filters,
+        filteredCount: filteredOptions.length,
+        totalCount: options.length
+      });
+    }
+  }, [onFilter, options, filterFunction]);
+
   // Určí jakou ikonu použít - priorita: vlajka země > icon > lucideIcon > výchozí List
   const renderIcon = () => {
     // Pokud chceme zobrazit vlajku země a máme vybranou hodnotu
     if (showCountryFlag && value) {
       const currentValue = Array.isArray(value) ? value[0] : value;
       const country = currentValue?.[countryField];
-      
+
       if (country?.code) {
         return (
           <div
@@ -183,7 +232,7 @@ export const List = ({
         );
       }
     }
-    
+
     if (icon) {
       return React.cloneElement(icon, { size, color, ...icon.props });
     }
@@ -198,11 +247,11 @@ export const List = ({
   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" />;
   };
 
@@ -213,11 +262,17 @@ export const List = ({
         {(() => {
           // Použij objekty pro zobrazení (převedené z value)
           const currentItems = findItemsByValue(value);
-          
+
           if (currentItems.length === 1) {
             // Pokud je vybraná jedna položka, zobraz hodnotu z displayField
             const item = currentItems[0];
-            return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
+            return (
+              item[displayField] ||
+              item.name ||
+              item.title ||
+              item.id ||
+              'Vybraná položka'
+            );
           } else if (currentItems.length > 1) {
             return `${currentItems.length} vybraných položek`;
           }
@@ -225,8 +280,8 @@ export const List = ({
         })()}
       </Link>
 
-      <Popup 
-        opened={popupOpened} 
+      <Popup
+        opened={popupOpened}
         onPopupClosed={() => setPopupOpened(false)}
         animate
         backdrop
@@ -234,131 +289,156 @@ export const List = ({
         className="f7-parallax list-popup"
         style={{
           '--f7-popup-tablet-width': '90vw',
-          '--f7-popup-tablet-height': '90vh'
+          '--f7-popup-tablet-height': '90vh',
         }}
       >
         <div className="view view-init">
           <div className="page page-with-navbar-large">
-            <Navbar large className="navbar-transparent">
+            <Navbar large>
               <NavLeft>
                 <Link onClick={handleCancel}>
                   <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
                 </Link>
               </NavLeft>
               <NavTitle>{title}</NavTitle>
-              <NavTitleLarge>{title}</NavTitleLarge>
+              <NavTitleLarge>
+                <div>{title}</div>
+                <Filter
+                  data={options}
+                  onTextClear={onFilterTextClear}
+                  popupContent={filterPopupContent}
+                  multiSelect={filterMultiSelect}
+                  onFilterApply={handleFilterApply}
+                />
+              </NavTitleLarge>
             </Navbar>
-            
+
             <div className="page-content">
-              <Block style={{ 
-                padding: '10px 0'
-              }}>            
+              <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}
+                  <F7List
+                    style={{
+                      marginTop: '0',
+                      marginBottom: '0',
+                    }}
+                  >
+                    {filteredOptions.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>
-                        )}
-                      </div>
-                    </ListItem>
-                  );
-                })}
-              </F7List>
+                        </ListItem>
+                      );
+                    })}
+                  </F7List>
                 </Card>
               </Block>
             </div>
@@ -367,4 +447,4 @@ export const List = ({
       </Popup>
     </>
   );
-};
+};