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

package/components/Category.jsx

@@ -0,0 +1,167 @@
+/* eslint-disable */
+import React, { useState, useEffect } from 'react';
+import { 
+  Link, 
+  Icon, 
+  Popup, 
+  Navbar,
+  NavLeft, 
+  NavTitle, 
+  NavTitleLarge,
+  NavRight, 
+  Page, 
+  Block, 
+  List, 
+  ListInput, 
+  Button 
+} from 'framework7-react';
+import { Tag } from 'lucide-react';
+import CircleButton from '@bit.rhplus/ui.circle-button';
+
+// Category komponenta s modální editací - zobrazuje výběr jedné kategorie jako avatar
+export const Category = ({ 
+  children, 
+  value, 
+  onSave, 
+  onChange, // Přidáno pro Form.Item kompatibilitu
+  title = 'Vyber', 
+  placeholder = 'Vyber kategorii',
+  color = '#6887d3', 
+  size = 16,
+  lucideIcon, // Lucide React ikona (např. Tag)
+  icon, // Jakákoliv React komponenta ikony
+  categories = [] // Array kategorií ve formátu [{ id, name, icon, color }]
+}) => {
+  const [popupOpened, setPopupOpened] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState(value || null);
+  
+  // Aktualizuj selectedCategory když se změní value prop (pro Form.Item kompatibilitu)
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedCategory(value || null);
+    }
+  }, [value]);
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const handleCancel = () => {
+    setSelectedCategory(value || null);
+    setPopupOpened(false);
+  };
+
+  const selectCategory = (category) => {
+    // Automaticky ulož a zavři popup
+    setSelectedCategory(category);
+    
+    // Preferuj onChange pro Form.Item kompatibilitu, jinak použij onSave
+    if (onChange) {
+      onChange(category);
+    } else if (onSave) {
+      onSave(category);
+    }
+    
+    setPopupOpened(false);
+  };
+
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Tag
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <Tag size={size} color={color} />;
+  };
+
+  // Zobrazí název vybrané kategorie nebo placeholder
+  const renderDisplayText = () => {
+    if (selectedCategory && selectedCategory.name) {
+      return selectedCategory.name;
+    }
+    return placeholder;
+  };
+
+  return (
+    <>
+      <Link onClick={() => setPopupOpened(true)} className="link" style={linkStyle}>
+        {renderIcon()}
+        {renderDisplayText()}
+      </Link>
+
+      <Popup 
+        opened={popupOpened} 
+        onPopupClosed={() => setPopupOpened(false)}
+        animate
+        backdrop
+        push={false}
+        className="f7-parallax category-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>{title}</NavTitle>
+              <NavTitleLarge>{title}</NavTitleLarge>
+            </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) => {
+                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 || '#6887d3')}
+                      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>
+            </div>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+};

package/components/Contact.jsx

@@ -0,0 +1,105 @@
+/* eslint-disable */
+import React from 'react';
+import { ListInput } from 'framework7-react';
+import { UserCheck } from 'lucide-react';
+import { Custom } from './Custom';
+
+// Renderer pro Contact formulář
+const ContactRenderer = ({ fields, formData, onChange }) => {
+  const handleInputChange = (fieldKey, event) => {
+    const newValue = event.target.value;
+    onChange(fieldKey, newValue);
+  };
+
+  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'
+          })}
+        />
+      ))}
+    </>
+  );
+};
+
+// Externí PM komponenta s předdefinovanými poli
+export const Contact = ({ 
+  value, 
+  onSave, 
+  onChange,
+  title = 'Kontakt',
+  placeholder = 'Zadej kontakt',
+  color = '#6887d3',
+  size = 16,
+  ...restProps 
+}) => {
+  // Předdefinovaná pole pro Externí PM
+  const pmFields = [
+    { 
+      key: 'firstName', 
+      label: 'Jméno', 
+      type: 'text', 
+      placeholder: 'Zadejte jméno' 
+    },
+    { 
+      key: 'lastName', 
+      label: 'Příjmení', 
+      type: 'text', 
+      placeholder: 'Zadejte příjmení' 
+    },
+    { 
+      key: 'email', 
+      label: 'Email', 
+      type: 'email', 
+      placeholder: 'Zadejte email' 
+    },
+    { 
+      key: 'phone', 
+      label: 'Telefon', 
+      type: 'tel', 
+      placeholder: 'Zadejte telefon' 
+    },
+    { 
+      key: 'position', 
+      label: 'Pozice', 
+      type: 'text', 
+      placeholder: 'Zadejte pozici' 
+    }
+  ];
+
+  // Pole pro zobrazení v linku - jméno, příjmení a pozice
+  const displayFields = ['firstName', 'lastName', 'position'];
+
+  return (
+    <Custom
+      value={value}
+      onSave={onSave}
+      onChange={onChange}
+      title={title}
+      placeholder={placeholder}
+      color={color}
+      size={size}
+      lucideIcon={UserCheck}
+      FormRenderer={ContactRenderer}
+      fields={pmFields}
+      displayFields={displayFields}
+      {...restProps}
+    />
+  );
+};

