PlPopconfirm

페이지 한가운데가 아니라 물음이 일어난 자리에서 묻습니다. 그 행의 삭제 버튼을 눌렀다면 확인도 그 행 옆에서 받습니다.

React

import { PlPopconfirm } from 'plass-ui';

<PlPopconfirm
  title="Delete this row?"
  description="It cannot be undone."
  confirmLabel="Delete"
  onConfirm={() => remove(row)}
  trigger={<PlButton color="danger">Delete</PlButton>}
/>;

import 'package:plass_ui/plass_ui.dart';

PlPopconfirm(
  open: asking,
  onOpenChanged: (bool next) => setState(() => asking = next),
  title: const Text('Delete this row?'),
  confirmLabel: const Text('Delete'),
  onConfirm: () => remove(row),
  trigger: PlButton(
    color: PlassColor.danger,
    onPressed: () => setState(() => asking = true),
    child: const Text('Delete'),
  ),
);

Props

Prop	타입	기본값	설명
trigger *	ReactElement	—	이것을 여는 element. 원래 갖고 있던 것은 그대로 유지합니다
title	ReactNode	—	질문. popup에 이름을 주는 제목입니다
description	ReactNode	—	아래 한 줄. 무슨 일이 일어나는지 쓰세요
confirmLabel	ReactNode	'Confirm'	예라고 답하는 버튼의 문구
cancelLabel	ReactNode	'Cancel'	아니오라고 답하는 버튼의 문구
onConfirm	() => void | Promise<unknown>	—	확인이 하는 일. promise는 기다립니다 — resolve될 때만 popup이 닫히고, reject는 잡혀서 더 가지 않습니다
onCancel	() => void	—	취소가 닫는 것 말고 하는 일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'danger'	확인 버튼의 색 역할
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	popup과 두 버튼의 크기
side공통	'top' | 'right' | 'bottom' | 'left'	'top'	trigger의 어느 가장자리에 열릴지
align공통	'start' | 'center' | 'end'	'center'	그 가장자리 위 어디에 놓일지
width	number | string	280	시트가 커질 수 있는 최대 너비
open	boolean	—	popup이 열려 있는지. 제어하려면 onOpenChange와 함께
defaultOpen	boolean	—	제어하지 않을 때 열린 채 시작할지
onOpenChange	(open: boolean) => void	—	열리거나 닫혔을 때

Prop	타입	기본값	설명
open *	bool	—	popup이 올라와 있는지. 여기의 다른 모든 상태와 마찬가지로 controlled입니다
trigger *	Widget	—	이것을 여는 element. 원래 갖고 있던 것은 그대로 유지합니다
onOpenChanged	ValueChanged<bool>?	—	열리거나 닫혔을 때
title	Widget?	—	질문. popup에 이름을 주는 제목입니다
description	Widget?	—	아래 한 줄. 무슨 일이 일어나는지 쓰세요
confirmLabel	Widget	Text('Confirm')	예라고 답하는 버튼의 문구
cancelLabel	Widget	Text('Cancel')	아니오라고 답하는 버튼의 문구
onConfirm	FutureOr<void> Function()?	—	확인이 하는 일. promise는 기다립니다 — resolve될 때만 popup이 닫히고, reject는 잡혀서 더 가지 않습니다
onCancel	VoidCallback?	—	취소가 닫는 것 말고 하는 일
color공통	PlassColor	PlassColor.danger	확인 버튼의 색 역할
size공통	PlassSize	PlassSize.md	popup과 두 버튼의 크기
side공통	PlassSide	PlassSide.top	trigger의 어느 가장자리에 열릴지
align공통	PlassAlign	PlassAlign.center	그 가장자리 위 어디에 놓일지
width	double	280	시트가 커질 수 있는 최대 너비

open은 이 패키지의 모든 상태와 마찬가지로 controlled입니다. uncontrolled 형태도, defaultOpen도 없습니다. onConfirm은 FutureOr<void>를 돌려주는데, "promise는 기다린다"의 Dart 모양입니다. 평범한 콜백이면 바로 닫히고, Future이면 완료될 때까지 질문을 붙잡아 둡니다.

