ra-custom-confirm

    1.1.2 • Public • Published

    ra-custom-confirm

    npm version MIT License Build Status

    Your custom confirm dialog for React-admin.

    Demo

    Installation

    # via npm
    npm install --save ra-custom-confirm
    
    # via yarn
    yarn add ra-custom-confirm

    Demo

    After having cloned this repository, run the following commands:

    cd example/
    yarn install
    yarn start

    And then browse to http://localhost:8080/.

    The credentials are login/password

    Usage

    import React, { Fragment, useState } from 'react';
    import Share from '@material-ui/icons/Share';
    import ErrorOutline from '@material-ui/icons/ErrorOutline';
    import CustomConfirm from 'ra-custom-confirm';
    
    // Define your custom title of confirm dialog
    const CustomConfirmTitle = 'Are you sure you want to share?';
    
    // Define your custom contents of confirm dialog
    const CustomConfirmContent = props => {
      return (
        <SimpleShowLayout {...props} >
          <TextField source='title' label='title' />
          <TextField source='user' label='user' />
          <TextField source='date' label='date' />
          <RichTextField source='description' label='description' />
        </SimpleShowLayout>
      );
    };
    
    const ShareButton = props => {
      const [open, setOpen] = useState(false);
    
      const handleClick = (event) => {
        event.stopPropagation();            // support with rowClick on Datagrid
        setOpen(true);
      };
    
      const handleDialogClose = () => setOpen(false);
    
      const handleConfirm = () => {
        // do something here
        setOpen(false);
      };
    
      return (
        <Fragment>
          <Button label="Share" onClick={handleClick}><Share /></Button>
          <CustomConfirm {...props}
            isOpen={open}
            title={CustomConfirmTitle}      // your custom title of confirm dialog
            content={CustomConfirmContent}  // your custom contents of confirm dialog
            confirm='Share'                 // label of confirm button (default: 'Confirm')
            confirmColor='primary'          // color of confirm button ('primary' or 'warning', default: 'primary')
            ConfirmIcon={Share}             // icon of confirm button from @material-ui/icons (default: 'CheckCircle')
            cancel='Cancel'                 // label of cancel button (default: 'Cancel')
            CancelIcon={ErrorOutline}       // icon of cancel button from @material-ui/icons (default: 'ErrorOutline')
            onConfirm={handleConfirm}
            onClose={handleDialogClose}
          />
        </Fragment>
      );
    }
    
    const PostList = props => {
      const translate = useTranslate();
      return (
        <List {...props} >
          <Datagrid>
            <TextField source='title' label='title' />
            <TextField source='date' label='date' />
            <TextField source='user' label='user' />
            <ShareButton />
          </Datagrid>
        </List>
      );
    };
    
    export default PostList;

    props

    Name Type Description Default
    title string your custom title of confirm dialog
    content element your custom contents of confirm
    isOpen bool dialog open or not false
    onClose func function on close
    onConfirm func function on confirm
    confirm string label of confirm button 'ra.action.confirm' (Confirm in English)
    confirmColor string color of confirm button ('primary' or 'warning') 'primary'
    ConfirmIcon element icon of confirm button from @material-ui/icons CheckCircle
    cancel string label of cancel button 'ra.action.cancel' (Cancel in English)
    CancelIcon element icon of cancel button from @material-ui/icons ErrorOutline

    License

    This library is licensed under the MIT License.

    Install

    npm i ra-custom-confirm

    DownloadsWeekly Downloads

    36

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    18.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar