title-description-input.tsx 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. min-w-0
  35. `}
  36. placeholder={t('workflow.common.addTitle') || ''}
  37. onBlur={handleBlur}
  38. />
  39. )
  40. })
  41. TitleInput.displayName = 'TitleInput'
  42. type DescriptionInputProps = {
  43. value: string
  44. onChange: (value: string) => void
  45. }
  46. export const DescriptionInput = memo(({
  47. value,
  48. onChange,
  49. }: DescriptionInputProps) => {
  50. const { t } = useTranslation()
  51. const [focus, setFocus] = useState(false)
  52. const handleFocus = useCallback(() => {
  53. setFocus(true)
  54. }, [])
  55. const handleBlur = useCallback(() => {
  56. setFocus(false)
  57. }, [])
  58. return (
  59. <div
  60. className={`
  61. group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
  62. border border-transparent hover:bg-gray-50 leading-0
  63. ${focus && '!border-gray-300 shadow-xs !bg-gray-50'}
  64. `}
  65. >
  66. <Textarea
  67. value={value}
  68. onChange={e => onChange(e.target.value)}
  69. rows={1}
  70. onFocus={handleFocus}
  71. onBlur={handleBlur}
  72. className={`
  73. w-full text-xs text-gray-900 leading-[18px] bg-transparent
  74. appearance-none outline-none resize-none
  75. placeholder:text-gray-400 caret-[#295EFF]
  76. `}
  77. placeholder={t('workflow.common.addDescription') || ''}
  78. autoSize
  79. />
  80. </div>
  81. )
  82. })
  83. DescriptionInput.displayName = 'DescriptionInput'