두 버튼은 Row가 아니라 Wrap에 놓입니다. 그래서 시트에 맞지 않는 번역된 label 쌍은 넘치는 대신 줄바꿈합니다.

popconfirm인가 confirm dialog인가

차이는 각각이 얼마나 방해하는가입니다.

PlConfirmProvider	페이지를 빼앗습니다. 그럴 만한 질문(계정 삭제, 한 시간짜리 작업 버리기)을 위한 것입니다
PlPopconfirm	그것이 묻는 대상 옆에 나타납니다. 표의 나머지는 여전히 읽히고, Escape는 사용자를 있던 자리로 정확히 돌려놓습니다

판단 기준은 실수로 답했을 때 무슨 일이 생기느냐입니다. 답이 "되돌릴 수 있다"라면 이쪽입니다.

color가 여기서는 danger이고 PlButton에서는 primary인데, 모순이 아닙니다. 저장할지 묻는 데 popconfirm을 쓰는 사람은 없습니다.

Examples

시간이 걸리는 confirm

onConfirm은 promise를 돌려줄 수 있습니다. 버튼은 그것이 끝날 때까지 loading 상태를 보이고, resolve될 때만 popup이 닫힙니다. 실패한 요청은 성공한 척하는 대신 질문을 화면에 남깁니다. 돌고 있는 동안 Escape는 무시됩니다. 진행 중인 요청은 도중에 버릴 것이 아닙니다.

React

import { PlButton, PlPopconfirm } from 'plass-ui';

export default function PopconfirmAsync() {
  return (
    <PlPopconfirm
      title="Revoke this key?"
      description="Anything using it stops working."
      confirmLabel="Revoke"
      trigger={<PlButton color="danger">Revoke key</PlButton>}
      onConfirm={() => new Promise((resolve) => setTimeout(resolve, 1200))}
    />
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class PopconfirmAsync extends StatefulWidget {
  const PopconfirmAsync({super.key});

  @override
  State<PopconfirmAsync> createState() => _PopconfirmAsyncState();
}

class _PopconfirmAsyncState extends State<PopconfirmAsync> {
  bool _open = false;

  @override
  Widget build(BuildContext context) {
    return PlPopconfirm(
      open: _open,
      onOpenChanged: (bool next) => setState(() => _open = next),
      title: const Text('Revoke this key?'),
      description: const Text('Anything using it stops working.'),
      confirmLabel: const Text('Revoke'),
      onConfirm: () => Future<void>.delayed(const Duration(milliseconds: 1200)),
      trigger: PlButton(
        color: PlassColor.danger,
        onPressed: () => setState(() => _open = true),
        child: const Text('Revoke key'),
      ),
    );
  }
}

reject는 잡히고 더 가지 않습니다. 질문을 남겨 두는 것이 이 컴포넌트가 실패에 빚진 전부이고, 그 실패가 무엇을 뜻하는지 는 여러분의 것입니다. onConfirm이 그것을 알릴 자리이고, 보통은 toast입니다.

side와 align

기본은 trigger 위로 열립니다. 다음 행을 덮을 가능성이 가장 낮은 자리입니다. side와 align은 PlPopover 자신의 것입니다.

<PlPopconfirm side="right" align="start" … />

Accessibility

• PlPopover입니다. popup은 title로 이름 붙고 description으로 설명되는 role="dialog"이며, focus가 안으로 들어가고 닫히면 trigger로 돌아옵니다.
• focus는 확인 버튼에 떨어집니다. PlConfirmProvider와 반대이고 일부러 그렇습니다. popconfirm은 그것이 묻고 있는 바로 그 버튼이 연 것이므로, 사용자는 이미 원하는 바를 한 번 말했습니다. modal은 따져 봐야 하는 질문을 위한 것입니다.
• 닫기 버튼이 없습니다. 두 답이 두 버튼이고, 어느 쪽도 아닌 세 번째 출구는 답이 둘인 질문의 세 번째 답입니다.
• 버튼은 무엇을 하는지로 이름 붙이세요. "예"와 "아니오"가 아니라 "삭제"와 "취소"입니다.