ywana-core8 0.1.75 → 0.1.76

package/src/html/property.js

@@ -1,40 +1,418 @@
-import React from 'react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
 import './property.css'
 
 /**
- * Property
+ * Enhanced Property component with improved functionality while maintaining 100% compatibility
  */
 export const Property = (props) => {
+    const {
+        // Original props (100% compatible)
+        id,
+        className,
+        label,
+        name,
+        initial,
+        value,
+        editable = false,
+        onChange,
+        options,
+        // New enhanced props (all optional for compatibility)
+        type = 'text',
+        disabled = false,
+        required = false,
+        placeholder,
+        multiline = false,
+        rows = 3,
+        maxLength,
+        minLength,
+        pattern,
+        validateValue,
+        size = 'medium',
+        variant = 'default',
+        layout = 'horizontal',
+        nameWidth = '50%',
+        copyable = false,
+        error,
+        helperText,
+        onFocus,
+        onBlur,
+        onValidationError,
+        clearable = true,
+        readOnly = false,
+        loading = false,
+        skeleton = false,
+        style,
+        ...restProps
+    } = props
 
-    const { id, className, label, name, initial, value, editable = false, onChange, options } = props
+    const [isFocused, setIsFocused] = useState(false)
+    const [isValid, setIsValid] = useState(true)
+    const [validationError, setValidationError] = useState('')
+    const inputRef = useRef(null)
+
+    // Validate props
+    useEffect(() => {
+        if (options && !Array.isArray(options)) {
+            console.warn('Property: options prop must be an array')
+        }
+    }, [options])
+
+    // Validate value
+    const validateValueFunc = useCallback((val) => {
+        if (!val && required) {
+            return { isValid: false, error: 'This field is required' }
+        }
+
+        if (val && minLength && val.length < minLength) {
+            return { isValid: false, error: `Minimum ${minLength} characters required` }
+        }
+
+        if (val && maxLength && val.length > maxLength) {
+            return { isValid: false, error: `Maximum ${maxLength} characters allowed` }
+        }
+
+        if (val && pattern) {
+            const regex = new RegExp(pattern)
+            if (!regex.test(val)) {
+                return { isValid: false, error: 'Invalid format' }
+            }
+        }
+
+        if (validateValue) {
+            const customValidation = validateValue(val)
+            if (customValidation && !customValidation.isValid) {
+                return customValidation
+            }
+        }
+
+        return { isValid: true }
+    }, [required, minLength, maxLength, pattern, validateValue])
+
+    // Enhanced change function (maintaining original behavior)
+    const change = useCallback((event) => {
+        if (disabled || readOnly) return
+
+        const newValue = event.target.value
+
+        // Validate value
+        const validation = validateValueFunc(newValue)
+        setIsValid(validation.isValid)
+        setValidationError(validation.error || '')
+
+        if (!validation.isValid && onValidationError) {
+            onValidationError(validation.error, newValue)
+        }
 
-    function change(event) {
         if (onChange) {
-            const value = event.target.value
-            onChange(id, value)
+            onChange(id, newValue)
         }
-    }
+    }, [disabled, readOnly, validateValueFunc, onValidationError, onChange, id])
+
+    // Enhanced clear function (maintaining original behavior)
+    const clear = useCallback(() => {
+        if (disabled || readOnly) return
+
+        setIsValid(true)
+        setValidationError('')
 
-    function clear() {
         if (onChange) onChange(id, "")
-    }
+    }, [disabled, readOnly, onChange, id])
+
+    // Handle focus
+    const handleFocus = useCallback((event) => {
+        setIsFocused(true)
+        if (onFocus) onFocus(event)
+    }, [onFocus])
+
+    // Handle blur
+    const handleBlur = useCallback((event) => {
+        setIsFocused(false)
 
-    let value2 = value || initial
+        // Validate on blur
+        const validation = validateValueFunc(event.target.value)
+        setIsValid(validation.isValid)
+        setValidationError(validation.error || '')
+
+        if (onBlur) onBlur(event)
+    }, [onBlur, validateValueFunc])
+
+    // Handle copy
+    const handleCopy = useCallback(async () => {
+        if (!copyable || !value2) return
+
+        try {
+            await navigator.clipboard.writeText(value2)
+            // Could trigger a toast notification here
+        } catch (error) {
+            console.warn('Failed to copy property value:', error)
+        }
+    }, [copyable, value])
+
+    // Handle keyboard events
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' && !multiline) {
+            event.preventDefault()
+            inputRef.current?.blur()
+        }
+
+        if (event.key === 'Escape') {
+            inputRef.current?.blur()
+        }
+    }, [multiline])
+
+    // Process value (maintaining original logic)
+    let value2 = value || initial || ''
 
     if (options && Array.isArray(options)) {
         const opt = options.find(option => option.value == value2)
         if (opt) value2 = opt.label
     }
 
