@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

package/src/modules/dx/popover/popover.ts

@@ -0,0 +1,313 @@
+import { LightningElement, api } from "lwc";
+import {
+    LightningSlotElement,
+    PopoverRequestCloseType,
+    PopperPlacement
+} from "typings/custom";
+
+import { createPopper } from "@popperjs/core";
+import cx from "classnames";
+import debounce from "debounce";
+import { isPrerender } from "utils/seo";
+
+const isEventOutsideElements = (
+    e: Event,
+    ...els: (HTMLElement | null)[]
+): boolean =>
+    !e
+        .composedPath()
+        .some(
+            (el) =>
+                (el as HTMLElement).isSameNode &&
+                els.some((_el) => (el as HTMLElement).isSameNode(_el))
+        );
+
+export default class Popover extends LightningElement {
+    @api ariaLabel: string | null = null;
+    @api offset?: "small" | "medium";
+    @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
+    @api placement?: PopperPlacement = "bottom-start";
+    @api small?: boolean = false;
+    @api openOnHover?: boolean = false; // dropdown opens/closes with hover
+    @api width?: string | null = null;
+    @api fullWidth?: boolean | null;
+
+    @api
+    get open() {
+        return this._open;
+    }
+    set open(value: boolean | null) {
+        this.controlled = typeof value === "boolean";
+        if (value !== this._open) {
+            if (value) {
+                this.openPopover();
+            } else {
+                this.closePopover();
+            }
+        }
+    }
+
+    // public api
+
+    @api
+    dispatchRequestCloseEvent = (type: PopoverRequestCloseType) => {
+        this.dispatchEvent(
+            new CustomEvent("requestclose", {
+                detail: type,
+                bubbles: true,
+                composed: true
+            })
+        );
+    };
+
+    @api
+    openPopover() {
+        this._rendered = true;
+
+        if (this.control && !this.control.disabled) {
+            this._open = true;
+            this.control.setAttribute("aria-expanded", "true");
+
+            this.dispatchEvent(new CustomEvent("open"));
+
+            // awaiting .popover-container to receive 'visibility: visible;' in order to execute functions on it;
+            // another approach would be to use IntersectionObserver to determine exactly when the visiblity
+            // is applied before running
+            setTimeout(() => {
+                this.setPosition();
+                this.attachListenersTopopover();
+            });
+        }
+    }
+
+    @api
+    closePopover(focusControl: boolean = false) {
+        this._open = false;
+        if (focusControl && this.control && this.control.focus) {
+            this.control.focus();
+        }
+        if (this.control) {
+            this.control.setAttribute("aria-expanded", "false");
+        }
+        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener("focusout", this.interactOutsideListener);
+        if (this.openOnHover) {
+            document.removeEventListener(
+                "mousemove",
+                this.interactOutsideListener
+            );
+        }
+        this.dispatchEvent(new CustomEvent("close"));
+    }
+
+    // PRIVATE VARS
+
+    private controlled: boolean = false;
+    private _open: boolean = false;
+    private _rendered: boolean = isPrerender();
+    private _role: string | null = null;
+    private control: (HTMLElement & { disabled?: boolean }) | null = null;
+    private focusedValue: string | null = null;
+    private popover: HTMLElement | null = null;
+
+    // LIFECYCLE METHODS
+
+    disconnectedCallback() {
+        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener("mousemove", this.interactOutsideListener);
+        document.removeEventListener("focusout", this.interactOutsideListener);
+        this.removeControlListeners();
+    }
+
+    renderedCallback() {
+        if (!this.popover) {
+            this.popover = this.template.querySelector(".popover-container");
+        }
+    }
+
+    // GETTERS
+
+    private get className() {
+        return cx(
+            "popover",
+            this.offset && `popover-offset-${this.offset}`,
+            this.small && "popover-small",
+            this.width && "popover-overridewidth",
+            this.fullWidth && "popover-fullwidth"
+        );
+    }
+
+    private get containerClassName() {
+        return cx("popover-container", this.open && "popover-container_open");
+    }
+
+    private get style() {
+        if (this.fullWidth && this.width) {
+            console.error(
+                'The "width" and "full-width" properties cannot be provided simultaneously.'
+            );
+        }
+        return cx(this.width && `width: ${this.width};`);
+    }
+
+    // CLASS FNS
+
+    private addControlListeners() {
+        if (this.control) {
+            this.control.addEventListener("keydown", this.onControlKeydown);
+
+            if (!this.openOnHover) {
+                this.control.addEventListener("click", this.onControlClick);
+            }
+
+            if (this.openOnHover) {
+                this.control.addEventListener(
+                    "mouseenter",
+                    this.onControlMouseEnter
+                );
+            }
+        }
+    }
+
+    private removeControlListeners() {
+        if (this.control) {
+            this.control.removeEventListener("keydown", this.onControlKeydown);
+
+            this.control.removeEventListener("click", this.onControlClick);
+            this.control.removeEventListener(
+                "mouseenter",
+                this.onControlMouseEnter
+            );
+        }
+    }
+
+    private _interactOutsideListener = (e: Event) => {
+        if (
+            this.open &&
+            this.popover &&
+            isEventOutsideElements(e, this.control, this.popover)
+        ) {
+            this.closePopover();
+            this.dispatchRequestCloseEvent("interact-outside");
+        }
+    };
+    private interactOutsideListener = (e: Event) =>
+        // @ts-ignore something weird happening here with debounce types
+        debounce(this._interactOutsideListener(e), 100);
+
+    private onControlMouseEnter = () => this.openPopover();
+
+    private onControlKeydown = (e: KeyboardEvent) => {
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                if (!this.open) {
+                    this.openPopover();
+                }
+                this.dispatchEvent(new CustomEvent("controlarrowdown"));
+                break;
+            }
+            default:
+        }
+    };
+
+    private onControlClick = () => {
+        if (this.controlled && this.open) {
+            this.dispatchRequestCloseEvent("click-control");
+            return;
+        }
+
+        if (this.controlled && !this.open) {
+            this.dispatchEvent(
+                new CustomEvent("requestopen", {
+                    bubbles: true,
+                    composed: true
+                })
+            );
+            return;
+        }
+
+        if (this.open) {
+            this.closePopover();
+            return;
+        }
+
+        this.openPopover();
+    };
+
+    private onSlotChange(e: LightningSlotElement) {
+        const slot = e.target;
+        const elements = slot.assignedElements();
+        const slotted = elements.length === 0 ? null : elements[0];
+        // allows dropdown/select to compose popover
+        const control =
+            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
+        const onboardControl =
+            (!this.control || (control && !control.isSameNode(this.control))) &&
+            control;
+        if (onboardControl) {
+            control.setAttribute("aria-haspopup", "true");
+            control.style.cursor = this.openOnHover ? "default" : "cursor";
+            this.control = control;
+            this.addControlListeners();
+            this.setPosition();
+        }
+    }
+
+    private onKeyDown(e: KeyboardEvent): void {
+        switch (e.key) {
+            case "Esc":
+            case "Escape":
+                this.dispatchRequestCloseEvent("keypress-escape");
+                this.closePopover(true);
+                break;
+            default:
+        }
+    }
+
+    private attachListenersTopopover() {
+        document.addEventListener("click", this.interactOutsideListener);
+        document.addEventListener("focusout", this.interactOutsideListener);
+        if (this.openOnHover) {
+            document.addEventListener(
+                "mousemove",
+                this.interactOutsideListener
+            );
+        }
+    }
+
+    private setPosition = async () => {
+        if (this.popover && this.control) {
+            await Promise.resolve();
+            createPopper(this.control, this.popover, {
+                placement: this.placement,
+                modifiers: [
+                    {
+                        name: "preventOverflow",
+                        options: {
+                            boundary: document.documentElement,
+                            padding: this.pagePadding
+                        }
+                    },
+                    {
+                        name: "flip",
+                        options: {
+                            fallbackPlacements: []
+                        }
+                    },
+                    this.fullWidth
+                        ? {
+                              name: "fullWidth",
+                              enabled: true,
+                              fn: ({ state }) => {
+                                  state.styles.popper.width = `${state.rects.reference.width}px`;
+                              },
+                              phase: "beforeWrite",
+                              requires: ["computeStyles"]
+                          }
+                        : {}
+                ]
+            });
+        }
+    };
+}

