Dialog

import { Button, showConfirmDialog, showDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const DialogBasic = () => {
  return (
    <View className="flex-row flex-wrap items-center gap-3 bg-background p-4">
      <Button
        variant="tonal"
        onPress={() => showDialog({ message: '这是一段需要用户知晓的提示信息。', title: '提示' })}
      >
        提示弹窗
      </Button>
      <Button
        variant="tonal"
        onPress={() => showConfirmDialog({ message: '是否确认继续当前操作？', title: '请确认' })}
      >
        确认弹窗
      </Button>
      <Button
        variant="tonal"
        onPress={() => showDialog('只传一段文案')}
      >
        纯文案
      </Button>
    </View>
  );
};

export { DialogBasic };

import { Button, showConfirmDialog, showDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const DialogButtons = () => {
  return (
    <View className="flex-row flex-wrap items-center gap-3 bg-background p-4">
      <Button
        variant="tonal"
        onPress={() =>
          showConfirmDialog({
            cancelButtonText: '返回',
            confirmButtonText: '继续',
            message: '确认与取消按钮都支持自定义文案。',
            title: '按钮文案'
          })
        }
      >
        自定义文案
      </Button>
      <Button
        variant="tonal"
        onPress={() =>
          showDialog({
            message: '确认按钮已禁用，只能通过取消按钮关闭。',
            showCancelButton: true,
            confirmButtonDisabled: true,
            title: '禁用确认'
          })
        }
      >
        禁用确认
      </Button>
      <Button
        variant="tonal"
        onPress={() =>
          showConfirmDialog({
            confirmButtonColor: 'destructive',
            confirmButtonText: '删除',
            message: 'destructive 用于明确标识不可逆操作。',
            title: '破坏性操作'
          })
        }
      >
        危险按钮
      </Button>
      <Button
        variant="tonal"
        onPress={() =>
          showDialog({
            cancelButtonText: '知道了',
            message: 'showConfirmButton=false 可隐藏默认确认按钮。',
            showCancelButton: true,
            showConfirmButton: false,
            title: '仅取消按钮'
          })
        }
      >
        仅取消按钮
      </Button>
    </View>
  );
};

export { DialogButtons };

import type { DialogProps } from '@skyroc/native-ui';
import { Button, showDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const ALIGNMENTS: Array<NonNullable<DialogProps['messageAlign']>> = ['left', 'center', 'right'];

const DialogMessageAlign = () => {
  function handleOpen(messageAlign: NonNullable<DialogProps['messageAlign']>) {
    showDialog({
      message: `当前消息使用 ${messageAlign} 对齐。`,
      messageAlign,
      title: `${messageAlign} 对齐`
    });
  }

  return (
    <View className="flex-row flex-wrap items-center gap-3 bg-background p-4">
      {ALIGNMENTS.map(messageAlign => (
        <Button
          key={messageAlign}
          variant="tonal"
          onPress={() => handleOpen(messageAlign)}
        >
          {messageAlign}
        </Button>
      ))}
    </View>
  );
};

export { DialogMessageAlign };

import { Button, showConfirmDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const DialogTheme = () => {
  function handleRound(themeDirection: 'horizontal' | 'vertical') {
    showConfirmDialog({
      message: `round-button 主题 · ${themeDirection}`,
      theme: 'round-button',
      themeDirection,
      title: '圆角按钮'
    });
  }

  return (
    <View className="flex-row flex-wrap items-center gap-3 bg-background p-4">
      <Button
        variant="tonal"
        onPress={() => showConfirmDialog({ message: '默认主题使用通栏文字按钮。', title: '默认主题' })}
      >
        默认主题
      </Button>
      <Button
        variant="tonal"
        onPress={() => handleRound('vertical')}
      >
        圆角竖排
      </Button>
      <Button
        variant="tonal"
        onPress={() => handleRound('horizontal')}
      >
        圆角横排
      </Button>
    </View>
  );
};

export { DialogTheme };

import { Button, Dialog, Portal, Text, showDialog } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const DialogInput = () => {
  const [show, setShow] = useState(false);
  const [inputValue, setInputValue] = useState('受控内容');
  const [result, setResult] = useState('尚未确认');

  function handleDefaultInput() {
    showDialog({
      callback: (action, value) => setResult(`${action}：${value || '空值'}`),
      defaultInputValue: '默认内容',
      inputPlaceholder: '请输入昵称',
      inputProps: { maxLength: 12 },
      message: '输入框预置 defaultInputValue，并限制最多 12 个字符。',
      showCancelButton: true,
      showInput: true,
      title: '非受控输入'
    });
  }

  function handleConfirm(value?: string) {
    setResult(`confirm：${value || '空值'}`);
  }

  return (
    <View className="gap-3 bg-background p-4">
      <View className="flex-row flex-wrap items-center gap-3">
        <Button
          variant="tonal"
          onPress={handleDefaultInput}
        >
          defaultInputValue
        </Button>
        <Button
          variant="outline"
          onPress={() => setShow(true)}
        >
          受控 inputValue
        </Button>
      </View>
      <Text className="text-sm text-muted-foreground">结果：{result}</Text>

      <Portal>
        <Dialog
          inputPlaceholder="请输入内容"
          inputProps={{ maxLength: 12 }}
          inputValue={inputValue}
          message="onInputChange 实时同步外部 inputValue。"
          show={show}
          showCancelButton
          showInput
          title="受控输入"
          onConfirm={handleConfirm}
          onInputChange={setInputValue}
          onUpdateShow={setShow}
        />
      </Portal>
    </View>
  );
};

export { DialogInput };

import { Button, Text, showConfirmDialog } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const DialogBeforeClose = () => {
  const [result, setResult] = useState('尚未操作');

  function handleSyncGuard() {
    showConfirmDialog({
      beforeClose: action => action === 'confirm',
      callback: action => setResult(`同步拦截最终结果：${action}`),
      message: '点击取消会被阻止，点击确认才会关闭。',
      title: '同步拦截'
    });
  }

  function handleAsyncGuard() {
    showConfirmDialog({
      beforeClose: action => {
        if (action === 'cancel') return true;

        return new Promise<boolean>(resolve => {
          setTimeout(() => resolve(true), 1500);
        });
      },
      callback: action => setResult(`异步拦截最终结果：${action}`),
      message: '点击确认后等待 1.5 秒，期间按钮显示 loading。',
      title: '异步拦截'
    });
  }

  return (
    <View className="gap-3 bg-background p-4">
      <View className="flex-row flex-wrap items-center gap-3">
        <Button
          variant="tonal"
          onPress={handleSyncGuard}
        >
          同步阻止取消
        </Button>
        <Button
          variant="tonal"
          onPress={handleAsyncGuard}
        >
          异步确认
        </Button>
      </View>
      <Text className="text-sm text-muted-foreground">{result}</Text>
    </View>
  );
};

export { DialogBeforeClose };

import { Button, Text, closeDialog, showDialog } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const DialogCloseMode = () => {
  const [lastAction, setLastAction] = useState<string>('—');

  async function handleBackdrop() {
    const action = await showDialog({
      closeOnBackdropPress: true,
      message: '点击遮罩关闭，同样按取消结算',
      title: '遮罩关闭'
    });

    setLastAction(action);
  }

  async function handleProgrammaticClose() {
    const pending = showDialog({ message: '2 秒后由代码关闭', title: '命令式关闭' });

    setTimeout(closeDialog, 2000);

    setLastAction(await pending);
  }

  return (
    <View className="gap-3 bg-background p-4">
      <View className="flex-row flex-wrap items-center gap-3">
        <Button
          variant="tonal"
          onPress={handleBackdrop}
        >
          点遮罩关闭
        </Button>
        <Button
          variant="tonal"
          onPress={handleProgrammaticClose}
        >
          代码关闭
        </Button>
        <Button
          variant="tonal"
          onPress={() =>
            showDialog({
              closeOnBackdropPress: false,
              closeOnBackPress: false,
              message: '遮罩点击和 Android 返回键都不会关闭，只能点击确认按钮。',
              title: '禁止外部关闭'
            })
          }
        >
          禁止外部关闭
        </Button>
      </View>
      <Text color="muted">最近一次操作：{lastAction}</Text>
    </View>
  );
};

export { DialogCloseMode };

import { Button, Dialog, Portal, Text } from '@skyroc/native-ui';
import { useState } from 'react';
import { View } from 'react-native';

const DialogDeclarative = () => {
  const [show, setShow] = useState(false);
  const [openedCount, setOpenedCount] = useState(0);
  const [closedCount, setClosedCount] = useState(0);

  return (
    <View className="gap-3 bg-background p-4">
      <Button
        variant="tonal"
        onPress={() => setShow(true)}
      >
        打开声明式 Dialog
      </Button>
      <View className="rounded-xl bg-muted p-3">
        <Text className="text-sm text-muted-foreground">
          已打开 {openedCount} 次，已关闭 {closedCount} 次
        </Text>
      </View>

      {/* 声明式 Dialog 不能落在 ScrollView 里面：JS 触摸响应链走的是 React 树，
          键盘弹起时 ScrollView 会在 capture 阶段抢走第一次点击用来收键盘（keyboardShouldPersistTaps 默认 never），
          放在里面的话带输入框的弹窗要点两下才关得掉。这里套 Portal，让它们改挂到 PortalHost 下，
          总览页把本 demo 放进 ScrollView 时也不受影响 */}
      <Portal>
        <Dialog
          message="show 与 onUpdateShow 由外部状态控制。"
          show={show}
          showCancelButton
          title="受控 Dialog"
          onClosed={() => setClosedCount(count => count + 1)}
          onOpened={() => setOpenedCount(count => count + 1)}
          onUpdateShow={setShow}
        />
      </Portal>
    </View>
  );
};

export { DialogDeclarative };

import { Button, Divider, Text, showConfirmDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const DialogCustomContent = () => {
  function handleOpen() {
    showConfirmDialog({
      children: (
        <View className="overflow-hidden rounded-xl border border-border">
          <View className="p-3">
            <Text className="font-medium text-foreground">自定义内容区域</Text>
            <Text className="mt-1 text-sm text-muted-foreground">这里由 children 渲染，可组合组件库内容。</Text>
          </View>
          <Divider />
          <View className="bg-muted p-3">
            <Text className="text-sm text-muted-foreground">边界、留白和层级不会改变 Dialog 行为。</Text>
          </View>
        </View>
      ),
      message: '正文下方追加自定义节点。',
      title: '自定义内容'
    });
  }

  return (
    <View className="bg-background p-4">
      <Button
        variant="tonal"
        onPress={handleOpen}
      >
        打开自定义内容
      </Button>
    </View>
  );
};

export { DialogCustomContent };

import { Button, showConfirmDialog, showDialog } from '@skyroc/native-ui';
import { View } from 'react-native';

const DialogStyles = () => {
  return (
    <View className="flex-row flex-wrap items-center gap-3 bg-background p-4">
      <Button
        variant="tonal"
        onPress={() =>
          showConfirmDialog({
            classNames: {
              confirmButton: 'bg-primary/10',
              header: 'pb-1',
              message: 'text-left',
              popup: 'w-[92%] max-w-[380px]',
              title: 'text-left'
            },
            message: 'popup 控制外层宽度，root 是卡片本身，其余 slot 逐个可覆盖',
            title: 'classNames 覆盖'
          })
        }
      >
        slot 覆盖
      </Button>
      <Button
        variant="tonal"
        onPress={() =>
          showDialog({
            className: 'rounded-3xl bg-carbon',
            classNames: { message: 'text-carbon-foreground', title: 'text-carbon-foreground' },
            message: 'className 覆盖的是卡片根节点',
            title: '深色卡片'
          })
        }
      >
        className 覆盖
      </Button>
    </View>
  );
};

export { DialogStyles };