design-react-kit/dist/Notification/NotificationManager.cjs.map

Componenti React per Bootstrap 5

{"version":3,"sources":["../../src/Notification/NotificationManager.tsx","../../src/Notification/Notification.tsx","../../src/Notification/NotificationContent.tsx","../../src/Notification/usePosition.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from 'react';\nimport { cssTransition, useToastContainer } from 'react-toastify';\nimport { Notification } from './Notification';\nimport { getBorderStyleFix } from './NotificationContent';\nimport { NotificationCommonProps } from './types';\nimport { PositionContext } from './usePosition';\n\nconst KitTransition = /* @__PURE__ */ cssTransition({\n  enter: `d-block`,\n  exit: `d-none`,\n  appendPosition: false\n});\n\nexport interface NotificationManagerProps extends NotificationCommonProps {\n  /* Stili inline da applicare al container */\n  style?: CSSProperties;\n}\n\nexport const NotificationManager = (props: NotificationManagerProps) => {\n  const customStyle: CSSProperties = {\n    ...props.style,\n    ...getBorderStyleFix(props.fix)\n  };\n\n  const hookProps = {\n    autoClose: props.duration ?? 6000,\n    closeOnClick: props.closeOnClick ?? true,\n    hideProgressBar: true,\n    transition: KitTransition,\n    rtl: false,\n    pauseOnHover: true,\n    pauseOnFocusLoss: true,\n    newestOnTop: false, // TODO: sort this out\n    draggable: false,\n    role: 'alert',\n    style: customStyle,\n    enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed\n  };\n\n  const { getToastToRender, containerRef, isToastActive } = useToastContainer(hookProps);\n\n  const { containerId, style, fix } = props;\n\n  return (\n    <PositionContext.Provider value={fix}>\n      <div ref={containerRef} id={containerId as string} style={style}>\n        {getToastToRender((_, toastList) => {\n          return toastList.map(({ content, props: toastProps }) => {\n            return (\n              <Notification\n                {...toastProps}\n                isIn={isToastActive(toastProps.toastId)}\n                key={`notification-${toastProps.key}`}\n              >\n                {content as ReactNode}\n              </Notification>\n            );\n          });\n        })}\n      </div>\n    </PositionContext.Provider>\n  );\n};\n","import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react';\nimport { cssTransition, ToastProps, useToast } from 'react-toastify';\nimport { NotificationToastProps } from './NotificationContent';\nimport { NotificationCommonProps } from './types';\n\nexport type NotificationProps = Omit<ToastProps, 'transition'> & NotificationCommonProps & NotificationToastProps;\n\nconst dummyTransition = /* @__PURE__ */ cssTransition({ enter: '', exit: '' });\n\nexport const Notification: FC<PropsWithChildren<NotificationProps>> = (props) => {\n  const { toastRef, eventHandlers } = useToast({\n    ...props,\n    transition: dummyTransition\n  });\n  const { children, autoClose, onClick, role, toastId, deleteToast, closeToast, isIn } = props;\n\n  const customStyle: CSSProperties = {\n    display: isIn ? 'block' : 'none'\n  };\n\n  useEffect(() => {\n    if (!isIn) deleteToast();\n  }, [isIn]);\n\n  useEffect(() => {\n    let timer: NodeJS.Timeout | number;\n    if (autoClose) {\n      timer = setTimeout(() => closeToast(), autoClose);\n    }\n    return () => {\n      if (timer != null) {\n        clearTimeout(Number(timer));\n      }\n    };\n  }, [autoClose, closeToast]);\n  return (\n    <div\n      id={toastId as string}\n      onClick={onClick}\n      {...eventHandlers}\n      style={customStyle}\n      ref={toastRef}\n      {...(isIn && { role: role })}\n    >\n      {children}\n    </div>\n  );\n};\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport classNames from 'classnames';\nimport React, { CSSProperties, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { NotificationCommonProps } from './types';\nimport { usePosition } from './usePosition';\n\nexport interface NotificationToastProps {\n  /** Indica quale icona affiancare al titolo. */\n  icon?: string;\n  /** Lo stato corrente della notifica (modifica il colore delle icone e bordo) */\n  state?: 'success' | 'error' | 'info' | 'warning';\n  /** Il titolo della notifica */\n  title?: string;\n}\n\ntype NotificationElementProps = {\n  closeToast?: () => void;\n  toastProps?: any;\n  title: string;\n  body?: ReactNode;\n  options: NotificationOptions;\n};\n\nexport const getBorderStyleFix = (fix: NotificationCommonProps['fix']) => {\n  const borderReset = ['top', 'bottom', 'right', 'left']\n    .filter((curPosition) => (fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'))\n    .map(\n      (borderPosition) =>\n        `border${borderPosition[0].toUpperCase() + borderPosition.substring(1)}` as\n          | 'borderTop'\n          | 'borderBottom'\n          | 'borderLeft'\n          | 'borderRight'\n    );\n\n  const customStyle: CSSProperties = {};\n  for (const borderPos of borderReset) {\n    customStyle[borderPos] = 'none';\n  }\n  return customStyle;\n};\n\nexport type NotificationOptions = NotificationCommonProps &\n  Pick<NotificationToastProps, 'icon' | 'state'> & {\n    /* Quando abilitato mostra un pulsante per la chiusura del toast prima della chiusura naturale. Default: `false`. */\n    dismissable?: boolean;\n    /* Una funzione invocata all'apertura della notifica */\n    onOpen?: <T = NotificationElementProps>(props: T) => void;\n    /* Una funziona invocata alla chiusura nella notifica */\n    onClose?: <T = NotificationElementProps>(props: T) => void;\n  };\n\nfunction pickIcon(state: NotificationToastProps['state']) {\n  switch (state) {\n    case 'error':\n      return 'it-close-circle';\n    case 'info':\n      return 'it-info-circle';\n    case 'warning':\n      return 'it-error';\n    case 'success':\n      return 'it-check-circle';\n    default:\n      return undefined;\n  }\n}\n\nfunction NotificationElement({ closeToast, toastProps, title, body, options }: NotificationElementProps) {\n  const globalFix = usePosition();\n  const { icon: userIcon, state, fix: localFix, dismissable } = options;\n  const fixPosition = localFix == null && globalFix ? globalFix : localFix || globalFix;\n  const { autoClose, style } = toastProps;\n  const content = typeof body === 'string' ? <p>{body}</p> : body;\n  const icon = userIcon || pickIcon(state);\n\n  const borderFixes = getBorderStyleFix(fixPosition);\n\n  const wrapperClass = classNames('notification', state, {\n    [`${fixPosition}-fix`]: fixPosition,\n    'with-icon': icon,\n    dismissable: dismissable || !autoClose\n  });\n\n  // Need to override some toast styling here\n  const customStyle: CSSProperties = {\n    ...style,\n    ...borderFixes,\n    // force a display as the notification class has a \"display: none\" set\n    display: 'block'\n  };\n\n  return (\n    <div className={wrapperClass} style={customStyle}>\n      <h5>\n        {title}\n        {icon ? <Icon icon={icon} /> : null}\n      </h5>\n      {content}\n      {(!autoClose || dismissable) && (\n        <Button className='notification-close' onClick={closeToast}>\n          <Icon icon='it-close' />\n          <span className='visually-hidden'>Chiudi notifica: {title}</span>\n        </Button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Internal use only. Exported for documentation purposes.\n * @internal\n */\nexport const createNotification = (\n  title: string,\n  body: ReactNode | undefined,\n  options: NotificationOptions,\n  closeToast?: () => void,\n  toastProps?: any\n) => (\n  <NotificationElement title={title} body={body} options={options} closeToast={closeToast} toastProps={toastProps} />\n);\n","import { createContext, useContext } from 'react';\nimport { NotificationCommonProps } from './types';\n\nexport const PositionContext = /* @__PURE__ */ createContext<NotificationCommonProps['fix']>(undefined);\n\nexport function usePosition() {\n  const context = useContext(PositionContext);\n  return context;\n}\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAgD,sBAChDC,EAAiD,0BCDjD,IAAAC,EAAuE,sBACvEC,EAAoD,0BAM9CC,KAAkC,iBAAc,CAAE,MAAO,GAAI,KAAM,EAAG,CAAC,EAEhEC,EAA0DC,GAAU,CAC/E,GAAM,CAAE,SAAAC,EAAU,cAAAC,CAAc,KAAI,YAAS,CAC3C,GAAGF,EACH,WAAYF,CACd,CAAC,EACK,CAAE,SAAAK,EAAU,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,QAAAC,EAAS,YAAAC,EAAa,WAAAC,EAAY,KAAAC,CAAK,EAAIV,EAEjFW,EAA6B,CACjC,QAASD,EAAO,QAAU,MAC5B,EAEA,sBAAU,IAAM,CACTA,GAAMF,EAAY,CACzB,EAAG,CAACE,CAAI,CAAC,KAET,aAAU,IAAM,CACd,IAAIE,EACJ,OAAIR,IACFQ,EAAQ,WAAW,IAAMH,EAAW,EAAGL,CAAS,GAE3C,IAAM,CACPQ,GAAS,MACX,aAAa,OAAOA,CAAK,CAAC,CAE9B,CACF,EAAG,CAACR,EAAWK,CAAU,CAAC,EAExB,EAAAI,QAAA,cAAC,OACC,GAAIN,EACJ,QAASF,EACR,GAAGH,EACJ,MAAOS,EACP,IAAKV,EACJ,GAAIS,GAAQ,CAAE,KAAMJ,CAAK,GAEzBH,CACH,CAEJ,EC9CA,IAAAW,EAAuB,2BACvBC,EAAgD,sBCFhD,IAAAC,EAA0C,iBAG7BC,KAAkC,iBAA8C,MAAS,EDsB/F,IAAMC,EAAqBC,GAAwC,CACxE,IAAMC,EAAc,CAAC,MAAO,SAAU,QAAS,MAAM,EAClD,OAAQC,GAAiBF,IAAQ,OAASE,IAAgB,QAAUA,IAAgB,MAAO,EAC3F,IACEC,GACC,SAASA,EAAe,CAAC,EAAE,YAAY,EAAIA,EAAe,UAAU,CAAC,CAAC,EAK1E,EAEIC,EAA6B,CAAC,EACpC,QAAWC,KAAaJ,EACtBG,EAAYC,CAAS,EAAI,OAE3B,OAAOD,CACT,EFnCA,IAAME,KAAgC,iBAAc,CAClD,MAAO,UACP,KAAM,SACN,eAAgB,EAClB,CAAC,EAOYC,EAAuBC,GAAoC,CACtE,IAAMC,EAA6B,CACjC,GAAGD,EAAM,MACT,GAAGE,EAAkBF,EAAM,GAAG,CAChC,EAEMG,EAAY,CAChB,UAAWH,EAAM,UAAY,IAC7B,aAAcA,EAAM,cAAgB,GACpC,gBAAiB,GACjB,WAAYF,EACZ,IAAK,GACL,aAAc,GACd,iBAAkB,GAClB,YAAa,GACb,UAAW,GACX,KAAM,QACN,MAAOG,EACP,qBAAsBD,EAAM,aAAe,IAC7C,EAEM,CAAE,iBAAAI,EAAkB,aAAAC,EAAc,cAAAC,CAAc,KAAI,qBAAkBH,CAAS,EAE/E,CAAE,YAAAI,EAAa,MAAAC,EAAO,IAAAC,CAAI,EAAIT,EAEpC,OACE,EAAAU,QAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOF,GAC/B,EAAAC,QAAA,cAAC,OAAI,IAAKL,EAAc,GAAIE,EAAuB,MAAOC,GACvDJ,EAAiB,CAACQ,EAAGC,IACbA,EAAU,IAAI,CAAC,CAAE,QAAAC,EAAS,MAAOC,CAAW,IAE/C,EAAAL,QAAA,cAACM,EAAA,CACE,GAAGD,EACJ,KAAMT,EAAcS,EAAW,OAAO,EACtC,IAAK,gBAAgBA,EAAW,GAAG,IAElCD,CACH,CAEH,CACF,CACH,CACF,CAEJ","names":["NotificationManager_exports","__export","NotificationManager","__toCommonJS","import_react","import_react_toastify","import_react","import_react_toastify","dummyTransition","Notification","props","toastRef","eventHandlers","children","autoClose","onClick","role","toastId","deleteToast","closeToast","isIn","customStyle","timer","React","import_classnames","import_react","import_react","PositionContext","getBorderStyleFix","fix","borderReset","curPosition","borderPosition","customStyle","borderPos","KitTransition","NotificationManager","props","customStyle","getBorderStyleFix","hookProps","getToastToRender","containerRef","isToastActive","containerId","style","fix","React","PositionContext","_","toastList","content","toastProps","Notification"]}