How to use webiny-app - 10 common examples

// TODO: const i18n = React.isValidElement(label) && isElementOfType(label, i18n.getComponent());
        // if (_.isString(this.props.label) || i18n) {
        if (_.isString(this.props.label)) {
            const { Icon } = this.props.modules;
            label = (
                <a>
                    {this.props.icon ?  : null}
                    <span>{label}</span>
                </a>
            );
        }
        return label;
    }
};

export default createComponent(TabHeader, { modules: ['Icon'], styles });

const { render, modules: { Button }, ...props } = this.props;

        if (render) {
            return render.call(this);
        }

        return <button>;
    }
}

// Receives all standard Button component props
Action.defaultProps = {
    wizard: null
};

export default createComponent(Action, { modules: ["Button"] });
</button>

import React from "react";
import css from "./EntitiesList.scss";
import { createComponent, i18n } from "webiny-app";
import _ from "lodash";
import classNames from "classnames";

const t = i18n.namespace("Security.PermissionsForm.Scopes.ClassesLists");

class EntitiesList extends React.Component {
    constructor() {
        super();
        this.state = {
            filter: null
        };
    }

    renderListItem(entity) {
        const { Checkbox } = this.props.modules;
        const selected = this.props.entities.current === entity;

        const modelPath = `permissions.entities.${entity.id}`;

        return (

import React from "react";
import { createComponent, i18n } from "webiny-app";
import PageFilter from "./components/PageFilter";
import PageListControls from "./components/PageListControls";
import PageContentPreview from "./components/PageContentPreview";
import CreatePageDialog from "./CreatePageDialog";
import styles from "./PageList.scss";

const t = i18n.namespace("Cms.Admin.Views.PageList");

class PageList extends React.Component {
    constructor() {
        super();

        this.state = {
            category: null
        };
    }

    render() {
        const {
            //List,
            ListData,
            View,
            Link,

import React from "react";
import { app, createComponent, i18n } from "webiny-app";

const t = i18n.namespace("Webiny.Ui.Settings");
class Settings extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        const growler = app.services.get("growler");

        const { Form } = this.props.modules;
        const formProps = {
            api: this.props.api,
            createHttpMethod: "patch",
            onSuccessMessage: this.props.onSuccessMessage,
            onSubmitSuccess: this.props.onSubmitSuccess,
            children: this.props.children,
            loadModel({ form }) {

import React from "react";
import _ from "lodash";
import { createComponent, i18n } from "webiny-app";
import ModalAction from "./ModalAction";

const t = i18n.namespace("Webiny.Ui.List.Table.Actions");
class DeleteAction extends React.Component {
    constructor() {
        super();
        this.dialogId = _.uniqueId("delete-action-modal-");
    }

    shouldComponentUpdate(props) {
        return !_.isEqual(props.data, this.props.data);
    }

    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        const { message, modules: { Modal: { Confirmation } } } = this.props;

import React from "react";
import _ from "lodash";
import { createComponent, i18n } from "webiny-app";
import { ModalConfirmationComponent } from "webiny-app-ui";
import Dialog from "./Dialog";
import Content from "./Content";
import Body from "./Body";
import Footer from "./Footer";

const t = i18n.namespace("Webiny.Ui.Modal.Confirmation");
class Confirmation extends React.Component {
    render() {
        const { modules: { Loader, Button }, styles, title, render } = this.props;
        if (render) {
            return render.call(this);
        }

        let content = this.props.message || this.props.children;
        if (_.isFunction(content)) {
            content = content({ data: this.props.data });
        }

        return (

class Footer extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

export default createComponent(Footer, { styles });

this.props.className
        );

        return (
            
                {this.props.children}
            
        );
    }
}

Footer.defaultProps = {
    align: null
};

export default createComponent(Footer, { modules: ['Panel'], styles });

class Footer extends React.Component {
    render() {
        if (this.props.render) {
            return this.props.render.call(this);
        }

        const classes = classSet(this.props.styles.footer, this.props.className);
        return <div style="{this.props.style}">{this.props.children}</div>;
    }
}

Footer.defaultProps = {
    style: {}
};

export default createComponent(Footer, { styles });