@rivtn/noseur 1.0.0

package/dist/esm/overlay/Message.js

@@ -0,0 +1,187 @@
+import "./Overlay.css";
+import { Portal } from "./Portal";
+import { Timer } from "../utils/Timer";
+import { Classname } from "../utils/Classname";
+import React from 'react';
+import { Alignment } from "../constants/Alignment";
+import { MicroBuilder } from "../utils/MicroBuilder";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Transition } from "../constants/Transition";
+import { CSSTransition } from 'react-transition-group';
+import { ProgressBar } from "../misc/ProgressBar";
+class MessageComponent extends React.Component {
+    static defaultProps = {
+        lifetime: 10000,
+        transitionTimeout: 1000,
+        transition: Transition.BOUNCE_IN_OUT,
+    };
+    state = {
+        mount: false,
+        props: this.props,
+    };
+    timer;
+    progressBarComponent;
+    transitionNodeRef;
+    constructor(props) {
+        super(props);
+        this.onEnter = this.onEnter.bind(this);
+        this.onClose = this.onClose.bind(this);
+        this.onClick = this.onClick.bind(this);
+        this.onExited = this.onExited.bind(this);
+        this.onEntered = this.onEntered.bind(this);
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+        this.onTimerAction = this.onTimerAction.bind(this);
+        this.transitionNodeRef = React.createRef();
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            close: this.onClose,
+            update: (messageProps, borrowLifetime = true) => {
+                const shouldNowBeSticky = messageProps.sticky;
+                const currentlySticky = this.state.props.sticky;
+                this.setState({ props: ObjectHelper.merge(this.state.props, messageProps) }, (() => {
+                    if (currentlySticky && !shouldNowBeSticky) {
+                        if (this.timer) {
+                            if (borrowLifetime)
+                                this.timer.resume();
+                            else
+                                this.timer.restart(this.state.props.lifetime);
+                        }
+                        else {
+                            this.onEntered();
+                        }
+                        return;
+                    }
+                    if (!this.timer)
+                        return;
+                    if (!currentlySticky && shouldNowBeSticky) {
+                        this.timer.pause();
+                        return;
+                    }
+                    if (borrowLifetime)
+                        return;
+                    this.timer.restart(this.state.props.lifetime);
+                }).bind(this));
+            }
+        });
+        this.setState({ mount: true });
+    }
+    componentWillUnmount() {
+        if (!this.timer)
+            return;
+        this.timer.stop();
+        this.timer = undefined;
+    }
+    onEnter() {
+        this.props.onEnterDOM && this.props.onEnterDOM();
+    }
+    onEntered() {
+        if (this.state.props.sticky)
+            return;
+        this.timer = new Timer({
+            delay: 800,
+            timeout: this.state.props.lifetime,
+            isInterval: !!this.state.props.showProgressbar,
+            cbs: {
+                onAction: this.onTimerAction,
+                onEnd: () => {
+                    this.onClose(true);
+                },
+            }
+        });
+        this.timer.start();
+    }
+    onExited() {
+        this.props.onExitDOM && this.props.onExitDOM();
+    }
+    onTimerAction(percentage) {
+        if (!this.progressBarComponent)
+            return;
+        this.progressBarComponent.setValue(100 - percentage);
+    }
+    onClose(fromTimer = false) {
+        this.componentWillUnmount();
+        this.setState({ mount: false });
+        if (!fromTimer)
+            this.props.onClose && this.props.onClose();
+    }
+    onMouseEnter(event) {
+        this.props.onMouseEnter && this.props.onMouseEnter(event);
+        if (this.props.pauseDelayOnHover && this.timer)
+            this.timer.pause();
+    }
+    onMouseLeave(event) {
+        this.props.onMouseLeave && this.props.onMouseLeave(event);
+        if (this.state.props.pauseDelayOnHover && this.timer)
+            this.timer.resume();
+    }
+    onClick(event) {
+        if (this.props.closeOnClick)
+            this.onClose();
+        this.props.onAction && this.props.onAction();
+        this.props.onClick && this.props.onClick(event);
+    }
+    renderIcon(hasSiblings) {
+        return MicroBuilder.buildIcon(this.state.props.icon, {
+            applyFaScheme: true,
+            style: { marginLeft: 10 },
+            relativeAlignment: (hasSiblings ? Alignment.LEFT : undefined),
+            scheme: (this.state.props.foreScheme ? this.state.props.scheme : undefined),
+        });
+    }
+    renderCloseIcon(contentIsPresent) {
+        const scheme = this.props.attrsRelay?.closeIcon?.scheme ?? (this.state.props.foreScheme ? this.state.props.scheme : undefined);
+        const className = Classname.build("fa fa-times", (scheme ? `${scheme}-tx-hv` : null), this.props.attrsRelay?.closeIcon?.className);
+        return (React.createElement("i", { onClick: (e) => {
+                e.stopPropagation();
+                this.onClose();
+            }, className: className, id: this.props.attrsRelay?.closeIcon?.id, style: { marginLeft: (contentIsPresent ? 15 : 0), ...this.props.attrsRelay?.closeIcon?.style } }));
+    }
+    renderContent() {
+        const className = Classname.build("noseur-message-content", this.props.attrsRelay?.content?.className);
+        const content = (this.state.props.content instanceof Function ? this.state.props.content(this.props.attrsRelay?.content) : this.state.props.content);
+        return (React.createElement("div", { className: className, id: this.props.attrsRelay?.content?.id }, content));
+    }
+    renderProgressBar(scheme) {
+        const cachedSelfRef = this.props.attrsRelay?.progressBar?.manageRef;
+        const cachedClassName = this.props.attrsRelay?.progressBar?.className;
+        const progressProps = {
+            ...this.props.attrsRelay?.progressBar,
+            value: 100,
+            className: Classname.build(cachedClassName),
+            manageRef: (r) => {
+                if (!r)
+                    return;
+                this.progressBarComponent = r;
+                if (cachedSelfRef)
+                    ObjectHelper.resolveRef(cachedSelfRef, r);
+            }
+        };
+        return (React.createElement(ProgressBar, { ...progressProps, noLabel: progressProps.noLabel || true, scheme: progressProps.scheme ?? (this.state.props.foreScheme ? this.state.props.scheme : (scheme ? `${scheme}-bg-accent` : undefined)) }));
+    }
+    render() {
+        const transition = this.state.props.transition;
+        const content = (this.state.props.content ? this.renderContent() : null);
+        const closeIcon = (this.state.props.sticky ? null : this.renderCloseIcon(!!content));
+        const icon = (this.state.props.icon ? this.renderIcon(!!content || !!closeIcon) : null);
+        const scheme = (!this.state.props.foreScheme && this.state.props.scheme ? this.state.props.scheme : null);
+        const progressBar = (this.state.props.showProgressbar ? this.renderProgressBar(scheme ?? undefined) : null);
+        const className = Classname.build("noseur-message", {
+            "noseur-wd-100-pct": this.state.props.fill
+        }, scheme, (this.state.props.scheme ? `${this.state.props.scheme}-bd-rd ${this.state.props.scheme}-vars` : null), (this.state.props.closeOnClick ? "noseur-cursor-pointer" : null), this.state.props.className);
+        const ref = (el) => {
+            ObjectHelper.resolveRef(this.props.forwardRef, el);
+            ObjectHelper.resolveRef(this.transitionNodeRef, el);
+        };
+        const children = (React.createElement(CSSTransition, { classNames: transition, options: this.state.props.transitionOptions, timeout: transition === Transition.NONE ? 0 : this.state.props.transitionTimeout, nodeRef: this.transitionNodeRef, in: this.state.mount, unmountOnExit: true, onEnter: this.onEnter, onEntered: this.onEntered, onExited: this.onExited },
+            React.createElement("div", { ref: ref, className: className, id: this.props.id, style: this.state.props.style, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave },
+                React.createElement("div", { className: "noseur-message-container" },
+                    icon,
+                    content,
+                    closeIcon),
+                progressBar)));
+        return (!this.state.props.container ? children : React.createElement(Portal, { children: children, container: this.state.props.container, visible: true }));
+    }
+}
+export const Message = ({ ref, ...props }) => (React.createElement(MessageComponent, { ...props, forwardRef: ref }));

