@24i/bigscreen-sdk 1.0.38 → 1.0.40-alpha.2687

package/packages/menu/src/WhitelabelMenu/SideMenu.tsx

@@ -1,248 +1,248 @@
-import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
-import { Vertical } from '@24i/bigscreen-sdk/focus';
-import { DISPLAY_NONE } from '@24i/bigscreen-sdk/utils/displayToggler';
-import { findIndex, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
-import { VisualControllerBase } from './VisualControllerBase';
-import { VisualController } from './VisualController';
-import { shouldOpenMenuWithMouse, shouldOpenMenu, shouldCloseMenu } from './utils';
-import { height } from './sizes';
-import { animated } from './constants';
-import { MenuItem } from '../MenuAndContentContainer/interface';
-import { SideMenuItem } from './SideMenuItem';
-import {
-    Props,
-    SideMenu as ISideMenu,
-} from './interface';
-
-/**
- * **$SideMenu**
- */
-export class SideMenu extends Component<Props> implements ISideMenu {
-    /**
-     * Logic for opening SideMenu with mouse.
-     */
-    static shouldOpenMenuWithMouse = shouldOpenMenuWithMouse;
-
-    /**
-     * Logic for opening SideMenu with keyboard.
-     */
-    static shouldOpenMenu = shouldOpenMenu;
-
-    /**
-     * Logic for closing SideMenu with keyboard.
-     */
-    static shouldCloseMenu = shouldCloseMenu;
-
-    /**
-     * Wrapper for the menu items and floating focus.
-     */
-    menuItemsWrap = createRef<HTMLDivElement>();
-
-    /**
-     * Vertical navigation among {@link SideMenuItem items}.
-     */
-    navigation = createRef<InstanceType<typeof Vertical>>();
-
-    /**
-     * Array of rendered menu {@link SideMenuItem items}
-     * for the {@link SideMenu.navigation navigation}.
-     */
-    navigationItems: Reference<SideMenuItem>[] = [];
-
-    /**
-     * Active {@link SideMenuItem item}.
-     */
-    activeItem: Reference<SideMenuItem> | null = null;
-
-    /**
-     * {@link VisualController} used by the menu.
-     */
-    visualController: VisualControllerBase = new VisualController(
-        // eslint-disable-next-line react/destructuring-assignment
-        this.getPaddingTop(this.props.items), SideMenuItem.height, SideMenuItem.margin,
-    );
-
-    /**
-     * isOpen passthrough to {@link SideMenu.visualController controller}.
-     */
-    isOpen = this.visualController.isOpen;
-
-    /**
-     * Sets the initial active item and adds `hashchange` event listener.
-     */
-    componentDidMount() {
-        const activeIndex = this.getActiveItemIndexByPath();
-        const safeActiveIndex = Math.max(0, activeIndex); // Don't want -1 here
-        this.onItemFocus(safeActiveIndex);
-        this.setActiveItem(activeIndex);
-        this.navigation.current!.index = safeActiveIndex;
-        window.addEventListener('hashchange', this.onHashChange);
-    }
-
-    /**
-     * Removes `hashchange` event listener.
-     */
-    componentWillUnmount() {
-        window.removeEventListener('hashchange', this.onHashChange);
-    }
-
-    /**
-     * Handler for the `hashchange` event.
-     */
-    onHashChange = () => {
-        this.close();
-        this.setActiveItem();
-    };
-
-    /**
-     * Passthrough to controller.
-     * @param index of the item in menu {@link Props.items items collection}
-     */
-    onItemFocus(index: number) {
-        this.visualController.onFocusChanged(index);
-    }
-
-    /**
-     * Returns number of pixels needed to vertically center the menu items.
-     * @param items items that are rendered
-     * @returns number of pixels for top padding for vertical centering
-     */
-    getPaddingTop(items: MenuItem[]) {
-        return Math.round(
-            (height - (SideMenuItem.height + (SideMenuItem.margin * 2)) * items.length) / 2,
-        );
-    }
-
-    /**
-     * Returns (and creates if it does not exist) a reference to {@link SideMenuItem}.
-     * @param index of the {@link SideMenu.navigationItems navigatable item}
-     * @returns Reference to {@link SideMenuItem}
-     */
-    getNavigationItemReference(index: number) {
-        if (!this.navigationItems[index]) {
-            this.navigationItems[index] = createRef();
-        }
-        return this.navigationItems[index];
-    }
-
-    /**
-     * Finds and returns the index of the active {@link SideMenuItem}.
-     * @returns index of the active {@link SideMenuItem}
-     */
-    getActiveItemIndexByPath() {
-        const { items } = this.props;
-        const currentPath = window.location.hash.replace('#', '');
-        return findIndex(items, (item) => item.getPath() === currentPath);
-    }
-
-    /**
-     * Finds and returns the reference to the current active {@link SideMenuItem}
-     * or null if none is active.
-     * @param index of the active {@link SideMenuItem}
-     * @returns active {@link SideMenuItem} or null
-     */
-    getActiveItemByPath(index: number = this.getActiveItemIndexByPath()) {
-        if (index === -1) return null;
-        return this.navigationItems[index];
-    }
-
-    /**
-     * Sets a new active {@link SideMenuItem}.
-     * @param index of item that should be made active
-     */
-    setActiveItem(index?: number) {
-        const newActiveItem = this.getActiveItemByPath(index);
-        if (newActiveItem !== this.activeItem) {
-            if (this.activeItem) this.activeItem.current!.deactivate();
-            this.activeItem = newActiveItem;
-            if (this.activeItem) this.activeItem.current!.activate();
-        }
-    }
-
-    /**
-     * Closes the menu.
-     */
-    close = () => {
-        const { onVisibilityChange } = this.props;
-        this.visualController.close();
-        onVisibilityChange(false);
-    };
-
-    /**
-     * Focuses the {@link SideMenu.navigation navigation}.
-     * @param options focus options
-     */
-    focus(options?: FocusOptions) {
-        this.navigation.current!.focus(options);
-    }
-
-    /**
-     * Opens the menu.
-     */
-    open() {
-        const { onVisibilityChange } = this.props;
-        this.visualController.open();
-        onVisibilityChange(true);
-    }
-
-    /**
-     * Renders new items.
-     * @param items new items to render
-     */
-    updateItems(items: MenuItem[]) {
-        forEach(this.navigationItems, (menuItem) => {
-            removeNode(menuItem.current!.div.current!);
-        });
-        this.navigationItems.length = 0;
-        const paddingTop = this.getPaddingTop(items);
-        this.visualController.paddingTop = paddingTop;
-        this.menuItemsWrap.current!.style.paddingTop = `${paddingTop}px`;
-        this.appendMount(this.renderItems(items), this.menuItemsWrap);
-        this.setActiveItem();
-    }
-
-    renderItems(items: MenuItem[]) {
-        return (
-            items.map((item, index) => (
-                <SideMenuItem
-                    ref={this.getNavigationItemReference(index)}
-                    {...item}
-                    go={() => {
-                        item.go();
-                        this.close();
-                    }}
-                    onFocus={() => this.onItemFocus(index)}
-                />
-            ))
-        );
-    }
-
-    render() {
-        const { items } = this.props;
-        return (
-            <div ref={this.visualController.div} className={`side-menu ${DISPLAY_NONE}`}>
-                <div
-                    ref={this.visualController.overlay}
-                    className={`overlay ${animated ? DISPLAY_NONE : ''}`}
-                    onClick={this.close}
-                >
-                    <div className="shadow" />
-                </div>
-                <div
-                    ref={this.menuItemsWrap}
-                    className="menu"
-                    style={{ paddingTop: `${this.getPaddingTop(items)}px` }}
-                >
-                    {animated && <div ref={this.visualController.focus} className="focus" />}
-                    <Vertical
-                        ref={this.navigation}
-                        domRef={this.visualController.div}
-                        focusableChildren={this.navigationItems}
-                    >
-                        {this.renderItems(items)}
-                    </Vertical>
-                </div>
-            </div>
-        );
-    }
-}
+import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { Vertical } from '@24i/bigscreen-sdk/focus';
+import { DISPLAY_NONE } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { findIndex, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { VisualControllerBase } from './VisualControllerBase';
+import { VisualController } from './VisualController';
+import { shouldOpenMenuWithMouse, shouldOpenMenu, shouldCloseMenu } from './utils';
+import { height } from './sizes';
+import { animated } from './constants';
+import { MenuItem } from '../MenuAndContentContainer/interface';
+import { SideMenuItem } from './SideMenuItem';
+import {
+    Props,
+    SideMenu as ISideMenu,
+} from './interface';
+
+/**
+ * **$SideMenu**
+ */
+export class SideMenu extends Component<Props> implements ISideMenu {
+    /**
+     * Logic for opening SideMenu with mouse.
+     */
+    static shouldOpenMenuWithMouse = shouldOpenMenuWithMouse;
+
+    /**
+     * Logic for opening SideMenu with keyboard.
+     */
+    static shouldOpenMenu = shouldOpenMenu;
+
+    /**
+     * Logic for closing SideMenu with keyboard.
+     */
+    static shouldCloseMenu = shouldCloseMenu;
+
+    /**
+     * Wrapper for the menu items and floating focus.
+     */
+    menuItemsWrap = createRef<HTMLDivElement>();
+
+    /**
+     * Vertical navigation among {@link SideMenuItem items}.
+     */
+    navigation = createRef<InstanceType<typeof Vertical>>();
+
+    /**
+     * Array of rendered menu {@link SideMenuItem items}
+     * for the {@link SideMenu.navigation navigation}.
+     */
+    navigationItems: Reference<SideMenuItem>[] = [];
+
+    /**
+     * Active {@link SideMenuItem item}.
+     */
+    activeItem: Reference<SideMenuItem> | null = null;
+
+    /**
+     * {@link VisualController} used by the menu.
+     */
+    visualController: VisualControllerBase = new VisualController(
+        // eslint-disable-next-line react/destructuring-assignment
+        this.getPaddingTop(this.props.items), SideMenuItem.height, SideMenuItem.margin,
+    );
+
+    /**
+     * isOpen passthrough to {@link SideMenu.visualController controller}.
+     */
+    isOpen = this.visualController.isOpen;
+
+    /**
+     * Sets the initial active item and adds `hashchange` event listener.
+     */
+    componentDidMount() {
+        const activeIndex = this.getActiveItemIndexByPath();
+        const safeActiveIndex = Math.max(0, activeIndex); // Don't want -1 here
+        this.onItemFocus(safeActiveIndex);
+        this.setActiveItem(activeIndex);
+        this.navigation.current!.index = safeActiveIndex;
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+
+    /**
+     * Removes `hashchange` event listener.
+     */
+    componentWillUnmount() {
+        window.removeEventListener('hashchange', this.onHashChange);
+    }
+
+    /**
+     * Handler for the `hashchange` event.
+     */
+    onHashChange = () => {
+        this.close();
+        this.setActiveItem();
+    };
+
+    /**
+     * Passthrough to controller.
+     * @param index of the item in menu {@link Props.items items collection}
+     */
+    onItemFocus(index: number) {
+        this.visualController.onFocusChanged(index);
+    }
+
+    /**
+     * Returns number of pixels needed to vertically center the menu items.
+     * @param items items that are rendered
+     * @returns number of pixels for top padding for vertical centering
+     */
+    getPaddingTop(items: MenuItem[]) {
+        return Math.round(
+            (height - (SideMenuItem.height + (SideMenuItem.margin * 2)) * items.length) / 2,
+        );
+    }
+
+    /**
+     * Returns (and creates if it does not exist) a reference to {@link SideMenuItem}.
+     * @param index of the {@link SideMenu.navigationItems navigatable item}
+     * @returns Reference to {@link SideMenuItem}
+     */
+    getNavigationItemReference(index: number) {
+        if (!this.navigationItems[index]) {
+            this.navigationItems[index] = createRef();
+        }
+        return this.navigationItems[index];
+    }
+
+    /**
+     * Finds and returns the index of the active {@link SideMenuItem}.
+     * @returns index of the active {@link SideMenuItem}
+     */
+    getActiveItemIndexByPath() {
+        const { items } = this.props;
+        const currentPath = window.location.hash.replace('#', '');
+        return findIndex(items, (item) => item.getPath() === currentPath);
+    }
+
+    /**
+     * Finds and returns the reference to the current active {@link SideMenuItem}
+     * or null if none is active.
+     * @param index of the active {@link SideMenuItem}
+     * @returns active {@link SideMenuItem} or null
+     */
+    getActiveItemByPath(index: number = this.getActiveItemIndexByPath()) {
+        if (index === -1) return null;
+        return this.navigationItems[index];
+    }
+
+    /**
+     * Sets a new active {@link SideMenuItem}.
+     * @param index of item that should be made active
+     */
+    setActiveItem(index?: number) {
+        const newActiveItem = this.getActiveItemByPath(index);
+        if (newActiveItem !== this.activeItem) {
+            if (this.activeItem) this.activeItem.current!.deactivate();
+            this.activeItem = newActiveItem;
+            if (this.activeItem) this.activeItem.current!.activate();
+        }
+    }
+
+    /**
+     * Closes the menu.
+     */
+    close = () => {
+        const { onVisibilityChange } = this.props;
+        this.visualController.close();
+        onVisibilityChange(false);
+    };
+
+    /**
+     * Focuses the {@link SideMenu.navigation navigation}.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions) {
+        this.navigation.current!.focus(options);
+    }
+
+    /**
+     * Opens the menu.
+     */
+    open() {
+        const { onVisibilityChange } = this.props;
+        this.visualController.open();
+        onVisibilityChange(true);
+    }
+
+    /**
+     * Renders new items.
+     * @param items new items to render
+     */
+    updateItems(items: MenuItem[]) {
+        forEach(this.navigationItems, (menuItem) => {
+            removeNode(menuItem.current!.div.current!);
+        });
+        this.navigationItems.length = 0;
+        const paddingTop = this.getPaddingTop(items);
+        this.visualController.paddingTop = paddingTop;
+        this.menuItemsWrap.current!.style.paddingTop = `${paddingTop}px`;
+        this.appendMount(this.renderItems(items), this.menuItemsWrap);
+        this.setActiveItem();
+    }
+
+    renderItems(items: MenuItem[]) {
+        return (
+            items.map((item, index) => (
+                <SideMenuItem
+                    ref={this.getNavigationItemReference(index)}
+                    {...item}
+                    go={() => {
+                        item.go();
+                        this.close();
+                    }}
+                    onFocus={() => this.onItemFocus(index)}
+                />
+            ))
+        );
+    }
+
+    render() {
+        const { items } = this.props;
+        return (
+            <div ref={this.visualController.div} className={`side-menu ${DISPLAY_NONE}`}>
+                <div
+                    ref={this.visualController.overlay}
+                    className={`overlay ${animated ? DISPLAY_NONE : ''}`}
+                    onClick={this.close}
+                >
+                    <div className="shadow" />
+                </div>
+                <div
+                    ref={this.menuItemsWrap}
+                    className="menu"
+                    style={{ paddingTop: `${this.getPaddingTop(items)}px` }}
+                >
+                    {animated && <div ref={this.visualController.focus} className="focus" />}
+                    <Vertical
+                        ref={this.navigation}
+                        domRef={this.visualController.div}
+                        focusableChildren={this.navigationItems}
+                    >
+                        {this.renderItems(items)}
+                    </Vertical>
+                </div>
+            </div>
+        );
+    }
+}

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.scss

@@ -1,56 +1,56 @@
-@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
-
-.menu-item {
-    @include ellipsis;
-    overflow: visible;
-    position: relative;
-    display: inline-block;
-    width: $width;
-    height: $height;
-    margin: $margin;
-    padding-left: $padding-left;
-    padding-top: $padding-top;
-    box-sizing: border-box;
-    border-radius: $border-radius 0 0 $border-radius;
-    background-color: transparent;
-    outline: none;
-
-    .text {
-        opacity: 0.5;
-        color: rgb(255, 255, 255);
-        font-size: $text-font-size;
-        font-style: normal;
-        font-weight: 600;
-        letter-spacing: 0;
-        line-height: $text-line-height;
-        text-transform: none;
-    }
-
-    .icon {
-        position: absolute;
-        top: $icon-top;
-        left: $icon-left;
-        width: $icon-size;
-        height: $icon-size;
-        opacity: 0.5;
-    }
-
-    &:focus {
-        background-color: rgba(255, 255, 255, 0.18);
-
-        .text {
-            opacity: 1;
-        }
-    }
-
-    &.active {
-        .text,
-        .icon {
-            opacity: 1;
-        }
-    }
-}
-
-[dir=rtl] .menu-item {
-    border-radius: 0 $border-radius $border-radius 0;
-}
+@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
+
+.menu-item {
+    @include ellipsis;
+    overflow: visible;
+    position: relative;
+    display: inline-block;
+    width: $width;
+    height: $height;
+    margin: $margin;
+    padding-left: $padding-left;
+    padding-top: $padding-top;
+    box-sizing: border-box;
+    border-radius: $border-radius 0 0 $border-radius;
+    background-color: transparent;
+    outline: none;
+
+    .text {
+        opacity: 0.5;
+        color: rgb(255, 255, 255);
+        font-size: $text-font-size;
+        font-style: normal;
+        font-weight: 600;
+        letter-spacing: 0;
+        line-height: $text-line-height;
+        text-transform: none;
+    }
+
+    .icon {
+        position: absolute;
+        top: $icon-top;
+        left: $icon-left;
+        width: $icon-size;
+        height: $icon-size;
+        opacity: 0.5;
+    }
+
+    &:focus {
+        background-color: rgba(255, 255, 255, 0.18);
+
+        .text {
+            opacity: 1;
+        }
+    }
+
+    &.active {
+        .text,
+        .icon {
+            opacity: 1;
+        }
+    }
+}
+
+[dir=rtl] .menu-item {
+    border-radius: 0 $border-radius $border-radius 0;
+}

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.styles.1080.scss

@@ -1,2 +1,2 @@
-@import './sizes.1080';
-@import './SideMenuItem';
+@import './sizes.1080';
+@import './SideMenuItem';

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.styles.animated.1080.scss

@@ -1,3 +1,3 @@
-@import './sizes.1080';
-@import './SideMenuItem';
-@import './animated';
+@import './sizes.1080';
+@import './SideMenuItem';
+@import './animated';

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.styles.animated.scss

@@ -1,3 +1,3 @@
-@import './sizes';
-@import './SideMenuItem';
-@import './animated';
+@import './sizes';
+@import './SideMenuItem';
+@import './animated';

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.styles.scss

@@ -1,2 +1,2 @@
-@import './sizes';
-@import './SideMenuItem';
+@import './sizes';
+@import './SideMenuItem';