input-combined.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. 'use client'
  2. import type { FC } from 'react'
  3. import React from 'react'
  4. import { DataType } from '../types'
  5. import Input from '@/app/components/base/input'
  6. import { InputNumber } from '@/app/components/base/input-number'
  7. import cn from '@/utils/classnames'
  8. import Datepicker from '../base/date-picker'
  9. type Props = {
  10. className?: string
  11. type: DataType
  12. value: any
  13. onChange: (value: any) => void
  14. readOnly?: boolean
  15. }
  16. const InputCombined: FC<Props> = ({
  17. className: configClassName,
  18. type,
  19. value,
  20. onChange,
  21. readOnly,
  22. }) => {
  23. const className = cn('grow p-0.5 h-6 text-xs')
  24. if (type === DataType.time) {
  25. return (
  26. <Datepicker
  27. className={className}
  28. value={value}
  29. onChange={onChange}
  30. />
  31. )
  32. }
  33. if (type === DataType.number) {
  34. return (
  35. <div className='grow text-[0]'>
  36. <InputNumber
  37. className={cn(className, 'rounded-l-md')}
  38. value={value}
  39. onChange={onChange}
  40. size='sm'
  41. controlWrapClassName='overflow-hidden'
  42. controlClassName='pt-0 pb-0'
  43. readOnly={readOnly}
  44. />
  45. </div>
  46. )
  47. }
  48. return (
  49. <Input
  50. wrapperClassName={configClassName}
  51. className={cn(className, 'rounded-md')}
  52. value={value}
  53. onChange={e => onChange(e.target.value)}
  54. readOnly={readOnly}
  55. />
  56. )
  57. }
  58. export default React.memo(InputCombined)