superdesk/superdesk-client-core

View on GitHub
scripts/extensions/sams/src/utils/ui.tsx

Summary

Maintainability
A
1 hr
Test Coverage
// External Modules
import * as React from 'react';
import {Provider} from 'react-redux';

import {showModal} from '@superdesk/common';

// Types
import {ASSET_SORT_FIELD, ASSET_STATE, DATA_UNIT, IAssetItem, RENDITION} from '../interfaces';
import {superdeskApi} from '../apis';

// Redux Actions & Selectors
import {getStore} from '../store';

// UI
import {Label} from 'superdesk-ui-framework/react';

export function showModalConnectedToStore<T = any>(
    Component: React.ComponentType<{closeModal(): void} & any>,
    props?: T,
): Promise<void> {
    const store = getStore();

    if (store == null) {
        return Promise.reject('SAMS store has not been initialised');
    }

    return showModal(
        ({closeModal}) => (
            <Provider store={store}>
                <Component closeModal={closeModal} {...props ?? {}} />
            </Provider>
        ),
    );
}

export function getHumanReadableFileSize(fileSize: number): string {
    if (fileSize < 1024) {
        return fileSize + 'bytes';
    } else if (fileSize < 1048576) {
        return (fileSize / 1024).toFixed(1) + 'KB';
    } else {
        return (fileSize / 1048576).toFixed(1) + 'MB';
    }
}

export function getIconTypeFromMimetype(mimetype: string) {
    if (mimetype.startsWith('image/')) {
        return 'photo';
    } else if (mimetype.startsWith('video/')) {
        return 'video';
    } else if (mimetype.startsWith('audio/')) {
        return 'audio';
    } else {
        return 'text';
    }
}

export function getFileSizeFromHumanReadable(fileSize: number, dataUnit: DATA_UNIT) {
    switch (dataUnit) {
    case DATA_UNIT.BYTES:
        return fileSize;
    case DATA_UNIT.KB:
        return fileSize * 1024;
    case DATA_UNIT.MB:
        return fileSize * 1024 * 1024;
    case DATA_UNIT.GB:
        return fileSize * 1024 * 1024 * 1024;
    }
}

export function getAssetStateLabel(assetState: ASSET_STATE) {
    const {gettext} = superdeskApi.localization;

    switch (assetState) {
    case ASSET_STATE.INTERNAL:
        return (
            <Label
                text={gettext('Internal')}
                style="hollow"
                color="red--800"
            />
        );
    case ASSET_STATE.DRAFT:
        return (
            <Label
                text={gettext('Draft')}
                style="hollow"
                type="warning"
            />
        );
    case ASSET_STATE.PUBLIC:
        return (
            <Label
                text={gettext('Public')}
                style="hollow"
                type="success"
            />
        );
    }

    superdeskApi.helpers.assertNever(assetState);
}

export function getAssetListSortFieldText(field: ASSET_SORT_FIELD): string {
    const {gettext} = superdeskApi.localization;

    switch (field) {
    case ASSET_SORT_FIELD.NAME:
        return gettext('Name');
    case ASSET_SORT_FIELD.FILENAME:
        return gettext('Filename');
    case ASSET_SORT_FIELD.SIZE:
        return gettext('Size');
    case ASSET_SORT_FIELD.CREATED:
        return gettext('Created');
    case ASSET_SORT_FIELD.UPDATED:
        return gettext('Updated');
    }

    superdeskApi.helpers.assertNever(field);
}

export function getAssetRenditionDimension(asset: IAssetItem, rendition: RENDITION) {
    const {gettext} = superdeskApi.localization;

    // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
    const dimensions = asset.renditions.find((r) => r?.name === rendition)?.params!;

    return gettext('{{width}} * {{height}}', {width: dimensions.width, height: dimensions.height});
}