🎛 Holatlar (States)

Holat — nomlangan ko‘rinish qoidasi. U State tugunining ichidagi hamma narsani ma’lumotga qarab ko‘rsatadi yoki yashiradi. Bitta vidjet ichida bir nechta holat bo‘lishi va ular bir vaqtda ishlashi mumkin.

1️⃣ Holat e’lon qilish

States yorlig‘ida holat qo‘shasiz: nomi va ko‘rinish rejimi.

• Doim ko‘rinadi — har doim chiziladi.
• Doim yashirin — hech qachon chizilmaydi (kodni o‘chirmasdan vaqtincha yashirish uchun qulay).
• Shartli — quyidagi shartlar bajarilsa chiziladi.

2️⃣ Kodda ishlatish

<Card gap={3}>
  <State name="offer">
    <Title value={hotel.name} size="lg" />
    <Button label="Bron qilish" onClickAction={{ functionName: 'book_hotel' }} />
  </State>

  <State name="booked">
    <Row align="center" gap={2}>
      <Icon name="check-circle" color="success" />
      <Text value="Bron tasdiqlandi" />
    </Row>
  </State>
</Card>

Yuqoridagi misolda book_hotel funksiyasi set_variables orqali booked ni true qilsa, birinchi blok yo‘qoladi va ikkinchisi paydo bo‘ladi.

3️⃣ Shartlar

Har bir shart uch qismdan iborat: maydon, operator, qiymat.

• equals — teng
• not_equals — teng emas
• contains — ichida bor
• not_contains — ichida yo‘q
• greater_than — katta
• less_than — kichik
• is_empty — bo‘sh (qiymat kerak emas)
• is_not_empty — bo‘sh emas

4️⃣ AND / OR va guruhlar

• Bog‘lovchi (AND / OR) ikkinchi shartdan boshlab tanlanadi — har bir shart o‘zidan oldingisi bilan qanday bog‘lanishini o‘zi belgilaydi.
• Shartlarni guruhga yig‘ish mumkin, guruhlar esa ichma-ich joylashadi.

status equals "active"  AND  role equals "admin"
   OR
(plan equals "pro"  AND  seats greater_than 5)

💡 Amaliy maslahatlar

• Holat nomlari qisqa va ma’noli bo‘lsin: offer, booked, error, empty.
• Bo‘sh ro‘yxat holatini alohida ko‘rsating: orders.length equals 0.
• Xatolik matnini ham holat orqali chiqaring — call_api ning onFailure qismida error o‘zgaruvchisini yozing.
• States yorlig‘ida har bir qator o‘z shartini bir qatorda ko‘rsatadi, masalan booked = true.