package/src/modules/dx/radioGroup/radioGroup.css

@@ -0,0 +1,12 @@
+@import "helpers/reset";
+
+fieldset {
+    display: grid;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+}
+
+legend {
+    position: absolute;
+    clip: rect(0 0 0 0);
+}

package/src/modules/dx/radioGroup/radioGroup.html

@@ -0,0 +1,16 @@
+<template>
+    <fieldset>
+        <legend>{legend}</legend>
+        <template for:each={options} for:item="option">
+            <dx-checkbox
+                key={option.value}
+                value={option.value}
+                label={option.label}
+                checked={option.checked}
+                disabled={option.disabled}
+                onchange={onChange}
+                type="radio"
+            ></dx-checkbox>
+        </template>
+    </fieldset>
+</template>

package/src/modules/dx/radioGroup/radioGroup.ts

@@ -0,0 +1,65 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "utils/normalizers";
+
+type Option = {
+    value: string;
+    label: string;
+    disabled: boolean;
+};
+
+export default class RadioGroup extends LightningElement {
+    @api disabled: boolean = false;
+    @api legend!: string;
+
+    @api
+    get options(): Option[] {
+        const statefulOptions = this._options.map((option) => ({
+            ...option,
+            checked: option.value === this._value,
+            disabled: this.disabled || option.disabled
+        }));
+        return statefulOptions;
+    }
+    set options(value) {
+        this._options = toJson(value);
+    }
+
+    @api get defaultValue(): string | null {
+        return this._defaultValue;
+    }
+    set defaultValue(value) {
+        this._value = value || null;
+    }
+
+    @api get value(): string | null {
+        return this._value;
+    }
+    set value(value) {
+        if (this.defaultValue) {
+            console.error(
+                "Do not supply both value and default-value to form groups."
+            );
+        }
+
+        this._value = value || null;
+    }
+
+    private _defaultValue: string | null = null;
+    private _options: Option[] = [];
+    private _value: string | null = null;
+
+    private onChange(e: CustomEvent) {
+        const { value: checkedValue, originalEvent } = e.detail;
+
+        this._value = checkedValue;
+
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    originalEvent,
+                    value: this._value
+                }
+            })
+        );
+    }
+}