+    // Generate CSS classes
+    const cssClasses = [
+        'property',
+        `property-${id}`,
+        `property--${size}`,
+        `property--${variant}`,
+        `property--${layout}`,
+        disabled && 'property--disabled',
+        readOnly && 'property--readonly',
+        required && 'property--required',
+        isFocused && 'property--focused',
+        error && 'property--error',
+        !isValid && 'property--invalid',
+        loading && 'property--loading',
+        skeleton && 'property--skeleton',
+        copyable && 'property--copyable',
+        className
+    ].filter(Boolean).join(' ')
+
+    // Generate accessibility attributes
+    const ariaAttributes = {
+        'aria-label': `Property: ${name || label}`,
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly,
+        'aria-required': required,
+        'aria-invalid': !isValid || !!error,
+        'aria-describedby': helperText ? `${id}-helper` : undefined
+    }
+
+    // Render loading/skeleton state
+    if (loading || skeleton) {
+        return (
+            <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
+                <div className="property-name" style={{ width: nameWidth }}>
+                    <Text skeleton={skeleton}>{name || label}</Text>
+                </div>
+                <div className="property-value">
+                    <Text skeleton={skeleton}>
+                        {skeleton ? '████████████' : 'Loading...'}
+                    </Text>
+                </div>
+            </div>
+        )
+    }
+
     return (
-        <div className={`property property-${id} ${className}`}>
-            <div className="property-name"><Text>{name || label}</Text></div>
+        <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
+            {/* Property name (maintaining original structure) */}
+            <div className="property-name" style={{ width: nameWidth }}>
+                <Text className="property-name__text">
+                    {name || label}
+                    {required && <span className="property__required">*</span>}
+                </Text>
+            </div>
+
+            {/* Property value (maintaining original structure) */}
             <div className="property-value">
-                {editable ? <input type="text" value={value2} onChange={change}/> : value2}
-                {editable && value2.length > 0 ? <Icon icon="close" size="small" clickable action={clear} /> : null }
+                {editable ? (
+                    <>
+                        {multiline ? (
+                            <textarea
+                                ref={inputRef}
+                                type={type}
+                                value={value2}
+                                onChange={change}
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
+                                onKeyDown={handleKeyDown}
+                                disabled={disabled}
+                                readOnly={readOnly}
+                                required={required}
+                                placeholder={placeholder}
+                                maxLength={maxLength}
+                                minLength={minLength}
+                                pattern={pattern}
+                                rows={rows}
+                                className="property-value__textarea"
+                                aria-invalid={!isValid || !!error}
+                            />
+                        ) : (
+                            <input
+                                ref={inputRef}
+                                type={type}
+                                value={value2}
+                                onChange={change}
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
+                                onKeyDown={handleKeyDown}
+                                disabled={disabled}
+                                readOnly={readOnly}
+                                required={required}
+                                placeholder={placeholder}
+                                maxLength={maxLength}
+                                minLength={minLength}
+                                pattern={pattern}
+                                className="property-value__input"
+                                aria-invalid={!isValid || !!error}
+                            />
+                        )}
+
+                        {/* Clear button (maintaining original logic) */}
+                        {clearable && editable && value2 && value2.length > 0 && !disabled && !readOnly && (
+                            <Icon
+                                icon="close"
+                                size="small"
+                                clickable
+                                action={clear}
+                                className="property-value__clear"
+                                aria-label="Clear value"
+                            />
+                        )}
+                    </>
+                ) : (
+                    <>
+                        {/* Display value */}
+                        <span
+                            className={`property-value__display ${copyable ? 'property-value__display--copyable' : ''}`}
+                            onClick={copyable ? handleCopy : undefined}
+                            title={copyable ? 'Click to copy' : undefined}
+                        >
+                            {value2 || (placeholder && <span className="property-value__placeholder">{placeholder}</span>)}
+                        </span>
+
+                        {/* Copy indicator */}
+                        {copyable && value2 && (
+                            <Icon
+                                icon="content_copy"
+                                size="small"
+                                className="property-value__copy"
+                                aria-label="Copy value"
+                            />
+                        )}
+                    </>
+                )}
             </div>
+
+            {/* Helper text or error */}
+            {(helperText || error || validationError) && (
+                <div
+                    id={`${id}-helper`}
+                    className={`property__helper ${error || validationError ? 'property__helper--error' : ''}`}
+                >
+                    <Text size="sm" color={error || validationError ? 'error' : 'muted'}>
+                        {error || validationError || helperText}
+                    </Text>
+                </div>
+            )}
         </div>
     )
