qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: QInput 컴포넌트에 number type 추가

Browse Source
This commit is contained in:
Daseul Kim 2024-11-05 15:46:30 +09:00
parent 231255bf0e
commit 708f6c8ea1
2 changed files with 90 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Playground.jsx
View File

@ -39,6 +39,7 @@ export default function Playground() {
const [color, setColor] = useState('#ff0000')
const [textInput, setTextInput] = useState('')
const [numberInput, setNumberInput] = useState(null)
const [radioInput, setRadioInput] = useState('')
const [checkboxInput, setCheckboxInput] = useState([])
const [selectedValue, setSelectedValue] = useState('')
@ -48,6 +49,9 @@ export default function Playground() {
useEffect(() => {
console.log('textInput:', textInput)
}, [textInput])
useEffect(() => {
console.log('numberInput:', numberInput)
}, [numberInput])
useEffect(() => {
console.log('radioInput:', radioInput)
}, [radioInput])
@ -161,8 +165,19 @@ export default function Playground() {
>
QInput TextInput DATA RESET
</button>
<QInput type="text" value={textInput} onChange={setTextInput} />
<QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
<QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
<QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
<br />
<button
className="btn-frame deepgray"
onClick={() => {
setNumberInput(null)
}}
>
QInput NumberInput DATA RESET
</button>
<QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
<QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
<br />
<button
className="btn-frame deepgray"
@ -185,7 +200,7 @@ export default function Playground() {
<button
className="btn-frame deepgray"
onClick={() => {
setCheckboxInput('')
setCheckboxInput([])
}}
>
QInput Checkbox DATA RESET

103
src/components/common/input/QInput.jsx
View File

@ -2,7 +2,7 @@
import { useCallback } from 'react'
export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
// options = options || [
// {
// id: 'one',
@ -21,11 +21,11 @@ export default function QInput({ type, readOnly = false, options = [], value, on
// },
// ]
const handleChange = useCallback(
const handleRadioCheckboxChange = useCallback(
(e, optionValue) => {
if (type === 'radio') {
onChange(e.target.value)
} else {
} else if (type === 'checkbox') {
const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
onChange(newValue)
}
@ -33,36 +33,77 @@ export default function QInput({ type, readOnly = false, options = [], value, on
[type, value, onChange],
)
const handleTextChange = useCallback(
const handleTextNumberChange = useCallback(
(e) => {
onChange(e.target.value)
if (type === 'text') {
onChange(e.target.value)
} else if (type === 'number') {
onChange(Number(e.target.value))
}
},
[onChange],
[type, onChange],
)
return (
<>
{type === 'text' ? (
<div className="mb5">
<input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
</div>
) : type === 'radio' || type === 'checkbox' ? (
<div className="flx mb5">
{options?.map((option) => (
<div key={option.name} className={`d-${type}-radio light mr5`}>
<input
type={type}
name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
) : null}
</>
)
// type=number 정수 부호, 소수점 검사, 일부 키 허용
const checkInputNumber = (e) => {
const value = e.target.value
const key = e.key
const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
if (key >= '0' && key <= '9') {
return
}
if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
return
}
if (key === '-' && !value.includes('-') && value.length > 0) {
return
}
if (allowKeys.includes(key)) {
return
}
if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
return
}
e.preventDefault()
}
// input type : text, number
const inputTextNumber = () => {
return (
<input
type={type}
className={`input-light ${className ? className : ''}`}
ref={ref}
id={id}
readOnly={readOnly ? true : false}
placeholder={placeholder}
value={value === 0 ? 0 : value || ''}
onChange={handleTextNumberChange}
onKeyDown={type === 'number' ? checkInputNumber : undefined}
/>
)
}
// input type : radio, checkbox
const inputRadioCheckbox = () => {
return (
<div className="flx">
{options?.map((option) => (
<div key={option.name} className={`d-${type}-radio light mr5`}>
<input
type={type}
name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleRadioCheckboxChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
)
}
return <>{type === 'text' || type === 'number' ? inputTextNumber() : type === 'radio' || type === 'checkbox' ? inputRadioCheckbox() : null}</>
}