How to use @dhis2/ui-core - 10 common examples

render() {
        const height = Math.max(this.props.height, 0) + DRAG_HANDLE_HEIGHT;

        const rootStyle = Object.assign(
            {
                height,
                top: HEADERBAR_HEIGHT,
                backgroundColor: this.props.editMode
                    ? colors.yellow050
                    : colors.white,
                paddingBottom: DRAG_HANDLE_HEIGHT,
            },
            // Disable animations while dragging
            this.state.dragging ? { transition: 'none' } : {}
        );

        return (
            <div style="{rootStyle}">
                <div>{this.props.children}</div>
                {this.renderDragHandle()}
            </div>
        );
    }
}

render() {
        const height = Math.max(this.props.height, 0) + DRAG_HANDLE_HEIGHT;

        const rootStyle = Object.assign(
            {
                height,
                top: HEADERBAR_HEIGHT,
                backgroundColor: this.props.editMode
                    ? colors.yellow050
                    : colors.white,
                paddingBottom: DRAG_HANDLE_HEIGHT,
            },
            // Disable animations while dragging
            this.state.dragging ? { transition: 'none' } : {}
        );

        return (
            <div style="{rootStyle}">
                <div>{this.props.children}</div>
                {this.renderDragHandle()}
            </div>
        );
    }
}

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Chip, colors } from '@dhis2/ui-core';
import { Link } from 'react-router-dom';
import debounce from 'lodash/debounce';

import StarIcon from '../../icons/Star';
import { apiPostDataStatistics } from '../../api/dataStatistics';

const styles = {
    chip: {
        margin: '3px',
    },
    link: {
        color: colors.grey600,
        display: 'inline-block',
        textDecoration: 'none',
        verticalAlign: 'top',
    },
    icon: {
        height: '20px',
        marginTop: '2px',
        width: '20px',
    },
    selected: {
        fill: colors.white,
    },
    unselected: {
        fill: colors.grey700,
    },
};

const ContentMenuItem = ({ type, name, onInsert, url }) => {
    const ItemIcon = getItemIcon(type);

    return (
        <menuitem label="{">
                    <div>
                        
                        <span>{name}</span>
                        {url ?  : null}
                    </div>
                    
                
            }
        /&gt;
    );
};
</menuitem>

export const NoContentMessage = ({ text }) => (
    <div style="{{">
        {text}
    </div>
);

import React, { Fragment } from 'react';
import i18n from '@dhis2/d2-i18n';

import { colors } from '@dhis2/ui-core';
import ItemHeader from '../ItemHeader';

const style = {
    margin: '21px 28px',
    fontSize: '14px',
    lineHeight: '18px',
    color: colors.grey600,
};

const SpacerItem = () => {
    return (
        
            
            <p style="{style}">
                {i18n.t(
                    'Use a spacer to create empty vertical space between other dashboard items.'
                )}
            </p>
        
    );
};

export default SpacerItem;

import {
    acReceivedVisualization,
    acReceivedActiveVisualization,
} from '../../../actions/selected';
import { CHART, MAP, itemTypeMap } from '../../../modules/itemTypes';
import { colors } from '@dhis2/ui-core';
import memoizeOne from '../../../modules/memoizeOne';
import { getVisualizationConfig } from './plugin';

const styles = {
    icon: {
        width: 16,
        height: 16,
        marginLeft: 3,
        cursor: 'pointer',
        fill: colors.grey600,
    },
    title: {
        overflow: 'hidden',
        maxWidth: '85%',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
    },
    textDiv: {
        fontSize: '14px',
        fontStretch: 'normal',
        padding: '10px',
        lineHeight: '20px',
    },
};

const applyFilters = (visualization, filters) => {

import {
    sGetDashboardById,
    sGetDashboardItems,
} from '../../reducers/dashboards';
import { colors } from '@dhis2/ui-core';

const NO_DESCRIPTION = i18n.t('No description');

const styles = {
    actions: {
        display: 'flex',
        alignItems: 'center',
        marginLeft: '20px',
    },
    starIcon: {
        fill: colors.grey600,
    },
    textButton: {
        minWidth: '30px',
        top: '1px',
    },
    editLink: {
        display: 'inline-block',
        verticalAlign: 'top',
        textDecoration: 'none',
        marginRight: '4px',
    },
    titleBar: {
        display: 'flex',
        alignItems: 'flex-start',
    },
    titleBarIcon: {

render() {
        return (
            <div> this.props.onClick(this.toggle())}&gt;
                
            </div>
        );
    }
}

const LaunchIcon = ({ className }) => (
    <svg viewBox="0 0 24 24" fill="{colors.grey600}" height="12" width="12" xmlns="http://www.w3.org/2000/svg">
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>
    </svg>
);