package/components/Custom.jsx

@@ -1,6 +1,211 @@
 /* eslint-disable */
-import React from 'react';
-// Custom wrapper pro vlastní obsah
-export const Custom = ({ children }) => {
-  return <>{children}</>;
+import React, { useState, useEffect } from 'react';
+import { 
+  Link, 
+  Icon, 
+  Popup, 
+  Navbar,
+  NavLeft, 
+  NavTitle, 
+  NavTitleLarge,
+  Page, 
+  Block, 
+  List, 
+  ListInput 
+} from 'framework7-react';
+import { User } from 'lucide-react';
+import SaveButton from '@bit.rhplus/ui.f7.save-button';
+
+// External Contact komponenta - formulář pro zadání externího kontaktu
+export const Custom = ({ 
+  value, 
+  onSave, 
+  onChange,
+  title = 'Externí kontakt', 
+  placeholder = 'Zadejte kontakt',
+  color = '#6887d3', 
+  size = 16,
+  lucideIcon,
+  icon,
+  FormRenderer, // Custom komponenta pro renderování formuláře
+  fields = [ // Výchozí definice polí
+    { key: 'firstName', label: 'Jméno', type: 'text', placeholder: 'Zadejte jméno' },
+    { key: 'lastName', label: 'Příjmení', type: 'text', placeholder: 'Zadejte příjmení' },
+    { key: 'phone', label: 'Telefon', type: 'tel', placeholder: 'Zadejte telefon' },
+    { key: 'email', label: 'Email', type: 'email', placeholder: 'Zadejte email' },
+    { key: 'position', label: 'Pozice', type: 'text', placeholder: 'Zadejte pozici' }
+  ],
+  displayFields = ['firstName', 'lastName', 'position'], // Pole pro zobrazení v linku
+  ...restProps 
+}) => {
+  const [popupOpened, setPopupOpened] = useState(false);
+  
+  // Dynamicky inicializuj formData na základě fields
+  const getInitialFormData = () => {
+    const initialData = {};
+    fields.forEach(field => {
+      initialData[field.key] = '';
+    });
+    return initialData;
+  };
+
+  const [formData, setFormData] = useState(getInitialFormData());
+
+  // Aktualizuj formData když se změní value prop nebo fields (ale ne když je popup otevřený)
+  useEffect(() => {
+    if (popupOpened) return; // Neaktualizuj formData když je popup otevřený
+    
+    const newFormData = {};
+    fields.forEach(field => {
+      newFormData[field.key] = '';
+    });
+    
+    if (value && typeof value === 'object') {
+      fields.forEach(field => {
+        newFormData[field.key] = value[field.key] || '';
+      });
+    }
+    
+    setFormData(newFormData);
+  }, [value, fields, popupOpened]);
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const handleSave = () => {
+    const result = { ...formData };
+
+    if (onChange) {
+      onChange(result);
+    } else if (onSave) {
+      onSave(result);
+    }
+    setPopupOpened(false);
+  };
+
+  const handleCancel = () => {
+    const newFormData = {};
+    fields.forEach(field => {
+      newFormData[field.key] = '';
+    });
+    
+    if (value && typeof value === 'object') {
+      fields.forEach(field => {
+        newFormData[field.key] = value[field.key] || '';
+      });
+    }
+    
+    setFormData(newFormData);
+    setPopupOpened(false);
+  };
+
+  const handleInputChange = (field, newValue) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: newValue
+    }));
+  };
+
+  const handleOpenPopup = () => {
+    // Před otevřením popupu nastav aktuální hodnoty do formData
+    const newFormData = {};
+    fields.forEach(field => {
+      newFormData[field.key] = '';
+    });
+    
+    if (value && typeof value === 'object') {
+      fields.forEach(field => {
+        newFormData[field.key] = value[field.key] || '';
+      });
+    }
+    
+    setFormData(newFormData);
+    setPopupOpened(true);
+  };
+
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí User
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <User size={size} color={color} />;
+  };
+
+  // Zobrazí text v linku podle vyplněných dat
+  const getDisplayText = () => {
+    if (value && typeof value === 'object') {
+      const displayValues = displayFields
+        .map(fieldKey => value[fieldKey])
+        .filter(Boolean);
+      
+      if (displayValues.length > 0) {
+        return displayValues.join(' - ');
+      }
+    }
+    return placeholder;
+  };
+
+  return (
+    <div {...restProps}>
+      <Link onClick={handleOpenPopup} className="link" style={linkStyle}>
+        {renderIcon()}
+        {getDisplayText()}
+      </Link>
+
+      <Popup 
+        opened={popupOpened} 
+        onPopupClosed={() => setPopupOpened(false)}
+        animate
+        backdrop
+        className="f7-parallax"
+      >
+        <Page>
+          <Navbar large>
+            <NavLeft>
+              <Link onClick={handleCancel}>
+                <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
+              </Link>
+            </NavLeft>
+            <NavTitle>{title}</NavTitle>
+            <NavTitleLarge>{title}</NavTitleLarge>
+          </Navbar>
+          
+          <Block style={{ marginTop: '20px' }}>
+            <List>
+              {FormRenderer ? (
+                <FormRenderer
+                  fields={fields}
+                  formData={formData}
+                  onChange={handleInputChange}
+                />
+              ) : (
+                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.target.value)}
+                    clearButton
+                    style={{ fontSize: '18px' }}
+                  />
+                ))
+              )}
+            </List>
+          </Block>
+          <SaveButton onClick={handleSave} variant="black" />        
+        </Page>
+      </Popup>
+    </div>
+  );
 };

