ywana-core8 0.1.75 → 0.1.76

package/src/html/tab_enhanced.js

@@ -0,0 +1,378 @@
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react'
+import { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { Icon } from './icon'
+import { Text, TEXTFORMATS } from './text'
+import './tab.css'
+
+/**
+ * Enhanced Tabs component with improved functionality while maintaining 100% compatibility
+ */
+export const Tabs = (props) => {
+  const { 
+    children, 
+    selected, 
+    onChange, 
+    fillLeft = false, 
+    fillRight = true,
+    // New enhanced props (all optional for compatibility)
+    orientation = 'horizontal',
+    variant = 'standard',
+    scrollable = false,
+    centered = false,
+    disabled = false,
+    animated = true,
+    persistent = false,
+    persistKey,
+    beforeChange,
+    className,
+    style,
+    ariaLabel,
+    ...restProps
+  } = props
+
+  const tabsRef = useRef(null)
+
+  // Validate props
+  if (children && !React.Children.count(children)) {
+    console.warn('Tabs component: children prop should contain Tab components')
+  }
+
+  // Handle persistent tabs (remember selected tab)
+  useEffect(() => {
+    if (persistent && persistKey && typeof Storage !== 'undefined') {
+      const savedTab = localStorage.getItem(`tabs-${persistKey}`)
+      if (savedTab !== null && onChange) {
+        const parsedTab = isNaN(savedTab) ? savedTab : parseInt(savedTab)
+        if (parsedTab !== selected) {
+          onChange(parsedTab)
+        }
+      }
+    }
+  }, [persistent, persistKey])
+
+  // Save selected tab to localStorage
+  useEffect(() => {
+    if (persistent && persistKey && typeof Storage !== 'undefined' && selected !== undefined) {
+      localStorage.setItem(`tabs-${persistKey}`, selected.toString())
+    }
+  }, [selected, persistent, persistKey])
+
+  // Enhanced select function with validation
+  const handleSelect = useCallback(async (id, index) => {
+    if (disabled) return
+
+    // Call beforeChange hook if provided
+    if (beforeChange) {
+      try {
+        const canChange = await beforeChange(id || index, selected)
+        if (canChange === false) return
+      } catch (error) {
+        console.warn('Tabs beforeChange hook error:', error)
+        return
+      }
+    }
+
+    if (onChange) onChange(id || index)
+  }, [disabled, beforeChange, onChange, selected])
+
+  // Process children (maintaining original logic)
+  const notNullChildren = React.Children.toArray(children).filter(child => child !== null)
+  const tabs = notNullChildren.map((child, index) => {
+    return React.cloneElement(child, {
+      selected: index === selected || selected === child.props.id,
+      onSelect: (id) => handleSelect(id, index),
+      // Pass enhanced props to Tab
+      orientation,
+      variant,
+      disabled: disabled || child.props.disabled,
+      animated,
+      tabIndex: index,
+      totalTabs: notNullChildren.length
+    })
+  })
+
+  // Generate CSS classes
+  const cssClasses = [
+    'tabs',
+    `tabs--${orientation}`,
+    `tabs--${variant}`,
+    scrollable && 'tabs--scrollable',
+    centered && 'tabs--centered',
+    disabled && 'tabs--disabled',
+    animated && 'tabs--animated',
+    className
+  ].filter(Boolean).join(' ')
+
+  // Accessibility attributes
+  const ariaAttributes = {
+    'aria-label': ariaLabel || 'Tabs',
+    'aria-disabled': disabled,
+    'aria-orientation': orientation,
+    role: 'tablist'
+  }
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback((event) => {
+    if (disabled) return
+
+    const currentIndex = typeof selected === 'number' ? selected : 
+      notNullChildren.findIndex(child => child.props.id === selected)
+    
+    let newIndex = currentIndex
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault()
+        newIndex = currentIndex > 0 ? currentIndex - 1 : notNullChildren.length - 1
+        break
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault()
+        newIndex = currentIndex < notNullChildren.length - 1 ? currentIndex + 1 : 0
+        break
+      case 'Home':
+        event.preventDefault()
+        newIndex = 0
+        break
+      case 'End':
+        event.preventDefault()
+        newIndex = notNullChildren.length - 1
+        break
+      default:
+        return
+    }
+
+    const targetChild = notNullChildren[newIndex]
+    if (targetChild && !targetChild.props.disabled) {
+      handleSelect(targetChild.props.id, newIndex)
+    }
+  }, [disabled, selected, notNullChildren, handleSelect])
+
+  return (
+    <div 
+      className={cssClasses} 
+      style={style}
+      ref={tabsRef}
+      onKeyDown={handleKeyDown}
+      {...ariaAttributes}
+      {...restProps}
+    >
+      {fillLeft && <div className="tab-filler" />}
+      {tabs}
+      {fillRight && <div className="tab-filler" />}
+    </div>
+  )
+}
+
+/**
+ * Enhanced Tab component with improved functionality while maintaining 100% compatibility
+ */
+export const Tab = (props) => {
+  const { 
+    id, 
+    icon, 
+    label, 
+    selected, 
+    actions, 
+    onSelect,
+    // New enhanced props (all optional for compatibility)
+    disabled = false,
+    closeable = false,
+    onClose,
+    badge,
+    tooltip,
+    orientation = 'horizontal',
+    variant = 'standard',
+    animated = true,
+    tabIndex,
+    totalTabs,
+    className,
+    style,
+    ...restProps
+  } = props
+
+  const tabRef = useRef(null)
+
+  // Handle selection (maintaining original behavior)
+  const handleSelect = useCallback((event) => {
+    if (disabled) return
+    
+    event.preventDefault()
+    if (onSelect) onSelect(id)
+  }, [disabled, onSelect, id])
+
+  // Handle close
+  const handleClose = useCallback((event) => {
+    event.stopPropagation()
+    if (onClose) onClose(id)
+  }, [onClose, id])
+
+  // Handle keyboard interaction
+  const handleKeyDown = useCallback((event) => {
+    if (disabled) return
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (onSelect) onSelect(id)
+        break
+      case 'Delete':
+      case 'Backspace':
+        if (closeable && onClose) {
+          event.preventDefault()
+          onClose(id)
+        }
+        break
+      default:
+        break
+    }
+  }, [disabled, onSelect, id, closeable, onClose])
+
+  // Generate CSS classes
+  const cssClasses = [
+    'tab',
+    selected && 'selected',
+    disabled && 'tab--disabled',
+    closeable && 'tab--closeable',
+    animated && 'tab--animated',
+    `tab--${orientation}`,
+    `tab--${variant}`,
+    className
+  ].filter(Boolean).join(' ')
+
+  // Accessibility attributes
+  const ariaAttributes = {
+    'aria-selected': selected,
+    'aria-disabled': disabled,
+    'aria-controls': `tabpanel-${id || tabIndex}`,
+    'aria-label': typeof label === 'string' ? label : `Tab ${(tabIndex || 0) + 1}`,
+    role: 'tab',
+    tabIndex: selected ? 0 : -1,
+    id: `tab-${id || tabIndex}`
+  }
+
+  // Render label with proper formatting (maintaining original logic)
+  const labelTxt = label ? <Text format={TEXTFORMATS.STRING}>{label}</Text> : null
+
+  return (
+    <div 
+      className={cssClasses}
+      style={style}
+      onClick={handleSelect}
+      onKeyDown={handleKeyDown}
+      ref={tabRef}
+      title={tooltip}
+      {...ariaAttributes}
+      {...restProps}
+    >
+      {/* Icon (maintaining original structure) */}
+      {icon && <Icon icon={icon} size="small" disabled={disabled} />}
+      
+      {/* Label with badge */}
+      <div className="tab__content">
+        {labelTxt}
+        {badge && (
+          <span className="tab__badge">
+            {typeof badge === 'number' && badge > 99 ? '99+' : badge}
+          </span>
+        )}
+      </div>
+
+      {/* Actions (maintaining original structure) */}
+      {actions && <div className="tab__actions">{actions}</div>}
+
+      {/* Close button */}
+      {closeable && (
+        <button
+          className="tab__close"
+          onClick={handleClose}
+          aria-label={`Close ${typeof label === 'string' ? label : 'tab'}`}
+          tabIndex={-1}
+        >
+          <Icon icon="close" size="small" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Enhanced Stack component with improved functionality while maintaining 100% compatibility
+ */
+export const Stack = (props) => {
+  const { 
+    selected = 0, 
+    children,
+    // New enhanced props (all optional for compatibility)
+    lazy = false,
+    keepMounted = false,
+    animated = true,
+    className,
+    style,
+    ...restProps
+  } = props
+
+  const [mountedTabs, setMountedTabs] = useState(new Set([selected]))
+
+  // Track which tabs have been mounted for lazy loading
+  useEffect(() => {
+    if (lazy || keepMounted) {
+      setMountedTabs(prev => new Set([...prev, selected]))
+    }
+  }, [selected, lazy, keepMounted])
+
+  const notNullChildren = React.Children.toArray(children).filter(child => child !== null)
+
+  // Generate CSS classes
+  const cssClasses = [
+    'stack',
+    animated && 'stack--animated',
+    className
+  ].filter(Boolean).join(' ')
+
+  if (lazy) {
+    // Lazy loading: only render mounted tabs
+    return (
+      <div className={cssClasses} style={style} {...restProps}>
+        {notNullChildren.map((child, index) => {
+          const isSelected = index === selected
+          const shouldRender = mountedTabs.has(index) || isSelected
+
+          if (!shouldRender) return null
+
+          return (
+            <div
+              key={index}
+              className={`stack__panel ${isSelected ? 'stack__panel--active' : 'stack__panel--hidden'}`}
+              role="tabpanel"
+              aria-labelledby={`tab-${index}`}
+              id={`tabpanel-${index}`}
+              hidden={!isSelected}
+            >
+              {child}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  // Original behavior: render selected child only
+  const child = notNullChildren.filter((child, index) => index === selected)[0]
+  
+  return (
+    <div 
+      className={cssClasses} 
+      style={style}
+      role="tabpanel"
+      aria-labelledby={`tab-${selected}`}
+      id={`tabpanel-${selected}`}
+      {...restProps}
+    >
+      {child}
+    </div>
+  )
+}