///
/**
* Input Component - Lynx 版 MUI Input
* 100% 一比一复刻 MUI Input
*
* Input 基于 InputBase,添加了标准下划线样式
*
* 对应 MUI: packages/mui-material/src/Input/Input.js
*/
import './Input.css'
import { InputBase, InputBaseProps, inputBaseClasses } from '../InputBase'
// =============================================
// 类名定义
// =============================================
export interface InputClasses {
root: string
formControl: string
focused: string
disabled: string
colorSecondary: string
underline: string
error: string
sizeSmall: string
multiline: string
fullWidth: string
input: string
inputSizeSmall: string
inputMultiline: string
inputTypeSearch: string
}
export function getInputUtilityClass(slot: string): string {
return `MuiInput-${slot}`
}
export const inputClasses: InputClasses = {
root: 'MuiInput-root',
formControl: 'MuiInput-formControl',
focused: 'Mui-focused',
disabled: 'Mui-disabled',
colorSecondary: 'MuiInput-colorSecondary',
underline: 'MuiInput-underline',
error: 'Mui-error',
sizeSmall: 'MuiInput-sizeSmall',
multiline: 'MuiInput-multiline',
fullWidth: 'MuiInput-fullWidth',
input: 'MuiInput-input',
inputSizeSmall: 'MuiInput-inputSizeSmall',
inputMultiline: 'MuiInput-inputMultiline',
inputTypeSearch: 'MuiInput-inputTypeSearch',
}
// =============================================
// 类型定义
// =============================================
export interface InputProps extends InputBaseProps {
/** 是否禁用下划线 */
disableUnderline?: boolean
}
// =============================================
// Input 组件
// =============================================
export function Input(props: InputProps) {
const {
disableUnderline = false,
className,
...other
} = props
// 构建类名
const rootClasses = [
inputClasses.root,
!disableUnderline && inputClasses.underline,
className,
].filter(Boolean).join(' ')
return (
)
}
export default Input