title-description-input.tsx 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import {
  2. memo,
  3. useCallback,
  4. useState,
  5. } from 'react'
  6. import Textarea from 'rc-textarea'
  7. import { useTranslation } from 'react-i18next'
  8. type TitleInputProps = {
  9. value: string
  10. onBlur: (value: string) => void
  11. }
  12. export const TitleInput = memo(({
  13. value,
  14. onBlur,
  15. }: TitleInputProps) => {
  16. const { t } = useTranslation()
  17. const [localValue, setLocalValue] = useState(value)
  18. const handleBlur = () => {
  19. if (!localValue) {
  20. setLocalValue(value)
  21. onBlur(value)
  22. return
  23. }
  24. onBlur(localValue)
  25. }
  26. return (
  27. <input
  28. value={localValue}
  29. onChange={e => setLocalValue(e.target.value)}
  30. className={`
  31. grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
  32. hover:bg-gray-50
  33. focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
  34. `}
  35. placeholder={t('workflow.common.addTitle') || ''}
  36. onBlur={handleBlur}
  37. />
  38. )
  39. })
  40. TitleInput.displayName = 'TitleInput'
  41. type DescriptionInputProps = {
  42. value: string
  43. onChange: (value: string) => void
  44. }
  45. export const DescriptionInput = memo(({
  46. value,
  47. onChange,
  48. }: DescriptionInputProps) => {
  49. const { t } = useTranslation()
  50. const [focus, setFocus] = useState(false)
  51. const handleFocus = useCallback(() => {
  52. setFocus(true)
  53. }, [])
  54. const handleBlur = useCallback(() => {
  55. setFocus(false)
  56. }, [])
  57. return (
  58. <div
  59. className={`
  60. group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
  61. border border-transparent hover:bg-gray-50 leading-0
  62. ${focus && '!border-gray-300 shadow-xs !bg-gray-50'}
  63. `}
  64. >
  65. <Textarea
  66. value={value}
  67. onChange={e => onChange(e.target.value)}
  68. rows={1}
  69. onFocus={handleFocus}
  70. onBlur={handleBlur}
  71. className={`
  72. w-full text-xs text-gray-900 leading-[18px] bg-transparent
  73. appearance-none outline-none resize-none
  74. placeholder:text-gray-400 caret-[#295EFF]
  75. `}
  76. placeholder={t('workflow.common.addDescription') || ''}
  77. autoSize
  78. />
  79. </div>
  80. )
  81. })
  82. DescriptionInput.displayName = 'DescriptionInput'