mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +00:00
Directory Restructuring: - qml/qml-components/qml-components/* → qml/components/ (flattens nesting) - All 104 QML files moved with git history preserved - Eliminates redundant qml-components nesting Documentation Updates: - ARCHITECTURE.md: Updated qml/components references (2 locations) - GETTING_STARTED.md: Updated qml/components path (1 location, end of file) - README.md: Updated qml/components references (3 locations) - CODE_REVIEW.md: Updated qml/components file paths (4 locations) - docs/ARCHITECTURE.md: Complete refactor with qml/components paths Verification: - ✅ No remaining qml-components/ references in documentation - ✅ All 104 QML files present in flattened structure - ✅ Directory structure verified (12 component categories) - ✅ First-class directory naming convention Structure Post-Refactor: qml/ ├── components/ │ ├── atoms/ (16 files) │ ├── core/ (11 files) │ ├── data-display/ (10 files) │ ├── feedback/ (11 files) │ ├── form/ (19 files) │ ├── lab/ (11 files) │ ├── layout/ (12 files) │ ├── navigation/ (12 files) │ ├── surfaces/ (7 files) │ ├── theming/ (4 files) │ └── utils/ (13 files) ├── hybrid/ └── widgets/ Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
/**
|
|
* useToggle Hook
|
|
* Enhanced boolean state management with multiple toggle options
|
|
*
|
|
* Features:
|
|
* - Boolean state with toggle, set, and explicit setters
|
|
* - Generic return type for state management
|
|
* - Performance optimized with useCallback
|
|
* - Simple and intuitive API
|
|
*
|
|
* @example
|
|
* const { value, toggle, setValue, setTrue, setFalse } = useToggle(false)
|
|
*
|
|
* // Use in component
|
|
* <Button onClick={toggle}>Toggle: {value.toString()}</Button>
|
|
* <Button onClick={setTrue}>Show</Button>
|
|
* <Button onClick={setFalse}>Hide</Button>
|
|
* <Button onClick={() => setValue(prev => !prev)}>Custom Toggle</Button>
|
|
*
|
|
* @example
|
|
* // With initial true state
|
|
* const { value: isMenuOpen, toggle: toggleMenu } = useToggle(true)
|
|
*/
|
|
|
|
import { useState, useCallback } from 'react'
|
|
|
|
export interface UseToggleReturn {
|
|
/** Current boolean value */
|
|
value: boolean
|
|
/** Toggle the value between true and false */
|
|
toggle: () => void
|
|
/** Set the value directly */
|
|
setValue: (value: boolean | ((prev: boolean) => boolean)) => void
|
|
/** Set value to true */
|
|
setTrue: () => void
|
|
/** Set value to false */
|
|
setFalse: () => void
|
|
}
|
|
|
|
/**
|
|
* Hook for managing boolean state with common toggle operations
|
|
* @param initialValue - Initial boolean state (default: false)
|
|
* @returns Object containing boolean state and operation methods
|
|
*/
|
|
export function useToggle(initialValue: boolean = false): UseToggleReturn {
|
|
const [value, setValue] = useState<boolean>(initialValue)
|
|
|
|
const toggle = useCallback(() => {
|
|
setValue((prev) => !prev)
|
|
}, [])
|
|
|
|
const setTrue = useCallback(() => {
|
|
setValue(true)
|
|
}, [])
|
|
|
|
const setFalse = useCallback(() => {
|
|
setValue(false)
|
|
}, [])
|
|
|
|
const handleSetValue = useCallback((newValue: boolean | ((prev: boolean) => boolean)) => {
|
|
setValue(newValue)
|
|
}, [])
|
|
|
|
return {
|
|
value,
|
|
toggle,
|
|
setValue: handleSetValue,
|
|
setTrue,
|
|
setFalse,
|
|
}
|
|
}
|