| 1 | import type { ForwardedRef } from 'react' |
| 2 | import type { |
| 3 | IPlatsParamsProps, |
| 4 | IPlatsParamsRef, |
| 5 | } from '@/components/PublishDialog/compoents/PlatParamsSetting/plats/plats.type' |
| 6 | import type { IPlatOption, IXhsUserDeclarationOrigin } from '@/components/PublishDialog/publishDialog.type' |
| 7 | import { forwardRef, memo } from 'react' |
| 8 | import { useTransClient } from '@/app/i18n/client' |
| 9 | import usePlatParamsCommon from '@/components/PublishDialog/compoents/PlatParamsSetting/hooks/usePlatParamsCoomon' |
| 10 | import PubParmasTextarea from '@/components/PublishDialog/compoents/PubParmasTextarea' |
| 11 | import { Label } from '@/components/ui/label' |
| 12 | import { |
| 13 | Select, |
| 14 | SelectContent, |
| 15 | SelectItem, |
| 16 | SelectTrigger, |
| 17 | SelectValue, |
| 18 | } from '@/components/ui/select' |
| 19 | import { cn } from '@/utils/className' |
| 20 | import CommonTitleInput from '../common/CommonTitleInput' |
| 21 | |
| 22 | const XHS_USER_DECLARATION_OPTIONS: IXhsUserDeclarationOrigin[] = [1, 2, 3] |
| 23 | const XHS_USER_DECLARATION_EMPTY_VALUE = 'none' |
| 24 | |
| 25 | function ensureXhsOption(option: IPlatOption): IPlatOption & { xhs: NonNullable<IPlatOption['xhs']> } { |
| 26 | const newOption = { ...option } |
| 27 | newOption.xhs = { |
| 28 | ...newOption.xhs, |
| 29 | } |
| 30 | |
| 31 | return newOption as IPlatOption & { xhs: NonNullable<IPlatOption['xhs']> } |
| 32 | } |
| 33 | |
| 34 | const XhsParams = memo( |
| 35 | forwardRef( |
| 36 | ( |
| 37 | { pubItem, isMobile }: IPlatsParamsProps, |
| 38 | ref: ForwardedRef<IPlatsParamsRef>, |
| 39 | ) => { |
| 40 | const { t } = useTransClient('publish') |
| 41 | const { pubParmasTextareaCommonParams, setOnePubParams } = usePlatParamsCommon( |
| 42 | pubItem, |
| 43 | isMobile, |
| 44 | ) |
| 45 | |
| 46 | return ( |
| 47 | <> |
| 48 | <PubParmasTextarea |
| 49 | {...pubParmasTextareaCommonParams} |
| 50 | extend={( |
| 51 | <> |
| 52 | <CommonTitleInput pubItem={pubItem} isMobile={isMobile} /> |
| 53 | |
| 54 | <div |
| 55 | className={cn( |
| 56 | 'flex mt-4', |
| 57 | isMobile ? 'flex-col gap-1.5' : 'items-center h-8', |
| 58 | )} |
| 59 | > |
| 60 | <Label |
| 61 | htmlFor="xhs-declaration" |
| 62 | className={cn( |
| 63 | 'shrink-0', |
| 64 | isMobile ? 'text-sm font-medium' : 'w-[90px] mr-2.5', |
| 65 | )} |
| 66 | > |
| 67 | {t('xhs.declaration.title')} |
| 68 | </Label> |
| 69 | <div className="flex-1"> |
| 70 | <Select |
| 71 | value={ |
| 72 | pubItem.params.option.xhs?.userDeclarationBind?.origin |
| 73 | ? `${pubItem.params.option.xhs.userDeclarationBind.origin}` |
| 74 | : XHS_USER_DECLARATION_EMPTY_VALUE |
| 75 | } |
| 76 | onValueChange={(value) => { |
| 77 | const option = ensureXhsOption(pubItem.params.option) |
| 78 | if (value === XHS_USER_DECLARATION_EMPTY_VALUE) { |
| 79 | option.xhs.userDeclarationBind = null |
| 80 | } |
| 81 | else { |
| 82 | option.xhs.userDeclarationBind = { |
| 83 | origin: Number(value) as IXhsUserDeclarationOrigin, |
| 84 | } |
| 85 | } |
| 86 | setOnePubParams({ option }, pubItem.account.id) |
| 87 | }} |
| 88 | > |
| 89 | <SelectTrigger |
| 90 | id="xhs-declaration" |
| 91 | className="h-8 w-full" |
| 92 | data-testid="publish-xhs-declaration-select" |
| 93 | > |
| 94 | <SelectValue placeholder={t('xhs.declaration.placeholder')} /> |
| 95 | </SelectTrigger> |
| 96 | <SelectContent> |
| 97 | <SelectItem value={XHS_USER_DECLARATION_EMPTY_VALUE}> |
| 98 | {t('xhs.declaration.none')} |
| 99 | </SelectItem> |
| 100 | {XHS_USER_DECLARATION_OPTIONS.map(origin => ( |
| 101 | <SelectItem key={origin} value={`${origin}`}> |
| 102 | {t(`xhs.declaration.options.${origin}`)} |
| 103 | </SelectItem> |
| 104 | ))} |
| 105 | </SelectContent> |
| 106 | </Select> |
| 107 | </div> |
| 108 | </div> |
| 109 | </> |
| 110 | )} |
| 111 | /> |
| 112 | </> |
| 113 | ) |
| 114 | }, |
| 115 | ), |
| 116 | ) |
| 117 | |
| 118 | export default XhsParams |
| 119 |