mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 22:34:56 +00:00
johndoe6345789
54a819ed71
ORGANIZED INTO 4 MAIN CATEGORIES: - react/ React TypeScript components (145 components + Python bindings) - qml/ QML desktop components (104+ QML components) - python/ Python package implementations - legacy/ Utilities, contexts, and migration-in-progress code SUPPORTING FOLDERS (kept as-is): - icons/ 421 SVG icons - theming/ Material Design 3 theme system - styles/ SCSS modules and utilities - scss/ SCSS preprocessor files - docs/ Documentation files STRUCTURE IMPROVEMENTS: ✅ All code preserved (nothing deleted) ✅ Clear separation by implementation type ✅ Better navigation and discoverability ✅ Easy to find what you need ✅ Professional organization DOCUMENTATION: - Added STRUCTURE.md explaining the new layout - Updated folder organization with clear purpose - Maintained all original functionality All files reorganized while keeping full functionality intact. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import React, { forwardRef } from 'react'
|
|
import { classNames } from '../utils/classNames'
|
|
|
|
export interface LoadingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children?: React.ReactNode
|
|
loading?: boolean
|
|
loadingIndicator?: React.ReactNode
|
|
loadingPosition?: 'start' | 'end' | 'center'
|
|
disabled?: boolean
|
|
startIcon?: React.ReactNode
|
|
endIcon?: React.ReactNode
|
|
variant?: 'text' | 'outlined' | 'contained'
|
|
color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
|
|
size?: 'small' | 'medium' | 'large'
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
/**
|
|
* LoadingButton - A button with loading state
|
|
*/
|
|
export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(function LoadingButton(
|
|
{
|
|
children,
|
|
loading = false,
|
|
loadingIndicator,
|
|
loadingPosition = 'center',
|
|
disabled,
|
|
startIcon,
|
|
endIcon,
|
|
variant = 'contained',
|
|
color = 'primary',
|
|
size = 'medium',
|
|
fullWidth = false,
|
|
className,
|
|
...props
|
|
},
|
|
ref
|
|
) {
|
|
const isDisabled = disabled || loading
|
|
|
|
const defaultLoadingIndicator = (
|
|
<span className="fakemui-loading-button-spinner">
|
|
<svg className="fakemui-loading-button-spinner-svg" viewBox="22 22 44 44">
|
|
<circle
|
|
className="fakemui-loading-button-spinner-circle"
|
|
cx="44"
|
|
cy="44"
|
|
r="20.2"
|
|
fill="none"
|
|
strokeWidth="3.6"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
)
|
|
|
|
const indicator = loadingIndicator || defaultLoadingIndicator
|
|
|
|
const renderContent = () => {
|
|
if (loading && loadingPosition === 'center') {
|
|
return (
|
|
<>
|
|
<span className="fakemui-loading-button-label-hidden">{children}</span>
|
|
<span className="fakemui-loading-button-loading-indicator">{indicator}</span>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{loading && loadingPosition === 'start' ? (
|
|
<span className="fakemui-loading-button-loading-indicator-start">{indicator}</span>
|
|
) : (
|
|
startIcon && <span className="fakemui-loading-button-start-icon">{startIcon}</span>
|
|
)}
|
|
{children}
|
|
{loading && loadingPosition === 'end' ? (
|
|
<span className="fakemui-loading-button-loading-indicator-end">{indicator}</span>
|
|
) : (
|
|
endIcon && <span className="fakemui-loading-button-end-icon">{endIcon}</span>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={classNames(
|
|
'fakemui-loading-button',
|
|
`fakemui-loading-button-${variant}`,
|
|
`fakemui-loading-button-${color}`,
|
|
`fakemui-loading-button-${size}`,
|
|
className,
|
|
{
|
|
'fakemui-loading-button-loading': loading,
|
|
'fakemui-loading-button-disabled': isDisabled,
|
|
'fakemui-loading-button-fullwidth': fullWidth,
|
|
}
|
|
)}
|
|
disabled={isDisabled}
|
|
{...props}
|
|
>
|
|
{renderContent()}
|
|
</button>
|
|
)
|
|
})
|
|
|
|
export default LoadingButton
|