{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 可刷新的 UI 函数\n",
    "\n",
    "`@ui.refreshable` 装饰器允许您创建具有 `refresh` 方法的函数。该方法将自动删除由该函数创建的所有元素并重新创建它们。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x235db78f550>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import random\n",
    "from nicegui import ui\n",
    "\n",
    "numbers = []\n",
    "\n",
    "@ui.refreshable\n",
    "def number_ui() -> None:\n",
    "    ui.label(', '.join(str(n) for n in sorted(numbers)))\n",
    "\n",
    "def add_number() -> None:\n",
    "    numbers.append(random.randint(0, 100))\n",
    "    number_ui.refresh()\n",
    "\n",
    "number_ui()\n",
    "ui.button('Add random number', on_click=add_number)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 带参数的可刷新 UI\n",
    "\n",
    "这里是一个演示，展示了如何使用 `refreshable` 装饰器创建一个可以使用不同参数刷新的 UI。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x235dc964b50>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pytz\n",
    "from datetime import datetime\n",
    "from nicegui import ui\n",
    "\n",
    "@ui.refreshable\n",
    "def clock_ui(timezone: str):\n",
    "    ui.label(f'Current time in {timezone}:')\n",
    "    ui.label(datetime.now(tz=pytz.timezone(timezone)).strftime('%H:%M:%S'))\n",
    "\n",
    "clock_ui('Europe/Berlin')\n",
    "ui.button('Refresh', on_click=clock_ui.refresh)\n",
    "ui.button('Refresh for New York', on_click=lambda: clock_ui.refresh('America/New_York'))\n",
    "ui.button('Refresh for Tokyo', on_click=lambda: clock_ui.refresh('Asia/Tokyo'))\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 用于输入验证的可刷新 UI\n",
    "\n",
    "这里是一个演示，展示了如何使用 `refreshable` 装饰器来提供有关用户输入有效性的反馈。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "import re\n",
    "from nicegui import ui\n",
    "\n",
    "pwd = ui.input('Password', password=True, on_change=lambda: show_info.refresh())\n",
    "\n",
    "rules = {\n",
    "    'Lowercase letter': lambda s: re.search(r'[a-z]', s),\n",
    "    'Uppercase letter': lambda s: re.search(r'[A-Z]', s),\n",
    "    'Digit': lambda s: re.search(r'\\d', s),\n",
    "    'Special character': lambda s: re.search(r\"[!@#$%^&*(),.?':{}|<>]\", s),\n",
    "    'min. 8 characters': lambda s: len(s) >= 8,\n",
    "}\n",
    "\n",
    "@ui.refreshable\n",
    "def show_info():\n",
    "    for rule, check in rules.items():\n",
    "        with ui.row().classes('items-center gap-2'):\n",
    "            if check(pwd.value or ''):\n",
    "                ui.icon('done', color='green')\n",
    "                ui.label(rule).classes('text-xs text-green strike-through')\n",
    "            else:\n",
    "                ui.icon('radio_button_unchecked', color='red')\n",
    "                ui.label(rule).classes('text-xs text-red')\n",
    "\n",
    "show_info()\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 带有响应式状态的可刷新 UI\n",
    "\n",
    "您可以使用 `ui.state` 函数创建响应式状态变量，如本演示中的 `count` 和 `color`。它们可以像普通变量一样用于创建 UI 元素，如 `ui.label`。可以使用相应的设置器函数来设置新值，这将自动刷新 UI。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "@ui.refreshable\n",
    "def counter(name: str):\n",
    "    with ui.card():\n",
    "        count, set_count = ui.state(0)\n",
    "        color, set_color = ui.state('black')\n",
    "        ui.label(f'{name} = {count}').classes(f'text-{color}')\n",
    "        ui.button(f'{name} += 1', on_click=lambda: set_count(count + 1))\n",
    "        ui.select(['black', 'red', 'green', 'blue'],\n",
    "                  value=color, on_change=lambda e: set_color(e.value))\n",
    "\n",
    "with ui.row():\n",
    "    counter('A')\n",
    "    counter('B')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}