package/dist/esm/overlay/Overlay.css

@@ -0,0 +1,382 @@
+/* Popover */
+.noseur-popover {
+  border: 0 none;
+  min-width: 50px;
+  position: absolute;
+  --popoverArrowLeftOffset: 0px;
+  --componentMarginTopOrBottom: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.noseur-popover-arrow:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  top: calc(0px - var(--componentMarginTopOrBottom, 5px));
+  left: calc(var(--popoverArrowLeftOffset, 0px) + 1.25rem);
+  border-bottom: var(--componentMarginTopOrBottom, 5px) solid var(--noseurArrowColor, #f2f2f2);
+}
+
+.noseur-popover-arrow-flipped:before {
+  top: 100%;
+  border-bottom: 0px;
+  border-top: 5px solid #f2f2f2;
+}
+
+.noseur-popover-b {
+  display: flex;
+  overflow: auto;
+  max-height: 70%;
+  min-width: 150px;
+  padding: 10px 0px;
+  border-radius: 5px;
+  flex-direction: column;
+  --componentMarginTopOrBottom: 8px;
+  background-color: var(--noseurPopoverBgColor, #FFFFFF);
+  border: 1px solid var(--noseurPopoverBorderColor, #F0F0F0);
+  box-shadow: 0px 0px 21px var(--noseurPopoverBoxShadowColor, rgba(0, 0, 0, 0.1));
+}
+
+.noseur-popover-b > * {
+  display: flex;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 15px 30px;
+  padding-right: 80px;
+  font-weight: normal;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.noseur-popover-b > *:hover,
+.noseur-popover-b > *:active,
+.noseur-popover-b > *.active {
+  color: var(--noseurPopoverItemColor);
+  font-weight: var(--noseurPopoverItemFontWeight, normal);
+  background-color: var(--noseurPopoverItemHighlight, rgb(235, 235, 235));
+}
+
+.noseur-popover-b > a {
+  font-weight: 400;
+}
+
+.noseur-popover-b > *.danger {
+  color: #FF0000;
+}
+
+.noseur-popover-b > *.menu-item {
+  display: none;
+}
+
+/* Dialog */
+.noseur-dialog,
+.noseur-dialog-modal.noseur-component-overlay {
+  pointer-events: auto;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.noseur-dialog {
+  width: 50%;
+  display: flex;
+  max-width: 95%;
+  max-height: 90%;
+  position: relative;
+  transform: scale(1);
+  flex-direction: column;
+  -webkit-transform: scale(1);
+}
+
+.noseur-dialog-modal {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0px;
+  width: 100%;
+  height: 100%;
+  display: none;
+  position: fixed;
+  align-items: center;
+  pointer-events: none;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background-color: transparent;
+  transition-property: background-color;
+  -webkit-transition-property: background-color;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.noseur-dialog-modal.noseur-component-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.noseur-dialog-visible {
+  display: flex;
+}
+
+.noseur-dialog-maximized {
+  max-width: 100%;
+  transition: none;
+  max-height: 100%;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+}
+
+.noseur-dialog-content {
+  margin: 0px;
+  padding: 1rem;
+  overflow: auto;
+  background-color: var(--noseurDialogContentBgColor, white);
+}
+
+.noseur-dialog-content-bd-t {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.noseur-dialog-content-bd-b {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.noseur-dialog-maximized .noseur-dialog-content {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.noseur-dialog-header {
+  margin: 0px;
+  display: flex;
+  padding: 1rem;
+  overflow: auto;
+  align-items: center;
+  background: #ffffff;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  justify-content: space-between;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.noseur-dialog-header.nl {
+  justify-content: flex-end;
+}
+
+.noseur-dialog .noseur-dialog-header .noseur-dialog-title {
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.noseur-dialog-header-right {
+  margin-left: 0.5rem;
+}
+
+.noseur-dialog-header-right > .noseur-dialog-header-close-icon,
+.noseur-dialog-header-right > .noseur-dialog-header-maximize-icon {
+  padding: 0.5rem;
+  margin-right: 1rem;
+  cursor: pointer;
+}
+
+.noseur-dialog .noseur-dialog-footer {
+  overflow: auto;
+  border-top: 1px solid #e9ecef;
+  background: #ffffff;
+  color: #212529;
+  padding: 1rem;
+  text-align: right;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+/*alignment*/
+.noseur-dialog-left {
+  justify-content: flex-start;
+}
+
+.noseur-dialog-right {
+  justify-content: flex-end;
+}
+
+.noseur-dialog-top {
+  align-items: flex-start;
+}
+
+.noseur-dialog-top-left {
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.noseur-dialog-top-right {
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.noseur-dialog-bottom {
+  align-items: flex-end;
+}
+
+.noseur-dialog-bottom-left {
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.noseur-dialog-bottom-right {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.noseur-confirm-dialog .noseur-dialog-content {
+  display: flex;
+  overflow: auto;
+  align-items: center;
+}
+
+/* Message */
+.noseur-message {
+  display: flex;
+  overflow: hidden;
+  width: fit-content;
+  border-radius: 5px;
+  align-items: center;
+  flex-direction: column;
+}
+
+.noseur-message-container {
+  padding: 8px;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+}
+
+.noseur-message-container > i.fa-times {
+  opacity: 0.6;
+  cursor: pointer;
+  margin-bottom: 1px;
+}
+
+.noseur-message-container > i.fa-times:hover {
+  opacity: 1;
+}
+
+.noseur-message > .noseur-progress-bar {
+  width: 100%;
+  height: 5px;
+  border-radius: 0px;
+}
+
+/* Toast and Messages */
+.noseur-messages {
+  position: relative;
+}
+
+.noseur-toast > div,
+.noseur-messages > div {
+  z-index: 1005;
+  display: flex;
+  flex-direction: column;
+}
+
+.noseur-toast > div {
+  position: fixed;
+}
+
+.noseur-messages > div {
+  position: absolute;
+}
+
+.noseur-toast > div > .noseur-message,
+.noseur-messages > div > .noseur-message {
+  margin-top: var(--messageMarginTop, 0px);
+  margin-left: var(--messageMarginLeft, 0px);
+  margin-right: var(--messageMarginRight, 0px);
+  margin-bottom: var(--messageMarginBottom, 0px);
+}
+
+.noseur-toast > .noseur-toast-none,
+.noseur-toast > .noseur-toast-top-left,
+.noseur-messages > .noseur-messages-none,
+.noseur-messages > .noseur-messages-top-left {
+  top: 0.5em;
+  left: 0.5em;
+  align-items: flex-start;
+}
+
+.noseur-toast > .noseur-toast-top-right,
+.noseur-messages > .noseur-messages-top-right {
+  top: 0.5em;
+  right: 0.5em;
+  align-items: flex-end;
+}
+
+.noseur-toast > .noseur-toast-top,
+.noseur-toast > .noseur-toast-top-center,
+.noseur-messages > .noseur-messages-top,
+.noseur-messages > .noseur-messages-top-center {
+  left: 50%;
+  top: 0.5em;
+  align-items: center;
+  transform: translateX(-50%);
+}
+
+.noseur-toast > .noseur-toast-bottom-left,
+.noseur-messages > .noseur-messages-bottom-left {
+  left: 0.5em;
+  bottom: 0.5em;
+  align-items: flex-start;
+}
+
+.noseur-toast > .noseur-toast-bottom-right,
+.noseur-messages > .noseur-messages-bottom-right {
+  right: 0.5em;
+  bottom: 0.5em;
+  align-items: flex-end;
+}
+
+.noseur-toast > .noseur-toast-bottom,
+.noseur-messages > .noseur-messages-bottom,
+.noseur-toast > .noseur-toast-bottom-center,
+.noseur-messages > .noseur-messages-bottom-center {
+  left: 50%;
+  bottom: 0.5em;
+  transform: translateX(-50%);
+}
+
+.noseur-toast > .noseur-toast-left,
+.noseur-messages > .noseur-messages-left,
+.noseur-toast > .noseur-toast-center-left,
+.noseur-messages > .noseur-messages-center-left {
+  top: 50%;
+  left: 0.5em;
+  transform: translateY(-50%);
+}
+
+.noseur-toast > .noseur-toast-right,
+.noseur-messages > .noseur-messages-right,
+.noseur-toast > .noseur-toast-center-right,
+.noseur-messages > .noseur-messages-center-right {
+  top: 50%;
+  right: 0.5em;
+  align-items: flex-end;
+  transform: translateY(-50%);
+}
+
+.noseur-toast > .noseur-toast-center,
+.noseur-messages > .noseur-messages-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+}
+
+.noseur-toast > .noseur-toast-top,
+.noseur-toast > .noseur-toast-bottom,
+.noseur-toast > .noseur-toast-center,
+.noseur-messages > .noseur-messages-top,
+.noseur-messages > .noseur-messages-bottom,
+.noseur-messages > .noseur-messages-center {
+  align-items: center;
+}

package/dist/esm/overlay/Popover.d.ts

@@ -0,0 +1,30 @@
+import "./Overlay.css";
+import React from 'react';
+import { ComponentBaseProps, TransitionProps } from "../core/ComponentBaseProps";
+import { NoseurDivElement, NoseurRawElement } from '../constants/Types';
+export type PopoverEvent = () => void;
+export interface PopoverManageRef {
+    hide: () => void;
+    visible: () => boolean;
+    sticky: (sticky: boolean) => void;
+    show: (event?: Event, target?: HTMLElement) => void;
+    rePosition: (event?: Event, cb?: () => void) => void;
+    toggle: (event?: Event, target?: HTMLElement) => void;
+}
+export interface PopoverProps<T1 = NoseurDivElement, T2 = PopoverManageRef, T3 = {}> extends ComponentBaseProps<T1, T2, T3>, TransitionProps {
+    sticky: boolean;
+    baseZIndex: number;
+    trapFocus: boolean;
+    notDismissable: boolean;
+    dismissOnClick: boolean;
+    matchTargetSize: boolean;
+    container: NoseurRawElement;
+    positional: "left" | "right";
+    pointingArrowClassName: string | null;
+    onOpenFocusRef: React.MutableRefObject<any>;
+    onCloseFocusRef: React.MutableRefObject<any>;
+    outsideClickLogic: "elemental" | "positional";
+    onShow: PopoverEvent;
+    onHide: PopoverEvent;
+}
+export declare const Popover: ({ ref, ...props }: Partial<PopoverProps>) => React.JSX.Element;