-}
+}
+
+// PropTypes
+Property.propTypes = {
+    /** Property ID */
+    id: PropTypes.string,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Property label */
+    label: PropTypes.string,
+    /** Property name (alternative to label) */
+    name: PropTypes.string,
+    /** Initial value */
+    initial: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Current value */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Enable editing */
+    editable: PropTypes.bool,
+    /** Change callback */
+    onChange: PropTypes.func,
+    /** Options for dropdown display */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })),
+    /** Input type */
+    type: PropTypes.string,
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Required field */
+    required: PropTypes.bool,
+    /** Input placeholder */
+    placeholder: PropTypes.string,
+    /** Enable multiline input */
+    multiline: PropTypes.bool,
+    /** Number of rows for textarea */
+    rows: PropTypes.number,
+    /** Maximum length */
+    maxLength: PropTypes.number,
+    /** Minimum length */
+    minLength: PropTypes.number,
+    /** Validation pattern */
+    pattern: PropTypes.string,
+    /** Custom validation function */
+    validateValue: PropTypes.func,
+    /** Property size */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Visual variant */
+    variant: PropTypes.oneOf(['default', 'outlined', 'filled']),
+    /** Layout direction */
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
+    /** Name column width */
+    nameWidth: PropTypes.string,
+    /** Enable copy functionality */
+    copyable: PropTypes.bool,
+    /** Error message */
+    error: PropTypes.string,
+    /** Helper text */
+    helperText: PropTypes.string,
+    /** Focus callback */
+    onFocus: PropTypes.func,
+    /** Blur callback */
+    onBlur: PropTypes.func,
+    /** Validation error callback */
+    onValidationError: PropTypes.func,
+    /** Show clear button */
+    clearable: PropTypes.bool,
+    /** Read-only state */
+    readOnly: PropTypes.bool,
+    /** Loading state */
+    loading: PropTypes.bool,
+    /** Skeleton placeholder */
+    skeleton: PropTypes.bool,
+    /** Inline styles */
+    style: PropTypes.object
+}
+
+Property.defaultProps = {
+    editable: false,
+    type: 'text',
+    disabled: false,
+    required: false,
+    multiline: false,
+    rows: 3,
+    size: 'medium',
+    variant: 'default',
+    layout: 'horizontal',
+    nameWidth: '50%',
+    copyable: false,
+    clearable: true,
+    readOnly: false,
+    loading: false,
+    skeleton: false
+}
+
+export default Property