Skip to main content

@appshare/core

Appshare core package provides a set of functions that are used across all Appshare apps.

Messages​

Appshare core package provides a set of function to display messages to the user.

setStackErrorMessage​

The setStackErrorMessage this function is used to show a error message to the user.

setStackDefaultMessage​

The setStackDefaultMessage function is used to show a default message to the user.

setStackSuccessMessage​

The setStackSuccessMessage function is used to show a success message to the user.

setStackWarningMessage​

The setStackWarningMessage function is used to show a warning message to the user.

Parameters​

  • stackMessage (Object): An object containing the properties of the stack message.
    • message (string): The main message text to be displayed.
    • detailMessage (string, optional): Additional details about the message.
    • closeButton (boolean, optional, default = false): Indicates whether the message should have a close button. If true, the message stays on the screen until it is dismissed either programmatically or through user interaction.
    • autoHideDuration (number, optional, default = null): The number of milliseconds to wait before automatically calling the onClose function. By default, messages get closed after 5000 milliseconds. Set autoHideDuration to null if you don't want messages to automatically close.
    • anchorOrigin (import("notistack").SnackbarOrigin, optional, default = null): The origin of the snackbar.
    • dismissAll (boolean, optional, default = false): If true, dismisses all existing messages.
    • action (function, optional, default = null): Callback function to be called when the action is clicked.
    • actionDesc (string, optional, default = "undo"): Description of the action.
    • actionIcon (JSX.Element, optional, default = null): Icon of the action.
    • onClose (function, optional, default = null): Callback function to be called when the close button is clicked.

Usage​

import {
  setStackErrorMessage,
  setStackDefaultMessage,
  setStackSuccessMessage,
  setStackWarningMessage,
} from "@appshare/core";

setStackErrorMessage({
  message: "An error occurred",
  detailMessage: "Please try again later",
  closeButton: true,
  autoHideDuration: 3000,
  anchorOrigin: { vertical: "top", horizontal: "center" },
  dismissAll: true,
  action: () => console.log("Action clicked"),
  actionDesc: "Retry",
  actionIcon: <RetryIcon />,
  onClose: () => console.log("Message closed"),
});

setStackDefaultMessage({
  message: "A message",
  detailMessage: "This is a default message",
  closeButton: true,
  autoHideDuration: 3000,
  anchorOrigin: { vertical: "top", horizontal: "center" },
  dismissAll: true,
  action: () => console.log("Action clicked"),
  actionDesc: "Retry",
  actionIcon: <RetryIcon />,
  onClose: () => console.log("Message closed"),
});

setStackSuccessMessage({
  message: "Success",
  detailMessage: "This is a success message",
  closeButton: true,
  autoHideDuration: 3000,
  anchorOrigin: { vertical: "top", horizontal: "center" },
  dismissAll: true,
  action: () => console.log("Action clicked"),
  actionDesc: "Retry",
  actionIcon: <RetryIcon />,
  onClose: () => console.log("Message closed"),
});

setStackWarningMessage({
  message: "Warning",
  detailMessage: "This is a warning message",
  closeButton: true,
  autoHideDuration: 3000,
  anchorOrigin: { vertical: "top", horizontal: "center" },
  dismissAll: true,
  action: () => console.log("Action clicked"),
  actionDesc: "Retry",
  actionIcon: <RetryIcon />,
  onClose: () => console.log("Message closed"),
});

Dialog​

setConfirmDialog​

The setConfirmDialog function is used to display a confirmation dialog with various customizable options.

Parameters​

The function accepts an object with the following properties:

  • open (boolean): Indicates whether the dialog should be open or closed.
  • title (string, optional): The title of the dialog.
  • message (string | object, optional): The message to be displayed in the dialog. If an object is provided, the message property of the object will be used.
  • confirmCallBack (confirmCallBack, optional): A callback function that is called when the dialog is confirmed or canceled. The callback receives two parameters:
    • flag (boolean): Indicates whether the dialog was confirmed (true) or canceled (false).
    • clickButton (string): Indicates which button was clicked.
  • showCancelButton (boolean, optional): If true, a cancel button will be displayed in the dialog. Default is false.
  • hideActionButtons (boolean, optional): If true, all action buttons will be hidden. Default is false.
  • overrideCancelText (string, optional): Custom text for the cancel button.
  • overrideOkText (string, optional): Custom text for the OK button.
  • messageWhiteSpace (string, optional): Controls the white-space CSS property of the message. Default is "normal". Possible values are "normal", "nowrap", "pre", "pre-line", "pre-wrap", "initial", "inherit".
  • type (string, optional): The type of the dialog. Possible values are "error", "warning", "info", "success".
  • titleIconCustom (React.ReactNode, optional): Custom icon to be displayed in the dialog title.
  • disableClickAway (boolean, optional): If true, clicking outside the dialog will not close it.
  • zIndex (number, optional): The z-index of the dialog.
  • messageTypographyProps (TypographyProps, optional): Props for the Typography component used for the message.
  • dialogActionsProps (DialogActionsProps, optional): Props for the DialogActions component.
  • actions (array, optional): Custom actions to be displayed in the dialog. Each action is an object with the following properties:
    • text (string): The text of the action button.
    • btnProps (ButtonProps): Props for the action button.
    • onClick (function): A function to be called when the action button is clicked. The function receives two parameters:
      • id (number): The ID of the action.
      • label (string): The label of the action.

Usage​

import { setConfirmDialog } from "./path/to/ReduxActions";

setConfirmDialog({
  open: true,
  title: "Confirm Action",
  message: "Are you sure you want to proceed?",
  confirmCallBack: (flag, clickButton) => {
    if (flag) {
      console.log("Confirmed");
    } else {
      console.log("Canceled");
    }
  },
  showCancelButton: true,
  overrideCancelText: "No",
  overrideOkText: "Yes",
  type: "warning",
});

Processing Circle​

setProcessingCircle​

The setProcessingCircle function is used to show or hide a processing circle.

Usage​

import { setProcessingCircle } from "@appshare/core";

setProcessingCircle(true); // Show processing circle
setProcessingCircle(false); // Hide processing circle

setProcessingCircle("Loading Orders"); // Show processing circle with custom message

translate​

The translate function is used to translate a string to the current Active language.

Usage​

import { translate } from "@appshare/core";
translate("Hello World");

when translate functions is used in the app. Parameter value is automatically added to the app config in the cloud and the value is translated to the current active language.