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

import TextField from 'material-ui/TextField/TextField';
import { Observable } from 'rxjs';
import { getInstance, config } from 'd2';
import camelCaseToUnderscores from 'd2-utilizr/lib/camelCaseToUnderscores';
import ColorPicker from './ColorPicker.component';

import { Store } from '@dhis2/d2-ui-core';
import { Validators } from '@dhis2/d2-ui-forms';
import { mapProps } from '@dhis2/d2-ui-core';

config.i18n.strings.add('required');
config.i18n.strings.add('should_be_lower_than_end_value');
config.i18n.strings.add('should_be_higher_than_start_value');

export const legendItemStore = Store.create();

// FormBuilder currently requires an event to be passed for fields
function createFakeEvent(color) {
    return {
        target: {
            value: color,
        },
    };
}

export function openEditDialogFor(model) {
    legendItemStore.setState({
        model,
        open: true,
    });
}

return (
         setHovering(true)} onMouseLeave={() => setHovering(false)}>
            <div style="{{">
                {searchResultBoxContent}
            </div>
            <div style="{styles.moreAppsButtonWrap}">
                {moreAppsButton}
            </div>
        
    );
}

// Connect the store to the SearchResults component
// TODO: This means we can only have one search results at all times (Perhaps make this more dynamic?)
const SearchResultsWithState = withStateFrom(searchStore$, addD2Context(SearchResults));

export default SearchResultsWithState;

setInstance(this.props.d2)

        this.i18n = this.props.d2.i18n;

        this.i18n.strings.add('description');
        this.i18n.strings.add('program_tracked_entity_attributes');
        this.i18n.strings.add('program_indicators');
        this.i18n.strings.add('program_data_elements');
        this.i18n.strings.add('field_is_required');
        this.i18n.strings.add('organisation_unit_counts'); // shorten to org_unit_counts in maintenance
        this.i18n.strings.add('reporting_rates');
        this.i18n.strings.add('data_elements');
        this.i18n.strings.add('constants');
        this.i18n.strings.add('programs');

        this.requestExpressionStatusAction = Action.create('requestExpressionStatus');
    }

import { Action } from '@dhis2/d2-ui-core';
import { setDialogStateTo } from './LegendItem.store';

export const setDialogStateToAction = Action.create('setDialogStateToAction'); // name in debug

setDialogStateToAction.subscribe(action => setDialogStateTo(action.data));

...searchResult,
                    searchResults: appsMenuItems,
                };
            }

            return searchResult;
        },
    )
    .map(resultState => ({
        ...resultState,
        searchResults: resultState.searchResults
            .map((item, index) => Object.assign({}, item, { selected: resultState.selected === index })),
        open: Boolean(resultState.isSearchFieldFocused),
    }));

export const handleKeyPress = Action.create();
const keyPress$ = handleKeyPress
    .map(action => action.data);


// Handle an enter key press to go the location of the first item
keyPress$
    .filter(([event]) => event.keyCode === 13 || event.key === 'Enter')
    .flatMap(() => searchResultBoxStateStore$.take(1))
    // Find the selected menu item in the search results list by the `selected` index
    .map(state => state.searchResults.find((item, index) => index === state.selected))
    .filter(identity)
    .subscribe(
        itemToGoTo => window.location = itemToGoTo.action,
        log.error,
    );

import { getAllObjectsWithFields } from './data-helpers';

const organisationUnitGroupSelectorProps$ = Observable.fromPromise(getAllObjectsWithFields('organisationUnitGroup'))
    .map(organisationUnitGroups => ({
        source: organisationUnitGroups.map(model => ({ value: model.id, label: model.displayName })),
        onItemDoubleClick(value) {
            const ougFormula = ['OUG{', value, '}'].join('');

            // `this` is the react component props object
            if (isFunction(this.onSelect)) {
                this.onSelect(ougFormula);
            }
        },
    }));

export default withPropsFromObservable(organisationUnitGroupSelectorProps$, ListSelectWithLocalSearch);

import { getAllObjectsWithFields } from './data-helpers';

const constantSelectorProps$ = Observable.fromPromise(getAllObjectsWithFields('constant'))
    .map(constants => ({
        source: constants.map(model => ({ value: model.id, label: model.displayName })),
        onItemDoubleClick(value) {
            const constFormula = ['C{', value, '}'].join('');

            // `this` is the react component props object
            if (isFunction(this.onSelect)) {
                this.onSelect(constFormula);
            }
        },
    }));

export default withPropsFromObservable(constantSelectorProps$, ListSelectWithLocalSearch);

}, {
    name: 'endValue',
    component: TextField,
    props: {
        type: 'number',
    },
    validators: [{
        validator: value => (value !== ''),
        message: 'required',
    }, /* ,{
        validator: value => Number(value) <= Number(legendItemStore.getState().model.startValue) ? false : true,
        message: 'should_be_higher_than_start_value',
    } */],
}, { // Defined in data-table/data-value/Color.component.js
    name: 'color',
    component: mapProps(props => ({
        color: props.value,
        onChange(color) {
            props.onChange(createFakeEvent(color));
        },
    }), ColorPicker),
}];


// Called when a field is changed
export function onFieldChange(fieldName, value) {
    const model = legendItemStore.getState().model;

    model[fieldName] = value;

    legendItemStore.setState({
        ...legendItemStore.getState(),

import { Observable } from 'rxjs/Observable';
import { Store } from '@dhis2/d2-ui-core';
import { appsMenuSource$ } from '../utils/menu-sources';

const headerBarSettingsStore = Store.create();

export function setGrid(grid) {
    headerBarSettingsStore.setState(
        Object.assign({}, headerBarSettingsStore.getState() || {}, {
            grid,
        }),
    );
}

setGrid({ x: 3, y: 3 });

export default Observable.combineLatest(
    appsMenuSource$,
    headerBarSettingsStore,
    (appItems, headerBarSettings) => ({
        ...headerBarSettings,

return;
    }

    searchResultBoxStateStore$.setState({
        ...searchResultBoxStateStore$.getState(),
        selected: searchResultBoxStateStore$.getState().selected + selected,
    });
}

export function hideWhenNotHovering() {
    if (searchResultBoxStateStore$.getState() && !searchResultBoxStateStore$.getState().isHoveringOverResults) {
        setSearchFieldFocusTo(false);
    }
}

export const search = Action.create('Search Apps');
search
    .map(action => action.data || '')
    .subscribe(setSearchValue);

const searchSourceStore$ = headerBarStore$
    .map(headerBarState => [].concat(headerBarState.appItems, headerBarState.profileItems))
    .flatMap(addDeepLinksForMaintenance)
    .flatMap(addDeepLinksForSettings);

export const searchStore$ = Observable
    .combineLatest(
        searchResultBoxStateStore$,
        appsMenuItems$,
        (searchResult, appsMenuItems) => {
            if (!searchResult.searchValue) {
                return {