@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
73 lines (72 loc) • 6.81 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
import { Button, CardMedia, Icon, Tab, Tabs, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
import AndroidPlaceholder from '../../../../assets/onBoarding/android';
import IosPlaceholder from '../../../../assets/onBoarding/ios';
const classes = {
root: `${PREFIX}-app-root`,
title: `${PREFIX}-app-title`,
tabs: `${PREFIX}-app-tabs`,
tabContent: `${PREFIX}-app-tab-content`,
summary: `${PREFIX}-app-summary`,
step: `${PREFIX}-app-step`,
image: `${PREFIX}-app-image`,
imageAndroid: `${PREFIX}-app-image-android`,
action: `${PREFIX}-app-action`,
button: `${PREFIX}-app-button`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'AppRoot'
})(() => ({}));
export default function App(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
//PROPS
const { className, step, onCompleteAction } = props;
// STATE
const [tab, setTab] = useState(0);
// HANDLERS
const handleChange = (event, newValue) => {
setTab(newValue);
};
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), _jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(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) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (...chunks) => _jsx("strong", { children: chunks })
} }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(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) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (...chunks) => _jsx("strong", { children: chunks })
} }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(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) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (...chunks) => _jsx("strong", { children: chunks })
} }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(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) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
b: (...chunks) => _jsx("strong", { children: chunks })
} }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
}