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

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentSelection.tsx

@@ -1,102 +1,102 @@
-import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
-import { map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { DISPLAY_NONE, getDisplayToggler } from '@24i/bigscreen-sdk/utils';
-import { setActiveElementAsFocusCandidate, focusCandidate } from '@24i/bigscreen-sdk/focus';
-import { capitalizeFirstLetter } from './utils/format';
-import { IDeveloperTool } from '../IDeveloperTool';
-import { EnvironmentList } from './EnvironmentList';
-import { getEnvironmentConfigNamesList, getActiveEnvironmentConfigName } from './config';
-
-export type Props = {
-    onClose?: () => void;
-    leadingEllipses?: boolean;
-};
-
-export class EnvironmentSelection extends Component<Props> implements IDeveloperTool<Props> {
-    name = 'Environment selection';
-
-    div = createRef<HTMLDivElement>();
-
-    environmentListRef = createRef<EnvironmentList>();
-
-    displayToggler = getDisplayToggler(this.div, true);
-
-    componentDidMount() {
-        this.processDevelopmentStripe();
-    }
-
-    getEnvironments() {
-        const environmentConfigNamesList = getEnvironmentConfigNamesList();
-        const activeEnvironmentConfigName = getActiveEnvironmentConfigName();
-        return map(environmentConfigNamesList, (environmentConfigName) => ({
-            active: environmentConfigName === activeEnvironmentConfigName,
-            label: capitalizeFirstLetter(environmentConfigName),
-            value: environmentConfigName,
-        }));
-    }
-
-    closeEnvironmentSelectionList = () => {
-        const { onClose } = this.props;
-        this.clearMount('', this.div);
-        this.displayToggler.hide();
-        this.processDevelopmentStripe();
-        focusCandidate();
-        onClose?.();
-    };
-
-    show() {
-        this.openEnvironmentSelectionList();
-    }
-
-    hide() {
-        this.closeEnvironmentSelectionList();
-    }
-
-    openEnvironmentSelectionList() {
-        this.displayToggler.show();
-        this.renderEnvironmentList();
-        setActiveElementAsFocusCandidate();
-        this.environmentListRef.current!.focus();
-    }
-
-    processDevelopmentStripe() {
-        const environmentConfigNamesList = getEnvironmentConfigNamesList();
-        const activeEnvironmentConfigName = getActiveEnvironmentConfigName();
-        if (!environmentConfigNamesList.length || !activeEnvironmentConfigName) return;
-        const productionEnvironmentConfig = environmentConfigNamesList[0];
-        if (activeEnvironmentConfigName !== productionEnvironmentConfig) {
-            this.displayToggler.show();
-            this.renderDevelopmentStripe(activeEnvironmentConfigName);
-        }
-    }
-
-    renderEnvironmentList() {
-        this.appendMount(
-            <EnvironmentList
-                ref={this.environmentListRef}
-                data={this.getEnvironments()}
-                onClose={this.closeEnvironmentSelectionList}
-                leadingEllipses
-            />,
-            this.div,
-        );
-    }
-
-    renderDevelopmentStripe(environmentConfigName: string) {
-        this.clearMount(
-            <div className="development-stripe">
-                <div className="environment-config-name">{environmentConfigName}</div>
-            </div>,
-            this.div,
-        );
-    }
-
-    render() {
-        return (
-            <div
-                ref={this.div}
-                className={`environment-selection ${DISPLAY_NONE}`}
-            />
-        );
-    }
-}
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { DISPLAY_NONE, getDisplayToggler } from '@24i/bigscreen-sdk/utils';
+import { setActiveElementAsFocusCandidate, focusCandidate } from '@24i/bigscreen-sdk/focus';
+import { capitalizeFirstLetter } from './utils/format';
+import { IDeveloperTool } from '../IDeveloperTool';
+import { EnvironmentList } from './EnvironmentList';
+import { getEnvironmentConfigNamesList, getActiveEnvironmentConfigName } from './config';
+
+export type Props = {
+    onClose?: () => void;
+    leadingEllipses?: boolean;
+};
+
+export class EnvironmentSelection extends Component<Props> implements IDeveloperTool<Props> {
+    name = 'Environment selection';
+
+    div = createRef<HTMLDivElement>();
+
+    environmentListRef = createRef<EnvironmentList>();
+
+    displayToggler = getDisplayToggler(this.div, true);
+
+    componentDidMount() {
+        this.processDevelopmentStripe();
+    }
+
+    getEnvironments() {
+        const environmentConfigNamesList = getEnvironmentConfigNamesList();
+        const activeEnvironmentConfigName = getActiveEnvironmentConfigName();
+        return map(environmentConfigNamesList, (environmentConfigName) => ({
+            active: environmentConfigName === activeEnvironmentConfigName,
+            label: capitalizeFirstLetter(environmentConfigName),
+            value: environmentConfigName,
+        }));
+    }
+
+    closeEnvironmentSelectionList = () => {
+        const { onClose } = this.props;
+        this.clearMount('', this.div);
+        this.displayToggler.hide();
+        this.processDevelopmentStripe();
+        focusCandidate();
+        onClose?.();
+    };
+
+    show() {
+        this.openEnvironmentSelectionList();
+    }
+
+    hide() {
+        this.closeEnvironmentSelectionList();
+    }
+
+    openEnvironmentSelectionList() {
+        this.displayToggler.show();
+        this.renderEnvironmentList();
+        setActiveElementAsFocusCandidate();
+        this.environmentListRef.current!.focus();
+    }
+
+    processDevelopmentStripe() {
+        const environmentConfigNamesList = getEnvironmentConfigNamesList();
+        const activeEnvironmentConfigName = getActiveEnvironmentConfigName();
+        if (!environmentConfigNamesList.length || !activeEnvironmentConfigName) return;
+        const productionEnvironmentConfig = environmentConfigNamesList[0];
+        if (activeEnvironmentConfigName !== productionEnvironmentConfig) {
+            this.displayToggler.show();
+            this.renderDevelopmentStripe(activeEnvironmentConfigName);
+        }
+    }
+
+    renderEnvironmentList() {
+        this.appendMount(
+            <EnvironmentList
+                ref={this.environmentListRef}
+                data={this.getEnvironments()}
+                onClose={this.closeEnvironmentSelectionList}
+                leadingEllipses
+            />,
+            this.div,
+        );
+    }
+
+    renderDevelopmentStripe(environmentConfigName: string) {
+        this.clearMount(
+            <div className="development-stripe">
+                <div className="environment-config-name">{environmentConfigName}</div>
+            </div>,
+            this.div,
+        );
+    }
+
+    render() {
+        return (
+            <div
+                ref={this.div}
+                className={`environment-selection ${DISPLAY_NONE}`}
+            />
+        );
+    }
+}

package/packages/developer-tools/src/EnvironmentSelection/assets/checkmark.svg

@@ -1,18 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <g>
-                <g>
-                    <g>
-                        <g>
-                            <g>
-                                <path d="M0 0L40 0 40 40 0 40z" transform="translate(-720 -520) translate(720 372) translate(0 112) translate(0 36)"/>
-                                <path fill="#FFF" d="M15 26.95l-5.783-5.783c-.65-.65-1.7-.65-2.35 0-.65.65-.65 1.7 0 2.35l6.966 6.966c.65.65 1.7.65 2.35 0L33.817 12.85c.65-.65.65-1.7 0-2.35-.65-.65-1.7-.65-2.35 0L15 26.95z" transform="translate(-720 -520) translate(720 372) translate(0 112) translate(0 36)"/>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M0 0L40 0 40 40 0 40z" transform="translate(-720 -520) translate(720 372) translate(0 112) translate(0 36)"/>
+                                <path fill="#FFF" d="M15 26.95l-5.783-5.783c-.65-.65-1.7-.65-2.35 0-.65.65-.65 1.7 0 2.35l6.966 6.966c.65.65 1.7.65 2.35 0L33.817 12.85c.65-.65.65-1.7 0-2.35-.65-.65-1.7-.65-2.35 0L15 26.95z" transform="translate(-720 -520) translate(720 372) translate(0 112) translate(0 36)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/packages/developer-tools/src/EnvironmentSelection/config.ts

@@ -1,43 +1,43 @@
-import { IStorage, Storage as DefaultStorage } from '@24i/bigscreen-sdk/storage';
-import { findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
-import { config } from '@24i/bigscreen-sdk/runtime-config';
-import { ENVIRONMENT_CONFIG_NAME_KEY } from './constants';
-import { Config } from './types';
-
-let StorageInstance: IStorage;
-let environmentConfigNamesList: string[] = [];
-let activeEnvironmentConfigName = '';
-
-export const getEnvironmentConfigNamesList = () => environmentConfigNamesList;
-
-export const getActiveEnvironmentConfigName = () => activeEnvironmentConfigName;
-
-export const storeEnvironmentConfigName = async (environmentConfigName: string) => {
-    await StorageInstance?.setItem(ENVIRONMENT_CONFIG_NAME_KEY, environmentConfigName);
-};
-
-export const clearStorage = async () => {
-    await StorageInstance?.clear();
-};
-
-export const initEnvironmentConfig = async<
-    T extends Config = Config,
->(configInstance: typeof config, Storage: IStorage = DefaultStorage) => {
-    StorageInstance = Storage;
-    let environmentConfig;
-    const allEnvironmentConfigs = configInstance.get('environments') as T[] || [];
-    if (!allEnvironmentConfigs.length) throw Error('No environment configurations found.');
-    const storedEnvironmentConfigName = await StorageInstance.getItem(ENVIRONMENT_CONFIG_NAME_KEY);
-    const environmentConfigIndex = findIndex(
-        allEnvironmentConfigs, ({ name }) => name === storedEnvironmentConfigName,
-    );
-
-    if (!storedEnvironmentConfigName || environmentConfigIndex === -1) {
-        environmentConfig = allEnvironmentConfigs[0];
-    } else {
-        environmentConfig = allEnvironmentConfigs[environmentConfigIndex];
-    }
-    environmentConfigNamesList = map(allEnvironmentConfigs, (configuration) => configuration.name);
-    activeEnvironmentConfigName = storedEnvironmentConfigName || environmentConfigNamesList[0];
-    configInstance.setConfig(environmentConfig?.configuration || {});
-};
+import { IStorage, Storage as DefaultStorage } from '@24i/bigscreen-sdk/storage';
+import { findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { config } from '@24i/bigscreen-sdk/runtime-config';
+import { ENVIRONMENT_CONFIG_NAME_KEY } from './constants';
+import { Config } from './types';
+
+let StorageInstance: IStorage;
+let environmentConfigNamesList: string[] = [];
+let activeEnvironmentConfigName = '';
+
+export const getEnvironmentConfigNamesList = () => environmentConfigNamesList;
+
+export const getActiveEnvironmentConfigName = () => activeEnvironmentConfigName;
+
+export const storeEnvironmentConfigName = async (environmentConfigName: string) => {
+    await StorageInstance?.setItem(ENVIRONMENT_CONFIG_NAME_KEY, environmentConfigName);
+};
+
+export const clearStorage = async () => {
+    await StorageInstance?.clear();
+};
+
+export const initEnvironmentConfig = async<
+    T extends Config = Config,
+>(configInstance: typeof config, Storage: IStorage = DefaultStorage) => {
+    StorageInstance = Storage;
+    let environmentConfig;
+    const allEnvironmentConfigs = configInstance.get('environments') as T[] || [];
+    if (!allEnvironmentConfigs.length) throw Error('No environment configurations found.');
+    const storedEnvironmentConfigName = await StorageInstance.getItem(ENVIRONMENT_CONFIG_NAME_KEY);
+    const environmentConfigIndex = findIndex(
+        allEnvironmentConfigs, ({ name }) => name === storedEnvironmentConfigName,
+    );
+
+    if (!storedEnvironmentConfigName || environmentConfigIndex === -1) {
+        environmentConfig = allEnvironmentConfigs[0];
+    } else {
+        environmentConfig = allEnvironmentConfigs[environmentConfigIndex];
+    }
+    environmentConfigNamesList = map(allEnvironmentConfigs, (configuration) => configuration.name);
+    activeEnvironmentConfigName = storedEnvironmentConfigName || environmentConfigNamesList[0];
+    configInstance.setConfig(environmentConfig?.configuration || {});
+};

package/packages/developer-tools/src/EnvironmentSelection/constants.ts

@@ -1 +1 @@
-export const ENVIRONMENT_CONFIG_NAME_KEY = 'environment_config';
+export const ENVIRONMENT_CONFIG_NAME_KEY = 'environment_config';

package/packages/developer-tools/src/EnvironmentSelection/index.ts

@@ -1,2 +1,2 @@
-export { EnvironmentSelection } from './EnvironmentSelection';
-export { initEnvironmentConfig } from './config';
+export { EnvironmentSelection } from './EnvironmentSelection';
+export { initEnvironmentConfig } from './config';

package/packages/developer-tools/src/EnvironmentSelection/sizes.1080.ts

@@ -1,5 +1,5 @@
-export const height = 1080;
-export const defaultPaddingTop = 92;
-export const paddingCountThreshold = 8;
-export const visibleItems = 10;
-export const scrollStep = 112;
+export const height = 1080;
+export const defaultPaddingTop = 92;
+export const paddingCountThreshold = 8;
+export const visibleItems = 10;
+export const scrollStep = 112;

package/packages/developer-tools/src/EnvironmentSelection/sizes.ts

@@ -1,5 +1,5 @@
-export const height = 720;
-export const defaultPaddingTop = 61;
-export const paddingCountThreshold = 8;
-export const visibleItems = 10;
-export const scrollStep = 75;
+export const height = 720;
+export const defaultPaddingTop = 61;
+export const paddingCountThreshold = 8;
+export const visibleItems = 10;
+export const scrollStep = 75;

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.scss

@@ -1,141 +1,141 @@
-@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
-
-@mixin mask-svg-icon($icon-url) {
-    -webkit-mask-image: url($icon-url);
-    -webkit-mask-size: $checkmark-size;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-image: url($icon-url);
-    mask-size: $checkmark-size;
-    mask-repeat: no-repeat;
-    mask-position: center;
-}
-
-.environment-selection {
-    font-family: sans-serif;
-    text-align: center;
-
-    .development-stripe {
-        background-image: url('../assets/development-stripe.png');
-        background-repeat: no-repeat;
-        background-size: cover;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: $height;
-        width: $development-stripe-width;
-        z-index: 9100;
-
-        .environment-config-name {
-            position: relative;
-            top: $environment-config-name-top;
-            box-sizing: border-box;
-            display: inline-block;
-            background-color: #ef9e00;
-            border-top-right-radius: $environment-config-name-border-radius;
-            border-bottom-right-radius: $environment-config-name-border-radius;
-            text-transform: uppercase;
-            color: #000;
-            text-align: right;
-            font-size: $environment-config-name-font-size;
-            font-weight: 400;
-            padding-left: $environment-config-name-padding-left;
-            padding-right: $environment-config-name-padding-right;
-            line-height: $environment-config-name-height;
-            height: $environment-config-name-height;
-            max-width: $environment-config-name-width;
-            text-align: left;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .environment-list-overlay {
-        position: absolute;
-        background-color: #1f1f1f;
-        top: 0;
-        left: 0;
-        height: $height;
-        width: $width;
-        z-index: 9000;
-    } 
-    
-    .environment-list {
-        display: inline-block;
-        outline: none;
-        text-align: left;
-        width: $environment-list-width;
-
-        .scroll-content {
-            position: relative;
-        }
-
-        .environment-list-item {
-            position: relative;
-            display: inline-block;
-            outline: none;
-            box-sizing: border-box;
-            border-radius: $environment-list-item-border-radius;
-            padding: $environment-list-item-padding;
-            margin: $environment-list-item-margin;
-            line-height: $environment-list-item-line-height;
-            height: $environment-list-item-height;
-
-            .checkmark {
-                @include mask-svg-icon('../assets/checkmark.svg');
-                position: absolute;
-                top: $checkmark-top;
-                left: $checkmark-left;
-                background-color: #fff;
-                height: $checkmark-size;
-                width: $checkmark-size;
-                visibility: hidden;
-            }
-
-            .leading-ellipses-checkmark {
-                position: absolute;
-                height: 100%;
-                top: 0;
-            }
-            
-            .label {
-                font-size: $label-font-size;
-                font-weight: 400;
-                color: #8f8f8f;
-            }
-    
-            &:focus {
-                background-color: #727272;
-
-                .label {
-                    color: #fff;
-                }
-            }
-
-            &.active {
-                .checkmark {
-                    visibility: visible;
-                }
-
-                .label {
-                    color: #fff;
-                }
-            }
-
-            &.display-none {
-                visibility: hidden;
-            }
-        }
-
-        .leading-ellipses-list-item {
-            height: auto;
-        }
-
-        .normal-ellipses-list-item {
-            .label {
-                @include ellipsis;
-            }
-        }
-    }
-}
+@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
+
+@mixin mask-svg-icon($icon-url) {
+    -webkit-mask-image: url($icon-url);
+    -webkit-mask-size: $checkmark-size;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: url($icon-url);
+    mask-size: $checkmark-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.environment-selection {
+    font-family: sans-serif;
+    text-align: center;
+
+    .development-stripe {
+        background-image: url('../assets/development-stripe.png');
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: $height;
+        width: $development-stripe-width;
+        z-index: 9100;
+
+        .environment-config-name {
+            position: relative;
+            top: $environment-config-name-top;
+            box-sizing: border-box;
+            display: inline-block;
+            background-color: #ef9e00;
+            border-top-right-radius: $environment-config-name-border-radius;
+            border-bottom-right-radius: $environment-config-name-border-radius;
+            text-transform: uppercase;
+            color: #000;
+            text-align: right;
+            font-size: $environment-config-name-font-size;
+            font-weight: 400;
+            padding-left: $environment-config-name-padding-left;
+            padding-right: $environment-config-name-padding-right;
+            line-height: $environment-config-name-height;
+            height: $environment-config-name-height;
+            max-width: $environment-config-name-width;
+            text-align: left;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .environment-list-overlay {
+        position: absolute;
+        background-color: #1f1f1f;
+        top: 0;
+        left: 0;
+        height: $height;
+        width: $width;
+        z-index: 9000;
+    } 
+    
+    .environment-list {
+        display: inline-block;
+        outline: none;
+        text-align: left;
+        width: $environment-list-width;
+
+        .scroll-content {
+            position: relative;
+        }
+
+        .environment-list-item {
+            position: relative;
+            display: inline-block;
+            outline: none;
+            box-sizing: border-box;
+            border-radius: $environment-list-item-border-radius;
+            padding: $environment-list-item-padding;
+            margin: $environment-list-item-margin;
+            line-height: $environment-list-item-line-height;
+            height: $environment-list-item-height;
+
+            .checkmark {
+                @include mask-svg-icon('../assets/checkmark.svg');
+                position: absolute;
+                top: $checkmark-top;
+                left: $checkmark-left;
+                background-color: #fff;
+                height: $checkmark-size;
+                width: $checkmark-size;
+                visibility: hidden;
+            }
+
+            .leading-ellipses-checkmark {
+                position: absolute;
+                height: 100%;
+                top: 0;
+            }
+            
+            .label {
+                font-size: $label-font-size;
+                font-weight: 400;
+                color: #8f8f8f;
+            }
+    
+            &:focus {
+                background-color: #727272;
+
+                .label {
+                    color: #fff;
+                }
+            }
+
+            &.active {
+                .checkmark {
+                    visibility: visible;
+                }
+
+                .label {
+                    color: #fff;
+                }
+            }
+
+            &.display-none {
+                visibility: hidden;
+            }
+        }
+
+        .leading-ellipses-list-item {
+            height: auto;
+        }
+
+        .normal-ellipses-list-item {
+            .label {
+                @include ellipsis;
+            }
+        }
+    }
+}

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.1080.scss

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

package/packages/developer-tools/src/EnvironmentSelection/styles/EnvironmentSelection.styles.animated.1080.scss

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