package/src/modules/dx/relativeDateTime/relativeDateTime.html

@@ -0,0 +1,3 @@
+<template>
+    <time title={original}>{value}</time>
+</template>

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -0,0 +1,113 @@
+import { LightningElement, api } from "lwc";
+
+export default class RelativeDateTime extends LightningElement {
+    @api messageWhenHoursPast: String = "";
+    @api messageWhenDaysPast: String = "";
+    @api messageWhenWeeksPast: String = "";
+    @api messageWhenMonthsPast: String = "";
+    @api messageWhenYearsPast: String = "";
+
+    @api
+    set value(value) {
+        if (!value) {
+            console.error("Value provided to RelativeDateTime is invalid");
+            return;
+        }
+
+        this._selectedDateTime = new Date(value);
+    }
+    get value() {
+        const relativeDateTimeInHours = this.formatDate(this._selectedDateTime);
+        this._relativeDateTime = this.getRelativeDateTimeAsString(
+            this._selectedDateTime,
+            relativeDateTimeInHours
+        );
+        return this._relativeDateTime;
+    }
+    get original() {
+        return this._selectedDateTime;
+    }
+
+    private _relativeDateTime: String;
+    private _selectedDateTime: Date;
+
+    formatDate(selectedDateTime: Date) {
+        const currentDateTime = new Date();
+        const relativeDateTimeInHours = this.getDifferenceInHours(
+            selectedDateTime,
+            currentDateTime
+        );
+        return relativeDateTimeInHours;
+    }
+
+    getDifferenceInHours(selectedDateTime: Date, currentDateTime: Date) {
+        const milliseconds = Math.abs(+selectedDateTime - +currentDateTime);
+        const hours = Math.floor(milliseconds / 36e5);
+        return hours;
+    }
+
+    getRelativeDateTimeAsString(
+        selectedDateTime: Date,
+        relativeDateTimeInHours: Number
+    ) {
+        const daysPast = Math.floor(+relativeDateTimeInHours / 24);
+        const weeksPast = Math.floor(+daysPast / 7);
+        const monthsPast = Math.floor(+daysPast / 30);
+        const yearsPast = Math.floor(+monthsPast / 12);
+        if (yearsPast >= 1) {
+            return this.timeLabel("year", yearsPast);
+        } else if (monthsPast <= 11 && monthsPast >= 1) {
+            return this.timeLabel("month", monthsPast);
+        } else if (monthsPast < 1 && daysPast >= 7) {
+            return this.timeLabel("week", weeksPast);
+        } else if (daysPast <= 7 && daysPast >= 1) {
+            return this.timeLabel("day", daysPast);
+        } else if (relativeDateTimeInHours < 24) {
+            return this.timeLabel("hour", relativeDateTimeInHours);
+        }
+        return "";
+    }
+
+    timeLabel(type: String, number: Number) {
+        let suffix: String = "";
+        switch (type) {
+            case "hour": {
+                suffix =
+                    this.messageWhenHoursPast ||
+                    `${this.pluralize(type, number)} ago`;
+                break;
+            }
+            case "day": {
+                suffix =
+                    this.messageWhenDaysPast ||
+                    `${this.pluralize(type, number)} ago`;
+                break;
+            }
+            case "week": {
+                suffix =
+                    this.messageWhenWeeksPast ||
+                    `${this.pluralize(type, number)} ago`;
+                break;
+            }
+            case "month": {
+                suffix =
+                    this.messageWhenMonthsPast ||
+                    `${this.pluralize(type, number)} ago`;
+                break;
+            }
+            case "year": {
+                suffix =
+                    this.messageWhenYearsPast ||
+                    `${this.pluralize(type, number)} ago`;
+                break;
+            }
+            default:
+                suffix = "";
+        }
+        return suffix ? `${number} ${suffix}` : "";
+    }
+
+    pluralize(type: String, number: Number) {
+        return `${type}${number !== 1 ? "s" : ""}`;
+    }
+}