ywana-core8 0.1.79 → 0.1.81

package/src/html/textfield.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState, useMemo } from 'react'
 import { SiteContext } from '../site/siteContext'
 import { Icon } from './icon'
 import { TEXTFORMATS, Text } from './text'
@@ -59,7 +59,25 @@ export const TextField = (props) => {
     const labelStyle = label ? "" : "no-label"
     const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
     const style = `${labelStyle} ${labelPositionStyle} ${borderStyle} textfield-${type}`
-    const labelTxt = <Text>{label}</Text>
+
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
+
     const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
     return (
@@ -110,10 +128,26 @@ export const TextArea = (props) => {
         if (onChange) onChange(id, "")
     }
 
-    const borderStyle = outlined ? "textarea-outlined" : "textarea"
     const labelStyle = label ? "" : "no-label"
     const style = `textarea ${labelStyle} textarea-${type}`
-    const labelTxt = <Text>{label}</Text>
+
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
@@ -222,7 +256,7 @@ export const DropDown = (props) => {
  */
 export const DateRange = (props) => {
 
-    const { id, label, value, onChange } = props
+    const { id, label, onChange } = props
     const [form, setForm] = useState({})
 
     useEffect(() => {
@@ -237,7 +271,23 @@ export const DateRange = (props) => {
         setForm(next)
     }
 
-    const labelTxt = label ?  <Text>{label}</Text> : null
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     return (
         <div className="date-range">
@@ -257,7 +307,23 @@ export const PasswordField = (props) => {
         setShow(!show)
     }
 
-    const labelTxt = label ?  <Text>{label}</Text> : null
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     return (
         <div className="password-field">

package/src/html/textfield2.example.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
+import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from '
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./textfield2'
 
 /**
  * Ejemplos de uso de los componentes TextField2 mejorados
@@ -87,9 +88,111 @@ export const TextField2Examples = () => {
         { value: 'urgent', label: 'Urgent', icon: 'warning' }
     ]
 
+    // Definir secciones para el menú lateral
+
+
+    const sections = 
+
+    [
+
+
+            {
+
+
+                    "id": "overview",
+
+
+                    "title": "Introducción",
+
+
+                    "icon": "info"
+
+
+            },
+
+
+            {
+
+
+                    "id": "basic-examples",
+
+
+                    "title": "Ejemplos Básicos",
+
+
+                    "icon": "widgets"
+
+
+            },
+
+
+            {
+
+
+                    "id": "advanced-features",
+
+
+                    "title": "Características Avanzadas",
+
+
+                    "icon": "settings"
+
+
+            },
+
+
+            {
+
+
+                    "id": "variants",
+
+
+                    "title": "Variantes y Temas",
+
+
+                    "icon": "palette"
+
+
+            },
+
+
+            {
+
+
+                    "id": "states",
+
+
+                    "title": "Estados",
+
+
+                    "icon": "toggle_on"
+
+
+            },
+
+
+            {
+
+
+                    "id": "sizes",
+
+
+                    "title": "Tamaños",
+
+
+                    "icon": "format_size"
+
+
+            }
+
+
+    ]
+
+
+
     return (
-        <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
-            <h1>Ejemplos de Componentes TextField2 Mejorados</h1>
+        <ExampleLayout title="Textfield2 Examples" sections={sections}>
+            <ExampleSection id="overview" title="Ejemplos de Componentes TextField2 Mejorados" icon="widgets">
             
             <div style={{ 
                 background: '#f8f9fa', 
@@ -1363,7 +1466,8 @@ export const TextField2Examples = () => {
                     </div>
                 </div>
             </section>
-        </div>
+                    </ExampleSection>
+        </ExampleLayout>
     )
 }