ورودی هشتگ (Hashtag Input)

معرفی

کامپوننت HashtagInput مشابه TagInput است با این تفاوت که هشتگ‌ها را با پیشوند # نمایش می‌دهد. مقدار ذخیره‌شده بدون # است (فقط کلمه کلیدی)، اما نمایش آن با # همراه است.

کاربر می‌تواند هشتگ را با یا بدون # وارد کند — کامپوننت به‌صورت خودکار # اضافی را حذف می‌کند.

چه زمانی استفاده کنیم:

• برای ورود هشتگ‌های شبکه‌های اجتماعی (اینستاگرام، توییتر و ...)
• وقتی مقادیر ورودی باید با پیشوند # نمایش داده شوند
• در فرم‌های مدیریت پست‌های شبکه اجتماعی

چه زمانی استفاده نکنیم:

• برای tag های غیرهشتگ — از TagInput استفاده کنید
• وقتی هشتگ‌ها باید از لیست انتخاب شوند — از MultiSelect استفاده کنید

استفاده

import { HashtagInput } from '@parto-system-design/ui'

export default function MyComponent() {
  const [hashtags, setHashtags] = React.useState<string[]>(['پرتو', 'تهران'])

  return <HashtagInput value={hashtags} onChange={setHashtags} placeholder="هشتگ جدید اضافه کنید..." />
}

حداکثر تعداد هشتگ

<HashtagInput value={hashtags} onChange={setHashtags} placeholder="#هشتگ جدید..." maxTags={10} />

حالت غیرفعال

<HashtagInput defaultValue={['ایران', 'تهران']} disabled />

مثال عملی: فرم هشتگ پست اینستاگرام

import { HashtagInput, Label, Button } from '@parto-system-design/ui'

export default function PostForm() {
  const [hashtags, setHashtags] = React.useState<string[]>([])

  const handleSubmit = () => {
    // hashtags = ['پرتو', 'تهران', 'بلاگر']
    // برای ارسال به API بدون # استفاده می‌شود
    const formattedHashtags = hashtags.map((h) => `#${h}`).join(' ')
    console.log(formattedHashtags) // '#پرتو #تهران #بلاگر'
  }

  return (
    <div className="space-y-4" dir="rtl">
      <div className="space-y-2">
        <Label>هشتگ‌های پست (حداکثر ۳۰)</Label>
        <HashtagInput value={hashtags} onChange={setHashtags} placeholder="#هشتگ بزنید..." maxTags={30} />
        <p className="text-xs text-muted-foreground">{hashtags.length}/30 هشتگ</p>
      </div>
      <Button onClick={handleSubmit}>انتشار پست</Button>
    </div>
  )
}

تفاوت با TagInput

رفتار کیبورد

Props

حالت‌ها و انواع

حالت کنترل‌شده

با value و onChange آرایه هشتگ‌ها را مدیریت کنید (مقادیر بدون #).

حالت غیرکنترل‌شده

با defaultValue مقدار اولیه را تنظیم کنید.

با محدودیت تعداد

با maxTags حداکثر تعداد هشتگ‌ها را محدود کنید (مثلاً ۳۰ برای اینستاگرام).

حالت غیرفعال

با disabled ورودی و حذف هشتگ‌ها غیرفعال می‌شود.

راهنمای استفاده

دسترسی‌پذیری

• اضافه کردن هشتگ با Enter (با یا بدون #)
• حذف آخرین هشتگ با Backspace (در صورت خالی بودن input)
• حذف هشتگ با کلیک روی دکمه ×
• پیشوند # به‌صورت خودکار به مقدار ذخیره‌شده اضافه نمی‌شود (فقط نمایشی است)
• جلوگیری از ورود هشتگ‌های تکراری
• دکمه حذف هر هشتگ دارای متن sr-only برای screen reader
• کاملاً سازگار با RTL (فارسی، عربی)

کامپوننت‌های مرتبط

• اگر نیاز به تگ‌های عمومی بدون پیشوند # دارید → TagInput
• اگر هشتگ‌ها باید از لیست مشخصی انتخاب شوند → MultiSelect
• اگر نیاز به نمایش هشتگ‌ها به صورت فیلتر قابل حذف دارید → FilterChip