Dialog Box Component

Dialog Box component can be used to render a dialog box.

<Dialog /> uses an additional package called gbs-fwk-core. This package is already shipped with the gbs-fwk-buildingblock so just import it as well.

Add <Dialog /> Component to App.tsx[or wherever you prefer to add].

App.tsx

import { Dialog } from 'gbs-fwk-buildingblock';
 
function App() {
  return (
    <div className="App">
      <Dialog />
    </div>
  );
}
 
export default App;

Props

Property	Type	Description
key	string	The unique identifier for the dialog box
type	string	The type of the dialog box
title	string	The title of the dialog box
content	string	The content of the dialog box
position	object	The position of the dialog box on the screen
okButton	object	The configuration for the "OK" button
cancelButton	object	The configuration for the "Cancel" button
width	string	The width of the dialog box

Types of Dialogs

There are two types of dialog types.

type: "alert" : Produces a alert dialog with one button(There is no need of cancelButton Props here.)
type: "confirm: Produces a dialog with a multiple option.

Usage

Here's an example of how to use the Dialog Box component:

Functional Component

App.tsx

import { messageService } from 'gbs-fwk-core';
 
export default function DeleteAction() {
  let subscription: any;
 
  const handleOnClick = () => {
    if (subscription) {
      subscription.unsubscribe();
    }
    subscription = messageService.getMessage().subscribe((message: any) => {
      if (message.key === '') {
        console.log(message.status);
      } else if (message.key === 'item_delete_callback') {
        console.log(message.status);
      }
    });
 
    messageService.sendMessage({
      key: 'dialog_alert',
      type: 'confirm', // *You can choose either "confirm" or "alert" here!
      title: 'Are you sure?',
      keyData: keyData, // for entity values(Optional)
      content: 'This is how a error look like!',
      position: { X: 'center', Y: 'center' },
      okButton: { text: "I'm in", icon: 'e-icons e-check' },
      cancelButton: { text: "I don't think so!", icon: 'e-icons e-close' },
      callbackUrl: 'item_delete_callback',
      width: '300px',
    });
  };
 
  return (
    <div>
      <div>Delete Action</div>
      <button onClick={handleOnClick}>Delete This!</button>
    </div>
  );
}

Class Component

App.tsx

import React from 'react';
import { messageService } from 'gbs-fwk-core';
 
class DeleteAction extends React.Component {
  subscription: any;
 
  handleOnClick = () => {
    if (subscription) {
      subscription.unsubscribe();
    }
    subscription = messageService.getMessage().subscribe((message: any) => {
      if (message.key === '') {
        console.log(message.status);
      } else if (message.key === 'item_delete_callback') {
        console.log(message.status);
      }
    });
 
    messageService.sendMessage({
      key: 'dialog_alert',
      type: 'alert', // *You can choose either "confirm" or "alert" here!
      title: 'Are you sure?',
      content: 'This is how a error look like!',
      position: { X: 'center', Y: 'center' },
      okButton: { text: "I'm in", icon: 'e-icons e-check' },
      cancelButton: { text: "I don't think so!", icon: 'e-icons e-close' },
      callbackUrl: 'item_delete_callback',
      width: '300px',
    });
  };
 
  render() {
    return (
      <div>
        <div>Delete Action</div>
        <button onClick={this.handleOnClick}>Delete This!</button>
      </div>
    );
  }
}
 
export default DeleteAction;

Date Picker Dropdown