Popconfirm

Popconfirm UI Component

Installation

npm i @synerise/ds-popconfirm
or
yarn add @synerise/ds-popconfirm

Usage

import Popconfirm from '@synerise/ds-popconfirm';
<Popconfirm title="title" onConfirm={() => alert('confirm')} onCancel={() => alert('cancel')}>
<button>text</button>
</Popconfirm>;

Demo

API

PropertyDescriptionTypeDefault
cancelTextText of the Cancel buttonstringCancel
okTextText of the Confirm buttonstringOK
okTypeButton type of the Confirm buttonstringprimary
titleTitle of the confirmation boxstring / React.ReactNode-
descriptionDescription of the confirmation boxstring / React.ReactNode-
imagesUrls of images displayed as a carouselstring[][]
imagesAutoplayWhether to autoplay imagesbooleanfalse
imagesAutoplaySpeedSpeed of autoplay [ms]number5000
onCancelCallback of cancel(e: Event) => void-
onConfirmCallback of confirmation(e: Event) => void-
iconCustomize icon of confirmationReact.ReactNode<Icon type="exclamation-circle" />
disabledWhether component is disabledbooleanfalse

Popcofirm.ConfirmMessage

Usage

import Popconfirm from '@synerise/ds-popconfirm';
<Popconfirm.ConfirmMessage
title='Copied! Keep it somewhere safe.'
icon={<Icon component={<WarningFillM />} color={'#ffc300'} />}
displayDuration={5000}
placement='topLeft'}
onClick={(showMessage) => {
do sth...
showMessage();
}}
>
<Button>
Click
</Button>
</Popconfirm.ConfirmMessage>```
## Demo
<iframe src="/storybook-static/iframe.html?id=components-Popconfirm--confirmmessage"></iframe>
## API
| Property | Description | Type | Default |
| ------------ | ------------------------------------------------ | --------------------- | -------- |
| title | text confirm message | string | - |
| icon | icon component | React.ReactNode | - |
| displayDuration | confirm message display time in ms | number | 5000 |
| placement | position of confirm message `left`, `top`, `right`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `leftTop`, `leftBottom,`, `rightTop`, `rightBottom` | string | `topLeft`|
| onClick | method which returns a showConfirmMessage callback | (showConfirmMessage: () => void) => void | - |