@selfcommunity/react-ui/lib/cjs/components/OnBoardingWidget/Steps/App/App.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const constants_1 = require("../../constants");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const types_1 = require("@selfcommunity/types");
const android_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/android"));
const ios_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/ios"));
const classes = {
    root: `${constants_1.PREFIX}-app-root`,
    title: `${constants_1.PREFIX}-app-title`,
    tabs: `${constants_1.PREFIX}-app-tabs`,
    tabContent: `${constants_1.PREFIX}-app-tab-content`,
    summary: `${constants_1.PREFIX}-app-summary`,
    step: `${constants_1.PREFIX}-app-step`,
    image: `${constants_1.PREFIX}-app-image`,
    imageAndroid: `${constants_1.PREFIX}-app-image-android`,
    action: `${constants_1.PREFIX}-app-action`,
    button: `${constants_1.PREFIX}-app-button`
};
const Root = (0, styles_1.styled)(Box_1.default, {
    name: constants_1.PREFIX,
    slot: 'AppRoot'
})(() => ({}));
function App(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    //PROPS
    const { className, step, onCompleteAction } = props;
    // STATE
    const [tab, setTab] = (0, react_1.useState)(0);
    // HANDLERS
    const handleChange = (event, newValue) => {
        setTab(newValue);
    };
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.imageAndroid, component: "img", src: android_1.default })] })), tab === 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: ios_1.default })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
}
exports.default = App;