#399

frontend/src/components/posts/import/PostImportRowForm.tsx

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
 import FieldError from '@/components/common/FieldError'
 import FieldWarning from '@/components/common/FieldWarning'
-import FormField from '@/components/common/FormField'
-import TextArea from '@/components/common/TextArea'
-import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
-import { inputClass } from '@/lib/utils'
+import PostDurationField from '@/components/posts/PostDurationField'
+import PostTagsField from '@/components/posts/PostTagsField'
+import PostTextField from '@/components/posts/PostTextField'
+import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
 
 import type { FC } from 'react'
 
@@ -153,13 +153,13 @@ const PostImportRowForm: FC<Props> = (
 	  <div className="space-y-4">
 	    <div className="grid gap-6 md:grid-cols-[7rem_minmax(0,1fr)]">
 	      <div className="space-y-3 md:sticky md:top-0 md:self-start">
-		<ThumbnailPreview
+		<PostThumbnailPreview
 		    url={draft.thumbnailBase}
 		    className="h-28 w-28"/>
 	      </div>
 
 	      <div className="space-y-4">
-		<PostImportTextField
+		<PostTextField
 		    label="URL"
 		    value={draft.url}
 		    warnings={displayRow.fieldWarnings.url}
@@ -167,7 +167,7 @@ const PostImportRowForm: FC<Props> = (
 			displayRow.validationErrors.url,
 			displayRow.importErrors?.url)}
 		    onChange={value => update ('url', value)}/>
-		<PostImportTextField
+		<PostTextField
 		    label="タイトル"
 		    value={draft.title}
 		    warnings={displayRow.fieldWarnings.title}
@@ -175,7 +175,7 @@ const PostImportRowForm: FC<Props> = (
 			displayRow.validationErrors.title,
 			displayRow.importErrors?.title)}
 		    onChange={value => update ('title', value)}/>
-		<PostImportTextField
+		<PostTextField
 		    label="サムネール基底 URL"
 		    value={draft.thumbnailBase}
 		    warnings={displayRow.fieldWarnings.thumbnailBase}
@@ -195,8 +195,7 @@ const PostImportRowForm: FC<Props> = (
 			displayRow.importErrors?.originalCreatedAt,
 			displayRow.importErrors?.originalCreatedFrom,
 			displayRow.importErrors?.originalCreatedBefore)}/>
-		<PostImportTextField
-		    label="動画時間"
+		<PostDurationField
 		    value={draft.duration}
 		    errors={groupedMessages (
 			displayRow.validationErrors.duration,
@@ -204,15 +203,15 @@ const PostImportRowForm: FC<Props> = (
 			displayRow.importErrors?.duration,
 			displayRow.importErrors?.videoMs)}
 		    onChange={value => update ('duration', value)}/>
-		<PostImportAreaField
-		    label="タグ"
-		    value={draft.tags}
+		<PostTagsField
+		    tags={draft.tags}
+		    setTags={value => update ('tags', value)}
 		    warnings={displayRow.fieldWarnings.tags}
 		    errors={groupedMessages (
 			displayRow.validationErrors.tags,
 			displayRow.importErrors?.tags)}
-		    onChange={value => update ('tags', value)}/>
-		<PostImportTextField
+		    rows={4}/>
+		<PostTextField
 		    label="親投稿"
 		    value={draft.parentPostIds}
 		    errors={groupedMessages (
@@ -229,49 +228,6 @@ const PostImportRowForm: FC<Props> = (
       </>)
 }
 
-const PostImportTextField = (
-    { label, value, warnings, errors, onChange }: {
-	label:    string
-	value:    string
-	warnings?: string[]
-	errors?:  string[]
-	onChange: (value: string) => void },
-) => (
-    <FormField label={label} messages={errors}>
-      {({ describedBy, invalid }) => (
-	  <>
-	    <input
-		value={value}
-		onChange={ev => onChange (ev.target.value)}
-		aria-describedby={describedBy}
-		aria-invalid={invalid}
-		className={inputClass (invalid)}/>
-	    <FieldWarning messages={warnings}/>
-	  </>)}
-    </FormField>)
-
-const PostImportAreaField = (
-    { label, value, warnings, errors, onChange }: {
-	label:    string
-	value:    string
-	warnings?: string[]
-	errors?:  string[]
-	onChange: (value: string) => void },
-) => (
-    <FormField label={label} messages={errors}>
-      {({ describedBy, invalid }) => (
-	  <>
-	    <TextArea
-		value={value}
-		rows={4}
-		onChange={ev => onChange (ev.target.value)}
-		aria-describedby={describedBy}
-		invalid={invalid}
-		className="h-auto"/>
-	    <FieldWarning messages={warnings}/>
-	  </>)}
-    </FormField>)
-
 export default PostImportRowForm
 export { buildDraft }
 export type { Draft as PostImportRowDraft }