package/components/Download.jsx

@@ -1,9 +1,22 @@
 /* eslint-disable */
 import React, { useState } from 'react';
 import { Link, Icon, Preloader } from 'framework7-react';
+import { Download as DownloadIcon } from 'lucide-react';
 
 // Download komponenta s loading stavem
-export const Download = ({ children, href, onClick, color = '#6887d3', size = 16 }) => {
+export const Download = ({ 
+  children, 
+  href, 
+  onClick, 
+  color = '#6887d3', 
+  size = 16, 
+  value,
+  lucideIcon, // Lucide React ikona
+  icon, // Jakákoliv React komponenta ikony
+  ...restProps 
+}) => {
+  // Pro Form.Item kompatibilitu - zobraz value pokud je poskytnut, jinak children
+  const displayText = value !== undefined ? value : children;
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async (e) => {
@@ -24,28 +37,40 @@ export const Download = ({ children, href, onClick, color = '#6887d3', size = 16
     alignItems: 'center',
     gap: '6px'
   };
+
+  // Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí DownloadIcon
+  const renderIcon = () => {
+    if (icon) {
+      return React.cloneElement(icon, { size, color, ...icon.props });
+    }
+    if (lucideIcon) {
+      const LucideIcon = lucideIcon;
+      return <LucideIcon size={size} color={color} />;
+    }
+    return <DownloadIcon size={size} color={color} />;
+  };
   
   if (href) {
     return (
-      <Link href={href} className="link" style={linkStyle}>
+      <Link href={href} className="link" style={linkStyle} {...restProps}>
         {isLoading ? (
           <Preloader size={size} />
         ) : (
-          <Icon f7="arrow_down_circle" size={size} />
+          renderIcon()
         )}
-        {children}
+        {displayText}
       </Link>
     );
   }
   
   return (
-    <Link onClick={handleClick} className="link" style={linkStyle}>
+    <Link onClick={handleClick} className="link" style={linkStyle} {...restProps}>
       {isLoading ? (
         <Preloader size={size} />
       ) : (
-        <Icon f7="arrow_down_circle" size={size} />
+        renderIcon()
       )}
-      {children}
+      {displayText}
     </Link>
   );
 };