diff options
Diffstat (limited to 'front/odiparpack/app/containers')
308 files changed, 28585 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/.DS_Store b/front/odiparpack/app/containers/.DS_Store Binary files differnew file mode 100644 index 0000000..71c8885 --- /dev/null +++ b/front/odiparpack/app/containers/.DS_Store diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js new file mode 100644 index 0000000..0a3ffc2 --- /dev/null +++ b/front/odiparpack/app/containers/App/Application.js @@ -0,0 +1,131 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { Switch, Route } from 'react-router-dom'; +import Dashboard from '../Templates/Dashboard'; +import { + DashboardV1, DashboardV2, + Parent, AppLayout, Responsive, Grid, + SimpleTable, AdvancedTable, TablePlayground, + TreeTable, CrudTable, + ReduxForm, DateTimePicker, CheckboxRadio, + Switches, Selectbox, Rating, + SliderRange, Buttons, Textbox, + Autocomplete, Upload, TextEditor, + Avatars, Accordion, Badges, + List, PopoverTooltip, Notification, + Typography, Tabs, Cards, + ImageGrid, Progress, DialogModal, + Steppers, Paginations, DrawerMenu, + Breadcrumbs, Icons, + SliderCarousel, Tags, Dividers, + LineCharts, BarCharts, AreaCharts, PieCharts, + RadarCharts, ScatterCharts, CompossedCharts, ResponsiveCharts, + Contact, Chat, Email, + Ecommerce, SocialMedia, Calendar, + Profile, BlankPage, + Photos, Error, Settings, + HelpSupport, MapMarker, MapDirection, SearchMap, + TrafficIndicator, StreetViewMap, NotFound +} from '../pageListAsync'; + +function Application(props) { + const { history } = props; + + return ( + <Dashboard history={history}> + <Switch> + <Route exact path="/app" component={DashboardV1} /> + <Route exact path="/app/dashboard-v2" component={DashboardV2} /> + { /* Layout */ } + <Route exact path="/app/layouts" component={Parent} /> + <Route path="/app/layouts/grid" component={Grid} /> + <Route path="/app/layouts/app-layout" component={AppLayout} /> + <Route path="/app/layouts/responsive" component={Responsive} /> + { /* Table */ } + <Route exact path="/app/tables" component={Parent} /> + <Route path="/app/tables/basic-table" component={SimpleTable} /> + <Route path="/app/tables/data-table" component={AdvancedTable} /> + <Route path="/app/tables/table-playground" component={TablePlayground} /> + <Route path="/app/tables/tree-table" component={TreeTable} /> + <Route path="/app/tables/crud-table" component={CrudTable} /> + { /* Form & Button */ } + <Route exact path="/app/forms" component={Parent} /> + <Route path="/app/forms/reduxform" component={ReduxForm} /> + <Route path="/app/forms/date-time-picker" component={DateTimePicker} /> + <Route path="/app/forms/checkbox-radio" component={CheckboxRadio} /> + <Route path="/app/forms/switches" component={Switches} /> + <Route path="/app/forms/selectbox" component={Selectbox} /> + <Route path="/app/forms/ratting" component={Rating} /> + <Route path="/app/forms/slider-range" component={SliderRange} /> + <Route path="/app/forms/buttons" component={Buttons} /> + <Route path="/app/forms/textfields" component={Textbox} /> + <Route path="/app/forms/autocomplete" component={Autocomplete} /> + <Route path="/app/forms/upload" component={Upload} /> + <Route path="/app/forms/wysiwyg-editor" component={TextEditor} /> + { /* Ui Components */} + <Route exact path="/app/ui" component={Parent} /> + <Route path="/app/ui/avatars" component={Avatars} /> + <Route path="/app/ui/accordion" component={Accordion} /> + <Route path="/app/ui/badges" component={Badges} /> + <Route path="/app/ui/list" component={List} /> + <Route path="/app/ui/popover-tooltip" component={PopoverTooltip} /> + <Route path="/app/ui/notification" component={Notification} /> + <Route path="/app/ui/typography" component={Typography} /> + <Route path="/app/ui/tabs" component={Tabs} /> + <Route path="/app/ui/card-papper" component={Cards} /> + <Route path="/app/ui/image-grid" component={ImageGrid} /> + <Route path="/app/ui/progress" component={Progress} /> + <Route path="/app/ui/dialog-modal" component={DialogModal} /> + <Route path="/app/ui/steppers" component={Steppers} /> + <Route path="/app/ui/paginations" component={Paginations} /> + <Route path="/app/ui/drawer-menu" component={DrawerMenu} /> + <Route path="/app/ui/breadcrumbs" component={Breadcrumbs} /> + <Route path="/app/ui/icons" component={Icons} /> + <Route path="/app/ui/slider-carousel" component={SliderCarousel} /> + <Route path="/app/ui/tags" component={Tags} /> + <Route path="/app/ui/dividers" component={Dividers} /> + { /* Chart */ } + <Route exact path="/app/charts" component={Parent} /> + <Route path="/app/charts/line-charts" component={LineCharts} /> + <Route path="/app/charts/bar-charts" component={BarCharts} /> + <Route path="/app/charts/area-charts" component={AreaCharts} /> + <Route path="/app/charts/pie-charts" component={PieCharts} /> + <Route path="/app/charts/radar-charts" component={RadarCharts} /> + <Route path="/app/charts/scatter-charts" component={ScatterCharts} /> + <Route path="/app/charts/compossed-chart" component={CompossedCharts} /> + <Route path="/app/charts/responsive-chart" component={ResponsiveCharts} /> + { /* Sample Apps */ } + <Route path="/app/pages/contact" component={Contact} /> + <Route path="/app/pages/chat" component={Chat} /> + <Route path="/app/pages/email" component={Email} /> + <Route path="/app/pages/social-media" component={SocialMedia} /> + <Route path="/app/pages/ecommerce" component={Ecommerce} /> + <Route path="/app/pages/calendar" component={Calendar} /> + { /* Pages */ } + <Route exact path="/app/pages" component={Parent} /> + <Route path="/app/pages/user-profile" component={Profile} /> + <Route path="/app/pages/blank-page" component={BlankPage} /> + <Route path="/app/pages/photo-gallery" component={Photos} /> + <Route path="/app/pages/not-found" component={NotFound} /> + <Route path="/app/pages/error" component={Error} /> + <Route path="/app/pages/settings" component={Settings} /> + <Route path="/app/pages/help-support" component={HelpSupport} /> + { /* Map */ } + <Route exact path="/app/maps" component={Parent} /> + <Route path="/app/maps/map-marker" component={MapMarker} /> + <Route path="/app/maps/map-direction" component={MapDirection} /> + <Route path="/app/maps/map-searchbox" component={SearchMap} /> + <Route path="/app/maps/map-traffic" component={TrafficIndicator} /> + <Route path="/app/maps/street-view" component={StreetViewMap} /> + { /* Default */ } + <Route component={NotFound} /> + </Switch> + </Dashboard> + ); +} + +Application.propTypes = { + history: PropTypes.object.isRequired, +}; + +export default Application; diff --git a/front/odiparpack/app/containers/App/Auth.js b/front/odiparpack/app/containers/App/Auth.js new file mode 100644 index 0000000..740f7f3 --- /dev/null +++ b/front/odiparpack/app/containers/App/Auth.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import Outer from '../Templates/Outer'; +import { + Login, + Register, + ResetPassword, + NotFound, + Maintenance, + LockScreen +} from '../pageListAsync'; + +function Auth() { + return ( + <Outer> + <Switch> + <Route path="/login" component={Login} /> + <Route path="/register" component={Register} /> + <Route path="/reset-password" component={ResetPassword} /> + <Route path="/maintenance" component={Maintenance} /> + <Route path="/lock-screen" component={LockScreen} /> + <Route component={NotFound} /> + </Switch> + </Outer> + ); +} + +export default Auth; diff --git a/front/odiparpack/app/containers/App/ThemeWrapper.js b/front/odiparpack/app/containers/App/ThemeWrapper.js new file mode 100644 index 0000000..f39945f --- /dev/null +++ b/front/odiparpack/app/containers/App/ThemeWrapper.js @@ -0,0 +1,111 @@ +import React, { useState, useEffect } from 'react'; +import { PropTypes } from 'prop-types'; +import { connect } from 'react-redux'; +import Loading from 'react-loading-bar'; +import { bindActionCreators } from 'redux'; +import { + withStyles, + createMuiTheme, + MuiThemeProvider +} from '@material-ui/core/styles'; +import 'ba-styles/vendors/react-loading-bar/index.css'; +import { changeThemeAction } from 'ba-actions/UiActions'; +import themePallete from 'ba-api/themePalette'; +import TemplateSettings from 'ba-components/TemplateSettings'; +//import { Button, Icon } from '@material-ui/core'; +import styles from '../Templates/appStyles-jss'; +import { esES } from '@material-ui/core/locale'; + +function ThemeWrapper(props) { + const { + classes, + children, + palette, + color, + changeTheme + } = props; + + const [pageLoaded, setPageLoaded] = useState(true); + const [open, setOpen] = useState(false); + const [newPalette, setNewPalette] = useState(undefined); + const [theme, setTheme] = useState( + createMuiTheme(themePallete(color),esES) + ); + + useEffect(() => { + setNewPalette(palette); + setPageLoaded(true); + setTimeout(() => { + setPageLoaded(false); + }, 500); + return () => { + setPageLoaded(true); + }; + }, []); + + const handleOpenPallete = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleChangeTheme = event => { + setTheme(createMuiTheme(themePallete(event.target.value),esES)); + changeTheme(event.target.value); + }; + + return ( + <MuiThemeProvider theme={theme}> + + <div className={classes.root}> + <Loading + show={pageLoaded} + color="rgba(255,255,255,.9)" + showSpinner={false} + /> + {/* <Button onClick={handleOpenPallete} className={classes.btnPicker}> + <span className={classes.btn}> + <Icon className={classes.icon}>palette</Icon> + Theme + </span> + </Button> */} + <TemplateSettings + open={open} + palette={newPalette} + changeTheme={handleChangeTheme} + selectedValue={color} + close={handleClose} + /> + {children} + </div> + </MuiThemeProvider> + ); +} + +ThemeWrapper.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + color: PropTypes.string.isRequired, + changeTheme: PropTypes.func.isRequired, + palette: PropTypes.object.isRequired, +}; + +const reducer = 'ui'; +const mapStateToProps = state => ({ + ...state, + color: state.getIn([reducer, 'theme']), + palette: state.getIn([reducer, 'palette']), +}); + +const dispatchToProps = dispatch => ({ + changeTheme: bindActionCreators(changeThemeAction, dispatch), +}); + +const ThemeWrapperMapped = connect( + mapStateToProps, + dispatchToProps +)(ThemeWrapper); + +export default withStyles(styles)(ThemeWrapperMapped); diff --git a/front/odiparpack/app/containers/App/index.js b/front/odiparpack/app/containers/App/index.js new file mode 100644 index 0000000..a7313fe --- /dev/null +++ b/front/odiparpack/app/containers/App/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import NotFound from 'containers/Pages/Standalone/NotFoundDedicated'; +import Auth from './Auth'; +import Application from './Application'; +import LoginDedicated from '../Pages/Standalone/LoginDedicated'; +import ThemeWrapper from './ThemeWrapper'; +window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; + +function App() { + return ( + <ThemeWrapper> + <Switch> + <Route path="/" exact component={LoginDedicated} /> + <Route path="/app" component={Application} /> + <Route component={Auth} /> + <Route component={NotFound} /> + </Switch> + </ThemeWrapper> + ); +} + +export default App; diff --git a/front/odiparpack/app/containers/Charts/AreaCharts.js b/front/odiparpack/app/containers/Charts/AreaCharts.js new file mode 100644 index 0000000..0468c22 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/AreaCharts.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + AreaSimple, + AreaStacked, + AreaPercent, + AreaNegativePositive, + AreaResponsive +} from './demos'; + +class AreaCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Area Chart" overflowX desc=""> + <div> + <AreaSimple /> + <SourceReader componentName={docSrc + 'AreaSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Stacked Area Chart" overflowX desc=""> + <div> + <AreaStacked /> + <SourceReader componentName={docSrc + 'AreaStacked.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Percent Area Chart" overflowX desc=""> + <div> + <AreaPercent /> + <SourceReader componentName={docSrc + 'AreaPercent.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Positive Negative Area Chart" overflowX desc=""> + <div> + <AreaNegativePositive /> + <SourceReader componentName={docSrc + 'AreaNegativePositive.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Responsive Area Chart" overflowX desc=""> + <div> + <AreaResponsive /> + <SourceReader componentName={docSrc + 'AreaResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default AreaCharts; diff --git a/front/odiparpack/app/containers/Charts/BarCharts.js b/front/odiparpack/app/containers/Charts/BarCharts.js new file mode 100644 index 0000000..4d24f78 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/BarCharts.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + BarSimple, + BarStacked, + BarMix, + BarCustom, + BarPositiveNegative, + BarCustomLabel, + BarResponsive +} from './demos'; + +class BarCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Bar Chart" desc="" overflowX> + <div> + <BarSimple /> + <SourceReader componentName={docSrc + 'BarSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Stacked Bar Chart" desc="" overflowX> + <div> + <BarStacked /> + <SourceReader componentName={docSrc + 'BarStacked.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Simple Mixing Bar" desc="" overflowX> + <div> + <BarMix /> + <SourceReader componentName={docSrc + 'BarMix.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Bar Shape" desc="" overflowX> + <div> + <BarCustom /> + <SourceReader componentName={docSrc + 'BarCustom.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Label Bar Chart" desc="" overflowX> + <div> + <BarCustomLabel /> + <SourceReader componentName={docSrc + 'BarCustomLabel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Positive Negative Bar Chart" desc="" overflowX> + <div> + <BarPositiveNegative /> + <SourceReader componentName={docSrc + 'BarPositiveNegative.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Responsive Bar Chart" desc="" overflowX> + <div> + <BarResponsive /> + <SourceReader componentName={docSrc + 'BarResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default BarCharts; diff --git a/front/odiparpack/app/containers/Charts/CompossedCharts.js b/front/odiparpack/app/containers/Charts/CompossedCharts.js new file mode 100644 index 0000000..08937c7 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/CompossedCharts.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + CompossedLineBarArea, + CompossedSameData, + CompossedVertical, + CompossedResponsive +} from './demos'; + +class CompossedCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Compossed Line Bar & Area Chart" desc="" overflowX> + <div> + <CompossedLineBarArea /> + <SourceReader componentName={docSrc + 'CompossedLineBarArea.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Compossed Same Data Chart" desc="" overflowX> + <div> + <CompossedSameData /> + <SourceReader componentName={docSrc + 'CompossedSameData.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Compossed Vertical Chart" desc="" overflowX> + <div> + <CompossedVertical /> + <SourceReader componentName={docSrc + 'CompossedVertical.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Compossed Responsive Chart" desc="" overflowX> + <div> + <CompossedResponsive /> + <SourceReader componentName={docSrc + 'CompossedResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default CompossedCharts; diff --git a/front/odiparpack/app/containers/Charts/LineCharts.js b/front/odiparpack/app/containers/Charts/LineCharts.js new file mode 100644 index 0000000..9f34f91 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/LineCharts.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + LineSimple, + LineVertical, + LineCustomDot, + LineCustomLabel, + LineResponsive +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Line Chart" desc="" overflowX> + <div> + <LineSimple /> + <SourceReader componentName={docSrc + 'LineSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Vertical Line Chart" desc="" overflowX> + <div> + <LineVertical /> + <SourceReader componentName={docSrc + 'LineVertical.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Dot Line Chart" desc="" overflowX> + <div> + <LineCustomDot /> + <SourceReader componentName={docSrc + 'LineCustomDot.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Label Line Chart" desc="" overflowX> + <div> + <LineCustomLabel /> + <SourceReader componentName={docSrc + 'LineCustomLabel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Responsive Line Chart" desc="" overflowX> + <div> + <LineResponsive /> + <SourceReader componentName={docSrc + 'LineResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Charts/PieCharts.js b/front/odiparpack/app/containers/Charts/PieCharts.js new file mode 100644 index 0000000..b5609e2 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/PieCharts.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + PieSimple, + PieCustomShape, + PieCustomLabel, +} from './demos'; + +class PieCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Pie Chart" desc="" overflowX> + <div> + <PieSimple /> + <SourceReader componentName={docSrc + 'PieSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Shape Pie Chart" desc="" overflowX> + <div> + <PieCustomShape /> + <SourceReader componentName={docSrc + 'PieCustomShape.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Label Pie Chart" desc="" overflowX> + <div> + <PieCustomLabel /> + <SourceReader componentName={docSrc + 'PieCustomLabel.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default PieCharts; diff --git a/front/odiparpack/app/containers/Charts/RadarCharts.js b/front/odiparpack/app/containers/Charts/RadarCharts.js new file mode 100644 index 0000000..23fff3e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/RadarCharts.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + RadarSimple, + DoubleRadar +} from './demos'; + +class RadarCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Radar Chart" desc="" overflowX> + <div> + <RadarSimple /> + <SourceReader componentName={docSrc + 'RadarSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Double Radar Chart" desc="" overflowX> + <div> + <DoubleRadar /> + <SourceReader componentName={docSrc + 'DoubleRadar.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default RadarCharts; diff --git a/front/odiparpack/app/containers/Charts/ResponsiveCharts.js b/front/odiparpack/app/containers/Charts/ResponsiveCharts.js new file mode 100644 index 0000000..ab8bb17 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/ResponsiveCharts.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + AreaResponsive, + BarResponsive, + LineResponsive, + ScatterResponsive, + CompossedResponsive +} from './demos'; + +class ScatterCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Area Responsive Chart" desc="" overflowX> + <div> + <AreaResponsive /> + <SourceReader componentName={docSrc + 'AreaResponsive.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Bar Responsive Chart" desc="" overflowX> + <div> + <BarResponsive /> + <SourceReader componentName={docSrc + 'BarResponsive.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Line Responsive Chart" desc="" overflowX> + <div> + <LineResponsive /> + <SourceReader componentName={docSrc + 'LineResponsive.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scatter Responsive Chart" desc="" overflowX> + <div> + <ScatterResponsive /> + <SourceReader componentName={docSrc + 'ScatterResponsive.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Compossed Responsive Chart" desc="" overflowX> + <div> + <CompossedResponsive /> + <SourceReader componentName={docSrc + 'CompossedResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default ScatterCharts; diff --git a/front/odiparpack/app/containers/Charts/ScatterCharts.js b/front/odiparpack/app/containers/Charts/ScatterCharts.js new file mode 100644 index 0000000..b680738 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/ScatterCharts.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + ScatterSimple, + ScatterJoinLine, + ScatterMultiple, + ScatterCustom, + ScatterResponsive +} from './demos'; + +class ScatterCharts extends React.Component { + render() { + const title = brand.name + ' - Chart'; + const description = brand.desc; + const docSrc = 'containers/Charts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Scatter Simple Chart" desc="" overflowX> + <div> + <ScatterSimple /> + <SourceReader componentName={docSrc + 'ScatterSimple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scatter Join Line Chart" desc="" overflowX> + <div> + <ScatterJoinLine /> + <SourceReader componentName={docSrc + 'ScatterJoinLine.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scatter Multiple Chart" desc="" overflowX> + <div> + <ScatterMultiple /> + <SourceReader componentName={docSrc + 'ScatterMultiple.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scatter Custom Icon Chart" desc="" overflowX> + <div> + <ScatterCustom /> + <SourceReader componentName={docSrc + 'ScatterCustom.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scatter Responsive Chart" desc="" overflowX> + <div> + <ScatterResponsive /> + <SourceReader componentName={docSrc + 'ScatterResponsive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default ScatterCharts; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js b/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js new file mode 100644 index 0000000..dd5793a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaNegativePositive.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { data3 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const gradientOffset = () => { + const dataMax = Math.max(...data3.map((i) => i.uv)); + const dataMin = Math.min(...data3.map((i) => i.uv)); + + if (dataMax <= 0) { + return 0; + } else if (dataMin >= 0) { + return 1; + } + return dataMax / (dataMax - dataMin); +}; + +const off = gradientOffset(); + +function AreaNegativePositive() { + return ( + <AreaChart + width={800} + height={450} + data={data3} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <defs> + <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1"> + <stop offset={off} stopColor={color.secondary} stopOpacity={1} /> + <stop offset={off} stopColor={color.primary} stopOpacity={1} /> + </linearGradient> + </defs> + <Area type="monotone" dataKey="uv" stroke="#bcbcbc" fillOpacity="0.8" fill="url(#splitColor)" /> + </AreaChart> + ); +} + +export default AreaNegativePositive; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaPercent.js b/front/odiparpack/app/containers/Charts/demos/AreaPercent.js new file mode 100644 index 0000000..32902e1 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaPercent.js @@ -0,0 +1,79 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { red } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenNatureTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: red[500], + thirddark: red[900], +}); + +const toPercent = (decimal, fixed = 0) => ( + `${(decimal * 100).toFixed(fixed)}%` +); + +const getPercent = (value, total) => { + const ratio = total > 0 ? value / total : 0; + return toPercent(ratio, 2); +}; + +const renderTooltipContent = (o) => { + const { payload, label } = o; + const total = payload.reduce((result, entry) => (result + entry.value), 0); + + return ( + <div className="customized-tooltip-content"> + <p className="total">{`${label} (Total: ${total})`}</p> + <ul className="list"> + { + payload.map((entry, index) => ( + <li key={`item-${index.toString()}`} style={{ color: entry.color }}> + {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`} + </li> + )) + } + </ul> + </div> + ); +}; + +function AreaPercent() { + return ( + <AreaChart + width={800} + height={450} + data={data1} + stackOffset="expand" + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip content={renderTooltipContent} /> + <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity={0.8} fill={color.primary} /> + <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity={0.8} fill={color.secondarydark} /> + <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity={0.8} fill={color.thirddark} /> + </AreaChart> + ); +} + +export default AreaPercent; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js b/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js new file mode 100644 index 0000000..a1bc4c0 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaResponsive.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: green[500], + thirddark: green[900], +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function AreaResponsive(props) { + const { classes } = props; + return ( + <div className={classes.chartFluid}> + <ResponsiveContainer> + <AreaChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} /> + <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity="0.8" fill={color.secondarydark} /> + <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity="0.8" fill={color.thirddark} /> + </AreaChart> + </ResponsiveContainer> + </div> + ); +} + +AreaResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AreaResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/AreaSimple.js b/front/odiparpack/app/containers/Charts/demos/AreaSimple.js new file mode 100644 index 0000000..590d19c --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaSimple.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { data2 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + main: theme.palette.primary.main, + dark: theme.palette.primary.dark, +}); + +function AreaSimple() { + return ( + <AreaChart + width={800} + height={450} + data={data2} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Area type="monotone" dataKey="uv" stroke={color.dark} fillOpacity="0.8" fill={color.main} /> + </AreaChart> + ); +} + +export default AreaSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/AreaStacked.js b/front/odiparpack/app/containers/Charts/demos/AreaStacked.js new file mode 100644 index 0000000..82abd40 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/AreaStacked.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: green[500], + thirddark: green[900], +}); + +function AreaStacked() { + return ( + <AreaChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} /> + <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondary} fillOpacity="0.8" fill={color.secondarydark} /> + <Area type="monotone" dataKey="amt" stackId="1" stroke={color.third} fillOpacity="0.8" fill={color.thirddark} /> + </AreaChart> + ); +} + +export default AreaStacked; diff --git a/front/odiparpack/app/containers/Charts/demos/BarCustom.js b/front/odiparpack/app/containers/Charts/demos/BarCustom.js new file mode 100644 index 0000000..d9a572d --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarCustom.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Cell +} from 'recharts'; +import PropTypes from 'prop-types'; +import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors'; +import { data2 } from './sampleData'; + + +const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]]; + +const getPath = (x, y, width, height) => ( + `M${x},${y + height} + C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y} + C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height} + Z` +); + +const TriangleBar = props => { + const { + fill, + x, + y, + width, + height + } = props; + return <path d={getPath(x, y, width, height)} stroke="none" fillOpacity="0.8" fill={fill} />; +}; + +TriangleBar.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + fill: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, +}; + +TriangleBar.defaultProps = { + x: 0, + y: 0, + fill: '#9f9f9f', + width: 0, + height: 0, +}; + +function BarCustom() { + return ( + <BarChart + width={800} + height={450} + data={data2} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label={{ position: 'top' }}> + { + data2.map((entry, index) => ( + <Cell key={`cell-${index.toString()}`} fill={colors[index % 20]} /> + )) + } + </Bar> + </BarChart> + ); +} + +export default BarCustom; diff --git a/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js new file mode 100644 index 0000000..79968d5 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarCustomLabel.js @@ -0,0 +1,84 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + LabelList +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const renderCustomizedLabel = props => { + const { + x, + y, + width, + value, + } = props; + const radius = 10; + + return ( + <g> + <circle cx={x + (width / 2)} cy={y - radius} r={radius} fillOpacity="0.8" fill="#689F38" /> + <text x={x + (width / 2)} y={y - radius} fill="#fff" textAnchor="middle" dominantBaseline="middle"> + {value.split(' ')[1]} + </text> + </g> + ); +}; + +renderCustomizedLabel.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + width: PropTypes.number, + value: PropTypes.number, +}; + +renderCustomizedLabel.defaultProps = { + x: 0, + y: 0, + width: 0, + value: 0, +}; + +function BarCustomLabel() { + return ( + <BarChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Bar dataKey="pv" fill={color.primary}> + <LabelList dataKey="name" content={renderCustomizedLabel} /> + </Bar> + <Bar dataKey="uv" fill={color.secondary}> + <LabelList dataKey="name" content={renderCustomizedLabel} /> + </Bar> + </BarChart> + ); +} + +export default BarCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/BarMix.js b/front/odiparpack/app/containers/Charts/demos/BarMix.js new file mode 100644 index 0000000..e2e0e4e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarMix.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data2 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, + third: green[500] +}); + +function BarMix() { + return ( + <BarChart + width={800} + height={450} + data={data2} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Bar dataKey="female" stackId="a" fillOpacity="0.8" fill={color.primary} /> + <Bar dataKey="male" stackId="a" fillOpacity="0.8" fill={color.secondary} /> + <Bar dataKey="uv" fill={color.third} /> + </BarChart> + ); +} + +export default BarMix; diff --git a/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js b/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js new file mode 100644 index 0000000..c3d6fcf --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarPositiveNegative.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ReferenceLine +} from 'recharts'; +import { data3 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarPositiveNegative() { + return ( + <BarChart + width={800} + height={450} + data={data3} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <ReferenceLine y={0} stroke="#000" /> + <Bar dataKey="pv" fillOpacity="0.8" fill={color.secondary} /> + <Bar dataKey="uv" fillOpacity="0.8" fill={color.primary} /> + </BarChart> + ); +} + +export default BarPositiveNegative; diff --git a/front/odiparpack/app/containers/Charts/demos/BarResponsive.js b/front/odiparpack/app/containers/Charts/demos/BarResponsive.js new file mode 100644 index 0000000..a2d3a48 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarResponsive.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenNatureTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function BarResponsive(props) { + const { classes } = props; + return ( + <div className={classes.chartFluid}> + <ResponsiveContainer> + <BarChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Bar dataKey="pv" fill={color.primary} /> + <Bar dataKey="uv" fill={color.secondary} /> + </BarChart> + </ResponsiveContainer> + </div> + ); +} + +BarResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BarResponsive); + diff --git a/front/odiparpack/app/containers/Charts/demos/BarSimple.js b/front/odiparpack/app/containers/Charts/demos/BarSimple.js new file mode 100644 index 0000000..eb06ee6 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarSimple.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarSimple() { + return ( + <BarChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Bar dataKey="pv" fillOpacity="0.8" fill={color.primary} /> + <Bar dataKey="uv" fillOpacity="0.8" fill={color.secondary} /> + </BarChart> + ); +} + +export default BarSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/BarStacked.js b/front/odiparpack/app/containers/Charts/demos/BarStacked.js new file mode 100644 index 0000000..e5dfb0a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/BarStacked.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function BarStacked() { + return ( + <BarChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Bar dataKey="pv" stackId="a" fillOpacity="0.8" fill={color.secondary} /> + <Bar dataKey="uv" stackId="a" fillOpacity="0.8" fill={color.primary} /> + </BarChart> + ); +} + +export default BarStacked; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js b/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js new file mode 100644 index 0000000..9063062 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedLineBarArea.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +function CompossedLineBarArea() { + return ( + <ComposedChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid stroke="#f5f5f5" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Legend /> + <Area type="monotone" dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} /> + <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} /> + <Line type="monotone" dataKey="uv" stroke={color.third} /> + </ComposedChart> + ); +} + +export default CompossedLineBarArea; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js b/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js new file mode 100644 index 0000000..ff06fb4 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedResponsive.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.magentaTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function CompossedResponsive(props) { + const { classes } = props; + return ( + <div className={classes.chartFluid}> + <ResponsiveContainer> + <ComposedChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid stroke="#f5f5f5" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Legend /> + <Area type="monotone" dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} /> + <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} /> + <Line type="monotone" dataKey="uv" stroke={color.third} /> + </ComposedChart> + </ResponsiveContainer> + </div> + ); +} + +CompossedResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CompossedResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js b/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js new file mode 100644 index 0000000..ca81de1 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedSameData.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + main: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function CompossedSameData() { + return ( + <ComposedChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid stroke="#f5f5f5" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Legend /> + <Bar dataKey="uv" barSize={20} fillOpacity="0.8" fill={color.main} /> + <Line type="monotone" dataKey="uv" stroke={color.secondary} /> + </ComposedChart> + ); +} + +export default CompossedSameData; diff --git a/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js b/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js new file mode 100644 index 0000000..8e6d382 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/CompossedVertical.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { green } from '@material-ui/core/colors'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + third: green[500], +}); + +function CompossedVertical() { + return ( + <ComposedChart + width={800} + height={450} + layout="vertical" + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid stroke="#f5f5f5" /> + <XAxis type="number" /> + <YAxis dataKey="name" type="category" /> + <Tooltip /> + <Legend /> + <Area dataKey="amt" fillOpacity="0.8" fill={color.main} stroke={color.maindark} /> + <Bar dataKey="pv" barSize={20} fillOpacity="0.8" fill={color.secondary} /> + <Line dataKey="uv" stroke={color.third} /> + </ComposedChart> + ); +} + +export default CompossedVertical; diff --git a/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js b/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js new file mode 100644 index 0000000..ba6774c --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/DoubleRadar.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + Radar, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + Legend +} from 'recharts'; +import { data7 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + main: theme.palette.primary.main, + maindark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, +}); + +function DoubleRadar() { + return ( + <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data7}> + <PolarGrid /> + <PolarAngleAxis dataKey="subject" /> + <PolarRadiusAxis angle={30} domain={[0, 150]} /> + <Radar name="Mike" dataKey="A" stroke={color.maindark} fill={color.main} fillOpacity={0.6} /> + <Radar name="Lily" dataKey="B" stroke={color.secondarydark} fill={color.secondary} fillOpacity={0.3} /> + <Legend /> + </RadarChart> + ); +} + +export default DoubleRadar; diff --git a/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js b/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js new file mode 100644 index 0000000..0b36702 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineCustomDot.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const CustomizedDot = props => { + const { + cx, + cy, + value + } = props; + if (value > 2500) { + return ( + <svg x={cx - 10} y={cy - 10} width={20} height={20} fillOpacity="0.8" fill={color.primary} viewBox="0 0 1024 1024"> + <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" /> + </svg> + ); + } + return ( + <svg x={cx - 10} y={cy - 10} width={20} height={20} fillOpacity="0.8" fill={color.secondary} viewBox="0 0 1024 1024"> + <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" /> + </svg> + ); +}; + +CustomizedDot.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + value: PropTypes.number, +}; + +CustomizedDot.defaultProps = { + cx: 0, + cy: 0, + value: 0, +}; + +function LineCustomDot() { + return ( + <LineChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid strokeDasharray="3 3" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Legend /> + <Line type="monotone" dataKey="pv" stroke={color.primary} dot={<CustomizedDot />} /> + <Line type="monotone" dataKey="uv" stroke={color.secondary} /> + </LineChart> + ); +} + +export default LineCustomDot; diff --git a/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js new file mode 100644 index 0000000..32f4288 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineCustomLabel.js @@ -0,0 +1,74 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.redTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const CustomizedLabel = props => { + const { + x, + y, + stroke, + value + } = props; + return ( + <text x={x} y={y} dy={-4} fill={stroke} fillOpacity="0.8" fontSize={10} textAnchor="middle"> + { value } + </text> + ); +}; + +CustomizedLabel.propTypes = { + x: PropTypes.number, + y: PropTypes.number, + value: PropTypes.number, + stroke: PropTypes.string, +}; + +CustomizedLabel.defaultProps = { + x: 0, + y: 0, + value: 0, + stroke: '#000' +}; + +function LineCustomLabel() { + return ( + <LineChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid strokeDasharray="3 3" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Legend /> + <Line type="monotone" dataKey="pv" stroke={color.primary} label={<CustomizedLabel stroke={color.primary} />} /> + <Line type="monotone" dataKey="uv" stroke={color.secondary} label={<CustomizedLabel stroke={color.secondary} />} /> + </LineChart> + ); +} + +export default LineCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/LineResponsive.js b/front/odiparpack/app/containers/Charts/demos/LineResponsive.js new file mode 100644 index 0000000..b27223f --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineResponsive.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data1 } from './sampleData'; + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function LineResponsive(props) { + const { classes } = props; + return ( + <div className={classes.chartFluid}> + <ResponsiveContainer> + <LineChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} /> + <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> + </LineChart> + </ResponsiveContainer> + </div> + ); +} + +LineResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LineResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/LineSimple.js b/front/odiparpack/app/containers/Charts/demos/LineSimple.js new file mode 100644 index 0000000..54c1be5 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineSimple.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +function LineSimple() { + return ( + <LineChart + width={800} + height={450} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Legend /> + <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} /> + <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> + </LineChart> + ); +} + +export default LineSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/LineVertical.js b/front/odiparpack/app/containers/Charts/demos/LineVertical.js new file mode 100644 index 0000000..28ffc07 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/LineVertical.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data1 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.cyanTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function LineVertical() { + return ( + <LineChart + width={800} + height={450} + data={data1} + layout="vertical" + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid strokeDasharray="3 3" /> + <XAxis type="number" /> + <YAxis dataKey="name" type="category" /> + <Tooltip /> + <Legend /> + <Line type="monotone" dataKey="pv" stroke={color.primary} activeDot={{ r: 8 }} /> + <Line type="monotone" dataKey="uv" stroke={color.secondary} /> + </LineChart> + ); +} + +export default LineVertical; diff --git a/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js b/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js new file mode 100644 index 0000000..1787ef3 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieCustomLabel.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors'; +import { data6 } from './sampleData'; +const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]]; + +const RADIAN = Math.PI / 180; +const renderCustomizedLabel = ({ + cx, + cy, + midAngle, + innerRadius, + outerRadius, + percent, +}) => { + const radius = innerRadius + ((outerRadius - innerRadius) * 0.5); + const x = cx + (radius * Math.cos(-midAngle * RADIAN)); + const y = cy + (radius * Math.sin(-midAngle * RADIAN)); + + return ( + <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central"> + {`${(percent * 100).toFixed(0)}%`} + </text> + ); +}; + +renderCustomizedLabel.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + midAngle: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + percent: PropTypes.number, +}; + +renderCustomizedLabel.defaultProps = { + cx: 0, + cy: 0, + midAngle: 0, + innerRadius: 0, + outerRadius: 0, + percent: 0, +}; + +class PieCustomLabel extends React.Component { + render() { + return ( + <PieChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <Pie + dataKey="value" + data={data6} + cx={300} + cy={200} + labelLine={false} + label={renderCustomizedLabel} + outerRadius={160} + fill="#8884d8" + > + { + data6.map((entry, index) => <Cell fill={colors[index % colors.length]} key={index.toString()} />) + } + </Pie> + </PieChart> + ); + } +} + +export default PieCustomLabel; diff --git a/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js b/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js new file mode 100644 index 0000000..ae58dba --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieCustomShape.js @@ -0,0 +1,143 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + PieChart, + Pie, + Sector +} from 'recharts'; +import { data6 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const renderActiveShape = props => { + const RADIAN = Math.PI / 180; + const { + cx, + cy, + midAngle, + innerRadius, + outerRadius, + startAngle, + endAngle, + fill, + payload, + percent, + value + } = props; + const sin = Math.sin(-RADIAN * midAngle); + const cos = Math.cos(-RADIAN * midAngle); + const sx = cx + ((outerRadius + 10) * cos); + const sy = cy + ((outerRadius + 10) * sin); + const mx = cx + ((outerRadius + 30) * cos); + const my = cy + ((outerRadius + 30) * sin); + const ex = mx + ((cos >= 0 ? 1 : -1) * 22); + const ey = my; + const textAnchor = cos >= 0 ? 'start' : 'end'; + return ( + <g> + <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text> + <Sector + cx={cx} + cy={cy} + innerRadius={innerRadius} + outerRadius={outerRadius} + startAngle={startAngle} + endAngle={endAngle} + fill={fill} + /> + <Sector + cx={cx} + cy={cy} + startAngle={startAngle} + endAngle={endAngle} + innerRadius={outerRadius + 6} + outerRadius={outerRadius + 10} + fill={fill} + /> + <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" /> + <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" /> + <text x={ex + ((cos >= 0 ? 1 : -1) * 12)} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text> + <text x={ex + ((cos >= 0 ? 1 : -1) * 12)} y={ey} dy={18} textAnchor={textAnchor} fill="#999"> + {`(Rate ${(percent * 100).toFixed(2)}%)`} + </text> + </g> + ); +}; + +renderActiveShape.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + midAngle: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + startAngle: PropTypes.number, + endAngle: PropTypes.number, + fill: PropTypes.string, + payload: PropTypes.string, + percent: PropTypes.number, + value: PropTypes.number, +}; + +renderActiveShape.defaultProps = { + cx: 0, + cy: 0, + midAngle: 0, + innerRadius: 0, + outerRadius: 0, + startAngle: 0, + endAngle: 0, + fill: '#eee', + payload: '', + percent: 0, + value: 0, +}; + +class PieCustomShape extends React.Component { + state = { + activeIndex: 0 + }; + + onPieEnter(evt) { + const index = data6.findIndex(p => p.name === evt.name); + this.setState({ + activeIndex: index, + }); + } + + render() { + return ( + <PieChart + width={800} + height={400} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <Pie + dataKey="value" + activeIndex={this.state.activeIndex} + activeShape={renderActiveShape} + data={data6} + cx={300} + cy={200} + innerRadius={60} + outerRadius={100} + fill={color.secondary} + fillOpacity="0.8" + onMouseEnter={(event) => this.onPieEnter(event)} + /> + </PieChart> + ); + } +} + +export default PieCustomShape; diff --git a/front/odiparpack/app/containers/Charts/demos/PieSimple.js b/front/odiparpack/app/containers/Charts/demos/PieSimple.js new file mode 100644 index 0000000..f0a4f6e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/PieSimple.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + PieChart, + Pie, + Tooltip +} from 'recharts'; +import { data4, data5 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function PieSimple() { + return ( + <PieChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <Pie isAnimationActive={false} dataKey="value" data={data4} cx={200} cy={200} outerRadius={80} fill={color.primary} label /> + <Pie data={data5} cx={500} dataKey="value" cy={200} innerRadius={40} outerRadius={80} fill={color.secondary} /> + <Tooltip /> + </PieChart> + ); +} + +export default PieSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/RadarSimple.js b/front/odiparpack/app/containers/Charts/demos/RadarSimple.js new file mode 100644 index 0000000..f0e86cd --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/RadarSimple.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + Radar, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis +} from 'recharts'; +import { data7 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.purpleTheme); +const color = ({ + main: theme.palette.primary.main, + dark: theme.palette.primary.dark, +}); + +function RadarSimple() { + return ( + <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data7}> + <PolarGrid /> + <PolarAngleAxis dataKey="subject" /> + <PolarRadiusAxis /> + <Radar name="Mike" dataKey="A" stroke={color.dark} fill={color.main} fillOpacity={0.8} /> + </RadarChart> + ); +} + +export default RadarSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js b/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js new file mode 100644 index 0000000..9e61b27 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterCustom.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.orangeTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterCustom() { + return ( + <ScatterChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid /> + <XAxis dataKey="x" type="number" name="stature" unit="cm" /> + <YAxis dataKey="y" type="number" name="weight" unit="kg" /> + <ZAxis range={[100]} /> + <Tooltip cursor={{ strokeDasharray: '3 3' }} /> + <Legend /> + <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} shape="star" /> + <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} shape="triangle" /> + </ScatterChart> + ); +} + +export default ScatterCustom; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js b/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js new file mode 100644 index 0000000..74c238e --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterJoinLine.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.blueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterJoinLine() { + return ( + <ScatterChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid /> + <XAxis dataKey="x" type="number" name="stature" unit="cm" /> + <YAxis dataKey="y" type="number" name="weight" unit="kg" /> + <ZAxis range={[100]} /> + <Tooltip cursor={{ strokeDasharray: '3 3' }} /> + <Legend /> + <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} line shape="cross" /> + <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} line shape="diamond" /> + </ScatterChart> + ); +} + +export default ScatterJoinLine; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js b/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js new file mode 100644 index 0000000..a870692 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterMultiple.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.greenTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +function ScatterMultiple() { + return ( + <ScatterChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid /> + <XAxis dataKey="x" type="number" name="stature" unit="cm" /> + <YAxis dataKey="y" type="number" name="weight" unit="kg" /> + <ZAxis range={[100]} /> + <Tooltip cursor={{ strokeDasharray: '3 3' }} /> + <Legend /> + <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} /> + <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} /> + </ScatterChart> + ); +} + +export default ScatterMultiple; diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js b/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js new file mode 100644 index 0000000..791117d --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterResponsive.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createMuiTheme, withStyles } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + ZAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer +} from 'recharts'; +import { data8, data9 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.skyBlueTheme); +const color = ({ + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, +}); + +const styles = { + chartFluid: { + width: '100%', + height: 450 + } +}; + +function ScatterResponsive(props) { + const { classes } = props; + return ( + <div className={classes.chartFluid}> + <ResponsiveContainer width="100%" min-height="100%"> + <ScatterChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid /> + <XAxis dataKey="x" type="number" name="stature" unit="cm" /> + <YAxis dataKey="y" type="number" name="weight" unit="kg" /> + <ZAxis range={[100]} /> + <Tooltip cursor={{ strokeDasharray: '3 3' }} /> + <Legend /> + <Scatter name="A school" data={data8} fillOpacity="0.8" fill={color.primary} /> + <Scatter name="B school" data={data9} fillOpacity="0.8" fill={color.secondary} /> + </ScatterChart> + </ResponsiveContainer> + </div> + ); +} + +ScatterResponsive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ScatterResponsive); diff --git a/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js b/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js new file mode 100644 index 0000000..4b8717a --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/ScatterSimple.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { createMuiTheme } from '@material-ui/core/styles'; +import ThemePallete from 'ba-api/themePalette'; +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + CartesianGrid, + Tooltip, +} from 'recharts'; +import { data8 } from './sampleData'; + +const theme = createMuiTheme(ThemePallete.cyanTheme); +const color = ({ + primary: theme.palette.primary.main, +}); + +function ScatterSimple() { + return ( + <ScatterChart + width={800} + height={450} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <CartesianGrid /> + <XAxis dataKey="x" type="number" name="stature" unit="cm" /> + <YAxis dataKey="y" type="number" name="weight" unit="kg" /> + <Scatter name="A school" data={data8} fill={color.primary} /> + <Tooltip cursor={{ strokeDasharray: '3 3' }} /> + </ScatterChart> + ); +} + +export default ScatterSimple; diff --git a/front/odiparpack/app/containers/Charts/demos/index.js b/front/odiparpack/app/containers/Charts/demos/index.js new file mode 100644 index 0000000..da6ac01 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/index.js @@ -0,0 +1,31 @@ +export LineSimple from './LineSimple'; +export LineVertical from './LineVertical'; +export LineCustomDot from './LineCustomDot'; +export LineCustomLabel from './LineCustomLabel'; +export LineResponsive from './LineResponsive'; +export BarSimple from './BarSimple'; +export BarMix from './BarMix'; +export BarStacked from './BarStacked'; +export BarCustom from './BarCustom'; +export BarPositiveNegative from './BarPositiveNegative'; +export BarCustomLabel from './BarCustomLabel'; +export BarResponsive from './BarResponsive'; +export AreaSimple from './AreaSimple'; +export AreaStacked from './AreaStacked'; +export AreaPercent from './AreaPercent'; +export AreaNegativePositive from './AreaNegativePositive'; +export AreaResponsive from './AreaResponsive'; +export PieSimple from './PieSimple'; +export PieCustomShape from './PieCustomShape'; +export PieCustomLabel from './PieCustomLabel'; +export RadarSimple from './RadarSimple'; +export DoubleRadar from './DoubleRadar'; +export ScatterSimple from './ScatterSimple'; +export ScatterJoinLine from './ScatterJoinLine'; +export ScatterMultiple from './ScatterMultiple'; +export ScatterCustom from './ScatterCustom'; +export ScatterResponsive from './ScatterResponsive'; +export CompossedLineBarArea from './CompossedLineBarArea'; +export CompossedSameData from './CompossedSameData'; +export CompossedVertical from './CompossedVertical'; +export CompossedResponsive from './CompossedResponsive'; diff --git a/front/odiparpack/app/containers/Charts/demos/sampleData.js b/front/odiparpack/app/containers/Charts/demos/sampleData.js new file mode 100644 index 0000000..4c6e524 --- /dev/null +++ b/front/odiparpack/app/containers/Charts/demos/sampleData.js @@ -0,0 +1,262 @@ +export const data1 = [ + { + name: 'Page A', + uv: 4000, + pv: 2400, + amt: 2400 + }, + { + name: 'Page B', + uv: 3000, + pv: 1398, + amt: 2210 + }, + { + name: 'Page C', + uv: 2000, + pv: 9800, + amt: 2290 + }, + { + name: 'Page D', + uv: 2780, + pv: 3908, + amt: 2000 + }, + { + name: 'Page E', + uv: 1890, + pv: 4800, + amt: 2181 + }, + { + name: 'Page F', + uv: 2390, + pv: 3800, + amt: 2500 + }, + { + name: 'Page G', + uv: 3490, + pv: 4300, + amt: 2100 + }, +]; + +export const data2 = [ + { + name: 'Page A', + uv: 4000, + female: 2400, + male: 2400 + }, { + name: 'Page B', + uv: 3000, + female: 1398, + male: 2210 + }, { + name: 'Page C', + uv: 2000, + female: 9800, + male: 2290 + }, { + name: 'Page D', + uv: 2780, + female: 3908, + male: 2000 + }, { + name: 'Page E', + uv: 1890, + female: 4800, + male: 2181 + }, { + name: 'Page F', + uv: 2390, + female: 3800, + male: 2500 + }, { + name: 'Page G', + uv: 3490, + female: 4300, + male: 2100 + }, +]; + +export const data3 = [ + { + name: 'Page A', + uv: 4000, + pv: 2400, + amt: 2400 + }, { + name: 'Page B', + uv: -3000, + pv: 1398, + amt: 2210 + }, { + name: 'Page C', + uv: -2000, + pv: -9800, + amt: 2290 + }, { + name: 'Page D', + uv: 2780, + pv: 3908, + amt: 2000 + }, { + name: 'Page E', + uv: -1890, + pv: 4800, + amt: 2181 + }, { + name: 'Page F', + uv: 2390, + pv: -3800, + amt: 2500 + }, { + name: 'Page G', + uv: 3490, + pv: 4300, + amt: 2100 + }, +]; + +export const data4 = [ + { + name: 'Group A', + value: 400 + }, { + name: 'Group B', + value: 300 + }, + { + name: 'Group C', + value: 300 + }, { + name: 'Group D', + value: 200 + }, + { + name: 'Group E', + value: 278 + }, { + name: 'Group F', + value: 189 + } +]; + +export const data5 = [ + { + name: 'Group A', + value: 2400 + }, { + name: 'Group B', + value: 4567 + }, + { + name: 'Group C', + value: 1398 + }, { + name: 'Group D', + value: 9800 + }, + { + name: 'Group E', + value: 3908 + }, { + name: 'Group F', + value: 4800 + } +]; + +export const data6 = [ + { + name: 'Group A', + value: 400 + }, { + name: 'Group B', + value: 300 + }, + { + name: 'Group C', + value: 300 + }, { + name: 'Group D', + value: 200 + } +]; + +export const data7 = [ + { + subject: 'Math', + A: 120, + B: 110, + fullMark: 150 + }, { + subject: 'Chinese', + A: 98, + B: 130, + fullMark: 150 + }, { + subject: 'English', + A: 86, + B: 130, + fullMark: 150 + }, { + subject: 'Geography', + A: 99, + B: 100, + fullMark: 150 + }, { + subject: 'Physics', + A: 85, + B: 90, + fullMark: 150 + }, { + subject: 'History', + A: 65, + B: 85, + fullMark: 150 + }, +]; + +export const data8 = [ + { + x: 10, + y: 30 + }, { + x: 30, + y: 200 + }, { + x: 45, + y: 100 + }, { + x: 50, + y: 400 + }, { + x: 70, + y: 150 + }, { + x: 100, + y: 250 + } +]; + +export const data9 = [ + { + x: 30, + y: 20 + }, { + x: 50, + y: 180 + }, { + x: 75, + y: 240 + }, { + x: 100, + y: 100 + }, { + x: 120, + y: 190 + } +]; diff --git a/front/odiparpack/app/containers/Dashboard/Dashboard.js b/front/odiparpack/app/containers/Dashboard/Dashboard.js new file mode 100644 index 0000000..94d3eb4 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/Dashboard.js @@ -0,0 +1,99 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import brand from 'ba-api/brand'; +import { Helmet } from 'react-helmet'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + SliderWidget, + CounterGroupWidget, + BigChartWidget, + TableWidget, + TaskWidget, + ProfileCard, + ProfileWidget, + ProgressWidget, + GeneralCard, + Quote, + PlayerCard +} from 'ba-components'; +import { Grid, Divider } from '@material-ui/core'; +import styles from './dashboard-jss'; + + +class Dashboard extends PureComponent { + render() { + const title = brand.name + ' - Dashboard'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Grid container spacing={3} className={classes.root}> + <Grid item md={6} sm={12} xs={12}> + <div className={classes.sliderWrap}> + <SliderWidget /> + </div> + </Grid> + <Grid item md={6} xs={12} className={classes.noPadding}> + <CounterGroupWidget /> + </Grid> + </Grid> + <Divider className={classes.dividerMini} /> + <Grid container spacing={3} className={classes.root}> + <Grid item xs={12}> + <BigChartWidget /> + </Grid> + </Grid> + <Grid container spacing={3} className={classes.root}> + <Grid item md={7} xs={12}> + <Divider className={classes.dividerMini} /> + <TableWidget /> + <Divider className={classes.divider} /> + <TaskWidget /> + <Divider className={classes.divider} /> + <PlayerCard + title="Live From Space" + artist="Mac Miller" + cover={imgApi[32]} + /> + </Grid> + <Grid item md={5}> + <Divider className={classes.dividerMini} /> + <ProfileCard + cover={imgApi[41]} + avatar={avatarApi[6]} + name="John Doe" + title="UX designer" + connection={10} + btnText="See Profile" + isVerified + /> + <Divider className={classes.divider} /> + <ProgressWidget /> + <Divider className={classes.divider} /> + <ProfileWidget /> + <Divider className={classes.divider} /> + <GeneralCard liked={1} shared={20} commented={15}> + <Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" /> + </GeneralCard> + </Grid> + </Grid> + </div> + ); + } +} + +Dashboard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Dashboard); diff --git a/front/odiparpack/app/containers/Dashboard/DashboardV2.js b/front/odiparpack/app/containers/Dashboard/DashboardV2.js new file mode 100644 index 0000000..027dad8 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/DashboardV2.js @@ -0,0 +1,79 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import brand from 'ba-api/brand'; +import { Helmet } from 'react-helmet'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + CounterIconsWidget, + AreaChartWidget, + CarouselWidget, + PostCard, + AlbumWidget, + MapWidget +} from 'ba-components'; +import { Grid, Divider } from '@material-ui/core'; +import styles from './dashboard-jss'; + + +class DashboardV2 extends PureComponent { + render() { + const title = brand.name + ' - Dashboard Version 2'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Grid container className={classes.root}> + <CounterIconsWidget /> + </Grid> + <Divider className={classes.divider} /> + <AreaChartWidget /> + <Divider className={classes.divider} /> + <Grid container spacing={3}> + <Grid item xs={12}> + <CarouselWidget /> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Grid container spacing={3} className={classes.root}> + <Grid item sm={6} xs={12}> + <PostCard + liked={1} + shared={20} + commented={15} + date="Sept, 25 2018" + content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum." + image={imgApi[16]} + avatar={avatarApi[6]} + name="John Doe" + /> + </Grid> + <Grid item sm={6} xs={12}> + <AlbumWidget /> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Grid container spacing={3} className={classes.root}> + <Grid item xs={12}> + <MapWidget /> + </Grid> + </Grid> + </div> + ); + } +} + +DashboardV2.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DashboardV2); diff --git a/front/odiparpack/app/containers/Dashboard/dashboard-jss.js b/front/odiparpack/app/containers/Dashboard/dashboard-jss.js new file mode 100644 index 0000000..adb9bc0 --- /dev/null +++ b/front/odiparpack/app/containers/Dashboard/dashboard-jss.js @@ -0,0 +1,30 @@ +const styles = theme => ({ + root: { + flexGrow: 1, + }, + divider: { + display: 'block', + margin: `${theme.spacing(2)}px 0`, + background: 'none' + }, + sliderWrap: { + position: 'relative', + display: 'block', + boxShadow: theme.shadows[1], + width: '100%', + borderRadius: 4 + }, + dividerMini: { + margin: `${theme.spacing(1.5)}px 0`, + background: 'none' + }, + noPadding: { + paddingTop: '0 !important', + paddingBottom: '0 !important', + [theme.breakpoints.up('sm')]: { + padding: '0 !important' + } + } +}); + +export default styles; diff --git a/front/odiparpack/app/containers/Forms/Autocomplete.js b/front/odiparpack/app/containers/Forms/Autocomplete.js new file mode 100644 index 0000000..23c6a13 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Autocomplete.js @@ -0,0 +1,91 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + AutoSuggest, + TagSuggestions, + SelectSuggestions, + SelectSuggestionTags, + HighlightSuggest +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Textbox extends React.Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={12}> + <PapperBlock title="Highlight Suggestion" desc="In the following example, we demonstrate how to use react-autosuggest. It's also using autosuggest-highlight for the highlighting logic."> + <div> + <HighlightSuggest /> + <SourceReader componentName={docSrc + 'HighlightSuggest.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Auto Suggestion" desc="The autocomplete is a normal text input enhanced by a panel of suggested options."> + <div> + <AutoSuggest /> + <SourceReader componentName={docSrc + 'AutoSuggest.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Tag Suggestion" desc="In the following example, we demonstrate with tag input and how to use downshift. It mean press Shift + down to show autocomplete"> + <div> + <TagSuggestions /> + <SourceReader componentName={docSrc + 'TagSuggestions.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Select Suggestion" desc="In the following example, we demonstrate how to use react-select."> + <div> + <SelectSuggestions /> + <SourceReader componentName={docSrc + 'SelectSuggestions.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Select Tag Suggestion" desc="In the following example, we demonstrate how to combine tag input and react-select."> + <div> + <SelectSuggestionTags /> + <SourceReader componentName={docSrc + 'SelectSuggestionTags.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +Textbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Textbox); diff --git a/front/odiparpack/app/containers/Forms/Buttons.js b/front/odiparpack/app/containers/Forms/Buttons.js new file mode 100644 index 0000000..0935ac2 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Buttons.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { StandardButtons, FloatingButtons, CustomButtons, ComplexButtons } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Buttons extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Standard Buttons" desc="Buttons communicate the action that will occur when the user touches them."> + <div> + <StandardButtons /> + <SourceReader componentName={docSrc + 'StandardButtons.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Floating Action Buttons" desc="A floating action button represents the primary action in an application. Shaped like a circled icon floating above the UI, it has an ink wash upon focus and lifts upon selection."> + <div> + <FloatingButtons /> + <SourceReader componentName={docSrc + 'FloatingButtons.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Customized Buttons" desc=""> + <div> + <CustomButtons /> + <SourceReader componentName={docSrc + 'CustomButtons.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Complex Buttons" desc="The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the ButtonBase. You can take advantage of this lower level component to build custom interactions."> + <div> + <ComplexButtons /> + <SourceReader componentName={docSrc + 'ComplexButtons.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(Buttons); diff --git a/front/odiparpack/app/containers/Forms/CheckboxRadio.js b/front/odiparpack/app/containers/Forms/CheckboxRadio.js new file mode 100644 index 0000000..9833964 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/CheckboxRadio.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Checkboxes, RadioButton } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Checkbox" desc="Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead."> + <div> + <Checkboxes /> + <SourceReader componentName={docSrc + 'Checkboxes.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Radio Button" desc="Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side; otherwise, consider a dropdown, which uses less space than displaying all options."> + <div> + <RadioButton /> + <SourceReader componentName={docSrc + 'RadioButton.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/DateTimePicker.js b/front/odiparpack/app/containers/Forms/DateTimePicker.js new file mode 100644 index 0000000..b079d2e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/DateTimePicker.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { DateInput, TimeInput, DateTimeInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Date Picker" desc="Date pickers use a dialog window to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight."> + <div> + <DateInput /> + <SourceReader componentName={docSrc + 'DateInput.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Time Picker" desc="Time pickers use a dialog to select a single time (in the hours:minutes format). The selected time is indicated by the filled circle at the end of the clock hand."> + <div> + <TimeInput /> + <SourceReader componentName={docSrc + 'TimeInput.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Date & Time Picker" desc="Its a combination of date & time picker and allows that uses the modal to select both date and time with one control."> + <div> + <DateTimeInput /> + <SourceReader componentName={docSrc + 'DateTimeInput.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Rating.js b/front/odiparpack/app/containers/Forms/Rating.js new file mode 100644 index 0000000..5d28bca --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Rating.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { RatingNormal, RatingCustom } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Ratting" desc="Basic React component for star (or any other icon based) rating elements"> + <div> + <RatingNormal /> + <SourceReader componentName={docSrc + 'RatingNormal.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Ratting Custom" desc=""> + <div> + <RatingCustom /> + <SourceReader componentName={docSrc + 'RatingNormal.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/ReduxForm.js b/front/odiparpack/app/containers/Forms/ReduxForm.js new file mode 100644 index 0000000..d8ef3a7 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/ReduxForm.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { ReduxFormDemo } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class ReduxForm extends React.Component { + state = { + valueForm: [] + } + + showResult(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + window.alert(`You submitted:\n\n${this.state.valueForm}`); + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Redux Form" desc="This is a simple demonstration of how to connect all the standard material-ui form elements to redux-form."> + <div> + <ReduxFormDemo onSubmit={(values) => this.showResult(values)} /> + <SourceReader componentName={docSrc + 'ReduxFormDemo.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(ReduxForm); diff --git a/front/odiparpack/app/containers/Forms/Selectbox.js b/front/odiparpack/app/containers/Forms/Selectbox.js new file mode 100644 index 0000000..4f0c090 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Selectbox.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SimpleSelectbox, NativeSelectbox, MultipleSelectbox, ControlledSelectbox } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Selectbox extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Selectbox" desc="Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element."> + <div> + <SimpleSelectbox /> + <SourceReader componentName={docSrc + 'SimpleSelectbox.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Native Selectbox" desc="As the user experience can be improved on mobile using the native select of the platform, we allow such pattern."> + <div> + <NativeSelectbox /> + <SourceReader componentName={docSrc + 'NativeSelectbox.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Multiple Selectbox" desc="The Select component can handle multiple selections. It's enabled with the multiple property."> + <div> + <MultipleSelectbox /> + <SourceReader componentName={docSrc + 'MultipleSelectbox.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Controlled open Select" desc=""> + <div> + <ControlledSelectbox /> + <SourceReader componentName={docSrc + 'ContorlledSelectbox.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(Selectbox); diff --git a/front/odiparpack/app/containers/Forms/SliderRange.js b/front/odiparpack/app/containers/Forms/SliderRange.js new file mode 100644 index 0000000..779e251 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/SliderRange.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SliderInput, RangeInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Slider Input" desc="React component for inputting numeric values within a range (range slider)"> + <div> + <SliderInput /> + <SourceReader componentName={docSrc + 'SliderInput.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Range Input" desc="InputRange is a React component allowing users to input numeric values within a specific range. It can accept a single value, or a range of values (min/max). By default, basic styles are applied, but can be overridden depending on your design requirements."> + <div> + <RangeInput /> + <SourceReader componentName={docSrc + 'RangeInput.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Switches.js b/front/odiparpack/app/containers/Forms/Switches.js new file mode 100644 index 0000000..988e0a3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Switches.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SwitchesInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Switches" desc="On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label."> + <div> + <SwitchesInput /> + <SourceReader componentName={docSrc + 'SwitchesInput.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/TextEditor.js b/front/odiparpack/app/containers/Forms/TextEditor.js new file mode 100644 index 0000000..84a1a82 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/TextEditor.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Wysiwyg } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Text Editor" desc="A Wysiwyg Built on ReactJS and DraftJS. Editor can be simply imported and used as a React Component. Make sure to also include react-draft-wysiwyg.css from node_modules."> + <div> + <Wysiwyg /> + <SourceReader componentName={docSrc + 'Wysiwyg.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Textbox.js b/front/odiparpack/app/containers/Forms/Textbox.js new file mode 100644 index 0000000..3eff0ba --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Textbox.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { TextFields, TextFieldsLayout, InputAdornments, FormattedInputs } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Textbox extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Textfield Components" desc="Text fields allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input."> + <div> + <TextFields /> + <SourceReader componentName={docSrc + 'TextFields.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Textfield Layout and Design" desc=""> + <div> + <TextFieldsLayout /> + <SourceReader componentName={docSrc + 'TextFieldsLayout.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Input with Additonal Icon" desc="Input allows the provision of InputAdornment. These can be used to add a prefix, a suffix or an action to an input."> + <div> + <InputAdornments /> + <SourceReader componentName={docSrc + 'InputAdornments.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Formatted inputs" desc="We demonstrate how you could be using third-party libraries to format your input. In the following demo, we are using react-text-mask and react-number-format libraries. "> + <div> + <FormattedInputs /> + <SourceReader componentName={docSrc + 'FormattedInputs.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(Textbox); diff --git a/front/odiparpack/app/containers/Forms/Upload.js b/front/odiparpack/app/containers/Forms/Upload.js new file mode 100644 index 0000000..99ef3bf --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Upload.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { UploadInputAll, UploadInputImg, UploadInputBtn } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Upload with Drop Zone" desc="Simple HTML5-compliant drag'n'drop zone for files built with React Drop Zone. The component containing a file upload (dropzone) area, images and files preview and some snazzy File Allowed/Not Allowed effects."> + <div> + <UploadInputAll /> + <SourceReader componentName={docSrc + 'UploadInputAll.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Upload only Images" desc="This example allowing users to upload images only"> + <div> + <UploadInputImg /> + <SourceReader componentName={docSrc + 'UploadInputImg.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Upload Button" desc="Trigger upload file via button with ref attribute"> + <div> + <UploadInputBtn /> + <SourceReader componentName={docSrc + 'UploadInputBtn.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js b/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js new file mode 100644 index 0000000..6d90ed3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js @@ -0,0 +1,184 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Downshift from 'downshift'; +import { withStyles } from '@material-ui/core/styles'; +import { TextField, Paper, MenuItem } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { + InputProps, + classes, + ref, + ...other + } = inputProps; + + return ( + <TextField + InputProps={{ + inputRef: ref, + classes: { + root: classes.inputRoot, + }, + ...InputProps, + }} + {...other} + /> + ); +} + +function renderSuggestion({ + suggestion, + index, + itemProps, + highlightedIndex, + selectedItem +}) { + const isHighlighted = highlightedIndex === index; + const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; + + return ( + <MenuItem + {...itemProps} + key={suggestion.label} + selected={isHighlighted} + component="div" + style={{ + fontWeight: isSelected ? 500 : 400, + }} + > + {suggestion.label} + </MenuItem> + ); +} + +renderSuggestion.propTypes = { + highlightedIndex: PropTypes.number.isRequired, + index: PropTypes.number.isRequired, + itemProps: PropTypes.object.isRequired, + selectedItem: PropTypes.string.isRequired, + suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired, +}; + +function getSuggestions(inputValue) { + let count = 0; + + return suggestions.filter(suggestion => { + const keep = (!inputValue || suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) + && count < 5; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 100, + }, + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`, + }, + inputRoot: { + flexWrap: 'wrap', + }, +}); + +function AutoSuggest(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Downshift> + {({ + getInputProps, + getItemProps, + isOpen, + inputValue, + selectedItem, + highlightedIndex + }) => ( + <div className={classes.container}> + {renderInput({ + fullWidth: true, + classes, + InputProps: getInputProps({ + placeholder: 'Search a country (start with a)', + id: 'integration-downshift-simple', + }), + })} + {isOpen ? ( + <Paper className={classes.paper} square> + {getSuggestions(inputValue).map((suggestion, index) => renderSuggestion({ + suggestion, + index, + itemProps: getItemProps({ item: suggestion.label }), + highlightedIndex, + selectedItem, + }), + )} + </Paper> + ) : null} + </div> + )} + </Downshift> + </div> + ); +} + +AutoSuggest.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AutoSuggest); diff --git a/front/odiparpack/app/containers/Forms/demos/Checkboxes.js b/front/odiparpack/app/containers/Forms/demos/Checkboxes.js new file mode 100644 index 0000000..4979e60 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/Checkboxes.js @@ -0,0 +1,242 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import Favorite from '@material-ui/icons/Favorite'; +import FavoriteBorder from '@material-ui/icons/FavoriteBorder'; +import { green } from '@material-ui/core/colors'; + +import { + Checkbox, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormHelperText, + FormGroup, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + color: green[600], + '&$checked': { + color: green[500], + }, + }, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class Checkboxes extends PureComponent { + state = { + checkedA: true, + checkedB: true, + checkedF: true, + checkedG: true, + gilad: true, + jason: false, + antoine: true, + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={3} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <div> + <Checkbox + checked={this.state.checkedA} + onChange={this.handleChange('checkedA')} + value="checkedA" + /> + <Checkbox + checked={this.state.checkedB} + onChange={this.handleChange('checkedB')} + value="checkedB" + color="primary" + /> + <Checkbox value="checkedC" /> + <Checkbox disabled value="checkedD" /> + <Checkbox disabled checked value="checkedE" /> + <Checkbox + checked={this.state.checkedF} + onChange={this.handleChange('checkedF')} + value="checkedF" + indeterminate + /> + <Checkbox defaultChecked color="default" value="checkedG" /> + </div> + </Grid> + <Grid + item + md={5} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Checkbox with label</Typography> + <Typography className={classes.divider}>Checkbox can also be used with a label description thanks to the FormControlLabel component.</Typography> + <div> + <FormGroup row> + <FormControlLabel + control={( + <Checkbox + checked={this.state.checkedA} + onChange={this.handleChange('checkedA')} + value="checkedA" + /> + )} + label="Secondary" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.checkedB} + onChange={this.handleChange('checkedB')} + value="checkedB" + color="primary" + /> + )} + label="Primary" + /> + <FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" /> + <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" /> + <FormControlLabel + disabled + control={<Checkbox checked value="checkedE" />} + label="Disabled" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.checkedF} + onChange={this.handleChange('checkedF')} + value="checkedF" + indeterminate + /> + )} + label="Indeterminate" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.checkedG} + onChange={this.handleChange('checkedG')} + value="checkedG" + classes={{ + root: classes.root, + checked: classes.checked, + }} + /> + )} + label="Custom color" + /> + <FormControlLabel + control={ + <Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" /> + } + label="Custom icon" + /> + <FormControlLabel + control={( + <Checkbox + className={classes.size} + icon={<CheckBoxOutlineBlankIcon className={classes.sizeIcon} />} + checkedIcon={<CheckBoxIcon className={classes.sizeIcon} />} + value="checkedI" + /> + )} + label="Custom size" + /> + </FormGroup> + </div> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Checkbox in Form Group</Typography> + <Typography className={classes.divider}>FormGroup is a helpful wrapper used to group selection controls components that provides an easier API.</Typography> + <div> + <FormControl component="fieldset"> + <FormLabel component="legend">Assign responsibility</FormLabel> + <FormGroup> + <FormControlLabel + control={( + <Checkbox + checked={this.state.gilad} + onChange={this.handleChange('gilad')} + value="gilad" + /> + )} + label="Gilad Gray" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.jason} + onChange={this.handleChange('jason')} + value="jason" + /> + )} + label="Jason Killian" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.antoine} + onChange={this.handleChange('antoine')} + value="antoine" + /> + )} + label="Antoine Llorca" + /> + </FormGroup> + <FormHelperText>Be careful</FormHelperText> + </FormControl> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +Checkboxes.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Checkboxes); diff --git a/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js b/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js new file mode 100644 index 0000000..dbeab99 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js @@ -0,0 +1,154 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; + +import { Typography, ButtonBase } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + minWidth: 300, + width: '100%', + }, + image: { + position: 'relative', + height: 200, + [theme.breakpoints.down('xs')]: { + width: '100% !important', // Overrides inline-style + height: 100, + }, + '&:hover, &$focusVisible': { + zIndex: 1, + '& $imageBackdrop': { + opacity: 0.15, + }, + '& $imageMarked': { + opacity: 0, + }, + '& $imageTitle': { + border: '4px solid currentColor', + }, + }, + }, + focusVisible: {}, + imageButton: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.common.white, + }, + imageSrc: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + backgroundSize: 'cover', + backgroundPosition: 'center 40%', + }, + imageBackdrop: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + backgroundColor: theme.palette.common.black, + opacity: 0.4, + transition: theme.transitions.create('opacity'), + }, + imageTitle: { + position: 'relative', + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, + }, + imageMarked: { + height: 3, + width: 18, + backgroundColor: theme.palette.common.white, + position: 'absolute', + bottom: -2, + left: 'calc(50% - 9px)', + transition: theme.transitions.create('opacity'), + }, +}); + +const images = [ + { + url: imgApi[0], + title: '330x200', + width: '40%', + id: '0' + }, + { + url: imgApi[3], + title: '250x200', + width: '30%', + id: '1' + }, + { + url: imgApi[5], + title: '250x200', + width: '30%', + id: '2' + }, +]; + +class ComplexButtons extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <div className={classes.root}> + {images.map(image => ( + <ButtonBase + focusRipple + key={image.id} + className={classes.image} + focusVisibleClassName={classes.focusVisible} + style={{ + width: image.width, + }} + > + <span + className={classes.imageSrc} + style={{ + backgroundImage: `url(${image.url})`, + }} + /> + <span className={classes.imageBackdrop} /> + <span className={classes.imageButton}> + <Typography + component="span" + variant="subtitle1" + color="inherit" + className={classes.imageTitle} + > + {image.title} + <span className={classes.imageMarked} /> + </Typography> + </span> + </ButtonBase> + ))} + </div> + </Fragment> + ); + } +} + +ComplexButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ComplexButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js b/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js new file mode 100644 index 0000000..8ba1163 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js @@ -0,0 +1,200 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Button, + Typography, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Input, + InputLabel, + MenuItem, + FormControl, + Select, + Grid, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + button: { + display: 'block', + marginTop: theme.spacing(2), + }, +}); + +class ControlledSelectbox extends PureComponent { + state = { + open: false, + openRemotely: false, + age: '', + }; + + handleChange = name => event => { + this.setState({ [name]: Number(event.target.value) }); + }; + + handleChangeControll = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClickOpenRemot = () => { + this.setState({ openRemotely: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleOpen = () => { + this.setState({ open: true }); + }; + + handleCloseRemot = () => { + this.setState({ openRemotely: false }); + }; + + handleOpenRemot = () => { + this.setState({ openRemotely: true }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>With a Dialog</Typography> + <Typography className={classes.divider}>While its not encouraged by the Material Design specification, you can use a select inside a dialog.</Typography> + <div> + <Button variant="contained" color="secondary" onClick={this.handleClickOpen}>Open select dialog</Button> + <Dialog + disableBackdropClick + disableEscapeKeyDown + open={this.state.open} + onClose={this.handleClose} + > + <DialogTitle>Fill the form</DialogTitle> + <DialogContent> + <form className={classes.container}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-native-simple">Age</InputLabel> + <Select + native + value={this.state.age} + onChange={this.handleChange('age')} + input={<Input id="age-native-simple" />} + > + <option value="" /> + <option value={10}>Ten</option> + <option value={20}>Twenty</option> + <option value={30}>Thirty</option> + </Select> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple">Age</InputLabel> + <Select + value={this.state.age} + onChange={this.handleChange('age')} + input={<Input id="age-simple" />} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + </FormControl> + </form> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose} color="primary"> + Cancel + </Button> + <Button onClick={this.handleClose} color="primary"> + Ok + </Button> + </DialogActions> + </Dialog> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Controlled open Select</Typography> + <div> + <form autoComplete="off"> + <Button variant="contained" color="secondary" className={classes.button} onClick={this.handleClickOpenRemot}> + Open the select + </Button> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="controlled-open-select">Age</InputLabel> + <Select + open={this.state.openRemotely} + onClose={this.handleCloseRemot} + onOpen={this.handleOpenRemot} + value={this.state.age} + onChange={this.handleChangeControll} + inputProps={{ + name: 'age', + id: 'controlled-open-select', + }} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + </FormControl> + </form> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ControlledSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ControlledSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/CustomButtons.js b/front/odiparpack/app/containers/Forms/demos/CustomButtons.js new file mode 100644 index 0000000..f1600a0 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/CustomButtons.js @@ -0,0 +1,257 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; +import FileUpload from '@material-ui/icons/CloudUpload'; +import { Link } from 'react-router-dom'; + +import { purple, green } from '@material-ui/core/colors'; + +import { Typography, Grid, Button, Fab, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(1), + }, + cssRoot: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, + bootstrapRoot: { + boxShadow: 'none', + textTransform: 'none', + borderRadius: 4, + fontSize: 16, + padding: '6px 12px', + border: '1px solid', + backgroundColor: '#007bff', + borderColor: '#007bff', + '&:hover': { + backgroundColor: '#0069d9', + borderColor: '#0062cc', + }, + '&:active': { + boxShadow: 'none', + backgroundColor: '#0062cc', + borderColor: '#005cbf', + }, + '&:focus': { + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', + }, + }, + gradientBtn: { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + borderRadius: 3, + border: 0, + color: 'white', + height: 48, + padding: '0 30px', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', + }, + label: { + textTransform: 'capitalize', + }, + inputUpload: { + display: 'none', + }, +}); + +const theme = createMuiTheme({ + palette: { + primary: green, + }, +}); + +const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line + return <Link to={props.to} {...props} innerRef={ref} />; // eslint-disable-line +}); + +class CustomButtons extends PureComponent { + render() { + const { classes } = this.props; + const MyLink = React.forwardRef((props, ref) => <Link innerRef={ref} to="/app/forms/reduxform" {...props} />); // eslint-disable-line + return ( + <Fragment> + <Grid + container + alignItems="center" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Sizes</Typography> + <Typography className={classes.divider}> + Fancy larger or smaller buttons? Use the size or the mini property. + </Typography> + <div> + <div> + <Button size="small" className={classes.button}> + Small + </Button> + <Button size="medium" className={classes.button}> + Medium + </Button> + <Button size="large" className={classes.button}> + Large + </Button> + </div> + <div> + <Button variant="contained" size="small" color="primary" className={classes.button}> + Small + </Button> + <Button variant="contained" size="medium" color="primary" className={classes.button}> + Medium + </Button> + <Button variant="contained" size="large" color="primary" className={classes.button}> + Large + </Button> + </div> + <div> + <Button variant="outlined" size="small" color="primary" className={classes.button}> + Small + </Button> + <Button variant="outlined" size="medium" color="primary" className={classes.button}> + Medium + </Button> + <Button variant="outlined" size="large" color="primary" className={classes.button}> + Large + </Button> + </div> + <div> + <Fab size="small" color="secondary" aria-label="add" className={classes.button}> + <AddIcon /> + </Fab> + <Fab color="secondary" aria-label="add" className={classes.button}> + <AddIcon /> + </Fab> + </div> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Style</Typography> + <Typography className={classes.divider}> + Here is an example of how you can change the main color of a Button. + </Typography> + <div> + <Button + variant="contained" + color="primary" + className={classNames(classes.margin, classes.cssRoot)} + > + Custom CSS + </Button> + <MuiThemeProvider theme={theme}> + <Button variant="contained" color="primary" className={classes.margin}> + MuiThemeProvider + </Button> + </MuiThemeProvider> + <Button + variant="contained" + color="primary" + disableRipple + className={classNames(classes.margin, classes.bootstrapRoot)} + > + Bootstrap + </Button> + <Button + classes={{ + root: classNames(classes.gradientBtn, classes.margin), // class name, e.g. `classes-root-x` + label: classes.label, // class name, e.g. `classes-label-x` + }} + > + Gradient Style + </Button> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Linked Button</Typography> + <Typography className={classes.divider}> + One common use case is to use the button to trigger a navigation to a new page. + </Typography> + <div> + <Button + variant="contained" + color="primary" + className={classNames(classes.margin, classes.cssRoot)} + component={LinkBtn} + to="/app/forms/datetimepicker" + > + Go To Date Time Picker + </Button> + <Button color="secondary" variant="contained" component={MyLink}> Go To Redux Form </Button> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Upload Button</Typography> + <Typography className={classes.divider}> + This a sample to trigger input files from button + </Typography> + <div> + <input + accept="image/*" + className={classes.inputUpload} + id="raised-button-file" + multiple + type="file" + /> + <label htmlFor="raised-button-file"> + <Button variant="contained" component="span" id="raised-button-file" className={classes.button}> + Upload + </Button> + </label> + <input accept="image/*" className={classes.inputUpload} id="icon-button-file" type="file" /> + <label htmlFor="icon-button-file"> + <IconButton color="primary" id="uploadBtnIcon" className={classes.button} component="span"> + <FileUpload /> + </IconButton> + </label> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +CustomButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/DateInput.js b/front/odiparpack/app/containers/Forms/demos/DateInput.js new file mode 100644 index 0000000..fc3397c --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/DateInput.js @@ -0,0 +1,193 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import DateFnsUtils from '@date-io/date-fns'; +import { withStyles } from '@material-ui/core/styles'; + +import frLocale from 'date-fns/locale/fr'; +import ruLocale from 'date-fns/locale/ru'; +import enLocale from 'date-fns/locale/en-US'; + +import { MenuItem, Menu, Icon, IconButton, Typography, Grid } from '@material-ui/core'; + +const localeMap = { + en: enLocale, + fr: frLocale, + ru: ruLocale, +}; + +const styles = theme => ({ + demo: { + height: 240, + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class DateInput extends PureComponent { + state = { + selectedDate: new Date(), + anchorEl: null, + currentLocale: 'fr', + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + handleMenuOpen = (event) => { + event.stopPropagation(); + this.setState({ anchorEl: event.currentTarget }); + } + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + }; + + selectLocale = (selectedLocale) => { + this.setState({ + currentLocale: selectedLocale, + anchorEl: null, + }); + } + + render() { + const { selectedDate, currentLocale, anchorEl } = this.state; + const { classes } = this.props; + const locale = localeMap[currentLocale]; + return ( + <Fragment> + <Grid + container + alignItems="center" + justify="space-around" + direction="row" + > + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <DatePicker + label="Basic example" + value={selectedDate} + onChange={this.handleDateChange} + animateYearScrolling={false} + /> + </MuiPickersUtilsProvider> + </div> + + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <DatePicker + label="Clearable" + clearable + disableFuture + maxDateMessage="Date must be less than today" + value={selectedDate} + onChange={this.handleDateChange} + animateYearScrolling={false} + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Keyboard Input</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <KeyboardDatePicker + clearable + label="Uncontrolled input" + value={selectedDate} + onChange={this.handleDateChange} + animateYearScrolling={false} + /> + </MuiPickersUtilsProvider> + </div> + + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <KeyboardDatePicker + label="Masked input" + format="DD/MM/YYYY" + placeholder="10/10/2018" + mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]} + value={selectedDate} + onChange={this.handleDateChange} + animateYearScrolling={false} + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Localization</Typography> + <div className={classes.picker}> + <div className={classes.divider}> + <MuiPickersUtilsProvider utils={DateFnsUtils} locale={localeMap[currentLocale]}> + <DatePicker + value={selectedDate} + onChange={this.handleDateChange} + InputProps={{ + endAdornment: ( + <IconButton + aria-label="Select locale" + aria-owns={anchorEl ? 'locale-menu' : null} + onClick={this.handleMenuOpen} + > + <Icon> more_vert </Icon> + </IconButton> + ), + }} + /> + </MuiPickersUtilsProvider> + </div> + + <Menu + id="locale-menu" + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={this.handleMenuClose} + > + { + Object.keys(localeMap).map(localeItem => ( + <MenuItem + key={localeItem} + selected={localeItem === locale} + onClick={() => this.selectLocale(localeItem)} + > + {localeItem} + </MenuItem> + )) + } + </Menu> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + + +DateInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DateInput); diff --git a/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js b/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js new file mode 100644 index 0000000..e594013 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js @@ -0,0 +1,123 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DateTimePicker, KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { IconButton, Icon, InputAdornment, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class DateTimeInput extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <DateTimePicker + value={selectedDate} + disablePast + onChange={this.handleDateChange} + label="DateTimePicker" + /> + </MuiPickersUtilsProvider> + </div> + + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <DateTimePicker + autoOk + ampm={false} + disableFuture + value={selectedDate} + onChange={this.handleDateChange} + label="24h clock" + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Customization</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <DateTimePicker + autoOk + ampm={false} + showTabs={false} + disableFuture + value={selectedDate} + onChange={this.handleDateChange} + helperText="Hardcoded helper text" + leftArrowIcon={<Icon> add_alarm </Icon>} + rightArrowIcon={<Icon> snooze </Icon>} + InputProps={{ + endAdornment: ( + <InputAdornment position="end"> + <IconButton className={classes.iconBtn}> + <Icon>add_alarm</Icon> + </IconButton> + </InputAdornment> + ), + }} + /> + </MuiPickersUtilsProvider> + </div> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <KeyboardDateTimePicker + label="Keyboard input" + value={selectedDate} + onChange={this.handleDateChange} + format="YYYY/MM/DD hh:mm A" + mask={[/\d/, /\d/, /\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, ' ', /\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']} + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +DateTimeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DateTimeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js b/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js new file mode 100644 index 0000000..5fbfa1c --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js @@ -0,0 +1,185 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import SwipeableViews from 'react-swipeable-views'; +import AddIcon from '@material-ui/icons/Add'; +import EditIcon from '@material-ui/icons/Create'; +import NavigationIcon from '@material-ui/icons/Navigation'; +import UpIcon from '@material-ui/icons/KeyboardArrowUp'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { green } from '@material-ui/core/colors'; + +import { Typography, Grid, Fab, AppBar, Tabs, Tab, Zoom, Icon } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1), + }, + root: { + backgroundColor: theme.palette.background.paper, + [theme.breakpoints.up('sm')]: { + width: 500, + }, + margin: '0 auto', + position: 'relative', + minHeight: 200, + }, + fab: { + position: 'absolute', + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + fabGreen: { + color: theme.palette.common.white, + backgroundColor: green[500], + }, + extendedIcon: { + marginRight: theme.spacing(1), + }, +}); + +function TabContainer(props) { + const { children, dir } = props; + + return ( + <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}> + {children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, + dir: PropTypes.string.isRequired, +}; + +class FloatingButtons extends PureComponent { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + handleChangeIndex = index => { + this.setState({ value: index }); + }; + + render() { + const { classes, theme } = this.props; + const transitionDuration = { + enter: theme.transitions.duration.enteringScreen, + exit: theme.transitions.duration.leavingScreen, + }; + const fabs = [ + { + color: 'primary', + className: classes.fab, + icon: <AddIcon />, + }, + { + color: 'secondary', + className: classes.fab, + icon: <EditIcon />, + }, + { + color: 'inherit', + className: classNames(classes.fab, classes.fabGreen), + icon: <UpIcon />, + }, + ]; + + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Floating Action Buttons</Typography> + <Typography className={classes.divider}> + A floating action button represents the primary action in an application. + </Typography> + <Fab color="primary" aria-label="add" className={classes.button}> + <AddIcon /> + </Fab> + <Fab color="secondary" aria-label="edit" className={classes.button}> + <Icon>edit_icon</Icon> + </Fab> + <Fab variant="extended" color="secondary" aria-label="Delete" className={classes.button}> + <NavigationIcon className={classes.extendedIcon} /> + Extended + </Fab> + <Fab disabled aria-label="delete" className={classes.button}> + <DeleteIcon /> + </Fab> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Floating BUtton in Tab</Typography> + <Typography className={classes.divider}> + A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes. + </Typography> + <div className={classes.root}> + <AppBar position="static" color="default"> + <Tabs + value={this.state.value} + onChange={this.handleChange} + indicatorColor="primary" + textColor="primary" + variant="fullWidth" + > + <Tab label="Item One" /> + <Tab label="Item Two" /> + <Tab label="Item Three" /> + </Tabs> + </AppBar> + <SwipeableViews + axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'} + index={this.state.value} + onChangeIndex={this.handleChangeIndex} + > + <TabContainer dir={theme.direction}>Item One</TabContainer> + <TabContainer dir={theme.direction}>Item Two</TabContainer> + <TabContainer dir={theme.direction}>Item Three</TabContainer> + </SwipeableViews> + {fabs.map((fab, index) => ( + <Zoom + key={fab.color} + in={this.state.value === index} + timeout={transitionDuration} + style={{ + transitionDelay: this.state.value === index ? transitionDuration.exit : 0, + }} + unmountOnExit + > + <Fab className={fab.className} color={fab.color}> + {fab.icon} + </Fab> + </Zoom> + ))} + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +FloatingButtons.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(FloatingButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js b/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js new file mode 100644 index 0000000..9fbe9cd --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js @@ -0,0 +1,109 @@ +import React from 'react'; +import MaskedInput from 'react-text-mask'; +import NumberFormat from 'react-number-format'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Input, InputLabel, TextField, FormControl } from '@material-ui/core'; + +const styles = theme => ({ + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(3), + }, +}); + +function TextMaskCustom(props) { + const { inputRef, ...other } = props; + + return ( + <MaskedInput + {...other} + ref={ref => { + inputRef(ref ? ref.inputElement : null); + }} + mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} + placeholderChar={'\u2000'} + showMask + /> + ); +} + +TextMaskCustom.propTypes = { + inputRef: PropTypes.func.isRequired, +}; + +function NumberFormatCustom(props) { + const { inputRef, onChange, ...other } = props; + + return ( + <NumberFormat + {...other} + getInputRef={inputRef} + onValueChange={values => { + onChange({ + target: { + value: values.value, + }, + }); + }} + thousandSeparator + prefix="$" + /> + ); +} + +NumberFormatCustom.propTypes = { + inputRef: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, +}; + +class FormattedInputs extends React.Component { + state = { + textmask: '(1 ) - ', + numberformat: '1320', + }; + + handleChange = name => event => { + this.setState({ + [name]: event.target.value, + }); + }; + + render() { + const { classes } = this.props; + const { textmask, numberformat } = this.state; + + return ( + <div className={classes.container}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="formatted-text-mask-input">react-text-mask</InputLabel> + <Input + value={textmask} + onChange={this.handleChange('textmask')} + id="formatted-text-mask-input" + inputComponent={TextMaskCustom} + /> + </FormControl> + <TextField + className={classes.formControl} + label="react-number-format" + value={numberformat} + onChange={this.handleChange('numberformat')} + id="formatted-numberformat-input" + InputProps={{ + inputComponent: NumberFormatCustom, + }} + /> + </div> + ); + } +} + +FormattedInputs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FormattedInputs); diff --git a/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js new file mode 100644 index 0000000..ee13fd7 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js @@ -0,0 +1,198 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Autosuggest from 'react-autosuggest'; +import match from 'autosuggest-highlight/match'; +import parse from 'autosuggest-highlight/parse'; +import { withStyles } from '@material-ui/core/styles'; + +import { TextField, Paper, MenuItem } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { classes, ref, ...other } = inputProps; + + return ( + <TextField + fullWidth + InputProps={{ + inputRef: ref, + classes: { + input: classes.input, + }, + ...other, + }} + /> + ); +} + +function renderSuggestion(suggestion, { query, isHighlighted }) { + const matches = match(suggestion.label, query); + const parts = parse(suggestion.label, matches); + + return ( + <MenuItem selected={isHighlighted} component="div"> + <div> + {parts.map((part, index) => ( + part.highlight ? ( + <span key={String(index)} style={{ fontWeight: 300 }}> + {part.text} + </span> + ) : ( + <strong key={String(index)} style={{ fontWeight: 500 }}> + {part.text} + </strong> + ) + ))} + </div> + </MenuItem> + ); +} + +function renderSuggestionsContainer(options) { + const { containerProps, children } = options; + + return ( + <Paper {...containerProps} square> + {children} + </Paper> + ); +} + +function getSuggestionValue(suggestion) { + return suggestion.label; +} + +function getSuggestions(value) { + const inputValue = value.trim().toLowerCase(); + const inputLength = inputValue.length; + let count = 0; + + return inputLength === 0 + ? [] : suggestions.filter(suggestion => { + const keep = count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +const styles = theme => ({ + container: { + flexGrow: 1, + position: 'relative', + height: 250, + }, + suggestionsContainerOpen: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + suggestion: { + display: 'block', + }, + suggestionsList: { + margin: 0, + padding: 0, + listStyleType: 'none', + }, +}); + +class HighlightSuggest extends React.Component { + state = { + value: '', + suggestions: [], + }; + + handleSuggestionsFetchRequested = ({ value }) => { + this.setState({ + suggestions: getSuggestions(value), + }); + }; + + handleSuggestionsClearRequested = () => { + this.setState({ + suggestions: [], + }); + }; + + handleChange = (event, { newValue }) => { + this.setState({ + value: newValue, + }); + }; + + render() { + const { classes } = this.props; + + return ( + <Autosuggest + theme={{ + container: classes.container, + suggestionsContainerOpen: classes.suggestionsContainerOpen, + suggestionsList: classes.suggestionsList, + suggestion: classes.suggestion, + }} + renderInputComponent={renderInput} + suggestions={this.state.suggestions} + onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested} + onSuggestionsClearRequested={this.handleSuggestionsClearRequested} + renderSuggestionsContainer={renderSuggestionsContainer} + getSuggestionValue={getSuggestionValue} + renderSuggestion={renderSuggestion} + inputProps={{ + classes, + placeholder: 'Search a country (start with a)', + value: this.state.value, + onChange: this.handleChange, + }} + /> + ); + } +} + +HighlightSuggest.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(HighlightSuggest); diff --git a/front/odiparpack/app/containers/Forms/demos/InputAdornments.js b/front/odiparpack/app/containers/Forms/demos/InputAdornments.js new file mode 100644 index 0000000..1d6307e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/InputAdornments.js @@ -0,0 +1,221 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import Visibility from '@material-ui/icons/Visibility'; +import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import AccountCircle from '@material-ui/icons/AccountCircle'; + +import { + Typography, + Grid, + IconButton, + Input, + InputLabel, + InputAdornment, + FormControl, + FormHelperText, + TextField, + MenuItem, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(3), + }, + withoutLabel: { + marginTop: theme.spacing(3), + }, + textField: { + flexBasis: 200, + }, +}); + +const ranges = [ + { + value: '0-20', + label: '0 to 20', + }, + { + value: '21-50', + label: '21 to 50', + }, + { + value: '51-100', + label: '51 to 100', + }, +]; + +class InputAdornments extends PureComponent { + state = { + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }; + + handleChange = prop => event => { + this.setState({ [prop]: event.target.value }); + }; + + handleMouseDownPassword = event => { + event.preventDefault(); + }; + + handleClickShowPassword = () => { + this.setState({ showPassword: !this.state.showPassword }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Input Adornments</Typography> + <Typography className={classes.divider}>TextField is composed of smaller components that you can leverage directly to significantly customize your form inputs.</Typography> + <div className={classes.root}> + <TextField + label="With normal TextField" + id="simple-start-adornment" + className={classNames(classes.margin, classes.textField)} + InputProps={{ + startAdornment: <InputAdornment position="start">Kg</InputAdornment>, + }} + /> + <TextField + select + label="With Select" + className={classNames(classes.margin, classes.textField)} + value={this.state.weightRange} + onChange={this.handleChange('weightRange')} + InputProps={{ + startAdornment: <InputAdornment position="start">Kg</InputAdornment>, + }} + > + {ranges.map(option => ( + <MenuItem key={option.value} value={option.value}> + {option.label} + </MenuItem> + ))} + </TextField> + <FormControl fullWidth className={classes.margin}> + <InputLabel htmlFor="adornment-amount">Amount</InputLabel> + <Input + id="adornment-amount" + value={this.state.amount} + onChange={this.handleChange('amount')} + startAdornment={<InputAdornment position="start">$</InputAdornment>} + /> + </FormControl> + <FormControl + className={classNames(classes.margin, classes.withoutLabel, classes.textField)} + aria-describedby="weight-helper-text" + > + <Input + id="adornment-weight" + value={this.state.weight} + onChange={this.handleChange('weight')} + endAdornment={<InputAdornment position="end">Kg</InputAdornment>} + inputProps={{ + 'aria-label': 'Weight', + }} + /> + <FormHelperText id="weight-helper-text">Weight</FormHelperText> + </FormControl> + <FormControl className={classNames(classes.margin, classes.textField)}> + <InputLabel htmlFor="adornment-password">Password</InputLabel> + <Input + id="adornment-password" + type={this.state.showPassword ? 'text' : 'password'} + value={this.state.password} + onChange={this.handleChange('password')} + endAdornment={( + <InputAdornment position="end"> + <IconButton + aria-label="Toggle password visibility" + onClick={this.handleClickShowPassword} + onMouseDown={this.handleMouseDownPassword} + > + {this.state.showPassword ? <VisibilityOff /> : <Visibility />} + </IconButton> + </InputAdornment> + )} + /> + </FormControl> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>With icon</Typography> + <Typography className={classes.divider}>Icons can be specified as prepended or appended.</Typography> + <FormControl className={classes.margin}> + <InputLabel htmlFor="input-with-icon-adornment">With a start adornment</InputLabel> + <Input + id="input-with-icon-adornment" + startAdornment={( + <InputAdornment position="start"> + <AccountCircle /> + </InputAdornment> + )} + /> + </FormControl> + <TextField + className={classes.margin} + id="input-with-icon-textfield" + label="TextField" + InputProps={{ + startAdornment: ( + <InputAdornment position="start"> + <AccountCircle /> + </InputAdornment> + ), + }} + /> + <div className={classes.margin}> + <Grid container spacing={1} alignItems="flex-end"> + <Grid item> + <AccountCircle /> + </Grid> + <Grid item> + <TextField id="input-with-icon-grid" label="With a grid" /> + </Grid> + </Grid> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +InputAdornments.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(InputAdornments); diff --git a/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js b/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js new file mode 100644 index 0000000..6609147 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js @@ -0,0 +1,165 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { + Input, + InputLabel, + MenuItem, + FormControl, + ListItemText, + Select, + Checkbox, + Chip, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + maxWidth: 300, + }, + chips: { + display: 'flex', + flexWrap: 'wrap', + }, + chip: { + margin: theme.spacing(0.25), + }, +}); + +const ITEM_HEIGHT = 48; +const ITEM_PADDING_TOP = 8; +const MenuProps = { + PaperProps: { + style: { + maxHeight: (ITEM_HEIGHT * 4.5) + ITEM_PADDING_TOP, + width: 250, + }, + }, +}; + +const names = [ + 'Oliver Hansen', + 'Van Henry', + 'April Tucker', + 'Ralph Hubbard', + 'Omar Alexander', + 'Carlos Abbott', + 'Miriam Wagner', + 'Bradley Wilkerson', + 'Virginia Andrews', + 'Kelly Snyder', +]; + +class MultipleSelectbox extends PureComponent { + state = { + name: [], + }; + + handleChange = event => { + this.setState({ name: event.target.value }); + }; + + render() { + const { classes, theme } = this.props; + return ( + <Fragment> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="select-multiple">Name</InputLabel> + <Select + multiple + value={this.state.name} + onChange={this.handleChange} + input={<Input id="select-multiple" />} + MenuProps={MenuProps} + > + {names.map(name => ( + <MenuItem + key={name} + value={name} + style={{ + fontWeight: + this.state.name.indexOf(name) === -1 + ? theme.typography.fontWeightRegular + : theme.typography.fontWeightMedium, + }} + > + {name} + </MenuItem> + ))} + </Select> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel> + <Select + multiple + value={this.state.name} + onChange={this.handleChange} + input={<Input id="select-multiple-checkbox" />} + renderValue={selected => selected.join(', ')} + MenuProps={MenuProps} + > + {names.map(name => ( + <MenuItem key={name} value={name}> + <Checkbox checked={this.state.name.indexOf(name) > -1} /> + <ListItemText primary={name} /> + </MenuItem> + ))} + </Select> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="select-multiple-chip">Chip</InputLabel> + <Select + multiple + value={this.state.name} + onChange={this.handleChange} + input={<Input id="select-multiple-chip" />} + renderValue={selected => ( + <div className={classes.chips}> + {selected.map(value => <Chip key={value} label={value} className={classes.chip} />)} + </div> + )} + MenuProps={MenuProps} + > + {names.map(name => ( + <MenuItem + key={name} + value={name} + style={{ + fontWeight: + this.state.name.indexOf(name) === -1 + ? theme.typography.fontWeightRegular + : theme.typography.fontWeightMedium, + }} + > + {name} + </MenuItem> + ))} + </Select> + </FormControl> + </Fragment> + ); + } +} + +MultipleSelectbox.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(MultipleSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js b/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js new file mode 100644 index 0000000..a0e3c4d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js @@ -0,0 +1,153 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { Input, InputLabel, FormControl, FormHelperText, Select } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, +}); + +class NativeSelectbox extends PureComponent { + state = { + age: '', + name: 'hai', + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-native-simple">Age</InputLabel> + <Select + native + value={this.state.age} + onChange={this.handleChange('age')} + inputProps={{ + id: 'age-native-simple', + }} + > + <option value="" /> + <option value={10}>Ten</option> + <option value={20}>Twenty</option> + <option value={30}>Thirty</option> + </Select> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-native-helper">Age</InputLabel> + <Select + native + value={this.state.age} + onChange={this.handleChange('age')} + input={<Input id="age-native-helper" />} + > + <option value="" /> + <option value={10}>Ten</option> + <option value={20}>Twenty</option> + <option value={30}>Thirty</option> + </Select> + <FormHelperText>Some important helper text</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <Select + native + value={this.state.age} + onChange={this.handleChange('age')} + className={classes.selectEmpty} + > + <option value="">None</option> + <option value={10}>Ten</option> + <option value={20}>Twenty</option> + <option value={30}>Thirty</option> + </Select> + <FormHelperText>Without label</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} disabled> + <InputLabel htmlFor="name-native-disabled">Name</InputLabel> + <Select + native + value={this.state.name} + onChange={this.handleChange('name')} + input={<Input id="name-native-disabled" />} + > + <option value="" /> + <optgroup label="Author"> + <option value="hai">Hai</option> + </optgroup> + <optgroup label="Contributors"> + <option value="olivier">Olivier</option> + <option value="kevin">Kevin</option> + </optgroup> + </Select> + <FormHelperText>Disabled</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} error> + <InputLabel htmlFor="name-native-error">Name</InputLabel> + <Select + native + value={this.state.name} + onChange={this.handleChange('name')} + input={<Input id="name-native-error" />} + > + <option value="" /> + <optgroup label="Author"> + <option value="hai">Hai</option> + </optgroup> + <optgroup label="Contributors"> + <option value="olivier">Olivier</option> + <option value="kevin">Kevin</option> + </optgroup> + </Select> + <FormHelperText>Error</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="name-input">Name</InputLabel> + <Input id="name-input" /> + <FormHelperText>Alignment with an input</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="uncontrolled-native">Name</InputLabel> + <Select native defaultValue={30} input={<Input id="uncontrolled-native" />}> + <option value="" /> + <option value={10}>Ten</option> + <option value={20}>Twenty</option> + <option value={30}>Thirty</option> + </Select> + <FormHelperText>Uncontrolled</FormHelperText> + </FormControl> + </Fragment> + ); + } +} + +NativeSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(NativeSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/RadioButton.js b/front/odiparpack/app/containers/Forms/demos/RadioButton.js new file mode 100644 index 0000000..c378d96 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RadioButton.js @@ -0,0 +1,212 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'; +import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'; +import { green } from '@material-ui/core/colors'; + +import { + Radio, + RadioGroup, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormHelperText, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + color: green[600], + '&$checked': { + color: green[500], + }, + }, + formControl: { + margin: theme.spacing(3), + }, + group: { + margin: `${theme.spacing(1)}px 0`, + }, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class RadioButton extends PureComponent { + state = { + value: 'female', + selectedValue: 'a', + }; + + handleChange = event => { + this.setState({ value: event.target.value }); + }; + + handleChangeOther = event => { + this.setState({ selectedValue: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={7} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <Typography className={classes.divider}>Radio buttons should have the most commonly used option selected by default.</Typography> + <div> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <FormControl component="fieldset" required className={classes.formControl}> + <FormLabel component="legend">Gender</FormLabel> + <RadioGroup + aria-label="gender" + name="gender1" + className={classes.group} + value={this.state.value} + onChange={this.handleChange} + > + <FormControlLabel value="female" control={<Radio />} label="Female" /> + <FormControlLabel value="male" control={<Radio />} label="Male" /> + <FormControlLabel value="other" control={<Radio />} label="Other" /> + <FormControlLabel + value="disabled" + disabled + control={<Radio />} + label="(Disabled option)" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <FormControl component="fieldset" required error className={classes.formControl}> + <FormLabel component="legend">Gender</FormLabel> + <RadioGroup + aria-label="gender" + name="gender2" + className={classes.group} + value={this.state.value} + onChange={this.handleChange} + > + <FormControlLabel value="male" control={<Radio color="primary" />} label="Male" /> + <FormControlLabel value="female" control={<Radio color="primary" />} label="Female" /> + <FormControlLabel value="other" control={<Radio color="primary" />} label="Other" /> + <FormControlLabel + value="disabled" + disabled + control={<Radio />} + label="(Disabled option)" + /> + </RadioGroup> + <FormHelperText>You can display an error</FormHelperText> + </FormControl> + </Grid> + </Grid> + </div> + </Grid> + <Grid + item + md={5} + className={classes.demo} + > + <div> + <Typography variant="button" className={classes.divider}>Radio without label</Typography> + <Typography className={classes.divider}>Radio can also be used standalone, without the wrapper.</Typography> + <Radio + checked={this.state.selectedValue === 'a'} + onChange={this.handleChangeOther} + value="a" + name="radio-button-demo" + aria-label="A" + /> + <Radio + checked={this.state.selectedValue === 'b'} + onChange={this.handleChangeOther} + value="b" + name="radio-button-demo" + aria-label="B" + /> + <Radio + checked={this.state.selectedValue === 'c'} + onChange={this.handleChangeOther} + value="c" + name="radio-button-demo" + aria-label="C" + classes={{ + root: classes.root, + checked: classes.checked, + }} + /> + <Radio + checked={this.state.selectedValue === 'd'} + onChange={this.handleChangeOther} + value="d" + color="default" + name="radio-button-demo" + aria-label="D" + /> + <Radio + checked={this.state.selectedValue === 'e'} + onChange={this.handleChangeOther} + value="e" + color="default" + name="radio-button-demo" + aria-label="E" + className={classes.size} + icon={<RadioButtonUncheckedIcon className={classes.sizeIcon} />} + checkedIcon={<RadioButtonCheckedIcon className={classes.sizeIcon} />} + /> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +RadioButton.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RadioButton); diff --git a/front/odiparpack/app/containers/Forms/demos/RangeInput.js b/front/odiparpack/app/containers/Forms/demos/RangeInput.js new file mode 100644 index 0000000..247050e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RangeInput.js @@ -0,0 +1,92 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import InputRange from 'react-input-range'; +import { withStyles } from '@material-ui/core/styles'; +import 'ba-styles/vendors/react-input-range/react-input-range.css'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + inputRange: { + width: 300, + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class RangeInput extends PureComponent { + state = { + valueRange: { + min: 3, + max: 7, + }, + valueRangeLabel: { + min: 5, + max: 10, + }, + } + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={2} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Range Input Basic</Typography> + <FormControl className={classes.formControl}> + <div className={classes.inputRange}> + <InputRange + draggableTrack + maxValue={20} + minValue={0} + onChange={value => this.setState({ valueRange: value })} + value={this.state.valueRange} + /> + </div> + </FormControl> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Range with Label</Typography> + <FormControl className={classes.formControl}> + <div className={classes.inputRange}> + <InputRange + maxValue={20} + minValue={0} + formatLabel={value => `${value} kg`} + value={this.state.valueRangeLabel} + onChange={value => this.setState({ valueRangeLabel: value })} + /> + </div> + </FormControl> + </Grid> + </Grid> + </Fragment> + ); + } +} + +RangeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RangeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/RatingCustom.js b/front/odiparpack/app/containers/Forms/demos/RatingCustom.js new file mode 100644 index 0000000..002548b --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RatingCustom.js @@ -0,0 +1,176 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { AddCircle, AddCircleOutline, Remove, ThumbUp } from '@material-ui/icons'; +import { Rating } from 'ba-components'; + +import { green, red, indigo as blue } from '@material-ui/core/colors'; + +import { FormControl, Typography, Grid, Chip } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + chip: { + margin: theme.spacing(1), + fontWeight: 'bold', + color: '#FFF', + background: red[300] + }, + blue: { + color: blue[300] + }, + green: { + color: green[500] + }, + red: { + color: red[300] + }, + small: { + '& button': { + width: 72, + height: 72, + padding: 16 + }, + '& svg': { + width: 36, + height: 36 + } + }, + medium: { + '& button': { + width: 96, + height: 96, + padding: 24 + }, + '& svg': { + width: 48, + height: 48 + } + }, + large: { + '& button': { + width: 120, + height: 120, + padding: 30 + }, + '& svg': { + width: 60, + height: 60 + } + } +}); + +class RatingCustom extends PureComponent { + state = { + rating: 3 + } + + handleChange = value => { + this.setState({ rating: value }); + } + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={2} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Ratting Custom Icon</Typography> + <FormControl className={classes.formControl}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + iconFilled={<ThumbUp className={classes.blue} />} + iconHovered={<ThumbUp className={classes.blue} />} + iconNormal={<Remove className={classes.red} />} + /> + </FormControl> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Show Counter</Typography> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + > + <FormControl className={classes.formControl}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + iconFilled={<AddCircle className={classes.green} />} + iconHovered={<AddCircleOutline className={classes.green} />} + iconNormal={<AddCircleOutline className={classes.green} />} + tooltipRenderer={(index) => <span>{ index }</span>} + tooltipPosition="bottom-center" + /> + </FormControl> + <Chip label={this.state.rating} className={classes.chip} /> + </Grid> + </Grid> + <Grid + item + md={12} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Ratting Custom Size</Typography> + <FormControl className={classes.formControl}> + <div className={classes.small}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + /> + </div> + <div className={classes.medium}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + /> + </div> + <div className={classes.large}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + /> + </div> + </FormControl> + </Grid> + </Grid> + </Fragment> + ); + } +} + +RatingCustom.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RatingCustom); diff --git a/front/odiparpack/app/containers/Forms/demos/RatingNormal.js b/front/odiparpack/app/containers/Forms/demos/RatingNormal.js new file mode 100644 index 0000000..acfb50d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RatingNormal.js @@ -0,0 +1,92 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Rating } from 'ba-components'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, +}); + +class RatingCustom extends PureComponent { + state = { + rating: 3 + } + + handleChange = value => { + this.setState({ rating: value }); + } + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={2} + > + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Ratting Normal</Typography> + <FormControl className={classes.formControl}> + <Rating + value={this.state.rating} + max={5} + onChange={(value) => this.handleChange(value)} + /> + </FormControl> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Read Only</Typography> + <FormControl className={classes.formControl}> + <Rating + value={2} + max={5} + readOnly + /> + </FormControl> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Disabled</Typography> + <FormControl className={classes.formControl}> + <Rating + value={4} + max={5} + disabled + /> + </FormControl> + </Grid> + </Grid> + </Fragment> + ); + } +} + +RatingCustom.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RatingCustom); diff --git a/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js b/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js new file mode 100644 index 0000000..32b5d3d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js @@ -0,0 +1,229 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Field, reduxForm } from 'redux-form/immutable'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { + CheckboxRedux, + SelectRedux, + TextFieldRedux, + SwitchRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { initAction, clearAction } from 'ba-actions/ReduxFormActions'; + +import { + Paper, + MenuItem, + InputLabel, + Grid, + Radio, + RadioGroup, + FormControl, + FormLabel, + FormControlLabel, + Typography, + Button, +} from '@material-ui/core'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + +// validation functions +const required = value => (value == null ? 'Required' : undefined); +const email = value => ( + value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : undefined +); + +const styles = theme => ({ + root: { + flexGrow: 1, + padding: 30 + }, + field: { + width: '100%', + marginBottom: 20 + }, + fieldBasic: { + width: '100%', + marginBottom: 20, + marginTop: 10 + }, + inlineWrap: { + display: 'flex', + flexDirection: 'row' + }, + buttonInit: { + margin: theme.spacing(4), + textAlign: 'center' + }, +}); + +const initData = { + text: 'Sample Text', + email: '[email protected]', + radio: 'option1', + selection: 'option1', + onof: true, + checkbox: true, + textarea: 'This is default text' +}; + +class ReduxFormDemo extends Component { + render() { + const trueBool = true; + const { + classes, + handleSubmit, + pristine, + reset, + submitting, + init, + clear + } = this.props; + return ( + <div> + <Grid container spacing={3} alignItems="flex-start" direction="row" justify="center"> + <Grid item xs={12} md={6}> + <Paper className={classes.root}> + <Typography variant="h5" component="h3"> + Simple Form Example + </Typography> + <Typography component="p"> + The delay between when you click (Submit) and when the alert dialog pops up is intentional, to simulate server latency. + </Typography> + <div className={classes.buttonInit}> + <Button onClick={() => init(initData)} color="secondary" type="button"> + Load Sample Data + </Button> + <Button onClick={() => clear()} type="button"> + Clear Data + </Button> + </div> + <form onSubmit={handleSubmit}> + <div> + <Field + name="text" + component={TextFieldRedux} + placeholder="Text Field" + label="Text Field" + validate={required} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <Field + name="email" + component={TextFieldRedux} + placeholder="Email Field" + label="Email" + required + validate={[required, email]} + className={classes.field} + /> + </div> + <div className={classes.fieldBasic}> + <FormLabel component="label">Choose One Option</FormLabel> + <Field name="radio" className={classes.inlineWrap} component={renderRadioGroup}> + <FormControlLabel value="option1" control={<Radio />} label="Option 1" /> + <FormControlLabel value="option2" control={<Radio />} label="Option 2" /> + </Field> + </div> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Selection</InputLabel> + <Field + name="selection" + component={SelectRedux} + placeholder="Selection" + autoWidth={trueBool} + > + <MenuItem value="option1">Option One</MenuItem> + <MenuItem value="option2">Option Two</MenuItem> + <MenuItem value="option3">Option Three</MenuItem> + </Field> + </FormControl> + </div> + <div className={classes.fieldBasic}> + <FormLabel component="label">Toggle Input</FormLabel> + <div className={classes.inlineWrap}> + <FormControlLabel control={<Field name="onof" component={SwitchRedux} />} label="On/OF Switch" /> + <FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} />} label="Checkbox" /> + </div> + </div> + <div className={classes.field}> + <Field + name="textarea" + className={classes.field} + component={TextFieldRedux} + placeholder="Textarea" + label="Textarea" + multiline={trueBool} + rows={4} + /> + </div> + <div> + <Button variant="contained" color="secondary" type="submit" disabled={submitting}> + Submit + </Button> + <Button + type="button" + disabled={pristine || submitting} + onClick={reset} + > + Reset + </Button> + </div> + </form> + </Paper> + </Grid> + </Grid> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +ReduxFormDemo.propTypes = { + classes: PropTypes.object.isRequired, + handleSubmit: PropTypes.func.isRequired, + reset: PropTypes.func.isRequired, + pristine: PropTypes.bool.isRequired, + submitting: PropTypes.bool.isRequired, + init: PropTypes.func.isRequired, + clear: PropTypes.func.isRequired, +}; + +const mapDispatchToProps = dispatch => ({ + init: bindActionCreators(initAction, dispatch), + clear: () => dispatch(clearAction), +}); + +const ReduxFormMapped = reduxForm({ + form: 'immutableExample', + enableReinitialize: true, +})(ReduxFormDemo); + +const reducer = 'initval'; +const FormInit = connect( + state => ({ + force: state, + initialValues: state.getIn([reducer, 'formValues']) + }), + mapDispatchToProps, +)(ReduxFormMapped); + +export default withStyles(styles)(FormInit); diff --git a/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js new file mode 100644 index 0000000..125fd23 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js @@ -0,0 +1,379 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Select from 'react-select'; +import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import NoSsr from '@material-ui/core/NoSsr'; +import TextField from '@material-ui/core/TextField'; +import Paper from '@material-ui/core/Paper'; +import Chip from '@material-ui/core/Chip'; +import MenuItem from '@material-ui/core/MenuItem'; +import CancelIcon from '@material-ui/icons/Cancel'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +].map(suggestion => ({ + value: suggestion.label, + label: suggestion.label, +})); + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + height: 250, + }, + input: { + display: 'flex', + padding: 0, + height: 'auto', + }, + valueContainer: { + display: 'flex', + flexWrap: 'wrap', + flex: 1, + alignItems: 'center', + overflow: 'hidden', + }, + chip: { + margin: theme.spacing(0.5, 0.25), + }, + chipFocused: { + backgroundColor: emphasize( + theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + 0.08, + ), + }, + noOptionsMessage: { + padding: theme.spacing(1, 2), + }, + singleValue: { + fontSize: 16, + }, + placeholder: { + position: 'absolute', + left: 8, + bottom: 6, + fontSize: 16, + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, +})); + +function NoOptionsMessage(props) { + const { selectProps, innerProps, children } = props; + return ( + <Typography + color="textSecondary" + className={selectProps.classes.noOptionsMessage} + {...innerProps} + > + {children} + </Typography> + ); +} + +NoOptionsMessage.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +NoOptionsMessage.defaultProps = { + children: null, + innerProps: null +}; + +function inputComponent({ inputRef, ...props }) { + return <div ref={inputRef} {...props} />; +} + +inputComponent.propTypes = { + inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +}; + +inputComponent.defaultProps = { + inputRef: undefined +}; + +function Control(props) { + const { + children, + innerProps, + innerRef, + selectProps: { classes, TextFieldProps }, + } = props; + + return ( + <TextField + fullWidth + InputProps={{ + inputComponent, + inputProps: { + className: classes.input, + ref: innerRef, + children, + ...innerProps, + }, + }} + {...TextFieldProps} + /> + ); +} + +Control.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + selectProps: PropTypes.object.isRequired, +}; + +Control.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined +}; + +function Option(props) { + const { + innerRef, + isFocused, + isSelected, + innerProps, + children + } = props; + return ( + <MenuItem + ref={innerRef} + selected={isFocused} + component="div" + style={{ + fontWeight: isSelected ? 500 : 400, + }} + {...innerProps} + > + {children} + </MenuItem> + ); +} + +Option.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + isFocused: PropTypes.bool, + isSelected: PropTypes.bool, +}; + +Option.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined, + isFocused: false, + isSelected: false +}; + +function Placeholder(props) { + const { selectProps, innerProps, children } = props; + return ( + <Typography + color="textSecondary" + className={selectProps.classes.placeholder} + {...innerProps} + > + {children} + </Typography> + ); +} + +Placeholder.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +Placeholder.defaultProps = { + children: null, + innerProps: null, +}; + +function SingleValue(props) { + const { selectProps, children, innerProps } = props; + return ( + <Typography className={selectProps.classes.singleValue} {...innerProps}> + {children} + </Typography> + ); +} + +SingleValue.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +SingleValue.defaultProps = { + children: null, + innerProps: null, +}; + +function ValueContainer(props) { + const { selectProps, children } = props; + return <div className={selectProps.classes.valueContainer}>{children}</div>; +} + +ValueContainer.propTypes = { + children: PropTypes.node, + selectProps: PropTypes.object.isRequired, +}; + +ValueContainer.defaultProps = { + children: null, +}; + +function MultiValue(props) { + const { + children, + selectProps, + removeProps, + isFocused + } = props; + return ( + <Chip + tabIndex={-1} + label={children} + className={classNames(selectProps.classes.chip, { + [selectProps.classes.chipFocused]: isFocused, + })} + onDelete={removeProps.onClick} + deleteIcon={<CancelIcon {...removeProps} />} + /> + ); +} + +MultiValue.propTypes = { + children: PropTypes.node, + isFocused: PropTypes.bool, + removeProps: PropTypes.object.isRequired, + selectProps: PropTypes.object.isRequired, +}; + +MultiValue.defaultProps = { + children: null, + isFocused: false, +}; + +function Menu(props) { + const { selectProps, innerProps, children } = props; + return ( + <Paper square className={selectProps.classes.paper} {...innerProps}> + {children} + </Paper> + ); +} + +Menu.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object, +}; + +Menu.defaultProps = { + children: null, + innerProps: null, + selectProps: null, +}; + +const components = { + Control, + Menu, + MultiValue, + NoOptionsMessage, + Option, + Placeholder, + SingleValue, + ValueContainer, +}; + +export default function SelectSuggestions() { + const classes = useStyles(); + const theme = useTheme(); + const [multi, setMulti] = React.useState(null); + + function handleChangeMulti(value) { + setMulti(value); + } + + const selectStyles = { + input: base => ({ + ...base, + color: theme.palette.text.primary, + '& input': { + font: 'inherit', + }, + }), + }; + + return ( + <div className={classes.root}> + <NoSsr> + <Select + classes={classes} + styles={selectStyles} + inputId="react-select-multiple" + TextFieldProps={{ + label: 'Countries', + InputLabelProps: { + htmlFor: 'react-select-multiple', + shrink: true, + }, + placeholder: 'Select multiple countries', + }} + options={suggestions} + components={components} + value={multi} + onChange={handleChangeMulti} + isMulti + /> + </NoSsr> + </div> + ); +} diff --git a/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js b/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js new file mode 100644 index 0000000..2986aff --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js @@ -0,0 +1,378 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Select from 'react-select'; +import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import NoSsr from '@material-ui/core/NoSsr'; +import TextField from '@material-ui/core/TextField'; +import Paper from '@material-ui/core/Paper'; +import Chip from '@material-ui/core/Chip'; +import MenuItem from '@material-ui/core/MenuItem'; +import CancelIcon from '@material-ui/icons/Cancel'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +].map(suggestion => ({ + value: suggestion.label, + label: suggestion.label, +})); + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + height: 250, + }, + input: { + display: 'flex', + padding: 0, + height: 'auto', + }, + valueContainer: { + display: 'flex', + flexWrap: 'wrap', + flex: 1, + alignItems: 'center', + overflow: 'hidden', + }, + chip: { + margin: theme.spacing(0.5, 0.25), + }, + chipFocused: { + backgroundColor: emphasize( + theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + 0.08, + ), + }, + noOptionsMessage: { + padding: theme.spacing(1, 2), + }, + singleValue: { + fontSize: 16, + }, + placeholder: { + position: 'absolute', + left: 8, + bottom: 6, + fontSize: 16, + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, +})); + +function NoOptionsMessage(props) { + const { selectProps, innerProps, children } = props; + return ( + <Typography + color="textSecondary" + className={selectProps.classes.noOptionsMessage} + {...innerProps} + > + {children} + </Typography> + ); +} + +NoOptionsMessage.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +NoOptionsMessage.defaultProps = { + children: null, + innerProps: null +}; + +function inputComponent({ inputRef, ...props }) { + return <div ref={inputRef} {...props} />; +} + +inputComponent.propTypes = { + inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +}; + +inputComponent.defaultProps = { + inputRef: undefined +}; + +function Control(props) { + const { + children, + innerProps, + innerRef, + selectProps: { classes, TextFieldProps }, + } = props; + + return ( + <TextField + fullWidth + InputProps={{ + inputComponent, + inputProps: { + className: classes.input, + ref: innerRef, + children, + ...innerProps, + }, + }} + {...TextFieldProps} + /> + ); +} + +Control.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + selectProps: PropTypes.object.isRequired, +}; + +Control.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined +}; + +function Option(props) { + const { + innerRef, + isFocused, + isSelected, + innerProps, + children + } = props; + return ( + <MenuItem + ref={innerRef} + selected={isFocused} + component="div" + style={{ + fontWeight: isSelected ? 500 : 400, + }} + {...innerProps} + > + {children} + </MenuItem> + ); +} + +Option.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + isFocused: PropTypes.bool, + isSelected: PropTypes.bool, +}; + +Option.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined, + isFocused: false, + isSelected: false +}; + +function Placeholder(props) { + const { selectProps, innerProps, children } = props; + return ( + <Typography + color="textSecondary" + className={selectProps.classes.placeholder} + {...innerProps} + > + {children} + </Typography> + ); +} + +Placeholder.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +Placeholder.defaultProps = { + children: null, + innerProps: null, +}; + +function SingleValue(props) { + const { selectProps, children, innerProps } = props; + return ( + <Typography className={selectProps.classes.singleValue} {...innerProps}> + {children} + </Typography> + ); +} + +SingleValue.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +SingleValue.defaultProps = { + children: null, + innerProps: null, +}; + +function ValueContainer(props) { + const { selectProps, children } = props; + return <div className={selectProps.classes.valueContainer}>{children}</div>; +} + +ValueContainer.propTypes = { + children: PropTypes.node, + selectProps: PropTypes.object.isRequired, +}; + +ValueContainer.defaultProps = { + children: null, +}; + +function MultiValue(props) { + const { + children, + selectProps, + removeProps, + isFocused + } = props; + return ( + <Chip + tabIndex={-1} + label={children} + className={classNames(selectProps.classes.chip, { + [selectProps.classes.chipFocused]: isFocused, + })} + onDelete={removeProps.onClick} + deleteIcon={<CancelIcon {...removeProps} />} + /> + ); +} + +MultiValue.propTypes = { + children: PropTypes.node, + isFocused: PropTypes.bool, + removeProps: PropTypes.object.isRequired, + selectProps: PropTypes.object.isRequired, +}; + +MultiValue.defaultProps = { + children: null, + isFocused: false, +}; + +function Menu(props) { + const { selectProps, innerProps, children } = props; + return ( + <Paper square className={selectProps.classes.paper} {...innerProps}> + {children} + </Paper> + ); +} + +Menu.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object, +}; + +Menu.defaultProps = { + children: null, + innerProps: null, + selectProps: null, +}; + +const components = { + Control, + Menu, + MultiValue, + NoOptionsMessage, + Option, + Placeholder, + SingleValue, + ValueContainer, +}; + +export default function SelectSuggestions() { + const classes = useStyles(); + const theme = useTheme(); + const [single, setSingle] = React.useState(null); + + function handleChangeSingle(value) { + setSingle(value); + } + + const selectStyles = { + input: base => ({ + ...base, + color: theme.palette.text.primary, + '& input': { + font: 'inherit', + }, + }), + }; + + return ( + <div className={classes.root}> + <NoSsr> + <Select + classes={classes} + styles={selectStyles} + inputId="react-select-single" + TextFieldProps={{ + label: 'Country', + InputLabelProps: { + htmlFor: 'react-select-single', + shrink: true, + }, + placeholder: 'Search a country (start with a)', + }} + options={suggestions} + components={components} + value={single} + onChange={handleChangeSingle} + /> + </NoSsr> + </div> + ); +} diff --git a/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js new file mode 100644 index 0000000..eb7bd0a --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js @@ -0,0 +1,180 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { Input, InputLabel, MenuItem, FormControl, FormHelperText, Select } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, +}); + +class SimpleSelectbox extends PureComponent { + state = { + age: '', + name: 'hai', + }; + + handleChange = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <form className={classes.root} autoComplete="off"> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple2">Age</InputLabel> + <Select + value={this.state.age} + onChange={this.handleChange} + inputProps={{ + name: 'age', + id: 'age-simple2', + }} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-helper">Age</InputLabel> + <Select + value={this.state.age} + onChange={this.handleChange} + input={<Input name="age" id="age-helper" />} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + <FormHelperText>Some important helper text</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <Select + value={this.state.age} + onChange={this.handleChange} + displayEmpty + name="age" + className={classes.selectEmpty} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + <FormHelperText>Without label</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} disabled> + <InputLabel htmlFor="name-disabled">Name</InputLabel> + <Select + value={this.state.name} + onChange={this.handleChange} + input={<Input name="name" id="name-disabled" />} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value="hai">Hai</MenuItem> + <MenuItem value="olivier">Olivier</MenuItem> + <MenuItem value="kevin">Kevin</MenuItem> + </Select> + <FormHelperText>Disabled</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} error> + <InputLabel htmlFor="name-error">Name</InputLabel> + <Select + value={this.state.name} + onChange={this.handleChange} + name="name" + renderValue={value => `⚠️ - ${value}`} + input={<Input id="name-error" />} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value="hai">Hai</MenuItem> + <MenuItem value="olivier">Olivier</MenuItem> + <MenuItem value="kevin">Kevin</MenuItem> + </Select> + <FormHelperText>Error</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="name-input">Name</InputLabel> + <Input id="name-input" /> + <FormHelperText>Alignment with an input</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="name-readonly">Name</InputLabel> + <Select + value={this.state.name} + onChange={this.handleChange} + input={<Input name="name" id="name-readonly" readOnly />} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value="hai">Hai</MenuItem> + <MenuItem value="olivier">Olivier</MenuItem> + <MenuItem value="kevin">Kevin</MenuItem> + </Select> + <FormHelperText>Read only</FormHelperText> + </FormControl> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple3">Age</InputLabel> + <Select + value={this.state.age} + onChange={this.handleChange} + input={<Input name="age" id="age-simple3" />} + autoWidth + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Ten</MenuItem> + <MenuItem value={20}>Twenty</MenuItem> + <MenuItem value={30}>Thirty</MenuItem> + </Select> + <FormHelperText>Auto width</FormHelperText> + </FormControl> + </form> + </Fragment> + ); + } +} + +SimpleSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/SliderInput.js b/front/odiparpack/app/containers/Forms/demos/SliderInput.js new file mode 100644 index 0000000..d0513ed --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SliderInput.js @@ -0,0 +1,104 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import InputRange from 'react-input-range'; +import { withStyles } from '@material-ui/core/styles'; +import 'ba-styles/vendors/react-input-range/react-input-range.css'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + inputRange: { + width: 200, + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class SliderInput extends PureComponent { + state = { + value: 10, + valueDisabled: 5, + valueDecimal: 16, + } + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={2} + > + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Slider Input Basic</Typography> + <FormControl className={classes.formControl}> + <div className={classes.inputRange}> + <InputRange + maxValue={20} + minValue={0} + value={this.state.value} + onChange={value => this.setState({ value })} + /> + </div> + </FormControl> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Slider Input Disabled</Typography> + <FormControl className={classes.formControl}> + <div className={classes.inputRange}> + <InputRange + maxValue={20} + minValue={0} + disabled + value={this.state.valueDisabled} + onChange={value => this.setState({ valueDisabled: value })} + /> + </div> + </FormControl> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Formated Value</Typography> + <FormControl className={classes.formControl}> + <div className={classes.inputRange}> + <InputRange + maxValue={20} + minValue={0} + formatLabel={value => value.toFixed(2)} + value={this.state.valueDecimal} + onChange={value => this.setState({ valueDecimal: value })} + /> + </div> + </FormControl> + </Grid> + </Grid> + </Fragment> + ); + } +} + +SliderInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SliderInput); diff --git a/front/odiparpack/app/containers/Forms/demos/StandardButtons.js b/front/odiparpack/app/containers/Forms/demos/StandardButtons.js new file mode 100644 index 0000000..d88c004 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/StandardButtons.js @@ -0,0 +1,223 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import DeleteIcon from '@material-ui/icons/Delete'; +import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'; +import PhotoCamera from '@material-ui/icons/PhotoCamera'; +import FileUpload from '@material-ui/icons/CloudUpload'; +import KeyboardVoice from '@material-ui/icons/KeyboardVoice'; +import Save from '@material-ui/icons/Save'; + +import { Button, Typography, Grid, Icon, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + button: { + margin: theme.spacing(1), + }, + inputUpload: { + display: 'none', + }, + leftIcon: { + marginRight: theme.spacing(1), + }, + rightIcon: { + marginLeft: theme.spacing(1), + }, + iconSmall: { + fontSize: 20, + }, +}); + +function doSomething(event) { + alert(event.currentTarget.getAttribute('data-something')); +} + +class StandardButtons extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="center" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Flat Button</Typography> + <Typography className={classes.divider}> + Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press. + </Typography> + <Button className={classes.button}>Default</Button> + <Button color="primary" className={classes.button}> + Primary + </Button> + <Button color="secondary" className={classes.button}> + Secondary + </Button> + <Button disabled className={classes.button}> + Disabled + </Button> + <Button href="#flat-buttons" className={classes.button}> + Link + </Button> + <Button disabled href="/" className={classes.button}> + Link disabled + </Button> + <Button className={classes.button} onClick={doSomething} data-something="here I am"> + Does something + </Button> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Raised Button</Typography> + <Typography className={classes.divider}> + Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press. + </Typography> + <Button variant="contained" className={classes.button}> + Default + </Button> + <Button variant="contained" color="primary" className={classes.button}> + Primary + </Button> + <Button variant="contained" color="secondary" className={classes.button}> + Secondary + </Button> + <Button variant="contained" color="secondary" disabled className={classes.button}> + Disabled + </Button> + <input + accept="image/*" + className={classes.inputUpload} + id="raised-button-file" + multiple + type="file" + /> + <label htmlFor="raised-button-file"> + <Button variant="contained" component="span" className={classes.button}> + Upload + </Button> + </label> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Outline Button</Typography> + <Button variant="outlined" className={classes.button}> + Default + </Button> + <Button variant="outlined" color="primary" className={classes.button}> + Primary + </Button> + <Button variant="outlined" color="secondary" className={classes.button}> + Secondary + </Button> + <Button variant="outlined" disabled className={classes.button}> + Disabled + </Button> + <Button variant="outlined" href="#outlined-buttons" className={classes.button}> + Link + </Button> + <input + accept="image/*" + className={classes.inputUpload} + id="outlined-button-file" + multiple + type="file" + /> + <label htmlFor="outlined-button-file"> + <Button variant="outlined" component="span" className={classes.button}> + Upload + </Button> + </label> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Icon Button</Typography> + <Typography className={classes.divider}> + Icon buttons are commonly found in app bars and toolbars. + </Typography> + <IconButton className={classes.button} aria-label="Delete"> + <DeleteIcon /> + </IconButton> + <IconButton className={classes.button} aria-label="Delete" disabled color="primary"> + <DeleteIcon /> + </IconButton> + <IconButton color="secondary" className={classes.button} aria-label="Add an alarm"> + <Icon>alarm</Icon> + </IconButton> + <IconButton color="primary" className={classes.button} aria-label="Add to shopping cart"> + <AddShoppingCartIcon /> + </IconButton> + <input accept="image/*" className={classes.inputUpload} id="icon-button-file" type="file" /> + <label htmlFor="icon-button-file"> + <IconButton color="primary" className={classes.button} component="span"> + <PhotoCamera /> + </IconButton> + </label> + </Grid> + <Grid + item + md={12} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Icon Raised Button</Typography> + <Typography className={classes.divider}> + Icon buttons are commonly found in app bars and toolbars. + </Typography> + <Button className={classes.button} variant="contained" color="secondary"> + Delete + <DeleteIcon className={classes.rightIcon} /> + </Button> + <Button className={classes.button} variant="contained" color="primary"> + Send + <Icon className={classes.rightIcon}>send</Icon> + </Button> + <Button className={classes.button} variant="contained" color="default"> + Upload + <FileUpload className={classes.rightIcon} /> + </Button> + <Button className={classes.button} variant="contained" disabled color="secondary"> + <KeyboardVoice className={classes.leftIcon} /> + Talk + </Button> + <Button className={classes.button} variant="contained" size="small"> + <Save className={classNames(classes.leftIcon, classes.iconSmall)} /> + Save + </Button> + </Grid> + </Grid> + </Fragment> + ); + } +} + +StandardButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StandardButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js b/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js new file mode 100644 index 0000000..3c10803 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js @@ -0,0 +1,210 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { green } from '@material-ui/core/colors'; + +import { + Switch, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormGroup, + FormHelperText, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + formControl: { + margin: theme.spacing(3), + }, + group: { + margin: `${theme.spacing(1)}px 0`, + }, + switchBase: { + color: green[50], + '&$checked': { + color: green[500], + '& + $bar': { + backgroundColor: green[500], + }, + }, + }, + bar: {}, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class RadioButton extends PureComponent { + state = { + checkedA: true, + checkedB: true, + checkedF: true, + gilad: true, + jason: false, + antoine: true, + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={3} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <div> + <Switch + checked={this.state.checkedA} + onChange={this.handleChange('checkedA')} + value="checkedA" + /> + <Switch + checked={this.state.checkedB} + onChange={this.handleChange('checkedB')} + value="checkedB" + color="primary" + /> + <Switch value="checkedC" /> + <Switch disabled value="checkedD" /> + <Switch disabled checked value="checkedE" /> + <Switch defaultChecked value="checkedF" color="default" /> + </div> + </Grid> + <Grid + item + md={4} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Switch with label</Typography> + <Typography className={classes.divider}>Switch can also be used with a label description thanks to the FormControlLabel component.</Typography> + <div> + <FormGroup row> + <FormControlLabel + control={( + <Switch + checked={this.state.checkedA} + onChange={this.handleChange('checkedA')} + value="checkedA" + /> + )} + label="Secondary" + /> + <FormControlLabel + control={( + <Switch + checked={this.state.checkedB} + onChange={this.handleChange('checkedB')} + value="checkedB" + color="primary" + /> + )} + label="Primary" + /> + <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" /> + <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" /> + <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" /> + <FormControlLabel + control={( + <Switch + checked={this.state.checkedF} + onChange={this.handleChange('checkedF')} + value="checkedF" + classes={{ + switchBase: classes.switchBase, + checked: classes.checked, + track: classes.bar, + }} + /> + )} + label="Custom color" + /> + </FormGroup> + </div> + </Grid> + <Grid + item + md={5} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Switch in Form Group</Typography> + <Typography className={classes.divider}>FormGroup is a helpful wrapper used to group selection controls components that provides an easier API. However, we encourage you to use a Checkbox instead.</Typography> + <div> + <FormControl component="fieldset"> + <FormLabel component="legend">Assign responsibility</FormLabel> + <FormGroup> + <FormControlLabel + control={( + <Switch + checked={this.state.gilad} + onChange={this.handleChange('gilad')} + value="gilad" + /> + )} + label="Gilad Gray" + /> + <FormControlLabel + control={( + <Switch + checked={this.state.jason} + onChange={this.handleChange('jason')} + value="jason" + /> + )} + label="Jason Killian" + /> + <FormControlLabel + control={( + <Switch + checked={this.state.antoine} + onChange={this.handleChange('antoine')} + value="antoine" + /> + )} + label="Antoine Llorca" + /> + </FormGroup> + <FormHelperText>Be careful</FormHelperText> + </FormControl> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +RadioButton.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RadioButton); diff --git a/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js b/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js new file mode 100644 index 0000000..1648fc3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js @@ -0,0 +1,249 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import keycode from 'keycode'; +import Downshift from 'downshift'; +import { withStyles } from '@material-ui/core/styles'; +import { TextField, Paper, MenuItem, Chip } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { + InputProps, + classes, + ref, + ...other + } = inputProps; + + return ( + <TextField + InputProps={{ + inputRef: ref, + classes: { + root: classes.inputRoot, + }, + ...InputProps, + }} + {...other} + /> + ); +} + +function renderSuggestion({ + suggestion, + index, + itemProps, + highlightedIndex, + selectedItem +}) { + const isHighlighted = highlightedIndex === index; + const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; + + return ( + <MenuItem + {...itemProps} + key={suggestion.label} + selected={isHighlighted} + component="div" + style={{ + fontWeight: isSelected ? 500 : 400, + }} + > + {suggestion.label} + </MenuItem> + ); +} + +renderSuggestion.propTypes = { + highlightedIndex: PropTypes.number.isRequired, + index: PropTypes.number.isRequired, + itemProps: PropTypes.object.isRequired, + selectedItem: PropTypes.string.isRequired, + suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired, +}; + +function getSuggestions(inputValue) { + let count = 0; + + return suggestions.filter(suggestion => { + const keep = (!inputValue || suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) + && count < 5; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +class DownshiftMultiple extends React.Component { + state = { + inputValue: '', + selectedItem: [], + }; + + handleKeyDown = event => { + const { inputValue, selectedItem } = this.state; + if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') { + this.setState({ + selectedItem: selectedItem.slice(0, selectedItem.length - 1), + }); + } + }; + + handleInputChange = event => { + this.setState({ inputValue: event.target.value }); + }; + + handleChange = item => { + let { selectedItem } = this.state; + + if (selectedItem.indexOf(item) === -1) { + selectedItem = [...selectedItem, item]; + } + + this.setState({ + inputValue: '', + selectedItem, + }); + }; + + handleDelete = item => () => { + const selectedItem = [...this.state.selectedItem]; + selectedItem.splice(selectedItem.indexOf(item), 1); + + this.setState({ selectedItem }); + }; + + render() { + const { classes } = this.props; + const { inputValue, selectedItem } = this.state; + + return ( + <Downshift inputValue={inputValue} onChange={this.handleChange} selectedItem={selectedItem}> + {({ + getInputProps, + getItemProps, + isOpen, + inputValue: inputValue2, + selectedItem: selectedItem2, + highlightedIndex, + }) => ( + <div className={classes.container}> + {renderInput({ + fullWidth: true, + classes, + InputProps: getInputProps({ + startAdornment: selectedItem.map(item => ( + <Chip + key={item} + tabIndex={-1} + label={item} + className={classes.chip} + onDelete={this.handleDelete(item)} + /> + )), + onChange: this.handleInputChange, + onKeyDown: this.handleKeyDown, + placeholder: 'Select multiple countries', + id: 'integration-downshift-multiple', + }), + })} + {isOpen ? ( + <Paper className={classes.paper} square> + {getSuggestions(inputValue2).map((suggestion, index) => renderSuggestion({ + suggestion, + index, + itemProps: getItemProps({ item: suggestion.label }), + highlightedIndex, + selectedItem: selectedItem2, + }), + )} + </Paper> + ) : null} + </div> + )} + </Downshift> + ); + } +} + +DownshiftMultiple.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 100, + }, + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`, + }, + inputRoot: { + flexWrap: 'wrap', + }, +}); + +function TagSuggestions(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <DownshiftMultiple classes={classes} /> + </div> + ); +} + +TagSuggestions.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TagSuggestions); diff --git a/front/odiparpack/app/containers/Forms/demos/TextFields.js b/front/odiparpack/app/containers/Forms/demos/TextFields.js new file mode 100644 index 0000000..b408284 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TextFields.js @@ -0,0 +1,124 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Grid, Input, InputLabel, FormControl, FormHelperText } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + input: { + margin: theme.spacing(3), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(3), + }, +}); + +class TextFields extends PureComponent { + state = { + name: 'Composed TextField', + }; + + handleChange = event => { + this.setState({ name: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Textfield Components</Typography> + <Typography className={classes.divider}>TextField is composed of smaller components that you can leverage directly to significantly customize your form inputs.</Typography> + <div className={classes.container}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="name-simple">Name</InputLabel> + <Input id="name-simple" value={this.state.name} onChange={this.handleChange} /> + </FormControl> + <FormControl className={classes.formControl} aria-describedby="name-helper-text"> + <InputLabel htmlFor="name-helper">Name</InputLabel> + <Input id="name-helper" value={this.state.name} onChange={this.handleChange} /> + <FormHelperText id="name-helper-text">Some important helper text</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} disabled> + <InputLabel htmlFor="name-disabled">Name</InputLabel> + <Input id="name-disabled" value={this.state.name} onChange={this.handleChange} /> + <FormHelperText>Disabled</FormHelperText> + </FormControl> + <FormControl className={classes.formControl} error aria-describedby="name-error-text"> + <InputLabel htmlFor="name-error">Name</InputLabel> + <Input id="name-error" value={this.state.name} onChange={this.handleChange} /> + <FormHelperText id="name-error-text">Error</FormHelperText> + </FormControl> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Input State</Typography> + <div className={classes.container}> + <Input + defaultValue="Hello world" + className={classes.input} + inputProps={{ + 'aria-label': 'Description', + }} + /> + <Input + placeholder="Placeholder" + className={classes.input} + inputProps={{ + 'aria-label': 'Description', + }} + /> + <Input + value="Disabled" + className={classes.input} + disabled + inputProps={{ + 'aria-label': 'Description', + }} + /> + <Input + defaultValue="Error" + className={classes.input} + error + inputProps={{ + 'aria-label': 'Description', + }} + /> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +TextFields.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TextFields); diff --git a/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js b/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js new file mode 100644 index 0000000..27809f4 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js @@ -0,0 +1,174 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { purple, green } from '@material-ui/core/colors'; + +import { Typography, Grid, Input, InputLabel, TextField, FormControl } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + lineHeight: '24px' + }, + input: { + margin: theme.spacing(3), + }, + margin: { + margin: theme.spacing(1), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + textField: { + margin: `${theme.spacing(2)}px ${theme.spacing(1)}px`, + width: 200, + }, + cssLabel: { + '&$cssFocused': { + color: purple[500], + }, + }, + cssFocused: {}, + cssUnderline: { + '&:after': { + backgroundColor: purple[500], + }, + }, + bootstrapRoot: { + padding: 0, + 'label + &': { + marginTop: theme.spacing(3), + }, + }, + bootstrapInput: { + borderRadius: 4, + backgroundColor: theme.palette.common.white, + border: '1px solid #ced4da', + fontSize: 16, + padding: '10px 12px', + width: 'calc(100% - 24px)', + transition: theme.transitions.create(['border-color', 'box-shadow']), + '&:focus': { + borderColor: '#80bdff', + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', + }, + }, + bootstrapFormLabel: { + fontSize: 18, + }, +}); + +const theme = createMuiTheme({ + palette: { + primary: green, + }, +}); + +class TextFields extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={3} + > + <Grid + item + md={12} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Layout</Typography> + <Typography className={classes.divider}>TextField, FormControl allow the specification of margin to alter the vertical spacing of inputs. Using none (default) will not apply margins to the FormControl, whereas dense and normal will as well as alter other styles to meet the specification.</Typography> + <div className={classes.container}> + <TextField + label="None" + id="margin-none" + defaultValue="Default Value" + className={classes.textField} + helperText="Some important text" + /> + <TextField + label="Dense" + id="margin-dense" + defaultValue="Default Value" + className={classes.textField} + helperText="Some important text" + margin="dense" + /> + <TextField + label="Normal" + id="margin-normal" + defaultValue="Default Value" + className={classes.textField} + helperText="Some important text" + margin="normal" + /> + </div> + </Grid> + <Grid + item + md={12} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Customized Designs</Typography> + <Typography className={classes.divider}>Here is an example of how you can change the main color of an Input.</Typography> + <div className={classes.container}> + <FormControl className={classes.margin}> + <InputLabel + htmlFor="custom-css-input" + > + Custom CSS + </InputLabel> + <Input + classes={{ + underline: classes.cssUnderline, + }} + id="custom-css-input" + /> + </FormControl> + <MuiThemeProvider theme={theme}> + <TextField + className={classes.margin} + label="MuiThemeProvider" + id="mui-theme-provider-input" + /> + </MuiThemeProvider> + <TextField + className={classes.divider} + defaultValue="react-bootstrap" + label="Bootstrap" + id="bootstrap-input" + InputProps={{ + disableUnderline: true, + classes: { + root: classes.bootstrapRoot, + input: classes.bootstrapInput, + }, + }} + InputLabelProps={{ + shrink: true, + className: classes.bootstrapFormLabel, + }} + /> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +TextFields.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TextFields); diff --git a/front/odiparpack/app/containers/Forms/demos/TimeInput.js b/front/odiparpack/app/containers/Forms/demos/TimeInput.js new file mode 100644 index 0000000..d8ed35b --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TimeInput.js @@ -0,0 +1,124 @@ +import React, { Fragment, PureComponent } from 'react'; +import { TimePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Grid, InputAdornment, Icon, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class TimeInput extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Basic usage</Typography> + <Typography className={classes.divider}> + A time picker should adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format. + </Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <div className="picker"> + <TimePicker + label="12 hours" + value={selectedDate} + onChange={this.handleDateChange} + /> + </div> + </MuiPickersUtilsProvider> + </div> + + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <TimePicker + clearable + ampm={false} + label="24 hours" + value={selectedDate} + onChange={this.handleDateChange} + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + <Grid + item + md={6} + className={classes.demo} + > + <Typography variant="button" className={classes.divider}>Keyboard Input</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <KeyboardDatePicker + label="Masked timepicker" + mask={[/\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']} + placeholder="08:00 AM" + value={selectedDate} + onChange={this.handleDateChange} + /> + </MuiPickersUtilsProvider> + </div> + <Typography variant="button" className={classes.divider}>Custom Icon</Typography> + <div className={classes.picker}> + <MuiPickersUtilsProvider utils={MomentUtils}> + <TimePicker + label="Masked timepicker" + mask={[/\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']} + placeholder="08:00 AM" + value={selectedDate} + onChange={this.handleDateChange} + InputProps={{ + endAdornment: ( + <InputAdornment position="end"> + <IconButton> + <Icon>access_time</Icon> + </IconButton> + </InputAdornment> + ), + }} + /> + </MuiPickersUtilsProvider> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +TimeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TimeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js b/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js new file mode 100644 index 0000000..22ae742 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js @@ -0,0 +1,31 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputAll extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + <Fragment> + <div> + <MaterialDropZone + files={files} + showPreviews + maxSize={5000000} + filesLimit={5} + text="Drag and drop file(s) here or click" + /> + </div> + </Fragment> + ); + } +} + +export default UploadInputAll; diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js b/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js new file mode 100644 index 0000000..959ee85 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js @@ -0,0 +1,32 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputBtn extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + <Fragment> + <div> + <MaterialDropZone + files={files} + showPreviews + maxSize={5000000} + filesLimit={5} + text="Drag and drop file(s) here or click button bellow" + showButton + /> + </div> + </Fragment> + ); + } +} + +export default UploadInputBtn; diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js b/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js new file mode 100644 index 0000000..3600f37 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js @@ -0,0 +1,32 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputImg extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + <Fragment> + <div> + <MaterialDropZone + acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']} + files={files} + showPreviews + maxSize={5000000} + filesLimit={5} + text="Drag and drop image(s) here or click" + /> + </div> + </Fragment> + ); + } +} + +export default UploadInputImg; diff --git a/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js b/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js new file mode 100644 index 0000000..61c64a8 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js @@ -0,0 +1,91 @@ +import React, { Fragment, PureComponent } from 'react'; +import { convertFromRaw, EditorState, convertToRaw } from 'draft-js'; +import { Editor } from 'react-draft-wysiwyg'; +import draftToHtml from 'draftjs-to-html'; +import draftToMarkdown from 'draftjs-to-markdown'; +import EditorStyle from 'ba-styles/TextEditor.scss'; +import 'ba-styles/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css'; + +import { Grid, Typography } from '@material-ui/core'; + +const content = { + blocks: [{ + key: '637gr', + text: 'Lorem ipsum dolor sit amet 😀', + type: 'unstyled', + depth: 0, + inlineStyleRanges: [], + entityRanges: [], + data: {} + }], + entityMap: {} +}; + +class Wysiwyg extends PureComponent { + constructor(props) { + super(props); + const contentBlock = convertFromRaw(content); + if (contentBlock) { + const editorState = EditorState.createWithContent(contentBlock); + this.state = { + editorState, + }; + } + } + + onEditorStateChange = editorState => { + this.setState({ + editorState, + }); + }; + + render() { + const { editorState } = this.state; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="space-around" + direction="row" + spacing={3} + > + <Grid item xs={12}> + <Editor + editorState={editorState} + editorClassName={EditorStyle.TextEditor} + toolbarClassName={EditorStyle.ToolbarEditor} + onEditorStateChange={this.onEditorStateChange} + /> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button">JSON Result :</Typography> + <textarea + className={EditorStyle.textPreview} + disabled + value={JSON.stringify(editorState, null, 4)} + /> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button">HTML Result :</Typography> + <textarea + className={EditorStyle.textPreview} + disabled + value={draftToHtml(convertToRaw(editorState.getCurrentContent()))} + /> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button">Markdown Result :</Typography> + <textarea + className={EditorStyle.textPreview} + disabled + value={editorState && draftToMarkdown(convertToRaw(editorState.getCurrentContent()))} + /> + </Grid> + </Grid> + </Fragment> + ); + } +} + +export default Wysiwyg; diff --git a/front/odiparpack/app/containers/Forms/demos/index.js b/front/odiparpack/app/containers/Forms/demos/index.js new file mode 100644 index 0000000..8ae709e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/index.js @@ -0,0 +1,44 @@ +// Redux Form +export ReduxFormDemo from './ReduxFormDemo'; +// Date Time Picker +export DateInput from './DateInput'; +export TimeInput from './TimeInput'; +export DateTimeInput from './DateTimeInput'; +// Checkbox and Radio +export Checkboxes from './Checkboxes'; +export RadioButton from './RadioButton'; +// Switches +export SwitchesInput from './SwitchesInput'; +// Selectbox +export SimpleSelectbox from './SimpleSelectbox'; +export NativeSelectbox from './NativeSelectbox'; +export MultipleSelectbox from './MultipleSelectbox'; +export ControlledSelectbox from './ControlledSelectbox'; +// Ratting +export RatingNormal from './RatingNormal'; +export RatingCustom from './RatingCustom'; +// Slide Range +export SliderInput from './SliderInput'; +export RangeInput from './RangeInput'; +// Buttons +export StandardButtons from './StandardButtons'; +export FloatingButtons from './FloatingButtons'; +export CustomButtons from './CustomButtons'; +export ComplexButtons from './ComplexButtons'; +// Textfield +export TextFields from './TextFields'; +export TextFieldsLayout from './TextFieldsLayout'; +export InputAdornments from './InputAdornments'; +export FormattedInputs from './FormattedInputs'; +// Autocomplete +export AutoSuggest from './AutoSuggest'; +export TagSuggestions from './TagSuggestions'; +export SelectSuggestions from './SelectSuggestions'; +export SelectSuggestionTags from './SelectSuggestionTags'; +export HighlightSuggest from './HighlightSuggest'; +// Text Editor +export Wysiwyg from './Wysiwyg'; +// Uploader +export UploadInputAll from './UploadInputAll'; +export UploadInputImg from './UploadInputImg'; +export UploadInputBtn from './UploadInputBtn'; diff --git a/front/odiparpack/app/containers/LanguageProvider/actions.js b/front/odiparpack/app/containers/LanguageProvider/actions.js new file mode 100644 index 0000000..129dda4 --- /dev/null +++ b/front/odiparpack/app/containers/LanguageProvider/actions.js @@ -0,0 +1,14 @@ +/* + * + * LanguageProvider actions + * + */ + +import { CHANGE_LOCALE } from './constants'; + +export default function changeLocale(languageLocale) { + return { + type: CHANGE_LOCALE, + locale: languageLocale, + }; +} diff --git a/front/odiparpack/app/containers/LanguageProvider/constants.js b/front/odiparpack/app/containers/LanguageProvider/constants.js new file mode 100644 index 0000000..365ac6d --- /dev/null +++ b/front/odiparpack/app/containers/LanguageProvider/constants.js @@ -0,0 +1,8 @@ +/* + * + * LanguageProvider constants + * + */ + +const CHANGE_LOCALE = 'CHANGE_LOCALE'; +export default CHANGE_LOCALE; diff --git a/front/odiparpack/app/containers/LanguageProvider/index.js b/front/odiparpack/app/containers/LanguageProvider/index.js new file mode 100644 index 0000000..666240d --- /dev/null +++ b/front/odiparpack/app/containers/LanguageProvider/index.js @@ -0,0 +1,51 @@ +/* + * + * LanguageProvider + * + * this component connects the redux state language locale to the + * IntlProvider component and i18n messages (loaded from `app/translations`) + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { IntlProvider } from 'react-intl'; + +import { makeSelectLocale } from './selectors'; + +export class LanguageProvider extends React.PureComponent { + // eslint-disable-line react/prefer-stateless-function + render() { + return ( + <IntlProvider + locale={this.props.locale} + key={this.props.locale} + messages={this.props.messages[this.props.locale]} + > + {React.Children.only(this.props.children)} + </IntlProvider> + ); + } +} + +LanguageProvider.propTypes = { + locale: PropTypes.string.isRequired, + messages: PropTypes.object.isRequired, + children: PropTypes.element.isRequired, +}; + +const mapStateToProps = createSelector(makeSelectLocale(), locale => ({ + locale, +})); + +function mapDispatchToProps(dispatch) { + return { + dispatch, + }; +} + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(LanguageProvider); diff --git a/front/odiparpack/app/containers/LanguageProvider/reducer.js b/front/odiparpack/app/containers/LanguageProvider/reducer.js new file mode 100644 index 0000000..089c426 --- /dev/null +++ b/front/odiparpack/app/containers/LanguageProvider/reducer.js @@ -0,0 +1,25 @@ +/* + * + * LanguageProvider reducer + * + */ + +import { fromJS } from 'immutable'; + +import CHANGE_LOCALE from './constants'; +import { DEFAULT_LOCALE } from '../../i18n'; // eslint-disable-line + +export const initialState = fromJS({ + locale: DEFAULT_LOCALE, +}); + +function languageProviderReducer(state = initialState, action) { + switch (action.type) { + case CHANGE_LOCALE: + return state.set('locale', action.locale); + default: + return state; + } +} + +export default languageProviderReducer; diff --git a/front/odiparpack/app/containers/LanguageProvider/selectors.js b/front/odiparpack/app/containers/LanguageProvider/selectors.js new file mode 100644 index 0000000..3ef15a2 --- /dev/null +++ b/front/odiparpack/app/containers/LanguageProvider/selectors.js @@ -0,0 +1,16 @@ +import { createSelector } from 'reselect'; +import { initialState } from './reducer'; + +/** + * Direct selector to the languageToggle state domain + */ +const selectLanguage = state => state.get('language', initialState); + +/** + * Select the language locale + */ + +const makeSelectLocale = () => + createSelector(selectLanguage, languageState => languageState.get('locale')); + +export { selectLanguage, makeSelectLocale }; diff --git a/front/odiparpack/app/containers/Layouts/AppLayout.js b/front/odiparpack/app/containers/Layouts/AppLayout.js new file mode 100644 index 0000000..c0e96d0 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/AppLayout.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SidebarLayout, SidebarLayoutRight, FullHeader } from './demos'; + +class AppLayout extends Component { + render() { + const title = brand.name + ' - Layout'; + const description = brand.desc; + const docSrc = 'containers/Layouts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="App Layout with Sidebars" desc="The Drawer slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists."> + <div> + <SidebarLayout /> + <SourceReader componentName={docSrc + 'SidebarLayout.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Right Sidebar Mode" desc="The Drawer slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists."> + <div> + <SidebarLayoutRight /> + <SourceReader componentName={docSrc + 'SidebarLayoutRight.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Full Header Mode" desc="Apps focused on productivity that require balance across the screen."> + <div> + <FullHeader /> + <SourceReader componentName={docSrc + 'FullHeader.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default AppLayout; diff --git a/front/odiparpack/app/containers/Layouts/Grid.js b/front/odiparpack/app/containers/Layouts/Grid.js new file mode 100644 index 0000000..6a1057d --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/Grid.js @@ -0,0 +1,96 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + GridLayout, + FullWidth, + Centered, + Interactive, + AutoLayout, + Limitation +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class GridPage extends Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - Layout'; + const description = brand.desc; + const docSrc = 'containers/Layouts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Grid Spacing" desc="The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40dp wide."> + <div> + <GridLayout /> + <SourceReader componentName={docSrc + 'GridLayout.js'} /> + </div> + </PapperBlock> + + <PapperBlock title="Full-width" desc="Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change."> + <div> + <FullWidth /> + <SourceReader componentName={docSrc + 'FullWidth.js'} /> + </div> + </PapperBlock> + + <PapperBlock title="Centered Grid" desc="Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen."> + <div> + <Centered /> + <SourceReader componentName={docSrc + 'Centered.js'} /> + </div> + </PapperBlock> + + <PapperBlock title="Interactive" desc="Below is an interactive demo that lets you explore the visual results of the different settings:"> + <div> + <Interactive /> + <SourceReader componentName={docSrc + 'Interactive.js'} /> + </div> + </PapperBlock> + + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <PapperBlock title="Auto Layout" desc="The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it."> + <div> + <AutoLayout /> + <SourceReader componentName={docSrc + 'AutoLayout.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Limitations" overflowX desc="There is one limitation with the negative margin we use to implement the spacing between items."> + <div> + <Limitation /> + <SourceReader componentName={docSrc + 'Limitation.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +GridPage.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(GridPage); diff --git a/front/odiparpack/app/containers/Layouts/Responsive.js b/front/odiparpack/app/containers/Layouts/Responsive.js new file mode 100644 index 0000000..b5d6db2 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/Responsive.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import Markdown from 'react-markdown'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Breakpoint, BreakpointGrid, MediaQueries, WIthWIdth } from './demos'; +import breakpointsTable from './demos/breakpoint.md'; + +class Responsive extends Component { + render() { + const title = brand.name + ' - Layout'; + const description = brand.desc; + const docSrc = 'containers/Layouts/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Media Queries" desc="CSS media queries is the idiomatic approach to make your UI responsive.. We provide some CSS-in-JS helpers to do so. In the following demo, we change the background color (red, blue & green) based on the screen width."> + <div> + <MediaQueries /> + <SourceReader componentName={docSrc + 'MediaQueries.js'} /> + </div> + </PapperBlock> + <PapperBlock title="With Width" desc="Sometimes, using CSS isn't enough. You might want to change the React rendering tree based on the breakpoint value, in JavaScript. We provide a withWidth() higher-order component for this use case. In the following demo, we change the rendered DOM element (em, u, del & span) based on the screen width."> + <div> + <WIthWIdth /> + <SourceReader componentName={docSrc + 'WIthWIdth.js'} /> + </div> + </PapperBlock> + <PapperBlock overflowX title="Hidden" desc="Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. only='sm' or only={['md', 'xl']}. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints."> + <div> + <Markdown source={breakpointsTable} /> + <Breakpoint /> + <SourceReader componentName={docSrc + 'Breakpoint.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Integration with Grid" desc="It is quite common to alter Grid at different responsive breakpoints, and in many cases, you want to hide some of those elements."> + <div> + <BreakpointGrid /> + <SourceReader componentName={docSrc + 'BreakpointGrid.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Responsive; diff --git a/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js new file mode 100644 index 0000000..864d17e --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js @@ -0,0 +1,85 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Paper, Divider, Grid } from '@material-ui/core'; + +const styles = theme => ({ + container: { + display: 'grid', + gridTemplateColumns: 'repeat(12, 1fr)', + gridGap: `${theme.spacing(3)}px`, + }, + paper: { + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, + whiteSpace: 'nowrap', + marginBottom: theme.spacing(1), + backgroundColor: theme.palette.secondary.light, + }, + divider: { + margin: `${theme.spacing(2)}px 0`, + }, +}); + +function CSSGrid(props) { + const { classes } = props; + + return ( + <div> + <Typography variant="subtitle1" gutterBottom> + Material-UI Grid: + </Typography> + <Grid container spacing={3}> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={8}> + <Paper className={classes.paper}>xs=8</Paper> + </Grid> + <Grid item xs={4}> + <Paper className={classes.paper}>xs=4</Paper> + </Grid> + </Grid> + <Divider className={classes.divider} /> + <Typography variant="subtitle1" gutterBottom> + CSS Grid Layout: + </Typography> + <div className={classes.container}> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 3' }}> + <Paper className={classes.paper}>xs=3</Paper> + </div> + <div style={{ gridColumnEnd: 'span 8' }}> + <Paper className={classes.paper}>xs=8</Paper> + </div> + <div style={{ gridColumnEnd: 'span 4' }}> + <Paper className={classes.paper}>xs=4</Paper> + </div> + </div> + </div> + ); +} + +CSSGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CSSGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js new file mode 100644 index 0000000..be557b4 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import compose from 'recompose/compose'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Hidden, Divider, withWidth, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + container: { + display: 'flex', + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + flex: '1 0 auto', + margin: theme.spacing(1), + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +function Breakpoint(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + {/* Breakpoin up block */} + <Typography variant="h5">Breakpoint up</Typography> + <Typography gutterBottom noWrap> + Using any breakpoint up property, the given children will be hidden at or above the breakpoint. + </Typography> + <div className={classes.container}> + <Hidden xsUp> + <Paper className={classes.paper}>xsUp</Paper> + </Hidden> + <Hidden smUp> + <Paper className={classes.paper}>smUp</Paper> + </Hidden> + <Hidden mdUp> + <Paper className={classes.paper}>mdUp</Paper> + </Hidden> + <Hidden lgUp> + <Paper className={classes.paper}>lgUp</Paper> + </Hidden> + <Hidden xlUp> + <Paper className={classes.paper}>xlUp</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + <Divider className={classes.divider} /> + {/* Breakpoin down block */} + <Typography variant="h5">Breakpoint down</Typography> + <Typography gutterBottom noWrap> + Using any breakpoint down property, the given children will be hidden at or below the breakpoint. + </Typography> + <div className={classes.container}> + <Hidden xsDown> + <Paper className={classes.paper}>xsDown</Paper> + </Hidden> + <Hidden smDown> + <Paper className={classes.paper}>smDown</Paper> + </Hidden> + <Hidden mdDown> + <Paper className={classes.paper}>mdDown</Paper> + </Hidden> + <Hidden lgDown> + <Paper className={classes.paper}>lgDown</Paper> + </Hidden> + <Hidden xlDown> + <Paper className={classes.paper}>xlDown</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + <Divider className={classes.divider} /> + {/* Breakpoin only block */} + <Typography variant="h5">Breakpoint only</Typography> + <Typography gutterBottom noWrap> + Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s). + </Typography> + <div className={classes.container}> + <Hidden only="lg"> + <Paper className={classes.paper}>Hidden on lg</Paper> + </Hidden> + <Hidden only="sm"> + <Paper className={classes.paper}>Hidden on sm</Paper> + </Hidden> + <Hidden only={['sm', 'lg']}> + <Paper className={classes.paper}>Hidden on sm and lg</Paper> + </Hidden> + </div> + <Typography variant="caption" gutterBottom align="center"> +Current width: + {props.width} + </Typography> + </div> + ); +} + +Breakpoint.propTypes = { + classes: PropTypes.object.isRequired, + width: PropTypes.string.isRequired, +}; + +export default compose(withStyles(styles), withWidth())(Breakpoint); diff --git a/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js new file mode 100644 index 0000000..cd94ef9 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import compose from 'recompose/compose'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid, withWidth, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + container: { + display: 'flex', + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + flex: '1 0 auto', + margin: theme.spacing(1), + }, +}); + +function GridIntegration(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <div className={classes.container}> + <Grid container spacing={3}> + <Grid item xs hidden={{ xsUp: true }}> + <Paper className={classes.paper}>xsUp</Paper> + </Grid> + <Grid item xs hidden={{ smUp: true }}> + <Paper className={classes.paper}>smUp</Paper> + </Grid> + <Grid item xs hidden={{ mdUp: true }}> + <Paper className={classes.paper}>mdUp</Paper> + </Grid> + <Grid item xs hidden={{ lgUp: true }}> + <Paper className={classes.paper}>lgUp</Paper> + </Grid> + <Grid item xs hidden={{ xlUp: true }}> + <Paper className={classes.paper}>xlUp</Paper> + </Grid> + </Grid> + </div> + <Typography variant="caption" align="center"> +Current width: + {props.width} + </Typography> + </div> + ); +} + +GridIntegration.propTypes = { + classes: PropTypes.object.isRequired, + width: PropTypes.string.isRequired, +}; + +export default compose(withStyles(styles), withWidth())(GridIntegration); diff --git a/front/odiparpack/app/containers/Layouts/demos/Centered.js b/front/odiparpack/app/containers/Layouts/demos/Centered.js new file mode 100644 index 0000000..cdd1c10 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Centered.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + backgroundColor: theme.palette.secondary.light, + }, +}); + +function CenteredGrid(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item xs={12}> + <Paper className={classes.paper}>xs=12</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>xs=6</Paper> + </Grid> + <Grid item xs={6}> + <Paper className={classes.paper}>xs=6</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + <Grid item xs={3}> + <Paper className={classes.paper}>xs=3</Paper> + </Grid> + </Grid> + </div> + ); +} + +CenteredGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CenteredGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/FullHeader.js b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js new file mode 100644 index 0000000..d5ef402 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js @@ -0,0 +1,153 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + }, + menuButton: { + marginLeft: 0, + marginRight: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class FullHeader extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classes.appBar} + > + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + Clipped under the app bar + </Typography> + </Toolbar> + </AppBar> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="left" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + </div> + ); + } +} + +FullHeader.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(FullHeader); diff --git a/front/odiparpack/app/containers/Layouts/demos/FullWidth.js b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js new file mode 100644 index 0000000..fa7dbce --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + padding: theme.spacing(2), + textAlign: 'center', + color: theme.palette.text.secondary, + backgroundColor: theme.palette.secondary.light + }, +}); + +function FullWidthGrid(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item xs={12}> + <Paper className={classes.paper}>xs=12</Paper> + </Grid> + <Grid item xs={12} sm={6}> + <Paper className={classes.paper}>xs=12 sm=6</Paper> + </Grid> + <Grid item xs={12} sm={6}> + <Paper className={classes.paper}>xs=12 sm=6</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + <Grid item xs={6} sm={3}> + <Paper className={classes.paper}>xs=6 sm=3</Paper> + </Grid> + </Grid> + </div> + ); +} + +FullWidthGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FullWidthGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/GridLayout.js b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js new file mode 100644 index 0000000..d764c1c --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, FormLabel, FormControlLabel, Radio, RadioGroup, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + paper: { + height: 140, + width: 100, + backgroundColor: theme.palette.secondary.light, + }, + control: { + marginTop: theme.spacing(2), + padding: theme.spacing(2), + }, +}); + +class GuttersGrid extends React.Component { + state = { + spacing: '2', + }; + + handleChange = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + render() { + const { classes } = this.props; + const { spacing } = this.state; + + return ( + <Grid container className={classes.root}> + <Grid item xs={12}> + <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}> + {[0, 1, 2].map(value => ( + <Grid key={value} item> + <Paper className={classes.paper} /> + </Grid> + ))} + </Grid> + </Grid> + <Grid item xs={12}> + <Paper className={classes.control}> + <Grid container> + <Grid item> + <FormLabel>spacing</FormLabel> + <RadioGroup + name="spacing" + aria-label="spacing" + value={spacing} + onChange={this.handleChange('spacing')} + row + > + <FormControlLabel value="0" control={<Radio />} label="0" /> + <FormControlLabel value="1" control={<Radio />} label="1" /> + <FormControlLabel value="2" control={<Radio />} label="2" /> + <FormControlLabel value="3" control={<Radio />} label="3" /> + <FormControlLabel value="4" control={<Radio />} label="4" /> + </RadioGroup> + </Grid> + </Grid> + </Paper> + </Grid> + </Grid> + ); + } +} + +GuttersGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(GuttersGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Interactive.js b/front/odiparpack/app/containers/Layouts/demos/Interactive.js new file mode 100644 index 0000000..2f46841 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Interactive.js @@ -0,0 +1,138 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, FormControl, FormLabel, FormControlLabel, RadioGroup, Radio, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + demo: { + height: 240, + }, + paper: { + padding: theme.spacing(2), + height: '100%', + backgroundColor: theme.palette.secondary.light, + }, + control: { + padding: theme.spacing(2), + }, +}); + +class InteractiveGrid extends React.Component { + state = { + direction: 'row', + justify: 'center', + alignItems: 'center', + }; + + handleChange = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + render() { + const { classes } = this.props; + const { alignItems, direction, justify } = this.state; + return ( + <Grid container className={classes.root}> + <Grid item xs={12}> + <Grid + container + className={classes.demo} + alignItems={alignItems} + direction={direction} + justify={justify} + > + {[0, 1, 2].map(value => ( + <Grid key={value} item> + <Paper + className={classes.paper} + style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }} + > + {`Cell ${value + 1}`} + </Paper> + </Grid> + ))} + </Grid> + </Grid> + <Grid item xs={12}> + <Paper className={classes.control}> + <Grid container> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>direction</FormLabel> + <RadioGroup + name="direction" + aria-label="direction" + value={direction} + onChange={this.handleChange('direction')} + > + <FormControlLabel value="row" control={<Radio />} label="row" /> + <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" /> + <FormControlLabel value="column" control={<Radio />} label="column" /> + <FormControlLabel + value="column-reverse" + control={<Radio />} + label="column-reverse" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>justify</FormLabel> + <RadioGroup + name="justify" + aria-label="justify" + value={justify} + onChange={this.handleChange('justify')} + > + <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" /> + <FormControlLabel value="center" control={<Radio />} label="center" /> + <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" /> + <FormControlLabel + value="space-between" + control={<Radio />} + label="space-between" + /> + <FormControlLabel + value="space-around" + control={<Radio />} + label="space-around" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>alignItems</FormLabel> + <RadioGroup + name="alignItems" + aria-label="alignItems" + value={alignItems} + onChange={this.handleChange('alignItems')} + > + <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" /> + <FormControlLabel value="center" control={<Radio />} label="center" /> + <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" /> + <FormControlLabel value="stretch" control={<Radio />} label="stretch" /> + <FormControlLabel value="baseline" control={<Radio />} label="baseline" /> + </RadioGroup> + </FormControl> + </Grid> + </Grid> + </Paper> + </Grid> + </Grid> + ); + } +} + +InteractiveGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(InteractiveGrid); diff --git a/front/odiparpack/app/containers/Layouts/demos/Limitation.js b/front/odiparpack/app/containers/Layouts/demos/Limitation.js new file mode 100644 index 0000000..076c85f --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/Limitation.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Grid, Avatar, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + overflow: 'hidden', + padding: `0 ${theme.spacing(3)}px`, + }, + wrapper: { + maxWidth: 400, + }, + paper: { + margin: theme.spacing(1), + padding: theme.spacing(2), + backgroundColor: theme.palette.secondary.light, + }, +}); + +function AutoGridNoWrap(props) { + const { classes } = props; + const message = `Truncation should be conditionally applicable on this long line of text + as this is a much longer line than what the container can support. `; + + return ( + <div className={classes.root}> + <div className={classes.wrapper}> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs zeroMinWidth> + <Typography noWrap>{message}</Typography> + </Grid> + </Grid> + </Paper> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs> + <Typography noWrap>{message}</Typography> + </Grid> + </Grid> + </Paper> + <Paper className={classes.paper}> + <Grid container wrap="nowrap"> + <Grid item> + <Avatar>W</Avatar> + </Grid> + <Grid item xs> + <Typography>{message}</Typography> + </Grid> + </Grid> + </Paper> + </div> + </div> + ); +} + +AutoGridNoWrap.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AutoGridNoWrap); diff --git a/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js new file mode 100644 index 0000000..89de6fc --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { red, green, indigo as blue } from '@material-ui/core/colors'; +import { Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + padding: theme.spacing(1), + '& h3': { + color: theme.palette.common.white, + }, + [theme.breakpoints.down('sm')]: { + backgroundColor: red[500], + }, + [theme.breakpoints.up('md')]: { + backgroundColor: blue[500], + }, + [theme.breakpoints.up('lg')]: { + backgroundColor: green[500], + }, + }, +}); + +function MediaQuery(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <Typography variant="subtitle1">down(sm): red</Typography> + <Typography variant="subtitle1">up(md): blue</Typography> + <Typography variant="subtitle1">up(lg): green</Typography> + </div> + ); +} + +MediaQuery.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MediaQuery); diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js new file mode 100644 index 0000000..3f1c10c --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js @@ -0,0 +1,169 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: 0, + width: '100%', + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginLeft: 0, + marginRight: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class SidebarLayout extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classNames(classes.appBar, open && classes.appBarShift)} + > + <Toolbar> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + App Layout with Sidebar + </Typography> + </Toolbar> + </AppBar> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="left" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + </div> + ); + } +} + +SidebarLayout.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SidebarLayout); diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js new file mode 100644 index 0000000..85c5229 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js @@ -0,0 +1,175 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + }, + flexwrap: { + display: 'flex' + }, + flex: { + flex: 1 + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginRight: 0, + width: '100%', + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + marginRight: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + }, + }, + menuButton: { + marginRight: 0, + marginLeft: 36, + }, + drawerPaper: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + [theme.breakpoints.up('md')]: { + position: 'relative', + }, + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: 70, + [theme.breakpoints.up('sm')]: { + width: 70, + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class SidebarLayoutRight extends React.Component { + state = { + open: true, + }; + + componentDidMount() { + window.addEventListener('resize', this.resize.bind(this)); + this.resize(); + } + + resize() { + this.setState({ open: window.innerWidth >= 760 }); + } + + handleDrawerToggle = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const drawer = ( + <div> + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + return ( + <div className={classes.root}> + <AppBar + position="absolute" + className={classNames(classes.appBar, open && classes.appBarShift)} + > + <Toolbar className={classes.flexwrap}> + <Typography variant="h6" color="inherit" className={classes.flex} noWrap> + App Layout with Right Sidebar + </Typography> + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerToggle} + className={classNames(classes.menuButton)} + > + <MenuIcon /> + </IconButton> + </Toolbar> + </AppBar> + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap>Your App Content</Typography> + </main> + <Hidden mdUp> + <Drawer + variant="temporary" + anchor="right" + open={open} + onClose={this.handleDrawerToggle} + classes={{ + paper: classes.drawerPaper, + }} + ModalProps={{ + keepMounted: true, // Better open performance on mobile. + }} + > + {drawer} + </Drawer> + </Hidden> + <Hidden smDown implementation="css"> + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + {drawer} + </Drawer> + </Hidden> + </div> + ); + } +} + +SidebarLayoutRight.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SidebarLayoutRight); diff --git a/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js new file mode 100644 index 0000000..2aab0e3 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withWidth, Typography } from '@material-ui/core'; + +const components = { + sm: 'em', + md: 'u', + lg: 'del', +}; + +function WithWidth(props) { + const { width } = props; + const Component = components[width] || 'span'; + + return ( + <Typography variant="subtitle1"> + <Component>{`Current width: ${width}`}</Component> + </Typography> + ); +} + +WithWidth.propTypes = { + width: PropTypes.string.isRequired, +}; + +export default withWidth()(WithWidth); diff --git a/front/odiparpack/app/containers/Layouts/demos/breakpoint.md b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md new file mode 100644 index 0000000..e5037ec --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md @@ -0,0 +1,6 @@ + + | innerWidth |xs | sm | md | lg | xl | + |--------|-----|----|----|----|----|----| + | width | xs | sm | md | lg | xl | + | smUp | show | hide | + | mdDown | | | hide | show | diff --git a/front/odiparpack/app/containers/Layouts/demos/index.js b/front/odiparpack/app/containers/Layouts/demos/index.js new file mode 100644 index 0000000..70f3804 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/index.js @@ -0,0 +1,13 @@ +export AutoLayout from './AutoLayout'; +export Centered from './Centered'; +export FullWidth from './FullWidth'; +export GridLayout from './GridLayout'; +export Interactive from './Interactive'; +export Limitation from './Limitation'; +export SidebarLayout from './SidebarLayout'; +export SidebarLayoutRight from './SidebarLayoutRight'; +export FullHeader from './FullHeader'; +export Breakpoint from './Breakpoint'; +export BreakpointGrid from './BreakpointGrid'; +export MediaQueries from './MediaQueries'; +export WIthWIdth from './WIthWIdth'; diff --git a/front/odiparpack/app/containers/Layouts/demos/menuData.js b/front/odiparpack/app/containers/Layouts/demos/menuData.js new file mode 100644 index 0000000..cd2d653 --- /dev/null +++ b/front/odiparpack/app/containers/Layouts/demos/menuData.js @@ -0,0 +1,64 @@ +// This file is shared across the demos. + +import React from 'react'; +import InboxIcon from '@material-ui/icons/MoveToInbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; +import StarIcon from '@material-ui/icons/Star'; +import SendIcon from '@material-ui/icons/Send'; +import MailIcon from '@material-ui/icons/Mail'; +import DeleteIcon from '@material-ui/icons/Delete'; +import ReportIcon from '@material-ui/icons/Report'; + +import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; + +export const mailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <InboxIcon /> + </ListItemIcon> + <ListItemText primary="Inbox" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <StarIcon /> + </ListItemIcon> + <ListItemText primary="Starred" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <SendIcon /> + </ListItemIcon> + <ListItemText primary="Send mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DraftsIcon /> + </ListItemIcon> + <ListItemText primary="Drafts" /> + </ListItem> + </div> +); + +export const otherMailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <MailIcon /> + </ListItemIcon> + <ListItemText primary="All mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DeleteIcon /> + </ListItemIcon> + <ListItemText primary="Trash" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <ReportIcon /> + </ListItemIcon> + <ListItemText primary="Spam" /> + </ListItem> + </div> +); diff --git a/front/odiparpack/app/containers/Maps/Info.js b/front/odiparpack/app/containers/Maps/Info.js new file mode 100644 index 0000000..1faea09 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/Info.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Type from 'ba-styles/Typography.scss'; +import { Typography } from '@material-ui/core'; + +class Info extends React.Component { + render() { + return ( + <Typography className={Type.textWarning} gutterBottom style={{ marginBottom: 20 }}> + This demo may not working properly because it has not added Google Map api key. To add Your own Google Map api key please follow this link + + {' '} + <a rel="noopener noreferrer" style={{ wordWrap: 'break-word' }} target="_blank" href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a> + </Typography> + ); + } +} + +export default Info; diff --git a/front/odiparpack/app/containers/Maps/MapDirection.js b/front/odiparpack/app/containers/Maps/MapDirection.js new file mode 100644 index 0000000..97a463b --- /dev/null +++ b/front/odiparpack/app/containers/Maps/MapDirection.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Direction } from './demos'; +import Info from './Info'; + +class MapDirection extends React.Component { + render() { + const title = brand.name + ' - Map'; + const description = brand.desc; + const docSrc = 'containers/Maps/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock overflowX title="Map with Direction" desc="Rendering map with default configuration"> + <Info /> + <Direction /> + <SourceReader componentName={docSrc + 'Direction.js'} /> + </PapperBlock> + </div> + ); + } +} + +export default MapDirection; diff --git a/front/odiparpack/app/containers/Maps/MapMarker.js b/front/odiparpack/app/containers/Maps/MapMarker.js new file mode 100644 index 0000000..65f2420 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/MapMarker.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { BasicMarker, PopoverMarker } from './demos'; +import Info from './Info'; + +class MapMarker extends React.Component { + render() { + const title = brand.name + ' - Map'; + const description = brand.desc; + const docSrc = 'containers/Maps/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock overflowX title="Map with a Marker" desc="A sample for basic mark a coodinate in map"> + <Info /> + <BasicMarker /> + <SourceReader componentName={docSrc + 'BasicMarker.js'} /> + </PapperBlock> + <PapperBlock overflowX title="Marker with Popover/Info Window" desc="Click marker to show detail place"> + <Info /> + <PopoverMarker /> + <SourceReader componentName={docSrc + 'BasicMarker.js'} /> + </PapperBlock> + </div> + ); + } +} + +export default MapMarker; diff --git a/front/odiparpack/app/containers/Maps/SearchMap.js b/front/odiparpack/app/containers/Maps/SearchMap.js new file mode 100644 index 0000000..b3e21d9 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/SearchMap.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SearchLocation } from './demos'; +import Info from './Info'; + +class SearchMap extends React.Component { + render() { + const title = brand.name + ' - Map'; + const description = brand.desc; + const docSrc = 'containers/Maps/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock overflowX title="Search Location" desc="Map with search input to find any location"> + <Info /> + <SearchLocation /> + <SourceReader componentName={docSrc + 'SearchLocation.js'} /> + </PapperBlock> + </div> + ); + } +} + +export default SearchMap; diff --git a/front/odiparpack/app/containers/Maps/StreetViewMap.js b/front/odiparpack/app/containers/Maps/StreetViewMap.js new file mode 100644 index 0000000..e307da8 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/StreetViewMap.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { StreetView } from './demos'; +import Info from './Info'; + +class StreetViewMap extends React.Component { + render() { + const title = brand.name + ' - Map'; + const description = brand.desc; + const docSrc = 'containers/Maps/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock overflowX title="StreetView" desc="View location in 3d perspective"> + <Info /> + <StreetView /> + <SourceReader componentName={docSrc + 'StreetView.js'} /> + </PapperBlock> + </div> + ); + } +} + +export default StreetViewMap; diff --git a/front/odiparpack/app/containers/Maps/TrafficIndicator.js b/front/odiparpack/app/containers/Maps/TrafficIndicator.js new file mode 100644 index 0000000..e1e8a69 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/TrafficIndicator.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Traffic } from './demos'; +import Info from './Info'; + +class TrafficIndicator extends React.Component { + render() { + const title = brand.name + ' - Map'; + const description = brand.desc; + const docSrc = 'containers/Maps/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock overflowX title="Traffic Indicator" desc="Get information of transportation traffic arround the world"> + <Info /> + <Traffic /> + <SourceReader componentName={docSrc + 'Traffic.js'} /> + </PapperBlock> + </div> + ); + } +} + +export default TrafficIndicator; diff --git a/front/odiparpack/app/containers/Maps/demos/BasicMarker.js b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js new file mode 100644 index 0000000..7577923 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { compose } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, +} from 'react-google-maps'; + +const MapWithAMarker = compose( + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + defaultZoom={8} + defaultCenter={{ lat: -34.397, lng: 150.644 }} + > + <Marker + position={{ lat: -34.397, lng: 150.644 }} + /> + </GoogleMap> +)); + +class BasicMarker extends React.Component { + render() { + return ( + <MapWithAMarker + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default BasicMarker; diff --git a/front/odiparpack/app/containers/Maps/demos/Direction.js b/front/odiparpack/app/containers/Maps/demos/Direction.js new file mode 100644 index 0000000..8867466 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/Direction.js @@ -0,0 +1,56 @@ +/* eslint-disable no-undef */ +import React from 'react'; +import { compose, withProps, lifecycle } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + DirectionsRenderer, +} from 'react-google-maps'; + +const MapWithADirectionsRenderer = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + withScriptjs, + withGoogleMap, + lifecycle({ + componentDidMount() { + const DirectionsService = new google.maps.DirectionsService(); + + DirectionsService.route({ + origin: new google.maps.LatLng(41.8507300, -87.6512600), + destination: new google.maps.LatLng(41.8525800, -87.6514100), + travelMode: google.maps.TravelMode.DRIVING, + }, (result, status) => { + if (status === google.maps.DirectionsStatus.OK) { + this.setState({ + directions: result, + }); + } else { + console.error(`error fetching directions ${result}`); + } + }); + } + }) +)(props => ( + <GoogleMap + defaultZoom={8} + defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)} + > + {props.directions && <DirectionsRenderer directions={props.directions} />} + </GoogleMap> +)); + +class Direction extends React.Component { + render() { + return ( + <MapWithADirectionsRenderer /> + ); + } +} + +export default Direction; diff --git a/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js new file mode 100644 index 0000000..9a07f11 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { compose, withStateHandlers } from 'recompose'; +import LocalDining from '@material-ui/icons/LocalDining'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, + InfoWindow +} from 'react-google-maps'; + +const MapWithAMakredInfoWindow = compose( + withStateHandlers(() => ({ + isOpen: false, + }), { + onToggleOpen: ({ isOpen }) => () => ({ + isOpen: !isOpen, + }) + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + defaultZoom={8} + defaultCenter={{ lat: -34.397, lng: 150.644 }} + > + <Marker + position={{ lat: -34.397, lng: 150.644 }} + onClick={props.onToggleOpen} + > + {props.isOpen && + <InfoWindow onCloseClick={props.onToggleOpen}> + <span> + <LocalDining /> A marked place + </span> + </InfoWindow> + } + </Marker> + </GoogleMap> +)); + +class PopoverMarker extends React.Component { + render() { + return ( + <MapWithAMakredInfoWindow + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default PopoverMarker; diff --git a/front/odiparpack/app/containers/Maps/demos/SearchLocation.js b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js new file mode 100644 index 0000000..16449d0 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { compose, withProps, lifecycle } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, +} from 'react-google-maps'; +import { SearchBox } from 'react-google-maps/lib/components/places/SearchBox'; +const _ = require('lodash'); + +const MapWithASearchBox = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + lifecycle({ + componentWillMount() { + const refs = {}; + + this.setState({ + bounds: null, + center: { + lat: 41.9, lng: -87.624 + }, + markers: [], + onMapMounted: ref => { + refs.map = ref; + }, + onBoundsChanged: () => { + this.setState({ + bounds: refs.map.getBounds(), + center: refs.map.getCenter(), + }); + }, + onSearchBoxMounted: ref => { + refs.searchBox = ref; + }, + onPlacesChanged: () => { + const places = refs.searchBox.getPlaces(); + const bounds = new google.maps.LatLngBounds(); // eslint-disable-line + + places.forEach(place => { + if (place.geometry.viewport) { + bounds.union(place.geometry.viewport); + } else { + bounds.extend(place.geometry.location); + } + }); + const nextMarkers = places.map(place => ({ + position: place.geometry.location, + })); + const nextCenter = _.get(nextMarkers, '0.position', this.state.center); + + this.setState({ + center: nextCenter, + markers: nextMarkers, + }); + // refs.map.fitBounds(bounds); + }, + }); + }, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + ref={props.onMapMounted} + defaultZoom={15} + center={props.center} + onBoundsChanged={props.onBoundsChanged} + > + <SearchBox + ref={props.onSearchBoxMounted} + bounds={props.bounds} + controlPosition={google.maps.ControlPosition.TOP_LEFT} // eslint-disable-line + onPlacesChanged={props.onPlacesChanged} + > + <input + type="text" + placeholder="Customized your placeholder" + style={{ + boxSizing: 'border-box', + border: '1px solid transparent', + width: '240px', + height: '32px', + marginTop: '7px', + marginLeft: '10px', + padding: '0 12px', + borderRadius: '3px', + background: '#FAFAFA', + boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)', + fontSize: '14px', + outline: 'none', + textOverflow: 'ellipses', + }} + /> + </SearchBox> + {props.markers.map((marker, index) => + <Marker key={index.toString()} position={marker.position} /> + )} + </GoogleMap> +)); + +class SearchLocation extends React.Component { + render() { + return ( + <MapWithASearchBox /> + ); + } +} + +export default SearchLocation; diff --git a/front/odiparpack/app/containers/Maps/demos/StreetView.js b/front/odiparpack/app/containers/Maps/demos/StreetView.js new file mode 100644 index 0000000..a8d3108 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/StreetView.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { compose, withProps } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + StreetViewPanorama, + OverlayView, +} from 'react-google-maps'; + +const getPixelPositionOffset = (width, height) => ({ + x: -(width / 2), + y: -(height / 2), +}); + +const MapWithAMarker = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + center: { lat: 49.2853171, lng: -123.1119202 }, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap defaultZoom={8} defaultCenter={props.center}> + <StreetViewPanorama defaultPosition={props.center} visible> + <OverlayView + position={{ lat: 49.28590291211115, lng: -123.11248166065218 }} + mapPaneName={OverlayView.OVERLAY_LAYER} + getPixelPositionOffset={getPixelPositionOffset} + > + <div + style={{ + background: 'red', + color: 'white', + padding: 5, + borderRadius: '50%' + }} + > + OverlayView + </div> + </OverlayView> + </StreetViewPanorama> + </GoogleMap> +)); + +class StreetView extends React.Component { + render() { + return ( + <MapWithAMarker + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default StreetView; diff --git a/front/odiparpack/app/containers/Maps/demos/Traffic.js b/front/odiparpack/app/containers/Maps/demos/Traffic.js new file mode 100644 index 0000000..0f5cdfd --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/Traffic.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { compose, withProps } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + TrafficLayer, +} from 'react-google-maps'; + +const MapWithATrafficLayer = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + defaultZoom={8} + defaultCenter={{ lat: 41.9, lng: -87.624 }} + > + <TrafficLayer autoUpdate /> + </GoogleMap> +)); + +class Traffic extends React.Component { + render() { + return ( + <MapWithATrafficLayer /> + ); + } +} + +export default Traffic; diff --git a/front/odiparpack/app/containers/Maps/demos/index.js b/front/odiparpack/app/containers/Maps/demos/index.js new file mode 100644 index 0000000..33e8376 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/index.js @@ -0,0 +1,6 @@ +export BasicMarker from './BasicMarker'; +export PopoverMarker from './PopoverMarker'; +export Direction from './Direction'; +export SearchLocation from './SearchLocation'; +export Traffic from './Traffic'; +export StreetView from './StreetView'; diff --git a/front/odiparpack/app/containers/NotFound/NotFound.js b/front/odiparpack/app/containers/NotFound/NotFound.js new file mode 100644 index 0000000..4662a06 --- /dev/null +++ b/front/odiparpack/app/containers/NotFound/NotFound.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { Route } from 'react-router-dom'; +import { ErrorWrap } from 'ba-components'; + +const title = brand.name + ' - Page Not Found'; +const description = brand.desc; + +const NotFound = () => ( + <Route + render={({ staticContext }) => { + if (staticContext) { + staticContext.status = 404; // eslint-disable-line + } + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <ErrorWrap title="404" desc="Oops, Page Not Found :(" /> + </div> + ); + }} + /> +); + +export default NotFound; diff --git a/front/odiparpack/app/containers/Pages/.DS_Store b/front/odiparpack/app/containers/Pages/.DS_Store Binary files differnew file mode 100644 index 0000000..f59225b --- /dev/null +++ b/front/odiparpack/app/containers/Pages/.DS_Store diff --git a/front/odiparpack/app/containers/Pages/BlankPage/index.js b/front/odiparpack/app/containers/Pages/BlankPage/index.js new file mode 100644 index 0000000..640da6e --- /dev/null +++ b/front/odiparpack/app/containers/Pages/BlankPage/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { PapperBlock } from 'ba-components'; + +class BlankPage extends React.Component { + render() { + const title = brand.name + ' - Blank Page'; + const description = brand.desc; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Blank Page" desc="Some text description"> + Content + </PapperBlock> + </div> + ); + } +} + +export default BlankPage; diff --git a/front/odiparpack/app/containers/Pages/Calendar/index.js b/front/odiparpack/app/containers/Pages/Calendar/index.js new file mode 100644 index 0000000..fd5f412 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Calendar/index.js @@ -0,0 +1,137 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import events from 'ba-api/eventData'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import 'ba-styles/vendors/react-big-calendar/react-big-calendar.css'; +import { EventCalendar, DetailEvent, AddEvent, Notification } from 'ba-components'; +import { + fetchAction, + addAction, + discardAction, + submitAction, + deleteAction, + closeNotifAction +} from 'ba-actions/CalendarEventActions'; + +const styles = { + root: { + display: 'block' + } +}; + +class Calendar extends React.Component { + state = { + anchorEl: false, + event: null, + anchorPos: { top: 0, left: 0 } + }; + + componentDidMount() { + this.props.fetchEventsData(events); + } + + handleClick = event => { + setTimeout(() => { + const target = document.getElementsByClassName('rbc-selected')[0]; + const targetBounding = target.getBoundingClientRect(); + this.setState({ + event, + anchorEl: true, + anchorPos: { top: targetBounding.top, left: targetBounding.left } + }); + }, 200); + }; + + handleClose = () => { + this.setState({ + anchorEl: false, + }); + }; + + render() { + const title = brand.name + ' - Calendar'; + const description = brand.desc; + const { anchorEl, anchorPos, event } = this.state; + const { + classes, + eventData, + openFrm, + addEvent, + discardEvent, + submit, + remove, + closeNotif, + messageNotif + } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Notification close={() => closeNotif()} message={messageNotif} /> + <div className={classes.root}> + <EventCalendar events={eventData.toJS()} handleEventClick={this.handleClick} /> + <DetailEvent + event={event} + anchorEl={anchorEl} + anchorPos={anchorPos} + close={this.handleClose} + remove={remove} + /> + <AddEvent + openForm={openFrm} + addEvent={addEvent} + closeForm={discardEvent} + submit={submit} + /> + </div> + </div> + ); + } +} + +Calendar.propTypes = { + classes: PropTypes.object.isRequired, + eventData: PropTypes.object.isRequired, + fetchEventsData: PropTypes.func.isRequired, + addEvent: PropTypes.func.isRequired, + submit: PropTypes.func.isRequired, + discardEvent: PropTypes.func.isRequired, + remove: PropTypes.func.isRequired, + openFrm: PropTypes.bool.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const reducer = 'calendar'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + eventData: state.getIn([reducer, 'events']), + openFrm: state.getIn([reducer, 'openFrm']), + messageNotif: state.getIn([reducer, 'notifMsg']), +}); + +const constDispatchToProps = dispatch => ({ + fetchEventsData: bindActionCreators(fetchAction, dispatch), + submit: bindActionCreators(submitAction, dispatch), + remove: bindActionCreators(deleteAction, dispatch), + addEvent: () => dispatch(addAction), + discardEvent: () => dispatch(discardAction), + closeNotif: () => dispatch(closeNotifAction), +}); + +const CalendarMapped = connect( + mapStateToProps, + constDispatchToProps +)(Calendar); + +export default withStyles(styles)(CalendarMapped); diff --git a/front/odiparpack/app/containers/Pages/Chat/index.js b/front/odiparpack/app/containers/Pages/Chat/index.js new file mode 100644 index 0000000..99cf875 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Chat/index.js @@ -0,0 +1,123 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import contactData from 'ba-api/contactData'; +import chatData from 'ba-api/chatData'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { fetchAction, searchAction } from 'ba-actions/ContactActions'; +import { + fetchChatAction, + showChatAction, + sendAction, + hideDetailAction, + deleteAction +} from 'ba-actions/ChatActions'; +import { ContactList, ChatHeader, ChatRoom } from 'ba-components'; +import styles from 'ba-components/Contact/contact-jss'; + +class Chat extends React.Component { + componentDidMount() { + this.props.fetchChatData(chatData); + this.props.fetchContactData(contactData); + } + + render() { + const title = brand.name + ' - Chat App'; + const description = brand.desc; + const { + classes, + dataContact, + showDetail, + hideDetail, + keyword, + search, + dataChat, + chatSelected, + sendMessage, + remove, + showMobileDetail + } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.root}> + <ChatHeader + dataContact={dataContact} + chatSelected={chatSelected} + remove={remove} + showMobileDetail={showMobileDetail} + hideDetail={hideDetail} + /> + <ContactList + itemSelected={chatSelected} + dataContact={dataContact} + showDetail={showDetail} + search={search} + keyword={keyword} + /> + <ChatRoom + showMobileDetail={showMobileDetail} + dataChat={dataChat} + chatSelected={chatSelected} + dataContact={dataContact} + sendMessage={sendMessage} + /> + </div> + </div> + ); + } +} + +Chat.propTypes = { + classes: PropTypes.object.isRequired, + fetchContactData: PropTypes.func.isRequired, + fetchChatData: PropTypes.func.isRequired, + showDetail: PropTypes.func.isRequired, + hideDetail: PropTypes.func.isRequired, + sendMessage: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + remove: PropTypes.func.isRequired, + keyword: PropTypes.string.isRequired, + dataContact: PropTypes.object.isRequired, + dataChat: PropTypes.object.isRequired, + chatSelected: PropTypes.number.isRequired, + showMobileDetail: PropTypes.bool.isRequired, +}; + +const reducerContact = 'contact'; +const reducerChat = 'chat'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + dataContact: state.getIn([reducerContact, 'contactList']), + dataChat: state.getIn([reducerChat, 'activeChat']), + chatSelected: state.getIn([reducerChat, 'chatSelected']), + showMobileDetail: state.getIn([reducerChat, 'showMobileDetail']), + keyword: state.getIn([reducerContact, 'keywordValue']), +}); + +const dispatchToProps = dispatch => ({ + fetchContactData: bindActionCreators(fetchAction, dispatch), + hideDetail: () => dispatch(hideDetailAction), + fetchChatData: bindActionCreators(fetchChatAction, dispatch), + showDetail: bindActionCreators(showChatAction, dispatch), + search: bindActionCreators(searchAction, dispatch), + sendMessage: bindActionCreators(sendAction, dispatch), + remove: () => dispatch(deleteAction), +}); + +const ChatMapped = connect( + mapStateToProps, + dispatchToProps +)(Chat); + +export default withStyles(styles)(ChatMapped); diff --git a/front/odiparpack/app/containers/Pages/Contact/index.js b/front/odiparpack/app/containers/Pages/Contact/index.js new file mode 100644 index 0000000..8ed34de --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Contact/index.js @@ -0,0 +1,166 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import data from 'ba-api/contactData'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import dummy from 'ba-api/dummyContents'; +import { + fetchAction, + showDetailAction, + hideDetailAction, + submitAction, + editAction, + addAction, + closeAction, + removeAction, + addToFavoriteAction, + searchAction, + closeNotifAction +} from 'ba-actions/ContactActions'; +import { + ContactHeader, + ContactList, + ContactDetail, + AddContact, + Notification +} from 'ba-components'; +import styles from 'ba-components/Contact/contact-jss'; + +class Contact extends React.Component { + componentDidMount() { + this.props.fetchData(data); + } + + submitContact = (item, avatar) => { + const { submit } = this.props; + const avatarBase64 = typeof avatar === 'object' ? URL.createObjectURL(avatar) : avatar; + const avatarPreview = avatar !== null ? avatarBase64 : dummy.user.avatar; + submit(item, avatarPreview); + } + + render() { + const title = brand.name + ' - Contact'; + const description = brand.desc; + const { + classes, + dataContact, + itemSelected, + showDetail, + hideDetail, + avatarInit, + open, + showMobileDetail, + add, + edit, + close, + remove, + favorite, + keyword, + search, + closeNotif, + messageNotif + } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Notification close={() => closeNotif()} message={messageNotif} /> + <div className={classes.root}> + <ContactHeader + hideDetail={hideDetail} + addContact={add} + total={dataContact.size} + showMobileDetail={showMobileDetail} + /> + <ContactList + clippedRight + itemSelected={itemSelected} + dataContact={dataContact} + showDetail={showDetail} + search={search} + keyword={keyword} + /> + <ContactDetail + showMobileDetail={showMobileDetail} + dataContact={dataContact} + itemSelected={itemSelected} + edit={edit} + remove={remove} + favorite={favorite} + /> + </div> + <AddContact + addContact={add} + openForm={open} + closeForm={close} + submit={this.submitContact} + avatarInit={avatarInit} + /> + </div> + ); + } +} + +Contact.propTypes = { + classes: PropTypes.object.isRequired, + avatarInit: PropTypes.string.isRequired, + fetchData: PropTypes.func.isRequired, + showDetail: PropTypes.func.isRequired, + hideDetail: PropTypes.func.isRequired, + keyword: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + showMobileDetail: PropTypes.bool.isRequired, + add: PropTypes.func.isRequired, + close: PropTypes.func.isRequired, + submit: PropTypes.func.isRequired, + edit: PropTypes.func.isRequired, + remove: PropTypes.func.isRequired, + favorite: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + dataContact: PropTypes.object.isRequired, + itemSelected: PropTypes.number.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const reducer = 'contact'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + avatarInit: state.getIn([reducer, 'avatarInit']), + dataContact: state.getIn([reducer, 'contactList']), + itemSelected: state.getIn([reducer, 'selectedIndex']), + keyword: state.getIn([reducer, 'keywordValue']), + open: state.getIn([reducer, 'openFrm']), + showMobileDetail: state.getIn([reducer, 'showMobileDetail']), + messageNotif: state.getIn([reducer, 'notifMsg']), +}); + +const constDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch), + showDetail: bindActionCreators(showDetailAction, dispatch), + hideDetail: () => dispatch(hideDetailAction), + submit: bindActionCreators(submitAction, dispatch), + edit: bindActionCreators(editAction, dispatch), + add: () => dispatch(addAction), + close: () => dispatch(closeAction), + remove: bindActionCreators(removeAction, dispatch), + favorite: bindActionCreators(addToFavoriteAction, dispatch), + search: bindActionCreators(searchAction, dispatch), + closeNotif: () => dispatch(closeNotifAction), +}); + +const ContactMapped = connect( + mapStateToProps, + constDispatchToProps +)(Contact); + +export default withStyles(styles)(ContactMapped); diff --git a/front/odiparpack/app/containers/Pages/Ecommerce/index.js b/front/odiparpack/app/containers/Pages/Ecommerce/index.js new file mode 100644 index 0000000..8eb15a4 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Ecommerce/index.js @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import data from 'ba-api/productData'; +import { SearchProduct, ProductGallery, Notification } from 'ba-components'; +import { + fetchAction, + addAction, + removeAction, + checkoutAction, + detailAction, + searchAction, + closeNotifAction +} from 'ba-actions/EcommerceActions'; + +class Ecommerce extends React.Component { + componentDidMount() { + this.props.fetchData(data); + } + + render() { + const title = brand.name + ' - Ecommerce'; + const description = brand.desc; + const { + dataProduct, + handleAddToCart, + dataCart, + removeItem, + checkout, + showDetail, + productIndex, + totalItems, + totalPrice, + search, + keyword, + closeNotif, + messageNotif + } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Notification close={() => closeNotif()} message={messageNotif} /> + <SearchProduct + dataCart={dataCart} + removeItem={removeItem} + checkout={checkout} + totalItems={totalItems} + totalPrice={totalPrice} + search={search} + /> + <ProductGallery + dataProduct={dataProduct} + showDetail={showDetail} + handleAddToCart={handleAddToCart} + productIndex={productIndex} + keyword={keyword} + /> + </div> + ); + } +} + +Ecommerce.propTypes = { + fetchData: PropTypes.func.isRequired, + handleAddToCart: PropTypes.func.isRequired, + removeItem: PropTypes.func.isRequired, + showDetail: PropTypes.func.isRequired, + checkout: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + keyword: PropTypes.string.isRequired, + dataProduct: PropTypes.object.isRequired, + dataCart: PropTypes.object.isRequired, + productIndex: PropTypes.number.isRequired, + totalItems: PropTypes.number.isRequired, + totalPrice: PropTypes.number.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const reducer = 'ecommerce'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + keyword: state.getIn([reducer, 'keywordValue']), + dataProduct: state.getIn([reducer, 'productList']), + dataCart: state.getIn([reducer, 'cart']), + productIndex: state.getIn([reducer, 'productIndex']), + totalItems: state.getIn([reducer, 'totalItems']), + totalPrice: state.getIn([reducer, 'totalPrice']), + messageNotif: state.getIn([reducer, 'notifMsg']), +}); + +const constDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch), + search: bindActionCreators(searchAction, dispatch), + handleAddToCart: bindActionCreators(addAction, dispatch), + removeItem: bindActionCreators(removeAction, dispatch), + showDetail: bindActionCreators(detailAction, dispatch), + checkout: () => dispatch(checkoutAction), + closeNotif: () => dispatch(closeNotifAction), +}); + +const EcommerceMapped = connect( + mapStateToProps, + constDispatchToProps +)(Ecommerce); + +export default EcommerceMapped; diff --git a/front/odiparpack/app/containers/Pages/Email/index.js b/front/odiparpack/app/containers/Pages/Email/index.js new file mode 100644 index 0000000..93285cb --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Email/index.js @@ -0,0 +1,210 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import data from 'ba-api/emailData'; +import { + EmailHeader, + EmailList, + EmailSidebar, + ComposeEmail, + Notification +} from 'ba-components'; +import { + fetchMailAction, + openMailAction, + filterAction, + composeAction, + discardAction, + searchAction, + sendAction, + moveAction, + deleteAction, + toggleStaredAction, + closeNotifAction +} from 'ba-actions/EmailActions'; + +const styles = theme => ({ + root: { + flexGrow: 1, + minHeight: 600, + zIndex: 1, + background: theme.palette.grey[50], + overflow: 'hidden', + display: 'flex', + boxShadow: theme.shadows[2] + } +}); + +// validation functions +const email = value => ( + value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : '' +); + +class Email extends React.Component { + state = { + to: '', + subject: '', + validMail: '', + mobileOpen: false, + }; + + componentDidMount() { + this.props.fetchData(data); + } + + handleChange = (event, name) => { + if (name === 'to') { + this.setState({ validMail: email(event.target.value) }); + } + this.setState({ + [name]: event.target.value, + }); + }; + + handleReply = (mail) => { + this.props.compose(); + this.setState({ + to: mail.get('name'), + subject: 'Reply: ' + mail.get('subject'), + }); + } + + handleCompose = () => { + this.props.compose(); + this.setState({ + to: ' ', + subject: ' ', + }); + } + + handleDrawerToggle = () => { + this.setState(state => ({ mobileOpen: !state.mobileOpen })); + }; + + render() { + const { + classes, + emailData, + openMail, + goto, + currentPage, + openFrm, + discard, + search, + keyword, + sendEmail, + moveTo, + remove, + toggleStar, + closeNotif, + messageNotif + } = this.props; + const { + to, + subject, + validMail, + mobileOpen + } = this.state; + const title = brand.name + ' - Email'; + const description = brand.desc; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Notification close={() => closeNotif()} message={messageNotif} /> + <EmailHeader search={search} handleDrawerToggle={this.handleDrawerToggle} /> + <EmailSidebar + compose={this.handleCompose} + goto={goto} + selected={currentPage} + handleDrawerToggle={this.handleDrawerToggle} + mobileOpen={mobileOpen} + /> + <EmailList + emailData={emailData} + openMail={openMail} + filterPage={currentPage} + keyword={keyword} + moveTo={moveTo} + remove={remove} + toggleStar={toggleStar} + reply={this.handleReply} + /> + <ComposeEmail + to={to} + subject={subject} + compose={this.handleCompose} + validMail={validMail} + sendEmail={sendEmail} + inputChange={this.handleChange} + open={openFrm} + closeForm={discard} + /> + </div> + ); + } +} + +Email.propTypes = { + classes: PropTypes.object.isRequired, + emailData: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, + openMail: PropTypes.func.isRequired, + goto: PropTypes.func.isRequired, + compose: PropTypes.func.isRequired, + discard: PropTypes.func.isRequired, + search: PropTypes.func.isRequired, + sendEmail: PropTypes.func.isRequired, + moveTo: PropTypes.func.isRequired, + remove: PropTypes.func.isRequired, + toggleStar: PropTypes.func.isRequired, + keyword: PropTypes.string.isRequired, + currentPage: PropTypes.string.isRequired, + openFrm: PropTypes.bool.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const reducer = 'email'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + keyword: state.getIn([reducer, 'keywordValue']), + initValues: state.getIn([reducer, 'formValues']), + emailData: state.getIn([reducer, 'inbox']), + currentPage: state.getIn([reducer, 'currentPage']), + openFrm: state.getIn([reducer, 'openFrm']), + messageNotif: state.getIn([reducer, 'notifMsg']), +}); + +const constDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchMailAction, dispatch), + openMail: bindActionCreators(openMailAction, dispatch), + goto: bindActionCreators(filterAction, dispatch), + search: bindActionCreators(searchAction, dispatch), + moveTo: bindActionCreators(moveAction, dispatch), + remove: bindActionCreators(deleteAction, dispatch), + toggleStar: bindActionCreators(toggleStaredAction, dispatch), + compose: () => dispatch(composeAction), + discard: () => dispatch(discardAction), + sendEmail: bindActionCreators(sendAction, dispatch), + closeNotif: () => dispatch(closeNotifAction), +}); + +const EmailMapped = connect( + mapStateToProps, + constDispatchToProps +)(Email); + +export default withStyles(styles)(EmailMapped); diff --git a/front/odiparpack/app/containers/Pages/Error/index.js b/front/odiparpack/app/containers/Pages/Error/index.js new file mode 100644 index 0000000..b408b53 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Error/index.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { Route } from 'react-router-dom'; +import { ErrorWrap } from 'ba-components'; + +const title = brand.name + ' - Aplication Error'; +const description = brand.desc; + +const Error = () => ( + <Route + render={({ staticContext }) => { + if (staticContext) { + staticContext.status = 404; // eslint-disable-line + } + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <ErrorWrap title="500" desc="Sorry, server goes wrong" /> + </div> + ); + }} + /> +); + +export default Error; diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js b/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js new file mode 100644 index 0000000..2568943 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js @@ -0,0 +1,115 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Field, reduxForm } from 'redux-form/immutable'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { PapperBlock } from 'ba-components'; +import { initAction, clearAction } from 'ba-actions/ReduxFormActions'; +import { TextFieldRedux } from 'ba-components/Forms/ReduxFormMUI'; +import { Button } from '@material-ui/core'; +import styles from './helpSupport-jss'; + +// validation functions +const required = value => (value == null ? 'Required' : undefined); +const email = value => ( + value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : undefined +); + +class ContactForm extends Component { + render() { + const trueBool = true; + const { + classes, + handleSubmit, + pristine, + reset, + submitting, + } = this.props; + return ( + <div className={classes.frmWrap}> + <PapperBlock title="Contact Us" desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."> + <form onSubmit={handleSubmit}> + <div> + <Field + name="name" + component={TextFieldRedux} + placeholder="Name" + label="Name" + validate={required} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <Field + name="email" + component={TextFieldRedux} + placeholder="Email Field" + label="Email" + required + validate={[required, email]} + className={classes.field} + /> + </div> + <div className={classes.field}> + <Field + name="message" + className={classes.field} + component={TextFieldRedux} + validate={required} + placeholder="Message" + label="Message" + multiline={trueBool} + rows={4} + /> + </div> + <div> + <Button variant="contained" color="secondary" type="submit" disabled={submitting}> + Submit + </Button> + <Button + type="button" + disabled={pristine || submitting} + onClick={reset} + > + Reset + </Button> + </div> + </form> + </PapperBlock> + </div> + ); + } +} + +ContactForm.propTypes = { + classes: PropTypes.object.isRequired, + handleSubmit: PropTypes.func.isRequired, + reset: PropTypes.func.isRequired, + pristine: PropTypes.bool.isRequired, + submitting: PropTypes.bool.isRequired, +}; + +const mapDispatchToProps = dispatch => ({ + init: bindActionCreators(initAction, dispatch), + clear: () => dispatch(clearAction), +}); + +const ContactFormMapped = reduxForm({ + form: 'immutableExample', +})(ContactForm); + +const reducer = 'initval'; +const FormInit = connect( + state => ({ + force: state, + initialValues: state.getIn([reducer, 'formValues']) + }), + mapDispatchToProps, +)(ContactFormMapped); + +export default withStyles(styles)(FormInit); diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js b/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js new file mode 100644 index 0000000..bb8a6ae --- /dev/null +++ b/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js @@ -0,0 +1,141 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'; +import styles from './helpSupport-jss'; + + +class Qna extends React.Component { + state = { + expanded: null, + }; + + handleChange = panel => (event, expanded) => { + this.setState({ + expanded: expanded ? panel : false, + }); + }; + + render() { + const { classes } = this.props; + const { expanded } = this.state; + + return ( + <div> + <ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Pellentesque ac bibendum tortor?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget + maximus est, id dignissim quam. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel2'} onChange={this.handleChange('panel2')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Vivamus sit amet interdum elit?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar + diam eros in elit. Pellentesque convallis laoreet laoreet. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel3'} onChange={this.handleChange('panel3')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Vestibulum nec mi suscipit?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel4'} onChange={this.handleChange('panel4')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Cras convallis lacus orci?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel5'} onChange={this.handleChange('panel5')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Quisque ut metus sit amet?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + enean sit amet magna vel magna fringilla fermentum. Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel6'} onChange={this.handleChange('panel6')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Nulla vehicula leo ut augue tincidunt?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel7'} onChange={this.handleChange('panel7')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Vivamus sit amet interdum elit?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Donec dignissim, odio ac imperdiet luctus, ante nisl accumsan justo, et venenatis ante metus pellentesque sem. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel8'} onChange={this.handleChange('panel8')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Maecenas nisl libero, tincidunt id odio id?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Ut sed eros finibus, placerat orci id, dapibus mauris. Vestibulum consequat hendrerit lacus. In id nisi id neque venenatis molestie. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel9'} onChange={this.handleChange('panel9')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Vestibulum nec mi suscipit?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel10'} onChange={this.handleChange('panel10')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Cras convallis lacus orci?</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + </div> + ); + } +} + +Qna.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Qna); diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js b/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js new file mode 100644 index 0000000..5c954cb --- /dev/null +++ b/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js @@ -0,0 +1,49 @@ +const styles = theme => ({ + title: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + color: theme.palette.common.white, + }, + iconTitle: { + position: 'relative', + top: theme.spacing(0.5), + marginRight: theme.spacing(0.5), + }, + heading: { + fontSize: theme.typography.pxToRem(15), + flexBasis: '100%', + fontWeight: 700, + flexShrink: 0, + }, + secondaryHeading: { + fontSize: theme.typography.pxToRem(15), + color: theme.palette.text.secondary, + }, + root: { + width: '100%', + flexGrow: 1, + padding: 30 + }, + field: { + width: '100%', + marginBottom: 20 + }, + fieldBasic: { + width: '100%', + marginBottom: 20, + marginTop: 10 + }, + inlineWrap: { + display: 'flex', + flexDirection: 'row' + }, + buttonInit: { + margin: theme.spacing(4), + textAlign: 'center' + }, + frmWrap: { + marginTop: theme.spacing(1) * -3 + } +}); + +export default styles; diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/index.js b/front/odiparpack/app/containers/Pages/HelpSupport/index.js new file mode 100644 index 0000000..68df97b --- /dev/null +++ b/front/odiparpack/app/containers/Pages/HelpSupport/index.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import LiveHelp from '@material-ui/icons/LiveHelp'; +import { isWidthUp } from '@material-ui/core/withWidth'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, withWidth, Grid } from '@material-ui/core'; +import styles from './helpSupport-jss'; +import Qna from './Qna'; +import ContactForm from './ContactForm'; + + +class Settings extends React.Component { + showResult(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + window.alert(`You submitted:\n\n${this.state.valueForm}`); + }, 500); // simulate server latency + } + + render() { + const title = brand.name; + const description = brand.desc; + const { classes, width } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Typography variant="h5" className={classes.title}> + <LiveHelp className={classes.iconTitle} /> + Help & Support + </Typography> + <Grid container spacing={2} direction={isWidthUp('md', width) ? 'row' : 'column-reverse'}> + <Grid item md={6} xs={12}> + <Qna /> + </Grid> + <Grid item md={6} xs={12}> + <ContactForm onSubmit={(values) => this.showResult(values)} /> + </Grid> + </Grid> + </div> + ); + } +} + +Settings.propTypes = { + classes: PropTypes.object.isRequired, + width: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(withWidth()(Settings)); diff --git a/front/odiparpack/app/containers/Pages/Maintenance/index.js b/front/odiparpack/app/containers/Pages/Maintenance/index.js new file mode 100644 index 0000000..8771e51 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Maintenance/index.js @@ -0,0 +1,88 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Build from '@material-ui/icons/Build'; +import Settings from '@material-ui/icons/SettingsApplications'; +import Warning from '@material-ui/icons/Warning'; +import { Typography, Avatar, Hidden, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%' + }, + paper: { + margin: 'auto', + padding: 40, + width: '90%', + [theme.breakpoints.up('sm')]: { + width: 600, + height: 300, + }, + textAlign: 'center' + }, + artwork: { + display: 'flex', + justifyContent: 'center', + marginBottom: 30 + }, + icon: { + margin: '10px 20px', + background: theme.palette.secondary.main, + color: theme.palette.common.white, + width: 100, + height: 100, + '& svg': { + fontSize: 64, + }, + }, +}); + +class Maintenance extends React.Component { + render() { + const title = brand.name + ' - Maintenance'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.container}> + <Paper className={classes.paper}> + <div className={classes.artwork}> + <Avatar className={classes.icon}><Build /></Avatar> + <Hidden xsDown> + <Avatar className={classes.icon}><Warning /></Avatar> + </Hidden> + <Hidden xsDown> + <Avatar className={classes.icon}><Settings /></Avatar> + </Hidden> + </div> + <Typography variant="h4" gutterBottom>Website under maintenance</Typography> + <Typography variant="subtitle1"> +Our website is under maintenance. We + {"'"} +ll be back shortly + </Typography> + </Paper> + </div> + </div> + ); + } +} + +Maintenance.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Maintenance); diff --git a/front/odiparpack/app/containers/Pages/Photos/index.js b/front/odiparpack/app/containers/Pages/Photos/index.js new file mode 100644 index 0000000..7068ed5 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Photos/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import imgData from 'ba-api/imgDataMasonry'; +import { PhotoGallery } from 'ba-components'; + +class Photos extends React.Component { + render() { + const title = brand.name + ' - Photo Gallery'; + const description = brand.desc; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PhotoGallery imgData={imgData} /> + </div> + ); + } +} + +export default Photos; diff --git a/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js new file mode 100644 index 0000000..25bad64 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js @@ -0,0 +1,203 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import classNames from 'classnames'; +import SettingsIcon from '@material-ui/icons/SettingsApplications'; +import CloseIcon from '@material-ui/icons/Close'; +import { withStyles } from '@material-ui/core/styles'; +import { + AppBar, + Grid, + Dialog, + Toolbar, + ListItemText, + ListItem, + List, + ListItemSecondaryAction, + Divider, + IconButton, + Typography, + Button, + Switch, + Slide, + InputLabel, + MenuItem, + FormControl, + Select, + Checkbox, + TextField, +} from '@material-ui/core'; +import styles from './settings-jss'; + + +const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line + return <Slide direction="up" ref={ref} {...props} />; +}); + +class DetailSettings extends React.Component { + state = { + checked: ['switch', 'check2'], + option: '', + }; + + handleToggle = value => () => { + const { checked } = this.state; + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + + this.setState({ + checked: newChecked, + }); + }; + + handleChange = name => event => { + this.setState({ + [name]: event.target.value, + }); + }; + + handleChangeSelection = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + render() { + const { classes, open, handleClose } = this.props; + return ( + <Dialog + fullScreen + open={open} + onClose={handleClose} + TransitionComponent={Transition} + > + <AppBar className={classes.appBar}> + <Toolbar> + <IconButton color="inherit" onClick={handleClose} aria-label="Close"> + <CloseIcon /> + </IconButton> + <Typography variant="h6" color="inherit" className={classes.flex}> + Setting + </Typography> + <Button color="inherit" onClick={handleClose}> + done + </Button> + </Toolbar> + </AppBar> + <Grid container justify="center"> + <Grid item md={8} xs={12}> + <List> + <ListItem> + <ListItemText primary="Switch input" secondary="Odio ac imperdiet luctus" /> + <ListItemSecondaryAction> + <Switch + onChange={this.handleToggle('switch')} + checked={this.state.checked.indexOf('switch') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Another switch input" secondary="Lorem Ipsum" /> + <ListItemSecondaryAction> + <Switch + onChange={this.handleToggle('switch2')} + checked={this.state.checked.indexOf('switch2') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Checkbox input" secondary="Dolor sit amet" /> + <ListItemSecondaryAction> + <Checkbox + onChange={this.handleToggle('check')} + checked={this.state.checked.indexOf('check') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Another checkbox input" secondary="Donec dignissim" /> + <ListItemSecondaryAction> + <Checkbox + onChange={this.handleToggle('check2')} + checked={this.state.checked.indexOf('check2') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Selection field" secondary="Nam posuere accumsan porta" /> + <ListItemSecondaryAction> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple">Option</InputLabel> + <Select + value={this.state.option} + onChange={this.handleChangeSelection} + inputProps={{ + name: 'option', + id: 'opt-simple', + }} + > + <MenuItem value=""> + <em>None</em> + </MenuItem> + <MenuItem value={10}>Option Ten</MenuItem> + <MenuItem value={20}>Option Twenty</MenuItem> + <MenuItem value={30}>Option Thirty</MenuItem> + </Select> + </FormControl> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" /> + <ListItemSecondaryAction> + <TextField + id="name" + label="Name" + className={classes.textField} + value={this.state.name} + onChange={this.handleChange('name')} + margin="normal" + /> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" /> + <ListItemSecondaryAction> + <Button variant="outlined" size="small" color="secondary" className={classes.button}> + Action Button + </Button> + </ListItemSecondaryAction> + </ListItem> + <Divider /> + <ListItem> + <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" /> + <ListItemSecondaryAction> + <Button variant="outlined" size="small" color="secondary"> + <SettingsIcon className={classNames(classes.leftIcon, classes.iconSmall)} /> + Action Button Icon + </Button> + </ListItemSecondaryAction> + </ListItem> + </List> + </Grid> + </Grid> + </Dialog> + ); + } +} + +DetailSettings.propTypes = { + classes: PropTypes.object.isRequired, + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, +}; + +export default withStyles(styles)(DetailSettings); diff --git a/front/odiparpack/app/containers/Pages/Settings/index.js b/front/odiparpack/app/containers/Pages/Settings/index.js new file mode 100644 index 0000000..2ab94d2 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Settings/index.js @@ -0,0 +1,117 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import SearchIcon from '@material-ui/icons/Search'; +import SettingsIcon from '@material-ui/icons/SettingsApplications'; +import { withStyles } from '@material-ui/core/styles'; +import settingList from 'ba-api/settingList'; +import { AppBar, Grid, Toolbar, Typography, Button, Icon } from '@material-ui/core'; +import DetailSettings from './DetailSettings'; +import styles from './settings-jss'; + + +class Settings extends React.Component { + state = { + open: false, + checked: ['switch', 'check2'], + keyword: '' + }; + + handleToggle = value => () => { + const { checked } = this.state; + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + + this.setState({ + checked: newChecked, + }); + }; + + handleChange = name => event => { + this.setState({ + [name]: event.target.value, + }); + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleSearch = event => { + this.setState({ keyword: event.target.value.toLowerCase() }); + } + + render() { + const title = brand.name; + const description = brand.desc; + const { classes } = this.props; + const { keyword } = this.state; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Typography variant="h5" className={classes.title}> + <SettingsIcon className={classes.iconTitle} /> + Appication Settings + </Typography> + <AppBar position="static" color="inherit" className={classes.searchSettings}> + <Toolbar> + <div className={classes.flex}> + <div className={classes.wrapper}> + <div className={classes.search}> + <SearchIcon /> + </div> + <input className={classes.input} placeholder="Find a setting" onChange={(event) => this.handleSearch(event)} /> + </div> + </div> + </Toolbar> + </AppBar> + <section className={classes.settingList}> + <Grid container spacing={2}> + {settingList.map(menu => { + const rawKey = menu.name + menu.caption; + if (rawKey.toLowerCase().indexOf(keyword) === -1) { + return false; + } + return ( + <Grid item md={3} sm={4} xs={12} key={menu.name}> + <Button variant="outlined" onClick={this.handleClickOpen} color="secondary" className={classes.button}> + <Icon className={classes.icon}>{menu.icon}</Icon> + {menu.name} + <Typography variant="caption" noWrap className={classes.info}> + {menu.caption} + </Typography> + </Button> + </Grid> + ); + })} + </Grid> + </section> + <DetailSettings open={this.state.open} handleClose={this.handleClose} /> + </div> + ); + } +} + +Settings.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Settings); diff --git a/front/odiparpack/app/containers/Pages/Settings/settings-jss.js b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js new file mode 100644 index 0000000..5424d4e --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js @@ -0,0 +1,87 @@ +const styles = theme => ({ + appBar: { + position: 'relative', + }, + flex: { + flex: 1, + }, + title: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + color: theme.palette.common.white, + }, + searchSettings: { + marginBottom: theme.spacing(4), + }, + wrapper: { + fontFamily: theme.typography.fontFamily, + position: 'relative', + marginRight: theme.spacing(2), + marginLeft: theme.spacing(1), + borderRadius: 2, + display: 'block', + }, + search: { + width: 'auto', + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + input: { + font: 'inherit', + padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(4)}px`, + border: 0, + display: 'block', + verticalAlign: 'middle', + whiteSpace: 'normal', + background: 'none', + margin: 0, // Reset for Safari + color: 'inherit', + width: '100%', + '&:focus': { + outline: 0, + }, + }, + iconTitle: { + position: 'relative', + marginRight: theme.spacing(0.5), + }, + button: { + display: 'block', + width: '100%', + background: theme.palette.grey[50], + '&:hover': { + background: theme.palette.secondary.light + }, + '& $icon': { + margin: '0 auto', + display: 'block', + fontSize: 64 + }, + '& $info': { + display: 'block', + textTransform: 'none', + color: theme.palette.grey[500] + } + }, + info: {}, + icon: {}, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, + iconSmall: { + fontSize: 20, + }, + leftIcon: { + marginRight: theme.spacing(1), + }, +}); + +export default styles; diff --git a/front/odiparpack/app/containers/Pages/SocialMedia/index.js b/front/odiparpack/app/containers/Pages/SocialMedia/index.js new file mode 100644 index 0000000..3a5ae2c --- /dev/null +++ b/front/odiparpack/app/containers/Pages/SocialMedia/index.js @@ -0,0 +1,110 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import data from 'ba-api/timelineData'; +import { + fetchAction, + postAction, + toggleLikeAction, + fetchCommentAction, + postCommentAction, + closeNotifAction +} from 'ba-actions/SocmedActions'; +import { Timeline, WritePost, SideSection, Notification } from 'ba-components'; +import { Grid } from '@material-ui/core'; + +class SocialMedia extends React.Component { + componentDidMount() { + this.props.fetchData(data); + } + + render() { + const title = brand.name + ' - Social Media'; + const description = brand.desc; + const { + dataProps, + submitPost, + submitLike, + submitComment, + fetchComment, + commentIndex, + closeNotif, + messageNotif, + } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Notification close={() => closeNotif()} message={messageNotif} /> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={3} + > + <Grid item md={8} xs={12}> + <div> + <WritePost submitPost={submitPost} /> + <Timeline + dataTimeline={dataProps} + onlike={submitLike} + submitComment={submitComment} + fetchComment={fetchComment} + commentIndex={commentIndex} + /> + </div> + </Grid> + <Grid item md={4} xs={12}> + <SideSection /> + </Grid> + </Grid> + </div> + ); + } +} + +SocialMedia.propTypes = { + fetchData: PropTypes.func.isRequired, + submitPost: PropTypes.func.isRequired, + submitLike: PropTypes.func.isRequired, + submitComment: PropTypes.func.isRequired, + dataProps: PropTypes.object.isRequired, + fetchComment: PropTypes.func.isRequired, + commentIndex: PropTypes.number.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const reducer = 'socmed'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + dataProps: state.getIn([reducer, 'dataTimeline']), + commentIndex: state.getIn([reducer, 'commentIndex']), + messageNotif: state.getIn([reducer, 'notifMsg']), +}); + +const constDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch), + submitPost: bindActionCreators(postAction, dispatch), + submitComment: bindActionCreators(postCommentAction, dispatch), + submitLike: bindActionCreators(toggleLikeAction, dispatch), + fetchComment: bindActionCreators(fetchCommentAction, dispatch), + closeNotif: () => dispatch(closeNotifAction), +}); + +const SocialMediaMapped = connect( + mapStateToProps, + constDispatchToProps +)(SocialMedia); + +export default SocialMediaMapped; diff --git a/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js b/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js new file mode 100644 index 0000000..9cba8fb --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import brand from 'ba-api/brand'; +import logo from 'ba-images/logo.svg'; +import styles from 'ba-containers/Templates/appStyles-jss'; +import { Hidden } from '@material-ui/core'; +import Login from '../Users/Login'; + +class LoginDedicated extends React.Component { + render() { + const { classes } = this.props; + return ( + <div className={classes.appFrameOuter}> + <main className={classes.outerContent} id="mainContent"> + <Hidden mdUp> + <div className={classes.brand}> + <img src={logo} alt={brand.name} /> + <h3>{brand.name}</h3> + </div> + </Hidden> + <Login /> + </main> + </div> + ); + } +} + +LoginDedicated.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default (withStyles(styles)(LoginDedicated)); diff --git a/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js b/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js new file mode 100644 index 0000000..3d78b32 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import styles from 'ba-containers/Templates/appStyles-jss'; +import Error from './../Error'; + +class NotFoundDedicated extends React.Component { + render() { + const { classes } = this.props; + return ( + <div className={classes.appFrameOuter}> + <main className={classes.outerContent} id="mainContent"> + <Error /> + </main> + </div> + ); + } +} + +NotFoundDedicated.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default (withStyles(styles)(NotFoundDedicated)); diff --git a/front/odiparpack/app/containers/Pages/UserProfile/index.js b/front/odiparpack/app/containers/Pages/UserProfile/index.js new file mode 100644 index 0000000..2065f68 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/UserProfile/index.js @@ -0,0 +1,131 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import dummy from 'ba-api/dummyContents'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import SupervisorAccount from '@material-ui/icons/SupervisorAccount'; +import Favorite from '@material-ui/icons/Favorite'; +import PhotoLibrary from '@material-ui/icons/PhotoLibrary'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import data from 'ba-api/timelineData'; +import { fetchAction } from 'ba-actions/SocmedActions'; +import { + Cover, + About, + Connection, + Favorites, + Albums +} from 'ba-components'; + +import { AppBar, Tabs, Tab, Hidden } from '@material-ui/core'; + +function TabContainer(props) { + return ( + <div style={{ paddingTop: 8 * 3 }}> + {props.children} + </div> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +class UserProfile extends React.Component { + state = { + value: 0, + }; + + componentDidMount() { + this.props.fetchData(data); + } + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const title = brand.name + ' - Profile'; + const description = brand.desc; + const { dataProps } = this.props; + const { value } = this.state; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Cover + coverImg="/images/material_bg.svg" + avatar={dummy.user.avatar} + name={dummy.user.name} + desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit." + /> + <AppBar position="static" color="default"> + <Hidden mdUp> + <Tabs + value={this.state.value} + onChange={this.handleChange} + variant="fullWidth" + centered + indicatorColor="primary" + textColor="primary" + > + <Tab icon={<AccountCircle />} /> + <Tab icon={<SupervisorAccount />} /> + <Tab icon={<Favorite />} /> + <Tab icon={<PhotoLibrary />} /> + </Tabs> + </Hidden> + <Hidden smDown> + <Tabs + value={this.state.value} + onChange={this.handleChange} + variant="fullWidth" + centered + indicatorColor="primary" + textColor="primary" + > + <Tab icon={<AccountCircle />} label="ABOUT" /> + <Tab icon={<SupervisorAccount />} label="20 CONNECTIONS" /> + <Tab icon={<Favorite />} label="18 FAVORITES" /> + <Tab icon={<PhotoLibrary />} label="4 ALBUMS" /> + </Tabs> + </Hidden> + </AppBar> + {value === 0 && <TabContainer><About data={dataProps} /></TabContainer>} + {value === 1 && <TabContainer><Connection /></TabContainer>} + {value === 2 && <TabContainer><Favorites /></TabContainer>} + {value === 3 && <TabContainer><Albums /></TabContainer>} + </div> + ); + } +} + +UserProfile.propTypes = { + dataProps: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, +}; + +const reducer = 'socmed'; +const mapStateToProps = state => ({ + force: state, // force state from reducer + dataProps: state.getIn([reducer, 'dataTimeline']) +}); + +const constDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch) +}); + +const UserProfileMapped = connect( + mapStateToProps, + constDispatchToProps +)(UserProfile); + +export default UserProfileMapped; diff --git a/front/odiparpack/app/containers/Pages/Users/LockScreen.js b/front/odiparpack/app/containers/Pages/Users/LockScreen.js new file mode 100644 index 0000000..2752ae6 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Users/LockScreen.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LockForm } from 'ba-components'; +import styles from 'ba-components/Forms/user-jss'; +import { Grid } from '@material-ui/core'; + +class ResetPassword extends React.Component { + state = { + valueForm: [] + } + + submitForm(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + console.log(`You submitted:\n\n${this.state.valueForm}`); + window.location.href = '/app'; + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Lock Screen'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.container}> + <Grid container spacing={3} alignItems="center" direction="row" justify="center"> + <Grid item md={4} xs={11}> + {/* ----------------------------------------------------------------------*/} + {/* Load Login Form */} + <LockForm onSubmit={(values) => this.submitForm(values)} /> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +ResetPassword.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ResetPassword); diff --git a/front/odiparpack/app/containers/Pages/Users/Login.js b/front/odiparpack/app/containers/Pages/Users/Login.js new file mode 100644 index 0000000..300f7b4 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Users/Login.js @@ -0,0 +1,85 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import ArrowForward from '@material-ui/icons/ArrowForward'; +import logo from 'ba-images/logo.svg'; +import { LoginForm } from 'ba-components'; +import styles from 'ba-components/Forms/user-jss'; + +import { Grid, Hidden, Typography } from '@material-ui/core'; + +class Login extends React.Component { + state = { + valueForm: [] + } + + submitForm(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + console.log(`You submitted:\n\n${this.state.valueForm}`); + window.location.href = '/app'; + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Login'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.container}> + <Grid container spacing={3} alignItems="center" direction="row" justify="center"> + <Grid item container justify="center" spacing={0} className={classes.loginWrap}> + <Hidden smDown> + <Grid item md={6} className={classes.welcomeWrap}> + {/* Welcome Login */} + <div className={classes.welcome}> + <div className={classes.welcomeContent}> + <div className={classes.brand}> + <img src={logo} alt={brand.name} /> + <h3>{brand.name}</h3> + </div> + <Typography variant="h3"> + <span className={Type.light}>Hello there,</span> + </Typography> + <Typography variant="h6" className={classes.brandText}> + <span className={Type.regular}> + welcome to + {' '} + {brand.name} + </span> + </Typography> + </div> + <ArrowForward className={classes.decoBottom} /> + </div> + </Grid> + </Hidden> + <Grid item md={6} sm={8} xs={11}> + {/* ----------------------------------------------------------------------*/} + {/* Load Login Form */} + <LoginForm onSubmit={(values) => this.submitForm(values)} /> + </Grid> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +Login.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Login); diff --git a/front/odiparpack/app/containers/Pages/Users/Register.js b/front/odiparpack/app/containers/Pages/Users/Register.js new file mode 100644 index 0000000..c139068 --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Users/Register.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import ArrowForward from '@material-ui/icons/ArrowForward'; +import brand from 'ba-api/brand'; +import logo from 'ba-images/logo.svg'; +import { RegisterForm } from 'ba-components'; +import styles from 'ba-components/Forms/user-jss'; + +import { Grid, Hidden, Typography } from '@material-ui/core'; + +class Login extends React.Component { + state = { + valueForm: [] + } + + submitForm(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + console.log(`You submitted:\n\n${this.state.valueForm}`); + window.location.href = '/app'; + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Register'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.container}> + <Grid container spacing={3} alignItems="center" direction="row" justify="center"> + <Grid item container justify="center" spacing={0} className={classes.loginWrap}> + <Hidden smDown> + <Grid item md={6} className={classes.welcomeWrap}> + {/* Welcome Login */} + <div className={classes.welcome}> + <div className={classes.welcomeContent}> + <div className={classes.brand}> + <img src={logo} alt={brand.name} /> + <h3>{brand.name}</h3> + </div> + <Typography variant="h4"> + <span className={Type.light}>Nice to meet You :)</span> + </Typography> + </div> + <ArrowForward className={classes.decoBottom} /> + </div> + </Grid> + </Hidden> + <Grid item md={6} sm={8} xs={11}> + {/* ----------------------------------------------------------------------*/} + {/* Load Register Form */} + <RegisterForm onSubmit={(values) => this.submitForm(values)} /> + </Grid> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +Login.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Login); diff --git a/front/odiparpack/app/containers/Pages/Users/ResetPassword.js b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js new file mode 100644 index 0000000..e80253d --- /dev/null +++ b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { ResetForm } from 'ba-components'; +import styles from 'ba-components/Forms/user-jss'; +import { Grid } from '@material-ui/core'; + +class ResetPassword extends React.Component { + state = { + valueForm: [] + } + + submitForm(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + console.log(`You submitted:\n\n${this.state.valueForm}`); + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Reset Password'; + const description = brand.desc; + const { classes } = this.props; + return ( + <div className={classes.root}> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.container}> + <Grid container spacing={3} alignItems="center" direction="row" justify="center"> + <Grid item md={6} xs={11}> + {/* ----------------------------------------------------------------------*/} + {/* Load Login Form */} + <ResetForm onSubmit={(values) => this.submitForm(values)} /> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +ResetPassword.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ResetPassword); diff --git a/front/odiparpack/app/containers/Parent/index.js b/front/odiparpack/app/containers/Parent/index.js new file mode 100644 index 0000000..50067c3 --- /dev/null +++ b/front/odiparpack/app/containers/Parent/index.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { Link } from 'react-router-dom'; +import MenuContent from 'ba-api/menu'; +import { PapperBlock } from 'ba-components'; +import { Button } from '@material-ui/core'; + +const styles = { + link: { + display: 'block', + textTransform: 'capitalize' + } +}; + +function sortByKey(array, key) { + return array.sort((a, b) => { + const x = a[key]; const y = b[key]; + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); + }); +} + +class Parent extends React.Component { + render() { + const title = brand.name; + const description = brand.desc; + const { classes } = this.props; + // Get Path Location + let parts = this.props.history.location.pathname.split('/'); + const place = parts[parts.length - 1]; + parts = parts.slice(1, parts.length - 1); + const menuItems = MenuContent + .find(obj => ( + obj.key === place + )); + const getMenus = menuArray => menuArray.map((item, index) => ( + <Button + key={index.toString()} + color="primary" + component={Link} + className={classes.link} + to={item.link} + > + {item.name} + </Button> + )); + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title={place} desc=""> + {menuItems !== undefined && getMenus(sortByKey(menuItems.child, 'key'))} + </PapperBlock> + </div> + ); + } +} + +Parent.propTypes = { + classes: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Parent); diff --git a/front/odiparpack/app/containers/Tables/AdvancedTable.js b/front/odiparpack/app/containers/Tables/AdvancedTable.js new file mode 100644 index 0000000..4d1b60a --- /dev/null +++ b/front/odiparpack/app/containers/Tables/AdvancedTable.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { AdvTableDemo, AdvFilter } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class AdvancedTable extends Component { + render() { + const title = brand.name + ' - Table'; + const description = brand.desc; + const docSrc = 'containers/Tables/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Basic Data Table" desc="This is default example from Material UI. It Demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar. It uses the TableSortLabel component to help style column headings."> + <div> + <AdvTableDemo /> + <SourceReader componentName={docSrc + 'AdvTableDemo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Advanced Data Table" desc="It uses npm mui-datatables. It's easy to use, you just describe columns and data collection. After that it will magically build features such as filtering, viewing / hiding columns, exporting to CSV downloads, printing, and more."> + <div> + <AdvFilter /> + <SourceReader componentName={docSrc + 'AdvFilter.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default withStyles(styles)(AdvancedTable); diff --git a/front/odiparpack/app/containers/Tables/BasicTable.js b/front/odiparpack/app/containers/Tables/BasicTable.js new file mode 100644 index 0000000..a6f81e1 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/BasicTable.js @@ -0,0 +1,110 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Markdown from 'react-markdown'; +import codeStyle from 'ba-styles/Code.scss'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + StrippedTable, + HoverTable, + BorderedTable, + TrackingTable, + StatusLabel, + StatusColorRow, + EmptyTable +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class BasicTable extends Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - Table'; + const description = brand.desc; + const docSrc = 'containers/Tables/demos/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Stripped Table" desc="They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another"> + <div> + <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.stripped ```" /> + <StrippedTable /> + <SourceReader componentName={docSrc + 'StrippedTable.js'} /> + </div> + </PapperBlock> + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <PapperBlock title="Hover Table" desc="Hover tables is addition option that allows you to see what row you selected"> + <div> + <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.hover ```" /> + <HoverTable /> + <SourceReader componentName={docSrc + 'HoverTable.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Bordered Table" desc="Old is gold, here is old fashion bordered table, we tweaked it a bit so that the headings looks more prominent."> + <div> + <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.bordered ```" /> + <BorderedTable /> + <SourceReader componentName={docSrc + 'BorderedTable.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <PapperBlock title="Status Table with Label" desc=""> + <div> + <StatusLabel /> + <SourceReader componentName={docSrc + 'StatusLabel.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Coloured Row" desc=""> + <div> + <StatusColorRow /> + <SourceReader componentName={docSrc + 'StatusColorRow.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + <div className={classes.root}> + <TrackingTable /> + <SourceReader componentName={docSrc + 'TrackingTable.js'} /> + </div> + <PapperBlock title="Empty Table" desc=""> + <div> + <EmptyTable /> + <SourceReader componentName={docSrc + 'EmptyTable.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +BasicTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BasicTable); diff --git a/front/odiparpack/app/containers/Tables/CrudTable.js b/front/odiparpack/app/containers/Tables/CrudTable.js new file mode 100644 index 0000000..7ee18dd --- /dev/null +++ b/front/odiparpack/app/containers/Tables/CrudTable.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Paper } from '@material-ui/core'; +import { CrudTableDemo, CrudTbFormDemo } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class CrudTablePage extends Component { + render() { + const title = brand.name + ' - Table'; + const description = brand.desc; + const docSrc = 'containers/Tables/demos/'; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="CRUD Table" desc="The CRUD Table supports editing features including creating, updating and deleting rows. The editing state contains information about rows currently being edited, changes applied to a particular row, and rows that have been deleted and created."> + <div> + <Paper className={classes.root}> + <CrudTableDemo /> + </Paper> + <SourceReader componentName={docSrc + 'CrudTableDemo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="CRUD Table with Redux Form" desc="In the CRUD Table Form mode allow You to create or edit via dedicated form(Redux Form). The design form itself inspired by Gmail with floating design and it can be expanded become popup mode"> + <div> + <Paper className={classes.root}> + <CrudTbFormDemo /> + </Paper> + <SourceReader componentName={docSrc + 'CrudTbFormDemo.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +CrudTablePage.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CrudTablePage); diff --git a/front/odiparpack/app/containers/Tables/TablePlayground.js b/front/odiparpack/app/containers/Tables/TablePlayground.js new file mode 100644 index 0000000..30382bb --- /dev/null +++ b/front/odiparpack/app/containers/Tables/TablePlayground.js @@ -0,0 +1,419 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; +import EnhancedTableHead from 'ba-components/Tables/tableParts/TableHeader'; +import EnhancedTableToolbar from 'ba-components/Tables/tableParts/TableToolbar'; +import { PapperBlock } from 'ba-components'; + +import { + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormGroup, + RadioGroup, + Radio, + Table, + TableBody, + TableCell, + TableRow, + TablePagination, + Paper, + Checkbox, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + demo: { + height: 240, + }, + paper: { + padding: theme.spacing(2), + height: '100%', + backgroundColor: theme.palette.secondary.light, + }, + control: { + padding: theme.spacing(2), + }, + settings: { + padding: 30 + }, +}); + +let counter = 0; +function createData(name, calories, fat, carbs, protein) { + counter += 1; + return { + id: counter, + name, + calories, + fat, + carbs, + protein + }; +} + +class InteractiveGrid extends React.Component { + constructor(props, context) { + super(props, context); + + this.state = { + order: 'asc', + orderBy: 'calories', + selected: [], + columnData: [ + { + id: 'name', + numeric: false, + disablePadding: false, + label: 'Dessert (100g serving)' + }, { + id: 'calories', + numeric: true, + disablePadding: false, + label: 'Calories' + }, { + id: 'fat', + numeric: true, + disablePadding: false, + label: 'Fat (g)' + }, { + id: 'carbs', + numeric: true, + disablePadding: false, + label: 'Carbs (g)' + }, { + id: 'protein', + numeric: true, + disablePadding: false, + label: 'Protein (g)' + }, + ], + data: [ + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Donut', 452, 25.0, 51, 4.9), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Gingerbread', 356, 16.0, 49, 3.9), + createData('Honeycomb', 408, 3.2, 87, 6.5), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Jelly Bean', 375, 0.0, 94, 0.0), + createData('KitKat', 518, 26.0, 65, 7.0), + createData('Lollipop', 392, 0.2, 98, 0.0), + createData('Marshmallow', 318, 0, 81, 2.0), + createData('Nougat', 360, 19.0, 9, 37.0), + createData('Oreo', 437, 18.0, 63, 4.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + defaultPerPage: 5, + filterText: '', + size: 'medium', + bordered: false, + stripped: true, + hovered: false, + toolbar: true, + checkcell: false, + pagination: true + }; + } + + handleChangeRadio = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + handleChangeCheck = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + handleRequestSort = (event, property) => { + const orderBy = property; + let order = 'desc'; + + if (this.state.orderBy === property && this.state.order === 'desc') { + order = 'asc'; + } + + const data = order === 'desc' + ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)) + : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1)); + + this.setState({ data, order, orderBy }); + }; + + handleSelectAllClick = (event, checked) => { + if (checked) { + this.setState({ selected: this.state.data.map(n => n.id) }); + return; + } + this.setState({ selected: [] }); + }; + + handleClick = (event, id) => { + if (!this.state.checkcell) { + return; + } + const { selected } = this.state; + const selectedIndex = selected.indexOf(id); + let newSelected = []; + + if (selectedIndex === -1) { + newSelected = newSelected.concat(selected, id); + } else if (selectedIndex === 0) { + newSelected = newSelected.concat(selected.slice(1)); + } else if (selectedIndex === selected.length - 1) { + newSelected = newSelected.concat(selected.slice(0, -1)); + } else if (selectedIndex > 0) { + newSelected = newSelected.concat( + selected.slice(0, selectedIndex), + selected.slice(selectedIndex + 1), + ); + } + + this.setState({ selected: newSelected }); + }; + + handleChangePage = (event, page) => { + this.setState({ page }); + }; + + handleChangeRowsPerPage = event => { + this.setState({ rowsPerPage: event.target.value }); + }; + + isSelected = id => this.state.selected.indexOf(id) !== -1; + + handleUserInput(value) { + // Show all item first + if (value !== '') { + this.setState({ rowsPerPage: this.state.data.length }); + } else { + this.setState({ rowsPerPage: this.state.defaultPerPage }); + } + + // Show result base on keyword + this.setState({ filterText: value.toLowerCase() }); + } + + render() { + const { classes } = this.props; + const { + data, + order, + orderBy, + selected, + rowsPerPage, + page, + filterText, + size, + columnData, + toolbar, pagination, checkcell, + bordered, stripped, hovered + } = this.state; + const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage)); + const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => ( + <TableCell align={itemCell.numeric ? 'right' : 'left'} key={index.toString()}>{dataArray[itemCell.id]}</TableCell> + )); + return ( + <PapperBlock title="Table Playground" desc=""> + <div> + <Grid container className={classes.root}> + <Grid item xs={12}> + <Grid container className={classes.settings}> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>Size</FormLabel> + <RadioGroup + name="size" + aria-label="size" + value={size} + onChange={this.handleChangeRadio('size')} + > + <FormControlLabel value="small" control={<Radio />} label="Small" /> + <FormControlLabel value="medium" control={<Radio />} label="Medium" /> + <FormControlLabel value="big" control={<Radio />} label="Big" /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>Style</FormLabel> + <FormGroup> + <FormControlLabel + control={( + <Checkbox + checked={this.state.bordered} + onChange={this.handleChangeCheck('bordered')} + value="bordered" + /> + )} + label="Bordered" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.stripped} + onChange={this.handleChangeCheck('stripped')} + value="stripped" + /> + )} + label="Strppied" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.hovered} + onChange={this.handleChangeCheck('hovered')} + value="hovered" + /> + )} + label="Hovered" + /> + </FormGroup> + </FormControl> + </Grid> + <Grid item xs={6} sm={4}> + <FormControl component="fieldset"> + <FormLabel>Component</FormLabel> + <FormGroup> + <FormControlLabel + control={( + <Checkbox + checked={this.state.toolbar} + onChange={this.handleChangeCheck('toolbar')} + value="toolbar" + /> + )} + label="Toolbar" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.checkcell} + onChange={this.handleChangeCheck('checkcell')} + value="checkcell" + /> + )} + label="Checkbox" + /> + <FormControlLabel + control={( + <Checkbox + checked={this.state.pagination} + onChange={this.handleChangeCheck('pagination')} + value="pagination" + /> + )} + label="Pagination" + /> + </FormGroup> + </FormControl> + </Grid> + </Grid> + </Grid> + <Grid item xs={12}> + <Paper className={classes.root}> + {toolbar + && ( + <EnhancedTableToolbar + numSelected={selected.length} + filterText={filterText} + onUserInput={(event) => this.handleUserInput(event)} + /> + ) + } + <div className={classes.tableWrapper}> + <Table className={ + classNames( + classes.table, + hovered && tableStyles.hover, + stripped && tableStyles.stripped, + bordered && tableStyles.bordered, + tableStyles[size] + )} + > + <EnhancedTableHead + numSelected={selected.length} + order={order} + orderBy={orderBy} + onSelectAllClick={this.handleSelectAllClick} + onRequestSort={this.handleRequestSort} + rowCount={data.length} + columnData={columnData} + checkcell={checkcell} + /> + <TableBody> + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => { + const isSelected = this.isSelected(n.id); + if (n.name.toLowerCase().indexOf(filterText) === -1) { + return false; + } + return ( + <TableRow + onClick={event => this.handleClick(event, n.id)} + role="checkbox" + aria-checked={isSelected} + tabIndex={-1} + key={n.id} + selected={isSelected} + > + {checkcell + && ( + <TableCell padding="checkbox"> + <Checkbox checked={isSelected} /> + </TableCell> + ) + } + {renderCell(n, columnData)} + </TableRow> + ); + })} + {emptyRows > 0 && ( + <TableRow style={{ height: 49 * emptyRows }}> + <TableCell colSpan={6} /> + </TableRow> + )} + </TableBody> + </Table> + </div> + {pagination + && ( + <TablePagination + rowsPerPageOptions={[5, 10, 25]} + component="div" + count={data.length} + rowsPerPage={rowsPerPage} + page={page} + backIconButtonProps={{ + 'aria-label': 'Previous Page', + }} + nextIconButtonProps={{ + 'aria-label': 'Next Page', + }} + onChangePage={this.handleChangePage} + onChangeRowsPerPage={this.handleChangeRowsPerPage} + /> + ) + } + </Paper> + </Grid> + </Grid> + </div> + </PapperBlock> + ); + } +} + +InteractiveGrid.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(InteractiveGrid); diff --git a/front/odiparpack/app/containers/Tables/TreeTable.js b/front/odiparpack/app/containers/Tables/TreeTable.js new file mode 100644 index 0000000..9b715fb --- /dev/null +++ b/front/odiparpack/app/containers/Tables/TreeTable.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Markdown from 'react-markdown'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import codeStyle from 'ba-styles/Code.scss'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Paper } from '@material-ui/core'; +import { TreeTableDemo, TreeTableDemoIcon } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class TreeTablePage extends Component { + render() { + const title = brand.name + ' - Table'; + const description = brand.desc; + const docSrc = 'containers/Tables/demos/'; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Tree Table Arrow Icon" desc="A simple Tree Collapsed/Expanded Table"> + <div> + <Paper className={classes.root}> + <TreeTableDemo /> + </Paper> + <SourceReader componentName={docSrc + 'TreeTableDemo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Tree Table +/- Icon" desc="A Tree Table with +/- Icon"> + <div> + <Markdown className={codeStyle.codePre} source="Just add attribute ``` icon='plusminus' ``` to change icon to +/-" /> + <Paper className={classes.root}> + <TreeTableDemoIcon /> + </Paper> + <SourceReader componentName={docSrc + 'TreeTableDemoIcon.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +TreeTablePage.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TreeTablePage); diff --git a/front/odiparpack/app/containers/Tables/demos/AdvFilter.js b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js new file mode 100644 index 0000000..091703a --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js @@ -0,0 +1,64 @@ +import React from 'react'; +import MUIDataTable from 'mui-datatables'; +/* + It uses npm mui-datatables. It's easy to use, you just describe columns and data collection. + Checkout full documentation here : + https://github.com/gregnb/mui-datatables/blob/master/README.md +*/ +class AdvFilter extends React.Component { + state = { + columns: ['Name', 'Title', 'Location', 'Age', 'Salary'], + data: [ + ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000'], + ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000'], + ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000'], + ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000'], + ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000'], + ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000'], + ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000'], + ['Lane Wilson', 'Commercial Specialist', 'Omaha', 19, '$65,000'], + ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000'], + ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000'], + ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000'], + ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000'], + ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000'], + ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000'], + ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000'], + ['Addison Navarro', 'Business Management Analyst', 'New York', 50, '$295,000'], + ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000'], + ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000'], + ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000'], + ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000'], + ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000'], + ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000'], + ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000'], + ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000'], + ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000'], + ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000'], + ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000'], + ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000'], + ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, '$45,000'], + ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000'] + ] + } + render() { + const { columns, data } = this.state; + const options = { + filterType: 'dropdown', + responsive: 'stacked', + print: true, + rowsPerPage: 10, + page: 1 + }; + return ( + <MUIDataTable + title="Employee list" + data={data} + columns={columns} + options={options} + /> + ); + } +} + +export default AdvFilter; diff --git a/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js b/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js new file mode 100644 index 0000000..d67990d --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js @@ -0,0 +1,101 @@ +import React from 'react'; +import { AdvTable } from 'ba-components'; + +let counter = 0; +function createData(name, calories, fat, carbs, protein) { + counter += 1; + return { + id: counter, + name, + calories, + fat, + carbs, + protein + }; +} + +class AdvTableDemo extends React.Component { + state = { + order: 'asc', + orderBy: 'calories', + selected: [], + columnData: [ + { + id: 'name', + numeric: false, + disablePadding: true, + label: 'Dessert (100g serving)' + }, { + id: 'calories', + numeric: true, + disablePadding: false, + label: 'Calories' + }, { + id: 'fat', + numeric: true, + disablePadding: false, + label: 'Fat (g)' + }, { + id: 'carbs', + numeric: true, + disablePadding: false, + label: 'Carbs (g)' + }, { + id: 'protein', + numeric: true, + disablePadding: false, + label: 'Protein (g)' + }, + ], + data: [ + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Donut', 452, 25.0, 51, 4.9), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Gingerbread', 356, 16.0, 49, 3.9), + createData('Honeycomb', 408, 3.2, 87, 6.5), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Jelly Bean', 375, 0.0, 94, 0.0), + createData('KitKat', 518, 26.0, 65, 7.0), + createData('Lollipop', 392, 0.2, 98, 0.0), + createData('Marshmallow', 318, 0, 81, 2.0), + createData('Nougat', 360, 19.0, 9, 37.0), + createData('Oreo', 437, 18.0, 63, 4.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + defaultPerPage: 5, + filterText: '', + }; + + render() { + const { + order, + orderBy, + selected, + data, + page, + rowsPerPage, + defaultPerPage, + filterText, + columnData + } = this.state; + + return ( + <AdvTable + order={order} + orderBy={orderBy} + selected={selected} + data={data} + page={page} + rowsPerPage={rowsPerPage} + defaultPerPage={defaultPerPage} + filterText={filterText} + columnData={columnData} + /> + ); + } +} + + +export default AdvTableDemo; diff --git a/front/odiparpack/app/containers/Tables/demos/BorderedTable.js b/front/odiparpack/app/containers/Tables/demos/BorderedTable.js new file mode 100644 index 0000000..a01979d --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/BorderedTable.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { + id, + name, + calories, + fat, + carbs, + protein + }; +} + +const data = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +function BorderedTable(props) { + const { classes } = props; + + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classNames(classes.table, tableStyles.bordered)}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell align="right">Calories</TableCell> + <TableCell align="right">Fat (g)</TableCell> + <TableCell align="right">Carbs (g)</TableCell> + <TableCell align="right">Protein (g)</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + <TableCell align="right">{n.carbs}</TableCell> + <TableCell align="right">{n.protein}</TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +BorderedTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BorderedTable); diff --git a/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js b/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js new file mode 100644 index 0000000..98a1868 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js @@ -0,0 +1,220 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { + fetchAction, + addAction, + removeAction, + updateAction, + editAction, + saveAction, + closeNotifAction, +} from 'ba-actions/CrudTbActions'; +import { CrudTable, Notification } from 'ba-components'; +import { Paper } from '@material-ui/core'; + +// Reducer Branch +const branch = 'crudTableDemo'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +const anchorTable = [ + { + name: 'id', + label: 'Id', + type: 'static', + initialValue: '', + hidden: true + }, { + name: 'category', + label: 'Category', + type: 'selection', + initialValue: 'Electronics', + options: ['Electronics', 'Sporting Goods', 'Apparels', 'Other'], + width: '150', + hidden: false + }, { + name: 'price', + label: 'Price', + type: 'number', + initialValue: 0, + width: '100', + hidden: false + }, { + name: 'date', + label: 'Date Updated', + type: 'date', + initialValue: new Date(), + width: 'auto', + hidden: false + }, { + name: 'time', + label: 'Time Updated', + type: 'time', + initialValue: new Date(), + width: 'auto', + hidden: false + }, { + name: 'name', + label: 'Name', + type: 'text', + initialValue: '', + width: 'auto', + hidden: false + }, { + name: 'available', + label: 'Available', + type: 'toggle', + initialValue: true, + width: '100', + hidden: false + }, { + name: 'edited', + label: '', + type: 'static', + initialValue: '', + hidden: true + }, { + name: 'action', + label: 'Action', + type: 'static', + initialValue: '', + hidden: false + }, +]; +const dataApi = [ + { + id: 1, + category: 'Sporting Goods', + price: '49.99', + date: '4/3/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'football', + available: true, + edited: false, + }, { + id: 2, + category: 'Other', + price: '9.99', + date: '4/2/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'baseball', + available: true, + edited: false, + }, { + id: 3, + category: 'Sporting Goods', + price: '29.99', + date: '4/1/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'basketball', + available: false, + edited: false, + }, { + id: 4, + category: 'Electronics', + price: '99.99', + date: '3/30/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'iPod Touch', + available: true, + edited: false, + }, { + id: 5, + category: 'Electronics', + price: '399.99', + date: '3/29/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'iPhone 5', + available: false, + edited: false, + }, { + id: 6, + category: 'Electronics', + price: '199.99', + date: '3/28/2018', + time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)', + name: 'nexus 7', + available: true, + edited: false, + } +]; + +class CrudTableDemo extends Component { + render() { + const { + classes, + fetchData, + addEmptyRow, + dataTable, + removeRow, + updateRow, + editRow, + finishEditRow, + closeNotif, + messageNotif, + } = this.props; + return ( + <div> + <Notification close={() => closeNotif(branch)} message={messageNotif} /> + <Paper className={classes.root}> + <CrudTable + dataInit={dataApi} + anchor={anchorTable} + title="Inventory" + dataTable={dataTable} + fetchData={fetchData} + addEmptyRow={addEmptyRow} + removeRow={removeRow} + updateRow={updateRow} + editRow={editRow} + finishEditRow={finishEditRow} + branch={branch} + /> + </Paper> + </div> + ); + } +} + +CrudTableDemo.propTypes = { + classes: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, + dataTable: PropTypes.object.isRequired, + addEmptyRow: PropTypes.func.isRequired, + removeRow: PropTypes.func.isRequired, + updateRow: PropTypes.func.isRequired, + editRow: PropTypes.func.isRequired, + finishEditRow: PropTypes.func.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + +const mapStateToProps = state => ({ + force: state, // force state from reducer + dataTable: state.getIn([branch, 'dataTable']), + messageNotif: state.getIn([branch, 'notifMsg']), +}); + +const mapDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch), + addEmptyRow: bindActionCreators(addAction, dispatch), + removeRow: bindActionCreators(removeAction, dispatch), + updateRow: bindActionCreators(updateAction, dispatch), + editRow: bindActionCreators(editAction, dispatch), + finishEditRow: bindActionCreators(saveAction, dispatch), + closeNotif: bindActionCreators(closeNotifAction, dispatch), +}); + +const CrudTableMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudTableDemo); + +export default withStyles(styles)(CrudTableMapped); diff --git a/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js new file mode 100644 index 0000000..c20803e --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js @@ -0,0 +1,230 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Field } from 'redux-form/immutable'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { + CheckboxRedux, + SelectRedux, + TextFieldRedux, + SwitchRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { + fetchAction, + addAction, + closeAction, + submitAction, + removeAction, + editAction, + closeNotifAction +} from 'ba-actions/CrudTbFrmActions'; +import { CrudTableForm, Notification } from 'ba-components'; +import { + Paper, + MenuItem, + InputLabel, + Radio, + RadioGroup, + FormControl, + FormLabel, + FormControlLabel, +} from '@material-ui/core'; +import { anchorTable, dataApi } from './sampleData'; + + +const branch = 'crudTbFrmDemo'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + +// validation functions +const required = value => (value == null ? 'Required' : undefined); +const email = value => ( + value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : undefined +); + +const styles = ({ + root: { + flexGrow: 1, + }, + field: { + width: '100%', + marginBottom: 20 + }, + fieldBasic: { + width: '100%', + marginBottom: 20, + marginTop: 10 + }, + inlineWrap: { + display: 'flex', + flexDirection: 'row' + } +}); + +class CrudTbFormDemo extends Component { + saveRef = ref => { + this.ref = ref; + return this.ref; + }; + + render() { + const { + classes, + fetchData, + addNew, + closeForm, + submit, + removeRow, + editRow, + dataTable, + openForm, + initValues, + closeNotif, + messageNotif, + } = this.props; + const trueBool = true; + return ( + <div> + <Notification close={() => closeNotif(branch)} message={messageNotif} /> + <Paper className={classes.root}> + <CrudTableForm + dataTable={dataTable} + openForm={openForm} + dataInit={dataApi} + anchor={anchorTable} + title="Title of Table" + fetchData={fetchData} + addNew={addNew} + closeForm={closeForm} + submit={submit} + removeRow={removeRow} + editRow={editRow} + branch={branch} + initValues={initValues} + > + {/* Create Your own form, then arrange or custom it as You like */} + <div> + <Field + name="text" + component={TextFieldRedux} + placeholder="Text Field" + label="Text Field" + validate={required} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <Field + name="email" + component={TextFieldRedux} + placeholder="Email Field" + label="Email" + required + validate={[required, email]} + className={classes.field} + /> + </div> + <div className={classes.fieldBasic}> + <FormLabel component="label">Choose One Option</FormLabel> + <Field name="radio" className={classes.inlineWrap} component={renderRadioGroup}> + <FormControlLabel value="option1" control={<Radio />} label="Option 1" /> + <FormControlLabel value="option2" control={<Radio />} label="Option 2" /> + </Field> + </div> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Selection</InputLabel> + <Field + name="selection" + component={SelectRedux} + placeholder="Selection" + autoWidth={trueBool} + > + <MenuItem value="option1">Option One</MenuItem> + <MenuItem value="option2">Option Two</MenuItem> + <MenuItem value="option3">Option Three</MenuItem> + </Field> + </FormControl> + </div> + <div className={classes.fieldBasic}> + <FormLabel component="label">Toggle Input</FormLabel> + <div className={classes.inlineWrap}> + <FormControlLabel control={<Field name="onof" component={SwitchRedux} />} label="On/OF Switch" /> + <FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} />} label="Checkbox" /> + </div> + </div> + <div className={classes.field}> + <Field + name="textarea" + className={classes.field} + component={TextFieldRedux} + placeholder="Textarea" + label="Textarea" + multiline={trueBool} + rows={4} + /> + </div> + {/* No need create button or submit, because that already made in this component */} + </CrudTableForm> + </Paper> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +CrudTbFormDemo.propTypes = { + dataTable: PropTypes.object.isRequired, + openForm: PropTypes.bool.isRequired, + classes: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, + addNew: PropTypes.func.isRequired, + closeForm: PropTypes.func.isRequired, + submit: PropTypes.func.isRequired, + removeRow: PropTypes.func.isRequired, + editRow: PropTypes.func.isRequired, + initValues: PropTypes.object.isRequired, + closeNotif: PropTypes.func.isRequired, + messageNotif: PropTypes.string.isRequired, +}; + + +const mapStateToProps = state => ({ + force: state, // force state from reducer + initValues: state.getIn([branch, 'formValues']), + dataTable: state.getIn([branch, 'dataTable']), + openForm: state.getIn([branch, 'showFrm']), + messageNotif: state.getIn([branch, 'notifMsg']), +}); + +const mapDispatchToProps = dispatch => ({ + fetchData: bindActionCreators(fetchAction, dispatch), + addNew: bindActionCreators(addAction, dispatch), + closeForm: bindActionCreators(closeAction, dispatch), + submit: bindActionCreators(submitAction, dispatch), + removeRow: bindActionCreators(removeAction, dispatch), + editRow: bindActionCreators(editAction, dispatch), + closeNotif: bindActionCreators(closeNotifAction, dispatch), +}); + +const CrudTbFormDemoMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudTbFormDemo); + +export default withStyles(styles)(CrudTbFormDemoMapped); diff --git a/front/odiparpack/app/containers/Tables/demos/EmptyTable.js b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js new file mode 100644 index 0000000..c9517a2 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { EmptyData } from 'ba-components'; + +import { Toolbar, Typography, Table, TableCell, TableHead, TableRow, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +function EmptyTable(props) { + const { classes } = props; + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classes.table}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell align="right">Calories</TableCell> + <TableCell align="right">Fat (g)</TableCell> + <TableCell align="right">Carbs (g)</TableCell> + <TableCell align="right">Protein (g)</TableCell> + </TableRow> + </TableHead> + </Table> + <EmptyData /> + </Paper> + ); +} + +EmptyTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(EmptyTable); diff --git a/front/odiparpack/app/containers/Tables/demos/HoverTable.js b/front/odiparpack/app/containers/Tables/demos/HoverTable.js new file mode 100644 index 0000000..48047c6 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/HoverTable.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { + id, + name, + calories, + fat, + carbs, + protein + }; +} + +const data = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +function HoverTable(props) { + const { classes } = props; + + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classNames(classes.table, tableStyles.hover)}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell align="right">Calories</TableCell> + <TableCell align="right">Fat (g)</TableCell> + <TableCell align="right">Carbs (g)</TableCell> + <TableCell align="right">Protein (g)</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + <TableCell align="right">{n.carbs}</TableCell> + <TableCell align="right">{n.protein}</TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +HoverTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(HoverTable); diff --git a/front/odiparpack/app/containers/Tables/demos/SimpleTable.js b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js new file mode 100644 index 0000000..e064d5e --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js @@ -0,0 +1,88 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { + id, + name, + calories, + fat, + carbs, + protein + }; +} + +const data = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +function SimpleTable(props) { + const { classes } = props; + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classes.table}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell align="right">Calories</TableCell> + <TableCell align="right">Fat (g)</TableCell> + <TableCell align="right">Carbs (g)</TableCell> + <TableCell align="right">Protein (g)</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + <TableCell align="right">{n.carbs}</TableCell> + <TableCell align="right">{n.protein}</TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +SimpleTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleTable); diff --git a/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js new file mode 100644 index 0000000..2e21190 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js @@ -0,0 +1,121 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import messageStyles from 'ba-styles/Messages.scss'; +import progressStyles from 'ba-styles/Progress.scss'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, + Chip, + LinearProgress, +} from '@material-ui/core'; + +const CustomTableCell = withStyles(theme => ({ + head: { + backgroundColor: theme.palette.common.black, + color: theme.palette.common.white, + }, + body: { + fontSize: 14, + }, +}))(TableCell); + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + chip: { + margin: theme.spacing(1), + fontWeight: 500, + color: '#FFF' + }, +}); + +let id = 0; +function createData(name, progress, status) { + id += 1; + return { + id, + name, + progress, + status, + }; +} + +const data = [ + createData('Frozen yoghurt', 24, 'Error'), + createData('Ice cream sandwich', 37, 'Warning'), + createData('Eclair', 24, 'Info'), + createData('Cupcake', 67, 'Default'), + createData('Gingerbread', 89, 'Success'), +]; + +function StatusLabel(props) { + const { classes } = props; + const getStatus = status => { + switch (status) { + case 'Error': return messageStyles.bgError; + case 'Warning': return messageStyles.bgWarning; + case 'Info': return messageStyles.bgInfo; + case 'Success': return messageStyles.bgSuccess; + default: return messageStyles.bgDefault; + } + }; + const getProgress = status => { + switch (status) { + case 'Error': return progressStyles.bgError; + case 'Warning': return progressStyles.bgWarning; + case 'Info': return progressStyles.bgInfo; + case 'Success': return progressStyles.bgSuccess; + default: return progressStyles.bgDefault; + } + }; + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classes.table}> + <TableHead> + <TableRow> + <CustomTableCell>Dessert (100g serving)</CustomTableCell> + <CustomTableCell>Progress</CustomTableCell> + <CustomTableCell>Status</CustomTableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id} className={getStatus(n.status)}> + <TableCell>{n.name}</TableCell> + <TableCell align="right"> + <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} /> + </TableCell> + <TableCell> + <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} /> + </TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +StatusLabel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StatusLabel); diff --git a/front/odiparpack/app/containers/Tables/demos/StatusLabel.js b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js new file mode 100644 index 0000000..bf011dd --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js @@ -0,0 +1,112 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; +import messageStyles from 'ba-styles/Messages.scss'; +import progressStyles from 'ba-styles/Progress.scss'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, + Chip, + LinearProgress, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + chip: { + margin: theme.spacing(1), + fontWeight: 'bold', + color: '#FFF' + }, +}); + +let id = 0; +function createData(name, progress, status) { + id += 1; + return { + id, + name, + progress, + status, + }; +} + +const data = [ + createData('Frozen yoghurt', 24, 'Error'), + createData('Ice cream sandwich', 37, 'Warning'), + createData('Eclair', 24, 'Info'), + createData('Cupcake', 67, 'Default'), + createData('Gingerbread', 89, 'Success'), +]; + +function StatusLabel(props) { + const { classes } = props; + const getStatus = status => { + switch (status) { + case 'Error': return messageStyles.bgError; + case 'Warning': return messageStyles.bgWarning; + case 'Info': return messageStyles.bgInfo; + case 'Success': return messageStyles.bgSuccess; + default: return messageStyles.bgDefault; + } + }; + const getProgress = status => { + switch (status) { + case 'Error': return progressStyles.bgError; + case 'Warning': return progressStyles.bgWarning; + case 'Info': return progressStyles.bgInfo; + case 'Success': return progressStyles.bgSuccess; + default: return progressStyles.bgDefault; + } + }; + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classNames(classes.table, tableStyles.stripped)}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell>Progress</TableCell> + <TableCell>Status</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right"> + <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} /> + </TableCell> + <TableCell> + <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} /> + </TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +StatusLabel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StatusLabel); diff --git a/front/odiparpack/app/containers/Tables/demos/StrippedTable.js b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js new file mode 100644 index 0000000..509bc4a --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; + +import { + Toolbar, + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { + id, + name, + calories, + fat, + carbs, + protein + }; +} + +const data = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +function StrippedTable(props) { + const { classes } = props; + + return ( + <Paper className={classes.root}> + <Toolbar> + <div className={classes.title}> + <Typography variant="h6">Nutrition</Typography> + </div> + </Toolbar> + <Table className={classNames(classes.table, tableStyles.stripped)}> + <TableHead> + <TableRow> + <TableCell>Dessert (100g serving)</TableCell> + <TableCell align="right">Calories</TableCell> + <TableCell align="right">Fat (g)</TableCell> + <TableCell align="right">Carbs (g)</TableCell> + <TableCell align="right">Protein (g)</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + <TableCell align="right">{n.carbs}</TableCell> + <TableCell align="right">{n.protein}</TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </Paper> + ); +} + +StrippedTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StrippedTable); diff --git a/front/odiparpack/app/containers/Tables/demos/TrackingTable.js b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js new file mode 100644 index 0000000..0550869 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js @@ -0,0 +1,124 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import messageStyles from 'ba-styles/Messages.scss'; +import progressStyles from 'ba-styles/Progress.scss'; +import avatarApi from 'ba-api/avatars'; +import { PapperBlock } from 'ba-components'; +import styles from 'ba-components/Widget/widget-jss'; + +import { + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Chip, + LinearProgress, + Avatar, + Icon, +} from '@material-ui/core'; + +let id = 0; +function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) { + id += 1; + return { + id, + name, + avatar, + title, + type, + taskNumber, + taskTitle, + progress, + status, + }; +} + +const data = [ + createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'), + createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'), + createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'), + createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'), + createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'), +]; + +function TrackingTable(props) { + const { classes } = props; + const getStatus = status => { + switch (status) { + case 'Error': return messageStyles.bgError; + case 'Warning': return messageStyles.bgWarning; + case 'Info': return messageStyles.bgInfo; + case 'Success': return messageStyles.bgSuccess; + default: return messageStyles.bgDefault; + } + }; + const getProgress = status => { + switch (status) { + case 'Error': return progressStyles.bgError; + case 'Warning': return progressStyles.bgWarning; + case 'Info': return progressStyles.bgInfo; + case 'Success': return progressStyles.bgSuccess; + default: return progressStyles.bgDefault; + } + }; + const getType = type => { + switch (type) { + case 'bug_report': return classes.red; + case 'flag': return classes.indigo; + case 'whatshot': return classes.orange; + case 'settings': return classes.lime; + default: return classes.purple; + } + }; + return ( + <PapperBlock title="Team Progress" whiteBg desc="Monitoring Your Team progress. Tracking task, current progress, and task status here."> + <div className={classes.root}> + <Table className={classNames(classes.table)}> + <TableHead> + <TableRow> + <TableCell>Name</TableCell> + <TableCell>Task</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell> + <div className={classes.user}> + <Avatar alt={n.name} src={n.avatar} className={classes.avatar} /> + <div> + <Typography variant="subtitle1">{n.name}</Typography> + <Typography>{n.title}</Typography> + </div> + </div> + </TableCell> + <TableCell> + <div className={classes.taskStatus}> + <Icon className={classNames(classes.taskIcon, getType(n.type))}>{n.type}</Icon> + <a href="#"> +# + {n.taskNumber} + </a> + <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} /> + </div> + <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} /> + </TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </div> + </PapperBlock> + ); +} + +TrackingTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TrackingTable); diff --git a/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js b/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js new file mode 100644 index 0000000..4c522e2 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import openAction from 'ba-actions/TreeTableActions'; +import { TreeTable } from 'ba-components'; +import { Paper } from '@material-ui/core'; +import data from './dataTreeTable.js'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, +}); + +const branch = 'treeTableArrow'; + +class TreeTableDemo extends Component { + render() { + const { + arrowMore, + treeOpen, + classes, + toggleTree + } = this.props; + return ( + <div> + <Paper className={classes.root}> + <TreeTable + treeOpen={treeOpen} + toggleTree={toggleTree} + arrowMore={arrowMore} + dataTable={data} + branch={branch} + icon="arrow" + /> + </Paper> + </div> + ); + } +} + +TreeTableDemo.propTypes = { + classes: PropTypes.object.isRequired, + treeOpen: PropTypes.object.isRequired, + arrowMore: PropTypes.object.isRequired, + toggleTree: PropTypes.func.isRequired, +}; + +const mapStateToProps = state => ({ + force: state, // force state from reducer + treeOpen: state.getIn([branch, 'treeOpen']), + arrowMore: state.getIn([branch, 'arrowMore']), +}); + +const mapDispatchToProps = dispatch => ({ + toggleTree: bindActionCreators(openAction, dispatch) +}); + +const TreeTableDemoMapped = connect( + mapStateToProps, + mapDispatchToProps +)(TreeTableDemo); + +export default withStyles(styles)(TreeTableDemoMapped); diff --git a/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js new file mode 100644 index 0000000..d669fae --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import openAction from 'ba-actions/TreeTableActions'; +import { TreeTable } from 'ba-components'; +import { Paper } from '@material-ui/core'; +import data from './dataTreeTable.js'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, +}); + +const branch = 'treeTablePM'; + +class TreeTableDemoIcon extends Component { + render() { + const { + arrowMore, + treeOpen, + classes, + toggleTree + } = this.props; + return ( + <div> + <Paper className={classes.root}> + <TreeTable + treeOpen={treeOpen} + toggleTree={toggleTree} + arrowMore={arrowMore} + dataTable={data} + branch={branch} + icon="plusminus" + /> + </Paper> + </div> + ); + } +} + +TreeTableDemoIcon.propTypes = { + classes: PropTypes.object.isRequired, + treeOpen: PropTypes.object.isRequired, + arrowMore: PropTypes.object.isRequired, + toggleTree: PropTypes.func.isRequired, +}; + +const mapStateToProps = state => ({ + force: state, // force state from reducer + treeOpen: state.getIn([branch, 'treeOpen']), + arrowMore: state.getIn([branch, 'arrowMore']), +}); + +const mapDispatchToProps = dispatch => ({ + toggleTree: bindActionCreators(openAction, dispatch) +}); + +const TreeTableIconMapped = connect( + mapStateToProps, + mapDispatchToProps +)(TreeTableDemoIcon); + +export default withStyles(styles)(TreeTableIconMapped); diff --git a/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js new file mode 100644 index 0000000..2eba8ab --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js @@ -0,0 +1,128 @@ +module.exports = { + head: [ + { + label: 'KeyId', + }, + { + label: 'Dessert (100g serving)', + }, + { + label: 'Calories', + }, + { + label: 'Fat(g)', + } + ], + body: [ + { + id: '1', + name: 'Frozen yoghurt', + calories: 159, + fat: 24, + child: [ + { + id: '1_1', + name: 'Frozen child 1', + calories: 159, + fat: 24, + }, + { + id: '1_2', + name: 'Frozen child 2', + calories: 159, + fat: 24, + child: [ + { + id: '1_2_1', + name: 'Frozen grand child 1', + calories: 159, + fat: 24, + }, + ] + }, + ] + }, + { + id: '2', + name: 'Eclair', + calories: 159, + fat: 24, + child: [ + { + id: '2_1', + name: 'Eclair Child', + calories: 159, + fat: 24, + child: [ + { + id: '2_1_1', + name: 'Eclair Grand Child 1', + calories: 159, + fat: 24, + }, + { + id: '2_1_2', + name: 'Eclair Grand Child 2', + calories: 159, + fat: 24, + } + ] + }, + ] + }, + { + id: '3', + name: 'Cupcake', + calories: 159, + fat: 24, + }, + { + id: '4', + name: 'Ginger Bread', + calories: 159, + fat: 24, + child: [ + { + id: '4_1', + name: 'Ginger Bread Child', + calories: 159, + fat: 24, + child: [ + { + id: '4_1_1', + name: 'Ginger Bread Grand Child 1', + calories: 159, + fat: 24, + child: [ + { + id: '4_1_1_1', + name: 'Ginger Bread Super Grand Child 1', + calories: 159, + fat: 24, + }, + { + id: '4_1_1_2', + name: 'Ginger Bread Super Grand Child 2', + calories: 159, + fat: 24, + }, + ] + }, + { + id: '4_1_2', + name: 'Ginger Bread Grand Child 2', + calories: 159, + fat: 24, + }, + { + id: '4_1_3', + name: 'Ginger Bread Grand Child 3', + calories: 159, + fat: 24, + } + ] + }, + ] + } + ] +}; diff --git a/front/odiparpack/app/containers/Tables/demos/index.js b/front/odiparpack/app/containers/Tables/demos/index.js new file mode 100644 index 0000000..604e828 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/index.js @@ -0,0 +1,14 @@ +export SimpleTable from './SimpleTable'; +export StrippedTable from './StrippedTable'; +export HoverTable from './HoverTable'; +export BorderedTable from './BorderedTable'; +export TreeTableDemo from './TreeTableDemo'; +export TreeTableDemoIcon from './TreeTableDemoIcon'; +export CrudTableDemo from './CrudTableDemo'; +export CrudTbFormDemo from './CrudTbFormDemo'; +export AdvTableDemo from './AdvTableDemo'; +export AdvFilter from './AdvFilter'; +export StatusLabel from './StatusLabel'; +export StatusColorRow from './StatusColorRow'; +export EmptyTable from './EmptyTable'; +export TrackingTable from './TrackingTable'; diff --git a/front/odiparpack/app/containers/Tables/demos/sampleData.js b/front/odiparpack/app/containers/Tables/demos/sampleData.js new file mode 100644 index 0000000..d53d8e2 --- /dev/null +++ b/front/odiparpack/app/containers/Tables/demos/sampleData.js @@ -0,0 +1,124 @@ +export const anchorTable = [ + { + name: 'id', + label: 'Id', + initialValue: '', + hidden: true + }, { + name: 'text', + label: 'Text Field', + initialValue: null, + width: 'auto', + hidden: false + }, { + name: 'email', + label: 'Email Field', + initialValue: null, + width: 'auto', + hidden: false + }, { + name: 'radio', + label: 'Radio Option', + initialValue: 'option1', + width: '80', + hidden: false + }, { + name: 'selection', + label: 'Selection', + initialValue: 'option1', + width: '80', + hidden: false + }, { + name: 'onof', + label: 'On/Of Input', + initialValue: true, + width: '80', + hidden: false + }, { + name: 'checkbox', + label: 'Checkbox', + initialValue: true, + width: '80', + hidden: false + }, { + name: 'textarea', + label: 'Text Area', + initialValue: 'This is default text', + width: 'auto', + hidden: false + }, { + name: 'edited', + label: '', + initialValue: '', + hidden: true + }, { + name: 'action', + label: 'Action', + initialValue: '', + hidden: false + }, +]; + +export const dataApi = [ + { + id: '1', + text: 'Just write', + email: '[email protected]', + radio: 'option2', + selection: 'option1', + onof: false, + checkbox: true, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, { + id: '2', + text: 'Some text', + email: '[email protected]', + radio: 'option2', + selection: 'option2', + onof: false, + checkbox: false, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, { + id: '3', + text: 'Because it is a TextField', + email: '[email protected]', + radio: 'option1', + selection: 'option3', + onof: false, + checkbox: false, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, { + id: '4', + text: 'And editable', + email: '[email protected]', + radio: 'option1', + selection: 'option1', + onof: false, + checkbox: true, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, { + id: '5', + text: 'You can write', + email: '[email protected]', + radio: 'option2', + selection: 'option2', + onof: false, + checkbox: true, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, { + id: '6', + text: 'Everything You want here', + email: '[email protected]', + radio: 'option1', + selection: 'option3', + onof: false, + checkbox: false, + textarea: 'Lorem ipsum dolor sit amet', + edited: false, + }, +]; diff --git a/front/odiparpack/app/containers/Templates/Dashboard.js b/front/odiparpack/app/containers/Templates/Dashboard.js new file mode 100644 index 0000000..5f24777 --- /dev/null +++ b/front/odiparpack/app/containers/Templates/Dashboard.js @@ -0,0 +1,114 @@ +import React, { useState, useEffect } from 'react'; +import { PropTypes } from 'prop-types'; +import classNames from 'classnames'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { withStyles } from '@material-ui/core/styles'; +import { Header, Sidebar, BreadCrumb } from 'ba-components'; +import { toggleAction, openAction, playTransitionAction } from 'ba-actions/UiActions'; +import { Fade } from '@material-ui/core'; +import styles from './appStyles-jss'; + +function Dashboard(props) { + const { + classes, + children, + history, + toggleDrawer, + sidebarOpen, + initialOpen, + loadTransition, + pageLoaded + } = props; + const [transform, setTransform] = useState(0); + + const darker = true; + + const handleScroll = () => { + const doc = document.documentElement; + const scroll = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + setTransform(scroll); + }; + + useEffect(() => { + // Scroll content to top + window.addEventListener('scroll', handleScroll); + + // Set expanded sidebar menu + const currentPath = history.location.pathname; + initialOpen(currentPath); + + // Play page transition + loadTransition(true); + + // Execute all arguments when page changes + const unlisten = history.listen(() => { + window.scrollTo(0, 0); + setTimeout(() => { + loadTransition(true); + }, 500); + }); + + return () => { + unlisten(); + }; + }, []); + + return ( + <div className={classes.appFrameInner}> + <Header toggleDrawerOpen={toggleDrawer} turnDarker={transform > 30 && darker} margin={sidebarOpen} /> + <Sidebar + open={sidebarOpen} + toggleDrawerOpen={toggleDrawer} + loadTransition={loadTransition} + turnDarker={transform > 30 && darker} + /> + <main className={classNames(classes.content, !sidebarOpen && classes.contentPadding)} id="mainContent"> + <div className={classes.bgbar} /> + <section className={classes.mainWrap}> + <BreadCrumb separator=" › " theme="light" location={history.location} /> + <Fade + in={pageLoaded} + mountOnEnter + unmountOnExit + {...(pageLoaded ? { timeout: 700 } : {})} + > + <div className={!pageLoaded ? classes.hideApp : ''}> + {children} + </div> + </Fade> + </section> + </main> + </div> + ); +} + +Dashboard.propTypes = { + classes: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + initialOpen: PropTypes.func.isRequired, + toggleDrawer: PropTypes.func.isRequired, + loadTransition: PropTypes.func.isRequired, + sidebarOpen: PropTypes.bool.isRequired, + pageLoaded: PropTypes.bool.isRequired +}; + +const reducer = 'ui'; +const mapStateToProps = state => ({ + sidebarOpen: state.getIn([reducer, 'sidebarOpen']), + pageLoaded: state.getIn([reducer, 'pageLoaded']) +}); + +const mapDispatchToProps = dispatch => ({ + toggleDrawer: () => dispatch(toggleAction), + initialOpen: bindActionCreators(openAction, dispatch), + loadTransition: bindActionCreators(playTransitionAction, dispatch), +}); + +const DashboardMaped = connect( + mapStateToProps, + mapDispatchToProps +)(Dashboard); + +export default (withStyles(styles)(DashboardMaped)); diff --git a/front/odiparpack/app/containers/Templates/Outer.js b/front/odiparpack/app/containers/Templates/Outer.js new file mode 100644 index 0000000..f6448be --- /dev/null +++ b/front/odiparpack/app/containers/Templates/Outer.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import brand from 'ba-api/brand'; +import logo from 'ba-images/logo.svg'; +import { Hidden } from '@material-ui/core'; +import styles from './appStyles-jss'; + +function Outer(props) { + const { + classes, + children, + } = props; + return ( + <div className={classes.appFrameOuter}> + <main className={classes.outerContent} id="mainContent"> + <Hidden mdUp> + <div className={classes.brand}> + <img src={logo} alt={brand.name} /> + <h3>{brand.name}</h3> + </div> + </Hidden> + {children} + </main> + </div> + ); +} + +Outer.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, +}; + +export default (withStyles(styles)(Outer)); diff --git a/front/odiparpack/app/containers/Templates/appStyles-jss.js b/front/odiparpack/app/containers/Templates/appStyles-jss.js new file mode 100644 index 0000000..f9175eb --- /dev/null +++ b/front/odiparpack/app/containers/Templates/appStyles-jss.js @@ -0,0 +1,144 @@ +import bg from 'ba-images/material_bg.svg'; +import { fade } from '@material-ui/core/styles/colorManipulator'; + +const appFrame = { + display: 'flex', + width: '100%', + minHeight: '100%', + zIndex: 1, +}; + +const styles = theme => ({ + root: { + width: '100%', + minHeight: '100%', + marginTop: 0, + zIndex: 1, + }, + appFrameInner: { + ...appFrame, + flexDirection: 'row' + }, + appFrameOuter: { + ...appFrame, + }, + content: { + backgroundColor: theme.palette.background.default, + width: '100%', + padding: theme.spacing(1.5), + paddingLeft: 0, + minHeight: '100%', + overflow: 'hidden', + }, + outerContent: { + background: `url(${bg}) no-repeat ${theme.palette.primary.main} left bottom`, + width: '100%', + backgroundSize: 'cover', + flexDirection: 'column', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + [theme.breakpoints.down('md')]: { + padding: '20px 0' + }, + }, + bgbar: { + backgroundColor: theme.palette.primary.main, + width: '100%', + position: 'fixed', + height: 184, + top: 0, + left: 0 + }, + mainWrap: { + position: 'relative', + marginTop: theme.spacing(6), + marginLeft: theme.spacing(1.5), + height: '100%', + '& > div': { + paddingBottom: theme.spacing(4), + willChange: 'inherit !important' // hack for floating form issue whne expaded + } + }, + preloader: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + zIndex: 1000, + background: 'transparent', + height: 3, + }, + materialBg: { + position: 'absolute', + left: 0, + bottom: 0, + width: '100%', + opacity: 0.5 + }, + contentPadding: { + paddingLeft: 80 + }, + hideApp: { + display: 'none' + }, + circularProgress: { + position: 'absolute', + top: 'calc(50% - 100px)', + left: 'calc(50% - 100px)', + }, + brand: { + height: 54, + display: 'flex', + padding: '10px 10px 5px', + position: 'relative', + alignItems: 'center', + justifyContent: 'center', + '& img': { + width: 20 + }, + '& h3': { + margin: 0, + fontSize: 16, + fontWeight: 500, + paddingLeft: 10, + color: theme.palette.common.white, + } + }, + btn: {}, + icon: {}, + btnPicker: { + position: 'fixed', + zIndex: 2000, + right: 0, + top: 200, + background: fade(theme.palette.background.paper, 0.8), + borderRadius: '30px 0 0 30px', + padding: '4px 8px 4px 4px', + overflow: 'hidden', + border: `1px solid ${theme.palette.grey[300]}`, + '& $btn': { + background: theme.palette.secondary.main, + borderRadius: 30, + padding: 8, + boxShadow: theme.shadows[4], + display: 'flex', + alignItems: 'center', + width: 40, + height: 40, + textCenter: 'cener', + overflow: 'hidden', + color: 'transparent', + transition: 'all 0.3s ease', + '& $icon': { + color: theme.palette.background.paper, + }, + '&:hover': { + color: theme.palette.background.paper, + width: 90 + } + } + } +}); + +export default styles; diff --git a/front/odiparpack/app/containers/UiElements/Accordion.js b/front/odiparpack/app/containers/UiElements/Accordion.js new file mode 100644 index 0000000..dd354d3 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Accordion.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SimpleAccordion, AdvancedAccordion, ControlledAccordion } from './demos'; + +class Accordion extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Accordion/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Accordion" desc="Accordion is MUI Expansion Panels contain creation flows and allow lightweight editing of an element."> + <div> + <SimpleAccordion /> + <SourceReader componentName={docSrc + 'SimpleAccordion.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Secondary heading and Columns" desc="Multiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user."> + <div> + <AdvancedAccordion /> + <SourceReader componentName={docSrc + 'AdvancedAccordion.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Controlled Accordion" desc="Extend the default panel behavior to create an accordion with the ExpansionPanel component."> + <div> + <ControlledAccordion /> + <SourceReader componentName={docSrc + 'ControlledAccordion.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Accordion; diff --git a/front/odiparpack/app/containers/UiElements/Avatars.js b/front/odiparpack/app/containers/UiElements/Avatars.js new file mode 100644 index 0000000..3ccbaaa --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Avatars.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { AvatarsDemo, AvatarsPractice } from './demos'; + +class Avatars extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Avatars/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Avatars" desc="Avatars are found throughout material design with uses in everything from tables to dialog menus."> + <div> + <AvatarsDemo /> + <SourceReader componentName={docSrc + 'AvatarsDemo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Implemented Avatars" desc="Some examples of components, using an image Avatar, SVG Icon Avatar, Letter and (string) Avatar."> + <div> + <AvatarsPractice /> + <SourceReader componentName={docSrc + 'AvatarsPractice.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Avatars; diff --git a/front/odiparpack/app/containers/UiElements/Badges.js b/front/odiparpack/app/containers/UiElements/Badges.js new file mode 100644 index 0000000..ff4783d --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Badges.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { CommonBadges, VariantBadges } from './demos'; + +class Badges extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Badges/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Common Badges" desc="Badge generates a small badge to the top-right of its child(ren)."> + <div> + <CommonBadges /> + <SourceReader componentName={docSrc + 'CommonBadges.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Variant Badges" desc="Examples of badges with icon and in tab, using primary and secondary colors. The badge is applied to its children."> + <div> + <VariantBadges /> + <SourceReader componentName={docSrc + 'VariantBadges.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Badges; diff --git a/front/odiparpack/app/containers/UiElements/Breadcrumbs.js b/front/odiparpack/app/containers/UiElements/Breadcrumbs.js new file mode 100644 index 0000000..daaa24f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Breadcrumbs.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { ClassicBreadcrumbs, PaperBreadcrumbs } from './demos'; + +class BreadCrumbs extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Breadcrumbs/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Classic Breadcrumb" desc="Breadcrumb is one of navigation component. With this User can jump to parent, children or grand-children page as long in a single inheritance.This example is designed with classic style separator"> + <div> + <ClassicBreadcrumbs /> + <SourceReader componentName={docSrc + 'ClassicBreadcrumbs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Paper Breadcrumb" desc=""> + <div> + <PaperBreadcrumbs /> + <SourceReader componentName={docSrc + 'PaperBreadcrumbs.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default BreadCrumbs; diff --git a/front/odiparpack/app/containers/UiElements/Cards.js b/front/odiparpack/app/containers/UiElements/Cards.js new file mode 100644 index 0000000..7865b9d --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Cards.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + StandardCards, + ControlCards, + PaperSheet, + SocialCards, + EcommerceCards +} from './demos'; + +class Cards extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Cards/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Paper" desc="In material design, the physical properties of paper are translated to the screen."> + <div> + <PaperSheet /> + <SourceReader componentName={docSrc + 'PaperSheet.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Standard Cards" desc="A card is a sheet of material that serves as an entry point to more detailed information."> + <div> + <StandardCards /> + <SourceReader componentName={docSrc + 'StandardCards.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Control Cards" desc="Supplemental actions within the card are explicitly called out using icons, text, and UI controls."> + <div> + <ControlCards /> + <SourceReader componentName={docSrc + 'ControlCards.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Social Cards" desc="A Customized material-ui card that contain profile elements"> + <div> + <SocialCards /> + <SourceReader componentName={docSrc + 'SocialCards.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Ecommerce Cards" desc="A Customized material-ui card that contain product information"> + <div> + <EcommerceCards /> + <SourceReader componentName={docSrc + 'EcommerceCards.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Cards; diff --git a/front/odiparpack/app/containers/UiElements/DialogModal.js b/front/odiparpack/app/containers/UiElements/DialogModal.js new file mode 100644 index 0000000..6e26609 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/DialogModal.js @@ -0,0 +1,97 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + ModalDemo, + AlertDialog, + SelectDialog, + SelectRadioDialog, + FormDialog, + FullScreenDialog, + ImagePopup, + ScrollDialog +} from './demos'; + +class DialogModal extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/DialogModal/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Modals" desc="The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else."> + <div> + <ModalDemo /> + <SourceReader componentName={docSrc + 'ModalDemo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Image Popup" desc="A flexible lightbox component for displaying images. It's also can handle zoom and panning of images. Mobile friendly, with pinch to zoom and swipe"> + <div> + <ImagePopup /> + <SourceReader componentName={docSrc + 'ImagePopup.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Alerts" desc="Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation."> + <div> + <AlertDialog /> + <SourceReader componentName={docSrc + 'AlertDialog.js'} /> + </div> + </PapperBlock> + <Grid container spacing={2}> + <Grid item md={6}> + <PapperBlock title="Selection Dialog" desc="Choosing an option immediately commits the option and closes the menu"> + <div> + <SelectDialog /> + <SourceReader componentName={docSrc + 'SelectDialog.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Selection Radio Dialog" desc="In this example, users can listen to multiple ringtones but only make a final selection upon touching “OK.”"> + <div> + <SelectRadioDialog /> + <SourceReader componentName={docSrc + 'SelectRadioDialog.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Form dialogs" desc="Form dialogs allow users to fill out form fields within a dialog."> + <div> + <FormDialog /> + <SourceReader componentName={docSrc + 'FormDialog.js'} /> + </div> + </PapperBlock> + <Grid container spacing={2}> + <Grid item md={6} xs={12}> + <PapperBlock title="Full Screen (Responsive)" desc="You may make a Dialog responsively full screen the dialog using withMobileDialog. By default, withMobileDialog()(Dialog) responsively full screens at or below the sm screen size."> + <div> + <FullScreenDialog /> + <SourceReader componentName={docSrc + 'FullScreenDialog.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Scrolling dialog" desc="When dialogs become too long for the user’s viewport or device, they scroll."> + <div> + <ScrollDialog /> + <SourceReader componentName={docSrc + 'ScrollDialog.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + ); + } +} + +export default DialogModal; diff --git a/front/odiparpack/app/containers/UiElements/Dividers.js b/front/odiparpack/app/containers/UiElements/Dividers.js new file mode 100644 index 0000000..34c66a9 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Dividers.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { CommonDividers, SpecialDividers } from './demos'; + +class Dividers extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Dividers/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Common Dividers" desc="Some variant divider style base on hr tag"> + <div> + <CommonDividers /> + <SourceReader componentName={docSrc + 'CommonDividers.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Special Dividers" desc="Sometime the divider is more than a line. With this You can add text or decoration at the edges"> + <div> + <SpecialDividers /> + <SourceReader componentName={docSrc + 'SpecialDividers.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Dividers; diff --git a/front/odiparpack/app/containers/UiElements/DrawerMenu.js b/front/odiparpack/app/containers/UiElements/DrawerMenu.js new file mode 100644 index 0000000..dfffbc8 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/DrawerMenu.js @@ -0,0 +1,104 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + TemporaryDrawer, + SwipeDrawer, + PermanentDrawer, + PersistentDrawer, + MiniDrawer, + BasicMenu, + DropdownMenu, + StyledMenu, + MenuTransition +} from './demos'; + +class DrawerMenu extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/DrawerMenu/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <Grid container spacing={2}> + <Grid item md={6}> + <PapperBlock title="Temporary drawer" desc="Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected."> + <div> + <TemporaryDrawer /> + <SourceReader componentName={docSrc + 'TemporaryDrawer.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Swipeable Temporary drawer" desc="You can make the drawer swipeable with the SwipeableDrawer component."> + <div> + <SwipeDrawer /> + <SourceReader componentName={docSrc + 'SwipeDrawer.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Permanent drawer" desc="Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed."> + <div> + <PermanentDrawer /> + <SourceReader componentName={docSrc + 'PermanentDrawer.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Persistent drawer" desc="Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user."> + <div> + <PersistentDrawer /> + <SourceReader componentName={docSrc + 'PersistentDrawer.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Mini variant drawer" desc="In this variation, the persistent navigation drawer changes its width. Its resting state is as a mini-drawer at the same elevation as the content, clipped by the app bar."> + <div> + <MiniDrawer /> + <SourceReader componentName={docSrc + 'MiniDrawer.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Basic Menu" desc="Basic menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make all menu items are completely visible."> + <div> + <BasicMenu /> + <SourceReader componentName={docSrc + 'BasicMenu.js'} /> + </div> + </PapperBlock> + <Grid container spacing={2}> + <Grid item md={6}> + <PapperBlock title="Selected menus" desc="If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element."> + <div> + <DropdownMenu /> + <SourceReader componentName={docSrc + 'DropdownMenu.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Styled Menu" desc="The MenuItem is a wrapper around ListItem with some additional styles."> + <div> + <StyledMenu /> + <SourceReader componentName={docSrc + 'StyledMenu.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Transition" desc="Use a different transition altogether."> + <div> + <MenuTransition /> + <SourceReader componentName={docSrc + 'MenuTransition.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default DrawerMenu; diff --git a/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js b/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js new file mode 100644 index 0000000..e19c17a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js @@ -0,0 +1,149 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'; +import jsx from 'react-syntax-highlighter/languages/prism/jsx'; +import themeSource from 'react-syntax-highlighter/styles/prism/prism'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Typography, + Button, + Icon, + Divider, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Slide, +} from '@material-ui/core'; + +const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line + return <Slide direction="up" ref={ref} {...props} />; +}); + +const humanize = (str, space) => { + let string = str; + if (str === '3d_rotation') { + string = 'three_d_rotation'; + } + const frags = string.split('_'); + for (let i = 0; i < frags.length; i += 1) { + frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1); + } + + if (space) { + return frags.join(' '); + } + return frags.join(''); +}; + +const styles = theme => ({ + code: { + fontSize: 12, + padding: '5px !important' + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + bigIcon: { + textAlign: 'center', + marginBottom: 30, + '& span': { + fontSize: 128 + } + }, + title: { + marginBottom: 40, + fontSize: 22, + paddingBottom: 20, + position: 'relative', + fontWeight: 500, + color: theme.palette.grey[700], + textTransform: 'uppercase', + '&:after': { + content: '""', + display: 'block', + position: 'absolute', + bottom: 0, + left: 24, + width: 40, + borderBottom: `5px solid ${theme.palette.primary.main}` + } + }, +}); + +class DetailIcon extends React.Component { + render() { + registerLanguage('jsx', jsx); + const { + isOpenDetail, + iconName, + iconCode, + closeDetail + } = this.props; + const { classes } = this.props; + const linkCode = '<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />'; + const fontCode = '<Icon>' + iconName + '</Icon>'; + const importCode = 'import ' + humanize(iconName, false) + " from '@material-ui/icons/" + humanize(iconName, false) + "';"; + const importIconCode = "import Icon from '@material-ui/core/Icon';"; + const svgCode = '<' + humanize(iconName, false) + ' />'; + return ( + <Dialog + open={isOpenDetail} + TransitionComponent={Transition} + keepMounted + maxWidth="md" + onClose={closeDetail} + aria-labelledby="alert-dialog-slide-title" + aria-describedby="alert-dialog-slide-description" + > + <DialogTitle id="alert-dialog-slide-title" className={classes.title}> + {humanize(iconName, true)} + {' '} +( + {iconCode} +) + </DialogTitle> + <DialogContent> + <div className={classes.bigIcon}> + <Icon className={classes.icon}>{iconName}</Icon> + </div> + <Typography variant="subtitle1" gutterBottom>Use with Font Icons</Typography> + <SyntaxHighlighter className={classes.code} language="jsx" style={themeSource}> + {linkCode} + </SyntaxHighlighter> + <SyntaxHighlighter className={classes.code} language="jsx" style={themeSource}> + {importIconCode} + </SyntaxHighlighter> + <SyntaxHighlighter className={classes.code} language="jsx" style={themeSource}> + {fontCode} + </SyntaxHighlighter> + <Divider className={classes.divider} /> + <Typography variant="subtitle1" gutterBottom>Use with SVG Material icons</Typography> + <SyntaxHighlighter className={classes.code} language="jsx" style={themeSource}> + {importCode} + </SyntaxHighlighter> + <SyntaxHighlighter className={classes.code} language="jsx" style={themeSource}> + {svgCode} + </SyntaxHighlighter> + </DialogContent> + <DialogActions> + <Button onClick={closeDetail} color="primary"> + Close + </Button> + </DialogActions> + </Dialog> + ); + } +} + +DetailIcon.propTypes = { + classes: PropTypes.object.isRequired, + isOpenDetail: PropTypes.bool.isRequired, + closeDetail: PropTypes.func.isRequired, + iconName: PropTypes.string.isRequired, + iconCode: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(DetailIcon); diff --git a/front/odiparpack/app/containers/UiElements/IconGallery/SearchIcons.js b/front/odiparpack/app/containers/UiElements/IconGallery/SearchIcons.js new file mode 100644 index 0000000..c046362 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/IconGallery/SearchIcons.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import SearchIcon from '@material-ui/icons/Search'; + +import { IconButton, Input, InputAdornment, FormControl } from '@material-ui/core'; + +const styles = theme => ({ + search: { + display: 'block', + background: '#fff', + marginBottom: 10, + paddingTop: 5, + boxShadow: theme.shadows[2], + '& > div': { + width: '100%', + }, + '& input': { + padding: '10px 8px' + } + } +}); + +class SearchIcons extends React.Component { + render() { + const { filterText, classes, handleSearch } = this.props; + return ( + <FormControl fullWidth className={classes.search}> + <Input + id="search_filter" + type="text" + placeholder="Search more than 900 icons" + value={filterText} + onChange={handleSearch} + endAdornment={( + <InputAdornment position="end"> + <IconButton aria-label="Search filter"> + <SearchIcon /> + </IconButton> + </InputAdornment> + )} + /> + </FormControl> + ); + } +} + +SearchIcons.propTypes = { + classes: PropTypes.object.isRequired, + filterText: PropTypes.string.isRequired, + handleSearch: PropTypes.func.isRequired, +}; + +export default withStyles(styles)(SearchIcons); diff --git a/front/odiparpack/app/containers/UiElements/Icons.js b/front/odiparpack/app/containers/UiElements/Icons.js new file mode 100644 index 0000000..f207d29 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Icons.js @@ -0,0 +1,158 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import Axios from 'axios'; +import { withStyles } from '@material-ui/core/styles'; +import { PapperBlock } from 'ba-components'; +import { Typography, IconButton, Icon, LinearProgress } from '@material-ui/core'; +import DetailIcon from './IconGallery/DetailIcon'; +import SearchIcons from './IconGallery/SearchIcons'; +const url = '/api/icons?src='; + +const styles = theme => ({ + hide: { + display: 'none' + }, + iconsList: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + [theme.breakpoints.down('xs')]: { + justifyContent: 'center', + }, + overflow: 'auto', + maxHeight: 1000, + position: 'relative' + }, + iconWrap: { + position: 'relative', + width: 120, + margin: 20, + [theme.breakpoints.down('xs')]: { + margin: 10, + }, + textAlign: 'center' + }, + btn: { + display: 'block', + textAlign: 'center', + margin: '0 auto', + }, + icon: { + fontSize: 48, + }, + preloader: { + width: '100%' + }, +}); + +class Icons extends React.Component { + state = { + raws: [], + loading: false, + openDetail: false, + iconName: '', + iconCode: '', + filterText: '' + }; + + componentDidMount = () => { + const name = 'material-icon-cheat.txt'; + this.setState({ loading: true }, () => { + Axios.get(url + name) + .then(response => response.data.records[0].source) + .then(data => { + const namesAndCodes = data.split('\n'); + const icons = namesAndCodes.map(nameAndCode => { + const parts = nameAndCode.split(' '); + return { + name: parts[0], + code: parts[1] + }; + }); + return icons; + }) + .then(icons => { + this.setState({ + raws: icons, + loading: false + }); + }); + }); + } + + handleOpenDetail = (name, code) => { + this.setState({ + openDetail: true, + iconName: name, + iconCode: code, + }); + }; + + handleCloseDetail = () => { + this.setState({ openDetail: false }); + }; + + handleSearch = (event) => { + event.persist(); + // Show result base on keyword + this.setState({ filterText: event.target.value.toLowerCase() }); + } + + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const { + raws, + loading, + openDetail, + iconName, + iconCode, + filterText + } = this.state; + const { classes } = this.props; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Material Icons" desc="Material icons are delightful, beautifully crafted symbols for common actions and items. System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics."> + <div> + {loading + && <LinearProgress color="secondary" className={classes.preloader} /> + } + <SearchIcons filterText={filterText} handleSearch={(event) => this.handleSearch(event)} /> + <div className={classes.iconsList}> + {raws.map((raw, index) => { + if (raw.name.toLowerCase().indexOf(filterText) === -1) { + return false; + } + return ( + <div className={classes.iconWrap} key={index.toString()}> + <IconButton title="Click to see detail" onClick={() => this.handleOpenDetail(raw.name, raw.code)} className={classes.btn}> + <Icon className={classes.icon}>{raw.name}</Icon> + </IconButton> + <Typography gutterBottom noWrap>{raw.name}</Typography> + </div> + ); + })} + <DetailIcon closeDetail={this.handleCloseDetail} isOpenDetail={openDetail} iconName={iconName} iconCode={iconCode} /> + </div> + </div> + </PapperBlock> + </div> + ); + } +} + +Icons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Icons); diff --git a/front/odiparpack/app/containers/UiElements/ImageGrid.js b/front/odiparpack/app/containers/UiElements/ImageGrid.js new file mode 100644 index 0000000..a95fd50 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/ImageGrid.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { ImageGridList, TitlebarGridList, AdvancedGridList, SingleLineGridList } from './demos'; + +class ImageGrid extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/ImageGrid/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Image-only Grid list" desc="A simple example of a scrollable image GridList"> + <div> + <ImageGridList /> + <SourceReader componentName={docSrc + 'ImageGridList.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Grid list with titlebars" desc="This example demonstrates the use of the GridListTileBar to add an overlay to each GridListTile."> + <div> + <TitlebarGridList /> + <SourceReader componentName={docSrc + 'TitlebarGridList.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Advanced Grid list" desc="This example demonstrates featured tiles, using the rows and cols props to adjust the size of the tile, and the padding prop to adjust the spacing."> + <div> + <AdvancedGridList /> + <SourceReader componentName={docSrc + 'AdvancedGridList.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Single line Grid list" desc="This example demonstrates a horizontal scrollable single-line grid list of images."> + <div> + <SingleLineGridList /> + <SourceReader componentName={docSrc + 'SingleLineGridList.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default ImageGrid; diff --git a/front/odiparpack/app/containers/UiElements/List.js b/front/odiparpack/app/containers/UiElements/List.js new file mode 100644 index 0000000..665cd08 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/List.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + ListBasic, + ListMenu, + PinnedList, + ListControl, + ListInteractive +} from './demos'; + +class List extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/List/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="List Basic" desc="The divider renders as a <hr> by default. You can save rendering this DOM element by using the divider property on the ListItem component."> + <div> + <ListBasic /> + <SourceReader componentName={docSrc + 'ListBasic.js'} /> + </div> + </PapperBlock> + <PapperBlock title="List Menu" desc="Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text."> + <div> + <ListMenu /> + <SourceReader componentName={docSrc + 'ListMenu.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Pinned Subheader List" desc="Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader."> + <div> + <PinnedList /> + <SourceReader componentName={docSrc + 'PinnedList.js'} /> + </div> + </PapperBlock> + <PapperBlock title="List Controls" desc="The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target."> + <div> + <ListControl /> + <SourceReader componentName={docSrc + 'ListControl.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Interactive" desc="Below is an interactive demo that lets you explore the visual results of the different settings:"> + <div> + <ListInteractive /> + <SourceReader componentName={docSrc + 'ListInteractive.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default List; diff --git a/front/odiparpack/app/containers/UiElements/Notification.js b/front/odiparpack/app/containers/UiElements/Notification.js new file mode 100644 index 0000000..b00f24e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Notification.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { SimpleNotif, StyledNotif, TransitionNotif, MobileNotif } from './demos'; + +class Notification extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Notification/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Snackbars/Notification" desc="Snackbars provide brief feedback about an operation through a message - typically at the bottom of the screen."> + <div> + <SimpleNotif /> + <SourceReader componentName={docSrc + 'SimpleNotif.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Styled Notification" desc="Some snackbars with varying message style. And some snackbars with varying message length."> + <div> + <StyledNotif /> + <SourceReader componentName={docSrc + 'StyledNotif.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Mobile Notification" desc="Move the floating action button vertically to accommodate the snackbar height."> + <div> + <Grid container justify="center"> + <Grid item md={4} xs={12}> + <MobileNotif /> + </Grid> + </Grid> + <SourceReader componentName={docSrc + 'MobileNotif.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Transition" desc="Per Google's guidelines, when a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards."> + <div> + <TransitionNotif /> + <SourceReader componentName={docSrc + 'TransitionNotif.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Notification; diff --git a/front/odiparpack/app/containers/UiElements/Paginations.js b/front/odiparpack/app/containers/UiElements/Paginations.js new file mode 100644 index 0000000..7f6fa47 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Paginations.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { TbPagination, TbPaginationCustom, GeneralPagination } from './demos'; + +class Paginations extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Pagination/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Table Pagination" desc="The Action property of the TablePagination component allows the implementation of custom actions."> + <div> + <TbPagination /> + <SourceReader componentName={docSrc + 'TbPagination.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Table Pagination Custom" desc="The Action property of the TablePagination component allows the implementation of custom actions."> + <div> + <TbPaginationCustom /> + <SourceReader componentName={docSrc + 'TbPaginationCustom.js'} /> + </div> + </PapperBlock> + <PapperBlock title="General Pagination" desc="React.js pagination component based on ultimate-pagination. It's implemented as a higher-order component that allows easy integration of react-ultimate-pagination with different CSS frameworks or approaches."> + <div> + <GeneralPagination /> + <SourceReader componentName={docSrc + 'GeneralPagination.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Paginations; diff --git a/front/odiparpack/app/containers/UiElements/PopoverTooltip.js b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js new file mode 100644 index 0000000..508129b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js @@ -0,0 +1,95 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + SimpleTooltips, + PositionedTooltips, + SimplePopover, + PopoverPlayground, + DelayTooltips, + TransitionsTooltips, + TriggersTooltips, + CustomizedTooltips +} from './demos'; + +class PopoverTooltip extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/PopoverTooltip/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Simple Tooltips" desc="The tooltips are text labels that appear when the user hovers over, focuses on, or touches an element."> + <div> + <SimpleTooltips /> + <SourceReader componentName={docSrc + 'SimpleTooltips.js'} /> + </div> + </PapperBlock> + <PapperBlock overflowX title="Positioned Tooltips" desc="The Tooltip has 12 placements choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction."> + <div> + <PositionedTooltips /> + <SourceReader componentName={docSrc + 'PositionedTooltips.js'} /> + </div> + </PapperBlock> + <Grid container spacing={2}> + <Grid item md={6} xs={12}> + <PapperBlock title="Triggers Tooltips" desc="You can define the types of events that cause a tooltip to show."> + <div> + <TriggersTooltips /> + <SourceReader componentName={docSrc + 'TriggersTooltips.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Delay Tooltip" desc="A delay in showing or hiding the tooltip can be added also"> + <div> + <DelayTooltips /> + <SourceReader componentName={docSrc + 'DelayTooltips.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Transitions Tooltips" desc="Tooltips with different transition."> + <div> + <TransitionsTooltips /> + <SourceReader componentName={docSrc + 'TransitionsTooltips.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Customized Tooltips" desc="The tooltip with customized css style"> + <div> + <CustomizedTooltips /> + <SourceReader componentName={docSrc + 'CustomizedTooltips.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Simple Popover" desc="A Popover can be used to display some content on top of another."> + <div> + <SimplePopover /> + <SourceReader componentName={docSrc + 'SimplePopover.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Popover playground" desc="Use the radio buttons to adjust the anchorOrigin and transformOrigin positions. You can also set the anchorReference to anchorPosition or anchorEl."> + <div> + <PopoverPlayground /> + <SourceReader componentName={docSrc + 'PopoverPlayground.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default PopoverTooltip; diff --git a/front/odiparpack/app/containers/UiElements/Progress.js b/front/odiparpack/app/containers/UiElements/Progress.js new file mode 100644 index 0000000..669da02 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Progress.js @@ -0,0 +1,126 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + CircularStatic, + CircularIndeterminate, + CircularDeterminate, + CircularIntegration, + LinearStatic, + LinearIndeterminate, + LinearDeterminate, + LinearBuffer, + LinearQuery, + ProgressDelay +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Progress extends React.Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Progress/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <PapperBlock title="Circular Static" desc="Progress and activity indicators are visual indications of an app loading content."> + <div> + <CircularStatic /> + <SourceReader componentName={docSrc + 'CircularStatic.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Circular Determinate" desc="Indicators display how long an operation will take."> + <div> + <CircularDeterminate /> + <SourceReader componentName={docSrc + 'CircularDeterminate.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Circular Indeterminate" desc="Indicators visualize an unspecified wait time."> + <div> + <CircularIndeterminate /> + <SourceReader componentName={docSrc + 'CircularIndeterminate.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Circular Integration" desc="Visual indicator should be used to represent each type of operation."> + <div> + <CircularIntegration /> + <SourceReader componentName={docSrc + 'CircularIntegration.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Linear Static" desc=""> + <div> + <LinearStatic /> + <SourceReader componentName={docSrc + 'LinearStatic.js'} /> + </div> + </PapperBlock> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <PapperBlock title="Linear Determinate" desc=""> + <div> + <LinearDeterminate /> + <SourceReader componentName={docSrc + 'LinearDeterminate.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Linear Buffer" desc=""> + <div> + <LinearBuffer /> + <SourceReader componentName={docSrc + 'LinearBuffer.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Linear Query" desc=""> + <div> + <LinearQuery /> + <SourceReader componentName={docSrc + 'LinearQuery.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6} xs={12}> + <PapperBlock title="Linear Indeterminate" desc=""> + <div> + <LinearIndeterminate /> + <SourceReader componentName={docSrc + 'LinearIndeterminate.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Progress Delay Appearance" desc="There are 3 important limits to know around response time. The ripple effect of the ButtonBase component ensures that the user feels that the system is reacting instantaneously."> + <div> + <ProgressDelay /> + <SourceReader componentName={docSrc + 'ProgressDelay.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +Progress.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Progress); diff --git a/front/odiparpack/app/containers/UiElements/SliderCarousel.js b/front/odiparpack/app/containers/UiElements/SliderCarousel.js new file mode 100644 index 0000000..b624774 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/SliderCarousel.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + SingleCarousel, + MultipleCarousel, + AutoplayCarousel, + ThumbnailCarousel, + VerticalCarousel, + CustomCarousel, + AnimatedSlider +} from './demos'; + +class SliderCarousel extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/SliderCaraousel/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Animated Slider" desc="A Slider/Carousel component for React supporting custom css animations."> + <div> + <AnimatedSlider /> + <SourceReader componentName={docSrc + 'AnimatedSlider.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Simple Slider" desc="React slick is a carousel component built with React. It is a react port of slick carousel"> + <div> + <SingleCarousel /> + <SourceReader componentName={docSrc + 'SingleCarousel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Carousel" desc=""> + <div> + <MultipleCarousel /> + <SourceReader componentName={docSrc + 'MultipleCarousel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Autoplay Carousel" desc=""> + <div> + <AutoplayCarousel /> + <SourceReader componentName={docSrc + 'AutoplayCarousel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Carousel with Thumbnail Pagination" desc=""> + <div> + <ThumbnailCarousel /> + <SourceReader componentName={docSrc + 'ThumbnailCarousel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Vertical Carousel" desc=""> + <div> + <VerticalCarousel /> + <SourceReader componentName={docSrc + 'VerticalCarousel.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Custom Navigation Carousel" desc=""> + <div> + <CustomCarousel /> + <SourceReader componentName={docSrc + 'CustomCarousel.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default SliderCarousel; diff --git a/front/odiparpack/app/containers/UiElements/Steppers.js b/front/odiparpack/app/containers/UiElements/Steppers.js new file mode 100644 index 0000000..358f641 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Steppers.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { + HorizontalLinear, + HorizontalNonLinear, + StepperError, + VerticalStepper, + MobileSteppers, + StepperCarousel +} from './demos'; + +class Steppers extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Steppers/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Horizontal Linear" desc="The Stepper can be controlled by passing the current step index (zero-based) as the activeStep property."> + <div> + <HorizontalLinear /> + <SourceReader componentName={docSrc + 'HorizontalLinear.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Horizontal Non-linear" desc="Non-linear steppers allow users to enter a multi-step flow at any point."> + <div> + <HorizontalNonLinear /> + <SourceReader componentName={docSrc + 'HorizontalNonLinear.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Horizontal Non Linear - Error Step" desc=""> + <div> + <StepperError /> + <SourceReader componentName={docSrc + 'StepperError.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Vertical Stepper" desc=""> + <div> + <VerticalStepper /> + <SourceReader componentName={docSrc + 'VerticalStepper.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Mobile Stepper" desc="Use a progress bar or dots when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps)."> + <div> + <MobileSteppers /> + <SourceReader componentName={docSrc + 'MobileSteppers.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Carousel Stepper" desc="This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference."> + <div> + <StepperCarousel /> + <SourceReader componentName={docSrc + 'StepperCarousel.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Steppers; diff --git a/front/odiparpack/app/containers/UiElements/Tabs.js b/front/odiparpack/app/containers/UiElements/Tabs.js new file mode 100644 index 0000000..0782462 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Tabs.js @@ -0,0 +1,120 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + SimpleTabs, + LongTextTabs, + FixedTabs, + CenteredTabs, + IconTabs, + ScrollTabs, + ScrollIconTabs, + DisabledTab, + CustomTabs, + BottomNav +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Tabs extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const { classes } = this.props; + const docSrc = 'containers/UiElements/demos/Tabs/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.root}> + <PapperBlock title="Simple Tabs" desc="A simple example with no frills."> + <div> + <SimpleTabs /> + <SourceReader componentName={docSrc + 'SimpleTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Wrapped Labels" desc="Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible."> + <div> + <LongTextTabs /> + <SourceReader componentName={docSrc + 'LongTextTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Fixed Tabs" desc="Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory."> + <div> + <FixedTabs /> + <SourceReader componentName={docSrc + 'FixedTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Centered" desc="The centered property should be used for larger views."> + <div> + <CenteredTabs /> + <SourceReader componentName={docSrc + 'CenteredTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Icon Tabs" desc="Tab labels may be either all icons or all text."> + <div> + <IconTabs /> + <SourceReader componentName={docSrc + 'IconTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scrollable Tabs" desc="Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)"> + <div> + <ScrollTabs /> + <SourceReader componentName={docSrc + 'ScrollTabs.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Scrollable Icon Tabs" desc=""> + <div> + <ScrollIconTabs /> + <SourceReader componentName={docSrc + 'ScrollIconTabs.js'} /> + </div> + </PapperBlock> + <Grid container spacing={3}> + <Grid item md={6}> + <PapperBlock title="Disabled Tab" desc="Tab may be disabled by setting disabled property."> + <div> + <DisabledTab /> + <SourceReader componentName={docSrc + 'DisabledTab.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={6}> + <PapperBlock title="Customized Tabs" desc="If you have been reading the overrides documentation page but you are not confident jumping in, here's an example of how you can change the main color of the Tabs."> + <div> + <CustomTabs /> + <SourceReader componentName={docSrc + 'CustomTabs.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + <PapperBlock title="Bottom Navigation" desc="Bottom navigation bars make it easy to explore and switch between top-level views in a single tap."> + <div> + <BottomNav /> + <SourceReader componentName={docSrc + 'BottomNav.js'} /> + </div> + </PapperBlock> + </div> + </div> + ); + } +} + +Tabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Tabs); diff --git a/front/odiparpack/app/containers/UiElements/Tags.js b/front/odiparpack/app/containers/UiElements/Tags.js new file mode 100644 index 0000000..e8a5571 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Tags.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { BasicTags, ArrayTags } from './demos'; + +class Tags extends React.Component { + render() { + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Tags/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <PapperBlock title="Basic Tags" desc="Tags represent complex entities in small blocks, such as a contact."> + <div> + <BasicTags /> + <SourceReader componentName={docSrc + 'BasicTags.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Array Tags" desc="An example of rendering multiple Tags from an array of values. "> + <div> + <ArrayTags /> + <SourceReader componentName={docSrc + 'ArrayTags.js'} /> + </div> + </PapperBlock> + </div> + ); + } +} + +export default Tags; diff --git a/front/odiparpack/app/containers/UiElements/Typography.js b/front/odiparpack/app/containers/UiElements/Typography.js new file mode 100644 index 0000000..e1a88ba --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/Typography.js @@ -0,0 +1,92 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + GeneralTypo, + Heading, + ListTypo, + AlignTypo, + ColouredTypo, + QuotesDemo +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Typography extends React.Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - UI Elements'; + const description = brand.desc; + const docSrc = 'containers/UiElements/demos/Typography/'; + return ( + <div> + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="twitter:title" content={title} /> + <meta property="twitter:description" content={description} /> + </Helmet> + <div className={classes.root}> + <Grid container spacing={3}> + <Grid item md={7} xs={12}> + <PapperBlock title="Genereal Typo" desc="The Roboto font will not be automatically loaded by Material-UI. The developer is responsible for loading all fonts used in their application. Roboto Font has a few easy ways to get started."> + <div> + <GeneralTypo /> + <SourceReader componentName={docSrc + 'GeneralTypo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Text Alignment" desc=""> + <div> + <AlignTypo /> + <SourceReader componentName={docSrc + 'AlignTypo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Coloured Text" desc=""> + <div> + <ColouredTypo /> + <SourceReader componentName={docSrc + 'ColouredTypo.js'} /> + </div> + </PapperBlock> + </Grid> + <Grid item md={5} xs={12}> + <PapperBlock title="Fuente - Roboto" desc=""> + <div> + <Heading /> + {/* <SourceReader componentName={docSrc + 'Heading.js'} /> */} + </div> + </PapperBlock> + <PapperBlock title="List" desc=""> + <div> + <ListTypo /> + <SourceReader componentName={docSrc + 'ListTypo.js'} /> + </div> + </PapperBlock> + <PapperBlock title="Quotes" desc=""> + <div> + <QuotesDemo /> + <SourceReader componentName={docSrc + 'QuotesDemo.js'} /> + </div> + </PapperBlock> + </Grid> + </Grid> + </div> + </div> + ); + } +} + +Typography.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Typography); diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js new file mode 100644 index 0000000..87cd84e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js @@ -0,0 +1,97 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + +import { + ExpansionPanel, + ExpansionPanelDetails, + ExpansionPanelSummary, + ExpansionPanelActions, + Typography, + Chip, + Button, + Divider, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + }, + secondaryHeading: { + fontSize: theme.typography.pxToRem(15), + color: theme.palette.text.secondary, + }, + icon: { + verticalAlign: 'bottom', + height: 20, + width: 20, + }, + details: { + alignItems: 'center', + }, + column: { + flexBasis: '33.33%', + }, + helper: { + borderLeft: `2px solid ${theme.palette.divider}`, + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, + }, + link: { + color: theme.palette.secondary.main, + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }, +}); + +function AdvancedAccordion(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <ExpansionPanel defaultExpanded> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <div className={classes.column}> + <Typography className={classes.heading}>Location</Typography> + </div> + <div className={classes.column}> + <Typography className={classes.secondaryHeading}>Select trip destination</Typography> + </div> + </ExpansionPanelSummary> + <ExpansionPanelDetails className={classes.details}> + <div className={classes.column} /> + <div className={classes.column}> + <Chip label="Barbados" className={classes.chip} onDelete={() => {}} /> + </div> + <div className={classNames(classes.column, classes.helper)}> + <Typography variant="caption"> + Select your destination of choice + <br /> + <a href="#sub-labels-and-columns" className={classes.link}> + Learn more + </a> + </Typography> + </div> + </ExpansionPanelDetails> + <Divider /> + <ExpansionPanelActions> + <Button size="small">Cancel</Button> + <Button size="small" color="secondary"> + Save + </Button> + </ExpansionPanelActions> + </ExpansionPanel> + </div> + ); +} + +AdvancedAccordion.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AdvancedAccordion); diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js new file mode 100644 index 0000000..6bcc2c8 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js @@ -0,0 +1,100 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + +import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + flexBasis: '33.33%', + flexShrink: 0, + }, + secondaryHeading: { + fontSize: theme.typography.pxToRem(15), + color: theme.palette.text.secondary, + }, +}); + +class ControlledAccordion extends React.Component { + state = { + expanded: null, + }; + + handleChange = panel => (event, expanded) => { + this.setState({ + expanded: expanded ? panel : false, + }); + }; + + render() { + const { classes } = this.props; + const { expanded } = this.state; + + return ( + <div className={classes.root}> + <ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>General settings</Typography> + <Typography className={classes.secondaryHeading}>I am an expansion panel</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget + maximus est, id dignissim quam. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel2'} onChange={this.handleChange('panel2')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Users</Typography> + <Typography className={classes.secondaryHeading}> + You are currently not an owner + </Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar + diam eros in elit. Pellentesque convallis laoreet laoreet. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel3'} onChange={this.handleChange('panel3')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Advanced settings</Typography> + <Typography className={classes.secondaryHeading}> + Filtering has been entirely disabled for whole web server + </Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel expanded={expanded === 'panel4'} onChange={this.handleChange('panel4')}> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Personal data</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + </div> + ); + } +} + +ControlledAccordion.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ControlledAccordion); diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js new file mode 100644 index 0000000..a88f772 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + +import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + heading: { + fontSize: theme.typography.pxToRem(15), + fontWeight: theme.typography.fontWeightRegular, + }, +}); + +function SimpleAccordion(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <ExpansionPanel> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Expansion Panel 1</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Expansion Panel 2</Typography> + </ExpansionPanelSummary> + <ExpansionPanelDetails> + <Typography> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + </Typography> + </ExpansionPanelDetails> + </ExpansionPanel> + <ExpansionPanel disabled> + <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.heading}>Disabled Expansion Panel</Typography> + </ExpansionPanelSummary> + </ExpansionPanel> + </div> + ); +} + +SimpleAccordion.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleAccordion); diff --git a/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js new file mode 100644 index 0000000..e21391e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js @@ -0,0 +1,112 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import FolderIcon from '@material-ui/icons/Folder'; +import PageviewIcon from '@material-ui/icons/Pageview'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import avatarApi from 'ba-api/avatars'; + +import { pink, green, deepOrange, deepPurple } from '@material-ui/core/colors'; + +import { Typography, Avatar, Grid } from '@material-ui/core'; + +const styles = ({ + row: { + display: 'flex', + justifyContent: 'flex-start', + }, + avatar: { + margin: 10, + }, + bigAvatar: { + width: 60, + height: 60, + }, + pinkAvatar: { + margin: 10, + color: '#fff', + backgroundColor: pink[500], + }, + greenAvatar: { + margin: 10, + color: '#fff', + backgroundColor: green[500], + }, + orangeAvatar: { + margin: 10, + color: '#fff', + backgroundColor: deepOrange[500], + }, + purpleAvatar: { + margin: 10, + color: '#fff', + backgroundColor: deepPurple[500], + }, +}); + +class AvatarsDemo extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Image Avatars</Typography> + <div className={classes.row}> + <Avatar alt="Remy Sharp" src={avatarApi[7]} className={classes.avatar} /> + <Avatar + alt="Adelle Charles" + src={avatarApi[5]} + className={classNames(classes.avatar, classes.bigAvatar)} + /> + </div> + </Grid> + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Icon Avatars</Typography> + <div className={classes.row}> + <Avatar className={classes.avatar}> + <FolderIcon /> + </Avatar> + <Avatar className={classes.pinkAvatar}> + <PageviewIcon /> + </Avatar> + <Avatar className={classes.greenAvatar}> + <AssignmentIcon /> + </Avatar> + </div> + </Grid> + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Icon Avatars</Typography> + <div className={classes.row}> + <Avatar className={classes.avatar}>H</Avatar> + <Avatar className={classes.orangeAvatar}>N</Avatar> + <Avatar className={classes.purpleAvatar}>OP</Avatar> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +AvatarsDemo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AvatarsDemo); diff --git a/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js new file mode 100644 index 0000000..a95b702 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js @@ -0,0 +1,212 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ImageIcon from '@material-ui/icons/Image'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import WorkIcon from '@material-ui/icons/Work'; +import BeachAccessIcon from '@material-ui/icons/BeachAccess'; +import ShareIcon from '@material-ui/icons/Share'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import FaceIcon from '@material-ui/icons/Face'; +import imgApi from 'ba-api/images'; + +import { red, green, amber } from '@material-ui/core/colors'; + +import { + Typography, + Card, + CardHeader, + CardMedia, + CardContent, + CardActions, + IconButton, + Avatar, + List, + ListItem, + ListItemText, + ListItemAvatar, + Grid, + Chip, + Divider, +} from '@material-ui/core'; + +const styles = theme => ({ + row: { + display: 'flex', + justifyContent: 'flex-start', + }, + chip: { + margin: theme.spacing(1), + }, + card: { + maxWidth: 400, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + actions: { + display: 'flex', + }, + expand: { + transform: 'rotate(0deg)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + marginLeft: 'auto', + }, + expandOpen: { + transform: 'rotate(180deg)', + }, + root: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + avatarRed: { + backgroundColor: red[500], + }, + avatarGreen: { + backgroundColor: green[500], + }, + avatarAmber: { + backgroundColor: amber[500], + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +function handleDelete() { + alert('You clicked the delete icon.'); // eslint-disable-line no-alert +} + +function handleClick() { + alert('You clicked the Chip.'); // eslint-disable-line no-alert +} + +class AvatarsDemo extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Avatars in Tag(Chip)</Typography> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={1} + > + <Chip + avatar={<Avatar>MB</Avatar>} + label="Clickable Chip" + onClick={handleClick} + className={classes.chip} + /> + <Chip + avatar={<Avatar src="/images/pp_boy.svg" />} + label="Deletable Chip" + onDelete={handleDelete} + className={classes.chip} + /> + <Chip + avatar={( + <Avatar> + <FaceIcon /> + </Avatar> + )} + label="Clickable Deletable Chip" + onClick={handleClick} + onDelete={handleDelete} + className={classes.chip} + /> + </Grid> + <Divider className={classes.divider} /> + <Typography variant="button" className={classes.divider}>Avatars in List Menu</Typography> + <div className={classes.root}> + <List> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarRed}> + <ImageIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Photos" secondary="Jan 9, 2014" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarGreen}> + <WorkIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Work" secondary="Jan 7, 2014" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarAmber}> + <BeachAccessIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Vacation" secondary="July 20, 2014" /> + </ListItem> + </List> + </div> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Avatars in Social Media</Typography> + <div> + <Card className={classes.card}> + <CardHeader + avatar={ + <Avatar src="/images/pp_girl.svg" /> + } + action={( + <IconButton> + <MoreVertIcon /> + </IconButton> + )} + title="Aliquam nec ex aliquet" + subheader="September 14, 2018" + /> + <CardMedia + className={classes.media} + image={imgApi[7]} + title="Image" + /> + <CardContent> + <Typography component="p"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum. + </Typography> + </CardContent> + <CardActions className={classes.actions}> + <IconButton aria-label="Add to favorites"> + <FavoriteIcon /> + </IconButton> + <IconButton aria-label="Share"> + <ShareIcon /> + </IconButton> + </CardActions> + </Card> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +AvatarsDemo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AvatarsDemo); diff --git a/front/odiparpack/app/containers/UiElements/demos/Badges/CommonBadges.js b/front/odiparpack/app/containers/UiElements/demos/Badges/CommonBadges.js new file mode 100644 index 0000000..b9dca43 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Badges/CommonBadges.js @@ -0,0 +1,121 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { pink, teal } from '@material-ui/core/colors'; + +import { Badge, Typography, Grid, Button } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + alone: { + position: 'relative', + margin: 20 + }, + field: { + margin: '10px', + position: 'relative' + }, + cssRoot: { + '& span': { + backgroundColor: pink[700], + color: theme.palette.getContrastText(pink[500]), + }, + }, +}); + +const theme = createMuiTheme({ + palette: { + primary: teal, + secondary: pink + }, +}); + +class CommonBadges extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={6} + > + <Typography variant="button" className={classes.divider}>Button Badges</Typography> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={3} + > + <div className={classes.field}> + <Badge color="primary" badgeContent={4} className={classes.margin}> + <Button variant="contained">Button</Button> + </Badge> + </div> + <div className={classes.field}> + <Badge color="secondary" badgeContent={4} className={classes.margin}> + <Button variant="contained" color="primary">Button</Button> + </Badge> + </div> + <div className={classes.field}> + <Badge color="primary" badgeContent={4} className={classes.margin}> + <Button variant="contained" color="secondary">Button</Button> + </Badge> + </div> + <div className={classes.field}> + <MuiThemeProvider theme={theme}> + <Badge color="primary" badgeContent={4} className={classes.margin}> + <Button variant="contained" color="secondary">Button</Button> + </Badge> + </MuiThemeProvider> + </div> + </Grid> + </Grid> + <Grid + item + md={6} + > + <Typography variant="button" className={classes.divider}>Text Badges</Typography> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={5} + > + <div className={classes.field}> + <Badge color="primary" badgeContent={4} className={classes.margin}> + <Typography className={classes.padding}>Badge Text</Typography> + </Badge> + </div> + <div className={classes.field}> + <Badge color="secondary" badgeContent={4} className={classes.margin}> + <Typography variant="button" className={classes.padding}>Badges Bold Text</Typography> + </Badge> + </div> + </Grid> + </Grid> + </Grid> + </Fragment> + ); + } +} + +CommonBadges.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CommonBadges); diff --git a/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js b/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js new file mode 100644 index 0000000..8dcc485 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js @@ -0,0 +1,117 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MailIcon from '@material-ui/icons/Mail'; +import { LimitedBadges } from 'ba-components'; + +import { Badge, Typography, Grid, IconButton, AppBar, Tabs, Tab } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + alone: { + position: 'relative', + margin: 20 + }, + field: { + margin: '10px', + position: 'relative' + }, + margin: { + margin: theme.spacing(2), + }, + padding: { + padding: `0 ${theme.spacing(2)}px`, + }, + autoscale: { + '& span': { + width: 'auto', + padding: 2 + } + } +}); + +class CommonBadges extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={3} + > + <Typography variant="button" className={classes.divider}>Icon Badges</Typography> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + > + <div className={classes.field}> + <Badge className={classes.margin} badgeContent={4} color="secondary"> + <MailIcon /> + </Badge> + </div> + <div className={classes.field}> + <IconButton> + <Badge badgeContent={10} color="primary"> + <MailIcon /> + </Badge> + </IconButton> + </div> + <div className={classes.field}> + <LimitedBadges className={classes.margin} value={300} limit={99} color="secondary"> + <MailIcon /> + </LimitedBadges> + </div> + <div className={classNames(classes.padding, classes.autoscale)}> + <IconButton> + <LimitedBadges className={classes.margin} value={3000} limit={999} color="primary"> + <MailIcon /> + </LimitedBadges> + </IconButton> + </div> + </Grid> + </Grid> + <Grid + item + md={7} + > + <Typography variant="button" className={classes.divider}>Tab Badges</Typography> + <AppBar position="static"> + <Tabs value={0}> + <Tab + label={( + <Badge className={classes.padding} color="secondary" badgeContent={4}> + Item One + </Badge> + )} + /> + <Tab label="Item Two" /> + <Tab label="Item Three" /> + </Tabs> + </AppBar> + </Grid> + </Grid> + </Fragment> + ); + } +} + +CommonBadges.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CommonBadges); diff --git a/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js new file mode 100644 index 0000000..786a07b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js @@ -0,0 +1,83 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { BreadCrumb } from 'ba-components'; + +import { Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: '10px', + position: 'relative' + }, +}); + +class ClassicBreadcrumbs extends PureComponent { + render() { + const { classes } = this.props; + const location = { pathname: '/grand-parent/parent/children' }; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={4} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Arrow Separator</Typography> + <div className={classes.field}> + <BreadCrumb theme="dark" separator=" › " location={location} /> + </div> + </Grid> + <Grid + item + md={4} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Slash Separator</Typography> + <div className={classes.field}> + <BreadCrumb theme="dark" separator=" / " location={location} /> + </div> + </Grid> + <Grid + item + md={4} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Greater Than Separator</Typography> + <div className={classes.field}> + <BreadCrumb theme="dark" separator=" > " location={location} /> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ClassicBreadcrumbs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ClassicBreadcrumbs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js new file mode 100644 index 0000000..70effb0 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js @@ -0,0 +1,97 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { BreadCrumb } from 'ba-components'; + +import { Typography, Grid, Paper } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + alone: { + position: 'relative', + margin: 20 + }, + field: { + margin: '10px', + position: 'relative' + }, + paper: { + padding: '5px 10px 1px', + borderRadius: 5 + } +}); + +class ClassicBreadcrumbs extends PureComponent { + render() { + const { classes } = this.props; + const location = { pathname: '/grand-parent/parent/children' }; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={1} + > + <Grid + item + md={6} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Arrow Separator</Typography> + <div className={classes.field}> + <Paper className={classes.paper}> + <BreadCrumb theme="dark" separator=" › " location={location} /> + </Paper> + </div> + </Grid> + <Grid + item + md={6} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Slash Separator</Typography> + <div className={classes.field}> + <Paper className={classes.paper}> + <BreadCrumb theme="dark" separator=" / " location={location} /> + </Paper> + </div> + </Grid> + <Grid + item + md={12} + container + alignItems="center" + justify="center" + direction="column" + > + <Typography variant="button" className={classes.divider}>Greater Than Separator</Typography> + <div className={classes.field}> + <Paper className={classes.paper}> + <BreadCrumb theme="dark" separator=" > " location={location} /> + </Paper> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ClassicBreadcrumbs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ClassicBreadcrumbs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js new file mode 100644 index 0000000..1ddc92b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js @@ -0,0 +1,204 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classnames from 'classnames'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import imgApi from 'ba-api/images'; +import { PlayerCard, VideoCard } from 'ba-components'; +import { red } from '@material-ui/core/colors'; + +import { + Typography, + Grid, + Card, + CardHeader, + CardMedia, + CardContent, + CardActions, + IconButton, + Collapse, + Avatar, +} from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + card: { + display: 'flex', + justifyContent: 'space-between' + }, + details: { + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: '1 0 auto', + }, + cover: { + width: 150, + height: 150, + }, + controls: { + display: 'flex', + alignItems: 'center', + paddingLeft: theme.spacing(1), + paddingBottom: theme.spacing(1), + }, + playIcon: { + height: 38, + width: 38, + }, + cardSocmed: { + maxWidth: 400, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + actions: { + display: 'flex', + }, + expand: { + transform: 'rotate(0deg)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + marginLeft: 'auto', + }, + expandOpen: { + transform: 'rotate(180deg)', + }, + avatar: { + backgroundColor: red[500], + }, +}); + +class ControlCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { classes } = this.props; + + return ( + <Grid + container + alignItems="center" + justify="flex-start" + spacing={2} + > + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>UI Controls</Typography> + <div> + <PlayerCard + title="Live From Space" + artist="Mac Miller" + cover={imgApi[32]} + /> + </div> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Video Thumb</Typography> + <VideoCard + title="Live From Space" + cover={imgApi[42]} + date="September 14, 2016" + /> + </Grid> + <Grid item md={12} container alignItems="center" direction="column"> + <Typography variant="button" className={classes.divider}>Complex Interaction</Typography> + <div> + <Card className={classes.cardSocmed}> + <CardHeader + avatar={( + <Avatar aria-label="Recipe" className={classes.avatar}> + R + </Avatar> + )} + action={( + <IconButton> + <MoreVertIcon /> + </IconButton> + )} + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> + <CardMedia + className={classes.media} + image={imgApi[3]} + title="Contemplative Reptile" + /> + <CardContent> + <Typography component="p"> + This impressive paella is a perfect party dish and a fun meal to cook together with + your guests. Add 1 cup of frozen peas along with the mussels, if you like. + </Typography> + </CardContent> + <CardActions className={classes.actions}> + <IconButton aria-label="Add to favorites"> + <FavoriteIcon /> + </IconButton> + <IconButton aria-label="Share"> + <ShareIcon /> + </IconButton> + <IconButton + className={classnames(classes.expand, { + [classes.expandOpen]: this.state.expanded, + })} + onClick={this.handleExpandClick} + aria-expanded={this.state.expanded} + aria-label="Show more" + > + <ExpandMoreIcon /> + </IconButton> + </CardActions> + <Collapse in={this.state.expanded} timeout="auto" unmountOnExit> + <CardContent> + <Typography paragraph variant="body1"> + Method: + </Typography> + <Typography paragraph> + Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 + minutes. + </Typography> + <Typography paragraph> + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high + heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly + browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving + chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, + salt and pepper, and cook, stirring often until thickened and fragrant, about 10 + minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. + </Typography> + <Typography paragraph> + Add rice and stir very gently to distribute. Top with artichokes and peppers, and + cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes. + Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into + the rice, and cook again without stirring, until mussels have opened and rice is + just tender, 5 to 7 minutes more. (Discard any mussels that don’t open.) + </Typography> + <Typography> + Set aside off of the heat to let rest for 10 minutes, and then serve. + </Typography> + </CardContent> + </Collapse> + </Card> + </div> + </Grid> + </Grid> + ); + } +} + +ControlCard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ControlCard); diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/EcommerceCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/EcommerceCards.js new file mode 100644 index 0000000..6a5a275 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Cards/EcommerceCards.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import { ProductCard } from 'ba-components'; + +import { Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, +}); + +class EcommerceCard extends React.Component { + render() { + const { classes } = this.props; + return ( + <Grid + container + alignItems="flex-start" + justify="center" + direction="row" + spacing={2} + > + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Product Card</Typography> + <ProductCard + thumbnail={imgApi[21]} + name="Lorem ipsum dolor sit amet" + desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante." + ratting={5} + price={30} + /> + </Grid> + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Product with discount</Typography> + <ProductCard + discount="10%" + thumbnail={imgApi[22]} + name="Cras convallis lacus orci" + desc="Phasellus ante massa, aliquam non ante at" + ratting={3} + price={18} + prevPrice={20} + /> + </Grid> + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Sold Out Product</Typography> + <ProductCard + soldout + thumbnail={imgApi[23]} + name="Lorem ipsum dolor sit amet" + desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante." + ratting={4} + price={44} + /> + </Grid> + <Grid item md={12}> + <Typography variant="button" className={classes.divider}>List Mode</Typography> + <ProductCard + discount="10%" + thumbnail={imgApi[24]} + name="Lorem ipsum dolor sit amet" + desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante." + ratting={5} + price={30} + prevPrice={20} + list + /> + </Grid> + <Grid item md={12}> + <ProductCard + thumbnail={imgApi[25]} + name="Lorem ipsum dolor sit amet" + desc="Sed imperdiet enim ligula, vitae viverra justo porta vel. Duis eget felis bibendum, pretium mi sed, placerat ante." + ratting={0} + price={20} + list + /> + </Grid> + </Grid> + ); + } +} + +EcommerceCard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(EcommerceCard); diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/PaperSheet.js b/front/odiparpack/app/containers/UiElements/demos/Cards/PaperSheet.js new file mode 100644 index 0000000..2867e38 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Cards/PaperSheet.js @@ -0,0 +1,34 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: theme.mixins.gutters({ + paddingTop: 16, + paddingBottom: 16, + marginTop: theme.spacing(3), + }), +}); + +function PaperSheet(props) { + const { classes } = props; + return ( + <div> + <Paper className={classes.root} elevation={4}> + <Typography variant="h5" component="h3"> + This is a sheet of paper. + </Typography> + <Typography component="p"> + Paper can be used to build surface or other elements for your application. + </Typography> + </Paper> + </div> + ); +} + +PaperSheet.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PaperSheet); diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js new file mode 100644 index 0000000..7208926 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { ProfileCard, PostCard } from 'ba-components'; + +import { Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, +}); + +class StandardCard extends React.Component { + render() { + const { classes } = this.props; + + return ( + <Grid + container + alignItems="flex-start" + justify="center" + direction="row" + spacing={2} + > + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Profile Card</Typography> + <ProfileCard + cover={imgApi[42]} + avatar={avatarApi[6]} + name="John Doe" + title="UX designer" + connection={10} + btnText="Connect" + isVerified + /> + </Grid> + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Post Card</Typography> + <PostCard + liked={1} + shared={20} + commented={15} + date="Sept, 25 2018" + content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum." + image={imgApi[11]} + avatar={avatarApi[10]} + name="Jim Doe" + /> + </Grid> + <Grid item md={4}> + <Typography variant="button" className={classes.divider}>Post Card (Without Image)</Typography> + <PostCard + liked={90} + shared={10} + commented={22} + date="Sept, 15 2018" + content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum." + avatar={avatarApi[2]} + name="Jane Doe" + /> + </Grid> + </Grid> + ); + } +} + +StandardCard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StandardCard); diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/StandardCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/StandardCards.js new file mode 100644 index 0000000..37fdf39 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Cards/StandardCards.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import dummy from 'ba-api/dummyContents'; +import imgApi from 'ba-api/images'; +import { GeneralCard, NewsCard, Quote, IdentityCard } from 'ba-components'; + +import { Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + card: { + minWidth: 275, + }, + bullet: { + display: 'inline-block', + margin: '0 2px', + transform: 'scale(0.8)', + }, + title: { + marginBottom: 16, + fontSize: 14, + }, + pos: { + marginBottom: 12, + }, + cardMedia: { + maxWidth: 345, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, +}); + +class StandardCard extends React.Component { + render() { + const { classes } = this.props; + const bull = <span className={classes.bullet}>•</span>; + + return ( + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Simple Card</Typography> + <div> + <GeneralCard liked={1} shared={20} commented={15}> + <Typography className={classes.title} color="textSecondary"> + Word of the Day + </Typography> + <Typography variant="h5" component="h2"> + be + {bull} +nev + {bull} +o + {bull} +lent + </Typography> + <Typography className={classes.pos} color="textSecondary"> + adjective + </Typography> + <Typography component="p"> + well meaning and kindly. + <br /> + {'"a benevolent smile"'} + </Typography> + </GeneralCard> + </div> + <Typography variant="button" className={classes.divider}>Media</Typography> + <div> + <NewsCard + image={imgApi[8]} + title="Contemplative Reptile" + > + <Typography gutterBottom variant="h5" component="h2"> + Lorem ipsum + </Typography> + <Typography component="p"> + Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc + </Typography> + </NewsCard> + </div> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Quoted Card</Typography> + <div> + <GeneralCard liked={1} shared={20} commented={15}> + <Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" /> + </GeneralCard> + </div> + <div> + <Typography variant="button" className={classes.divider}>Identity Card</Typography> + <IdentityCard + title="Contact and Address Card" + name={dummy.user.name} + avatar={dummy.user.avatar} + phone="(+8543201213)" + address="Town Hall Building no.45 Block C - ABC Street" + /> + </div> + </Grid> + </Grid> + ); + } +} + +StandardCard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StandardCard); diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js new file mode 100644 index 0000000..68f099a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js @@ -0,0 +1,127 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Grid, + Typography, + Slide, +} from '@material-ui/core'; + +const styles = theme => ({ + title: { + display: 'block', + margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`, + }, +}); + +const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line + return <Slide direction="up" ref={ref} {...props} />; +}); + +class AlertDialog extends React.Component { // eslint-disable-line + state = { + open: false, + openSlide: false, + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleClickOpenSlide = () => { + this.setState({ openSlide: true }); + }; + + handleCloseSlide = () => { + this.setState({ openSlide: false }); + }; + + render() { + const { classes } = this.props; + return ( + <div> + <Grid container spacing={2}> + <Grid item md={6}> + <Typography variant="button" className={classes.title}> + Fade Transition + </Typography> + <Button color="secondary" onClick={this.handleClickOpen}>Open alert dialog</Button> + <Dialog + open={this.state.open} + onClose={this.handleClose} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + <DialogTitle id="alert-dialog-title"> + {"Use Google's location service?"} + </DialogTitle> + <DialogContent> + <DialogContentText id="alert-dialog-description"> + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + </DialogContentText> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose} color="primary"> + Disagree + </Button> + <Button onClick={this.handleClose} color="primary" autoFocus> + Agree + </Button> + </DialogActions> + </Dialog> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.title}> + Slide Transition + </Typography> + <Button onClick={this.handleClickOpenSlide} color="primary">Slide in alert dialog</Button> + <Dialog + open={this.state.openSlide} + TransitionComponent={Transition} + keepMounted + onClose={this.handleCloseSlide} + aria-labelledby="alert-dialog-slide-title" + aria-describedby="alert-dialog-slide-description" + > + <DialogTitle id="alert-dialog-slide-title"> + {"Use Google's location service?"} + </DialogTitle> + <DialogContent> + <DialogContentText id="alert-dialog-slide-description"> + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + </DialogContentText> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose} color="primary"> + Disagree + </Button> + <Button onClick={this.handleClose} color="primary"> + Agree + </Button> + </DialogActions> + </Dialog> + </Grid> + </Grid> + </div> + ); + } +} + +AlertDialog.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AlertDialog); diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js new file mode 100644 index 0000000..1f49788 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Button, + DialogTitle, + DialogContent, + DialogActions, + Dialog, + Radio, + RadioGroup, + FormControlLabel, +} from '@material-ui/core'; + +const options = [ + 'None', + 'Atria', + 'Callisto', + 'Dione', + 'Ganymede', + 'Hangouts Call', + 'Luna', + 'Oberon', + 'Phobos', + 'Pyxis', + 'Sedna', + 'Titania', + 'Triton', + 'Umbriel', +]; + +class ConfirmationDialog extends React.Component { + constructor(props, context) { + super(props, context); + + this.state.value = this.props.value; + } + + state = {}; + + componentWillReceiveProps(nextProps) { + if (nextProps.value !== this.props.value) { + this.setState({ value: nextProps.value }); + } + } + + radioGroup = null; + + handleEntering = () => { + this.radioGroup.focus(); + }; + + handleCancel = () => { + this.props.onClose(this.props.value); + }; + + handleOk = () => { + this.props.onClose(this.state.value); + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { value, ...other } = this.props; + + return ( + <Dialog + disableBackdropClick + disableEscapeKeyDown + maxWidth="xs" + onEntering={this.handleEntering} + aria-labelledby="confirmation-dialog-title" + {...other} + > + <DialogTitle id="confirmation-dialog-title">Phone Ringtone</DialogTitle> + <DialogContent> + <RadioGroup + ref={node => { + this.radioGroup = node; + }} + aria-label="ringtone" + name="ringtone" + value={this.state.value} + onChange={this.handleChange} + > + {options.map(option => ( + <FormControlLabel value={option} key={option} control={<Radio />} label={option} /> + ))} + </RadioGroup> + </DialogContent> + <DialogActions> + <Button onClick={this.handleCancel} color="primary"> + Cancel + </Button> + <Button onClick={this.handleOk} color="primary"> + Ok + </Button> + </DialogActions> + </Dialog> + ); + } +} + +ConfirmationDialog.propTypes = { + onClose: PropTypes.func.isRequired, + value: PropTypes.string.isRequired, +}; + +export default ConfirmationDialog; diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js new file mode 100644 index 0000000..58bf1aa --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js @@ -0,0 +1,65 @@ +import React from 'react'; + +import { + Button, + TextField, + Grid, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, +} from '@material-ui/core'; + +export default class FormDialog extends React.Component { + state = { + open: false, + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + render() { + return ( + <div> + <Grid container justify="center" direction="column"> + <Button variant="contained" color="secondary" onClick={this.handleClickOpen}>Open form dialog</Button> + <Dialog + open={this.state.open} + onClose={this.handleClose} + aria-labelledby="form-dialog-title" + > + <DialogTitle id="form-dialog-title">Subscribe</DialogTitle> + <DialogContent> + <DialogContentText> + To subscribe to this website, please enter your email address here. We will send + updates occasionally. + </DialogContentText> + <TextField + autoFocus + margin="dense" + id="name" + label="Email Address" + type="email" + fullWidth + /> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose} color="primary"> + Cancel + </Button> + <Button onClick={this.handleClose} color="primary"> + Subscribe + </Button> + </DialogActions> + </Dialog> + </Grid> + </div> + ); + } +} diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js new file mode 100644 index 0000000..935ed4d --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js @@ -0,0 +1,134 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CloseIcon from '@material-ui/icons/Close'; + +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + List, + ListItem, + ListItemText, + Divider, + Grid, + AppBar, + Toolbar, + IconButton, + Typography, + Slide, +} from '@material-ui/core'; + +const styles = { + appBar: { + position: 'relative', + }, + flex: { + flex: 1, + }, +}; + +const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line + return <Slide direction="up" ref={ref} {...props} />; +}); + +class FullScreenDialog extends React.Component { // eslint-disable-line + state = { + open: false, + open2: false, + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleClickOpen2 = () => { + this.setState({ open2: true }); + }; + + handleClose2 = () => { + this.setState({ open2: false }); + }; + + render() { + const { classes } = this.props; + return ( + <div> + <Grid container spacing={2}> + <Grid item container alignItems="center" justify="center" md={6}> + <Button variant="contained" color="primary" onClick={this.handleClickOpen}>Open full-screen dialog</Button> + <Dialog + fullScreen + open={this.state.open} + onClose={this.handleClose} + TransitionComponent={Transition} + > + <AppBar className={classes.appBar}> + <Toolbar> + <IconButton color="inherit" onClick={this.handleClose} aria-label="Close"> + <CloseIcon /> + </IconButton> + <Typography variant="h6" color="inherit" className={classes.flex}> + Sound + </Typography> + <Button color="inherit" onClick={this.handleClose}> + save + </Button> + </Toolbar> + </AppBar> + <List> + <ListItem button> + <ListItemText primary="Phone ringtone" secondary="Titania" /> + </ListItem> + <Divider /> + <ListItem button> + <ListItemText primary="Default notification ringtone" secondary="Tethys" /> + </ListItem> + </List> + </Dialog> + </Grid> + <Grid item container alignItems="center" justify="center" md={6}> + <Button variant="contained" color="secondary" onClick={this.handleClickOpen2}>Open responsive dialog</Button> + <Dialog + fullScreen + open={this.state.open2} + onClose={this.handleClose} + aria-labelledby="responsive-dialog-title" + > + <DialogTitle id="responsive-dialog-title"> + {'Use location service?'} + </DialogTitle> + <DialogContent> + <DialogContentText> + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + </DialogContentText> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose2} color="primary"> + Disagree + </Button> + <Button onClick={this.handleClose2} color="primary" autoFocus> + Agree + </Button> + </DialogActions> + </Dialog> + </Grid> + </Grid> + </div> + ); + } +} + +FullScreenDialog.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FullScreenDialog); diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js new file mode 100644 index 0000000..169c5ec --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +import 'ba-styles/vendors/image-lightbox/image-lightbox.css'; +import images from 'ba-api/imgData'; +import { ImageLightbox } from 'ba-components'; + +import { Button, Grid } from '@material-ui/core'; + +export default class ImagePopup extends Component { + constructor(props) { + super(props); + + this.state = { + photoIndex: 0, + isOpen: false, + }; + } + + render() { + const { photoIndex, isOpen } = this.state; + + return ( + <Grid + container + alignItems="center" + justify="center" + direction="column" + > + <Button variant="contained" color="secondary" onClick={() => this.setState({ isOpen: true })}> + Open Image Lightbox + </Button> + + {isOpen && ( + <ImageLightbox + mainSrc={images[photoIndex].img} + nextSrc={images[(photoIndex + 1) % images.length].img} + prevSrc={images[(photoIndex + (images.length - 1)) % images.length].img} + onCloseRequest={() => this.setState({ isOpen: false })} + onMovePrevRequest={() => this.setState({ + photoIndex: (photoIndex + (images.length - 1)) % images.length, + }) + } + onMoveNextRequest={() => this.setState({ + photoIndex: (photoIndex + 1) % images.length, + }) + } + /> + )} + </Grid> + ); + } +} diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ModalDemo.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ModalDemo.js new file mode 100644 index 0000000..c18a5e1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ModalDemo.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Modal, Button, Grid } from '@material-ui/core'; + +function getModalStyle() { + return { + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + }; +} + +const styles = theme => ({ + paper: { + position: 'absolute', + width: theme.spacing(50), + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[5], + padding: theme.spacing(4), + }, +}); + +class ModalDemo extends React.Component { + state = { + open: false, + }; + + handleOpen = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + render() { + const { classes } = this.props; + + return ( + <Grid + container + alignItems="center" + justify="center" + direction="column" + > + <Typography gutterBottom>Click to get the full Modal experience!</Typography> + <Button variant="contained" color="secondary" onClick={this.handleOpen}>Open Modal</Button> + <Modal + aria-labelledby="simple-modal-title" + aria-describedby="simple-modal-description" + open={this.state.open} + onClose={this.handleClose} + > + <div style={getModalStyle()} className={classes.paper}> + <Typography variant="h6" id="modal-title"> + Text in a modal + </Typography> + <Typography variant="subtitle1" id="simple-modal-description"> + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. + </Typography> + </div> + </Modal> + </Grid> + ); + } +} + +ModalDemo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ModalDemo); diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js new file mode 100644 index 0000000..b7f2b74 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js @@ -0,0 +1,93 @@ +import React from 'react'; + +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, +} from '@material-ui/core'; + +class ScrollDialog extends React.Component { + state = { + open: false, + scroll: 'paper', + }; + + handleClickOpen = scroll => () => { + this.setState({ open: true, scroll }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + render() { + return ( + <div> + <Button variant="contained" color="secondary" onClick={this.handleClickOpen('paper')}>scroll=paper</Button> + + <Button variant="contained" color="secondary" onClick={this.handleClickOpen('body')}>scroll=body</Button> + <Dialog + open={this.state.open} + onClose={this.handleClose} + scroll={this.state.scroll} + aria-labelledby="scroll-dialog-title" + > + <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle> + <DialogContent> + <DialogContentText> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum + at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus + sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum + nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur + et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla + sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis + consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla + sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis + consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla + sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis + consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla + sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis + consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla + sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. + </DialogContentText> + </DialogContent> + <DialogActions> + <Button onClick={this.handleClose} color="primary"> + Cancel + </Button> + <Button onClick={this.handleClose} color="primary"> + Subscribe + </Button> + </DialogActions> + </Dialog> + </div> + ); + } +} + +export default ScrollDialog; diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js new file mode 100644 index 0000000..f75b1be --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import PersonIcon from '@material-ui/icons/Person'; +import AddIcon from '@material-ui/icons/Add'; +import { blue } from '@material-ui/core/colors'; + +import { + Button, + Avatar, + List, + ListItem, + ListItemText, + ListItemAvatar, + Dialog, + DialogTitle, + Typography, + Grid, +} from '@material-ui/core'; + +const emails = ['[email protected]', '[email protected]']; +const styles = ({ + avatar: { + backgroundColor: blue[100], + color: blue[600], + }, +}); + +const SimpleDialog = props => { + const { + classes, + onClose, + selectedValue, + ...other + } = props; + + function handleClose() { + props.onClose(this.props.selectedValue); + } + + function handleListItemClick(value) { + props.onClose(value); + } + + return ( + <Dialog onClose={() => handleClose()} aria-labelledby="simple-dialog-title" {...other}> + <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle> + <div> + <List> + {emails.map(email => ( + <ListItem button onClick={() => handleListItemClick(email)} key={email}> + <ListItemAvatar> + <Avatar className={classes.avatar}> + <PersonIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary={email} /> + </ListItem> + ))} + <ListItem button onClick={() => handleListItemClick('addAccount')}> + <ListItemAvatar> + <Avatar> + <AddIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="add account" /> + </ListItem> + </List> + </div> + </Dialog> + ); +}; + +SimpleDialog.propTypes = { + classes: PropTypes.object.isRequired, + onClose: PropTypes.func.isRequired, + selectedValue: PropTypes.string.isRequired, +}; + +const SimpleDialogWrapped = withStyles(styles)(SimpleDialog); + +class SelectDialog extends React.Component { + state = { + open: false, + selectedValue: emails[1], + }; + + handleClickOpen = () => { + this.setState({ + open: true, + }); + }; + + handleClose = value => { + this.setState({ selectedValue: value, open: false }); + }; + + render() { + return ( + <div> + <Grid container justify="center" direction="column"> + <Typography variant="subtitle1"> +Selected: + <strong>{this.state.selectedValue}</strong> + </Typography> + <br /> + <Button variant="contained" color="primary" onClick={this.handleClickOpen}>Open simple dialog</Button> + <SimpleDialogWrapped + selectedValue={this.state.selectedValue} + open={this.state.open} + onClose={this.handleClose} + /> + </Grid> + </div> + ); + } +} + + +export default SelectDialog; diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js new file mode 100644 index 0000000..ff30bd4 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { List, ListItem, ListItemText } from '@material-ui/core'; +import ConfirmationDialog from './ConfirmationDialog'; + + +const styles = theme => ({ + root: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + dialog: { + width: '80%', + maxHeight: 435, + }, +}); + +class SelectRadioDialog extends React.Component { + state = { + open: false, + value: 'Dione', + }; + + button = undefined; + + handleClickListItem = () => { + this.setState({ open: true }); + }; + + handleClose = value => { + this.setState({ value, open: false }); + }; + + render() { + const { classes } = this.props; + return ( + <div className={classes.root}> + <List> + <ListItem + button + aria-haspopup="true" + aria-controls="ringtone-menu" + aria-label="Phone ringtone" + onClick={this.handleClickListItem} + > + <ListItemText primary="Phone ringtone" secondary={this.state.value} /> + </ListItem> + <ConfirmationDialog + classes={{ + paper: classes.dialog, + }} + open={this.state.open} + onClose={this.handleClose} + value={this.state.value} + /> + </List> + </div> + ); + } +} + +SelectRadioDialog.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SelectRadioDialog); diff --git a/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js new file mode 100644 index 0000000..db67c0f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js @@ -0,0 +1,29 @@ +import React, { Fragment, PureComponent } from 'react'; +import Type from 'ba-styles/Typography.scss'; +import { + GradientDivider, + DashDivider, + ShadowDivider, + InsetDivider, +} from 'ba-components/Divider'; + +import { Typography } from '@material-ui/core'; + +class CommonDivider extends PureComponent { + render() { + return ( + <Fragment> + <Typography variant="button" className={Type.textCenter}>Gradient Divider</Typography> + <GradientDivider /> + <Typography variant="button" className={Type.textCenter}>Dash Divider</Typography> + <DashDivider /> + <Typography variant="button" className={Type.textCenter}>Shadow Divider</Typography> + <ShadowDivider /> + <Typography variant="button" className={Type.textCenter}>Inset Divider</Typography> + <InsetDivider /> + </Fragment> + ); + } +} + +export default CommonDivider; diff --git a/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js b/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js new file mode 100644 index 0000000..d857e06 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js @@ -0,0 +1,23 @@ +import React, { Fragment, PureComponent } from 'react'; +import Type from 'ba-styles/Typography.scss'; +import { + FlairedEdgesDivider, + ContentDivider, +} from 'ba-components/Divider'; + +import { Typography } from '@material-ui/core'; + +class CommonDivider extends PureComponent { + render() { + return ( + <Fragment> + <Typography variant="button" className={Type.textCenter}>Flaired Edges Divider</Typography> + <FlairedEdgesDivider /> + <Typography variant="button" className={Type.textCenter}>Content Text Divider</Typography> + <ContentDivider content="OR" /> + </Fragment> + ); + } +} + +export default CommonDivider; diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js new file mode 100644 index 0000000..24039db --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js @@ -0,0 +1,74 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { Button, Menu, MenuItem, MenuList, Grid, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + }, + paper: { + marginRight: theme.spacing(2), + }, + popperClose: { + pointerEvents: 'none', + }, +}); + +class BasicMenu extends React.Component { + state = { + anchorEl: null, + }; + + handleClick = event => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { anchorEl } = this.state; + const { classes } = this.props; + return ( + <Grid container spacing={2}> + <Grid item md={6}> + <Paper className={classes.paper}> + <MenuList> + <MenuItem>Profile</MenuItem> + <MenuItem>My account</MenuItem> + <MenuItem>Logout</MenuItem> + </MenuList> + </Paper> + </Grid> + <Grid item md={6}> + <Button + aria-owns={anchorEl ? 'simple-menu' : null} + aria-haspopup="true" + onClick={this.handleClick} + > + Open Menu + </Button> + <Menu + id="simple-menu" + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={this.handleClose} + > + <MenuItem onClick={this.handleClose}>Profile</MenuItem> + <MenuItem onClick={this.handleClose}>My account</MenuItem> + <MenuItem onClick={this.handleClose}>Logout</MenuItem> + </Menu> + </Grid> + </Grid> + ); + } +} + +BasicMenu.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BasicMenu); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js new file mode 100644 index 0000000..0e5bce7 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js @@ -0,0 +1,148 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; + +import { IconButton, List, ListItem, ListItemText, Menu, MenuItem, Grid } from '@material-ui/core'; + +const styles = { + root: { + width: '100%', + }, +}; + +const options = [ + 'Show some love to Material-UI', + 'Show all notification content', + 'Hide sensitive notification content', + 'Hide all notification content', +]; + +const optionsOpt = [ + 'None', + 'Atria', + 'Callisto', + 'Dione', + 'Ganymede', + 'Hangouts Call', + 'Luna', + 'Oberon', + 'Phobos', + 'Pyxis', + 'Sedna', + 'Titania', + 'Triton', + 'Umbriel', +]; + +const ITEM_HEIGHT = 48; + +class DropdownMenu extends React.Component { + state = { + anchorEl: null, + anchorElOpt: null, + selectedIndex: 1, + }; + + button = undefined; + + handleClickListItem = event => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuItemClick = (event, index) => { + this.setState({ selectedIndex: index, anchorEl: null }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + + render() { + const { classes } = this.props; + const { anchorEl, anchorElOpt } = this.state; + + return ( + <div className={classes.root}> + <Grid container spacing={2}> + <Grid item md={8}> + <List component="nav"> + <ListItem + button + aria-haspopup="true" + aria-controls="lock-menu" + aria-label="When device is locked" + onClick={this.handleClickListItem} + > + <ListItemText + primary="When device is locked" + secondary={options[this.state.selectedIndex]} + /> + </ListItem> + </List> + <Menu + id="lock-menu" + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={this.handleClose} + > + {options.map((option, index) => ( + <MenuItem + key={option} + disabled={index === 0} + selected={index === this.state.selectedIndex} + onClick={event => this.handleMenuItemClick(event, index)} + > + {option} + </MenuItem> + ))} + </Menu> + </Grid> + <Grid item md={4}> + <IconButton + aria-label="More" + aria-owns={anchorEl ? 'long-menu' : null} + aria-haspopup="true" + onClick={this.handleClickOpt} + > + <MoreVertIcon /> + </IconButton> + <Menu + id="long-menu" + anchorEl={anchorElOpt} + open={Boolean(anchorElOpt)} + onClose={this.handleCloseOpt} + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: 200, + }, + }} + > + {optionsOpt.map(option => ( + <MenuItem key={option} selected={option === 'Pyxis'} onClick={this.handleCloseOpt}> + {option} + </MenuItem> + ))} + </Menu> + </Grid> + </Grid> + </div> + ); + } +} + +DropdownMenu.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DropdownMenu); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js new file mode 100644 index 0000000..e8cfbc6 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js @@ -0,0 +1,108 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import Grow from '@material-ui/core/Grow'; +import Fade from '@material-ui/core/Fade'; +import Zoom from '@material-ui/core/Zoom'; +import Grid from '@material-ui/core/Grid'; + + +class MenuTransition extends React.Component { + state = { + anchorFade: null, + anchorGrow: null, + anchorCollapse: null, + anchorZoom: null, + }; + + handleClick = (event, type) => { + this.setState({ [type]: event.currentTarget }); + }; + + handleClose = type => { + this.setState({ [type]: null }); + }; + + handleToggle = type => { + // eslint-disable-next-line + this.setState({ [type]: !this.state[type] }); + }; + + render() { + const { + anchorFade, + anchorGrow, + anchorZoom + } = this.state; + + return ( + <Grid container spacing={2}> + <Grid item md={4}> + <Button + aria-owns={anchorFade ? 'fade-menu' : null} + aria-haspopup="true" + onClick={(e) => this.handleClick(e, 'anchorFade')} + > + Open with fade transition + </Button> + <Menu + id="fade-menu" + anchorEl={anchorFade} + open={Boolean(anchorFade)} + onClose={() => this.handleClose('anchorFade')} + TransitionComponent={Fade} + > + <MenuItem onClick={() => this.handleClose('anchorFade')}>Profile</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorFade')}>My account</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorFade')}>Logout</MenuItem> + </Menu> + </Grid> + <Grid item md={4}> + <Button + aria-owns={anchorGrow ? 'grow-menu' : null} + aria-haspopup="true" + onClick={(e) => this.handleClick(e, 'anchorGrow')} + > + Open with grow transition + </Button> + <Menu + id="grow-menu" + anchorEl={anchorGrow} + open={Boolean(anchorGrow)} + onClose={() => this.handleClose('anchorGrow')} + TransitionComponent={Grow} + > + <MenuItem onClick={() => this.handleClose('anchorGrow')}>Profile</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorGrow')}>My account</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorGrow')}>Logout</MenuItem> + </Menu> + </Grid> + <Grid item md={4}> + <div style={{ position: 'relative' }}> + <Button + aria-owns={anchorZoom ? 'zoom-menu' : null} + aria-haspopup="true" + onClick={(e) => this.handleClick(e, 'anchorZoom')} + > + Open with zoom transition + </Button> + <Menu + id="zoom-menu" + anchorEl={anchorZoom} + open={Boolean(anchorZoom)} + onClose={() => this.handleClose('anchorZoom')} + TransitionComponent={Zoom} + > + <MenuItem onClick={() => this.handleClose('anchorZoom')}>Profile</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorZoom')}>My account</MenuItem> + <MenuItem onClick={() => this.handleClose('anchorZoom')}>Logout</MenuItem> + </Menu> + </div> + </Grid> + </Grid> + ); + } +} + +export default MenuTransition; diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js new file mode 100644 index 0000000..4a07e14 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js @@ -0,0 +1,235 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { + Drawer, + AppBar, + Toolbar, + List, + Typography, + MenuItem, + Divider, + TextField, + IconButton, +} from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + appFrame: { + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + width: '100%', + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + padding: '0 24px', + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + 'appBarShift-left': { + marginLeft: drawerWidth, + }, + 'appBarShift-right': { + marginRight: drawerWidth, + }, + menuButton: { + marginLeft: 3, + marginRight: 3, + }, + hide: { + display: 'none', + }, + drawerPaper: { + position: 'relative', + whiteSpace: 'nowrap', + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + overflowX: 'hidden', + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + width: theme.spacing(7), + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9), + }, + }, + toolbar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, + 'content-left': { + marginLeft: -drawerWidth, + }, + 'content-right': { + marginRight: -drawerWidth, + }, + contentShift: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + 'contentShift-left': { + marginLeft: 0, + }, + 'contentShift-right': { + marginRight: 0, + }, + title: { + flex: 1, + } +}); + +class MiniDrawer extends React.Component { + state = { + open: false, + anchor: 'left', + }; + + handleDrawerOpen = () => { + this.setState({ open: true }); + }; + + handleDrawerClose = () => { + this.setState({ open: false }); + }; + + handleChangeAnchor = event => { + this.setState({ + anchor: event.target.value, + }); + }; + + render() { + const { classes, theme } = this.props; + const { anchor, open } = this.state; + const drawer = ( + <Drawer + variant="permanent" + classes={{ + paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose), + }} + open={open} + > + <div className={classes.toolbar}> + <IconButton onClick={this.handleDrawerClose}> + {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} + </IconButton> + </div> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </Drawer> + ); + + const menuBtn = ( + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerOpen} + className={classNames(classes.menuButton, open && classes.hide)} + > + <MenuIcon /> + </IconButton> + ); + + let before = null; + let after = null; + let beforeBtn = null; + let afterBtn = null; + + if (anchor === 'left') { + before = drawer; + beforeBtn = menuBtn; + } else { + after = drawer; + afterBtn = menuBtn; + } + + return ( + <div className={classes.root}> + <TextField + id="persistent-anchor" + select + label="Anchor" + value={anchor} + onChange={this.handleChangeAnchor} + margin="normal" + > + <MenuItem value="left">left</MenuItem> + <MenuItem value="right">right</MenuItem> + </TextField> + <div className={classes.appFrame}> + <AppBar + position="absolute" + className={classNames(classes.appBar, { + [classes.appBarShift]: open, + [classes[`appBarShift-${anchor}`]]: open, + })} + > + <Toolbar disableGutters> + {beforeBtn} + <Typography className={classes.title} variant="h6" color="inherit" noWrap> + Mini variant drawer + </Typography> + {afterBtn} + </Toolbar> + </AppBar> + {before} + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography noWrap> + {'You think water moves fast? You should see ice.'} + </Typography> + </main> + {after} + </div> + </div> + ); + } +} + +MiniDrawer.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(MiniDrawer); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js new file mode 100644 index 0000000..9538873 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js @@ -0,0 +1,126 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import { Drawer, AppBar, Toolbar, List, MenuItem, TextField, Typography, Divider } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + appFrame: { + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + width: '100%', + }, + appBar: { + width: `calc(100% - ${drawerWidth}px)`, + }, + 'appBar-left': { + marginLeft: drawerWidth, + }, + 'appBar-right': { + marginRight: drawerWidth, + }, + drawerPaper: { + position: 'relative', + width: drawerWidth, + }, + toolbar: theme.mixins.toolbar, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + }, +}); + +class PermanentDrawer extends React.Component { + state = { + anchor: 'left', + }; + + handleChange = event => { + this.setState({ + anchor: event.target.value, + }); + }; + + render() { + const { classes } = this.props; + const { anchor } = this.state; + + const drawer = ( + <Drawer + variant="permanent" + classes={{ + paper: classes.drawerPaper, + }} + anchor={anchor} + > + <div className={classes.toolbar} /> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </Drawer> + ); + + let before = null; + let after = null; + + if (anchor === 'left') { + before = drawer; + } else { + after = drawer; + } + + return ( + <div className={classes.root}> + <TextField + id="permanent-anchor" + select + label="Anchor" + value={anchor} + onChange={this.handleChange} + margin="normal" + > + <MenuItem value="left">left</MenuItem> + <MenuItem value="right">right</MenuItem> + </TextField> + <div className={classes.appFrame}> + <AppBar + position="absolute" + className={classNames(classes.appBar, classes[`appBar-${anchor}`])} + > + <Toolbar> + <Typography variant="h6" color="inherit" noWrap> + Permanent drawer + </Typography> + </Toolbar> + </AppBar> + {before} + <main className={classes.content}> + <div className={classes.toolbar} /> + <Typography> + {'You think water moves fast? You should see ice.'} + </Typography> + </main> + {after} + </div> + </div> + ); + } +} + +PermanentDrawer.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PermanentDrawer); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js new file mode 100644 index 0000000..cd529d5 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js @@ -0,0 +1,228 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import MenuIcon from '@material-ui/icons/Menu'; +import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; +import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import { + Drawer, + AppBar, + Toolbar, + List, + MenuItem, + Typography, + TextField, + Divider, + IconButton, +} from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const drawerWidth = 240; + +const styles = theme => ({ + root: { + flexGrow: 1, + }, + appFrame: { + height: 430, + zIndex: 1, + overflow: 'hidden', + position: 'relative', + display: 'flex', + width: '100%', + }, + appBar: { + position: 'absolute', + padding: '0 24px', + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + 'appBarShift-left': { + marginLeft: drawerWidth, + }, + 'appBarShift-right': { + marginRight: drawerWidth, + }, + menuButton: { + marginLeft: 3, + marginRight: 3, + }, + hide: { + display: 'none', + }, + drawerPaper: { + position: 'relative', + width: drawerWidth, + }, + drawerHeader: { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, + }, + content: { + flexGrow: 1, + backgroundColor: theme.palette.background.default, + padding: theme.spacing(3), + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + 'content-left': { + marginLeft: -drawerWidth, + }, + 'content-right': { + marginRight: -drawerWidth, + }, + contentShift: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + 'contentShift-left': { + marginLeft: 0, + }, + 'contentShift-right': { + marginRight: 0, + }, + title: { + flex: 1, + } +}); + +class PersistentDrawer extends React.Component { + state = { + open: false, + anchor: 'left', + }; + + handleDrawerOpen = () => { + this.setState({ open: true }); + }; + + handleDrawerClose = () => { + this.setState({ open: false }); + }; + + handleChangeAnchor = event => { + this.setState({ + anchor: event.target.value, + }); + }; + + render() { + const { classes, theme } = this.props; + const { anchor, open } = this.state; + + const drawer = ( + <Drawer + variant="persistent" + anchor={anchor} + open={open} + classes={{ + paper: classes.drawerPaper, + }} + > + <div className={classes.drawerHeader}> + <IconButton onClick={this.handleDrawerClose}> + {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} + </IconButton> + </div> + <Divider /> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </Drawer> + ); + + const menuBtn = ( + <IconButton + color="inherit" + aria-label="open drawer" + onClick={this.handleDrawerOpen} + className={classNames(classes.menuButton, open && classes.hide)} + > + <MenuIcon /> + </IconButton> + ); + + let before = null; + let after = null; + let beforeBtn = null; + let afterBtn = null; + + if (anchor === 'left') { + before = drawer; + beforeBtn = menuBtn; + } else { + after = drawer; + afterBtn = menuBtn; + } + + return ( + <div className={classes.root}> + <TextField + id="persistent-anchor" + select + label="Anchor" + value={anchor} + onChange={this.handleChangeAnchor} + margin="normal" + > + <MenuItem value="left">left</MenuItem> + <MenuItem value="right">right</MenuItem> + </TextField> + <div className={classes.appFrame}> + <AppBar + className={classNames(classes.appBar, { + [classes.appBarShift]: open, + [classes[`appBarShift-${anchor}`]]: open, + })} + > + <Toolbar disableGutters> + {beforeBtn} + <Typography className={classes.title} variant="h6" color="inherit" noWrap> + Persistent drawer + </Typography> + {afterBtn} + </Toolbar> + </AppBar> + {before} + <main + className={classNames(classes.content, classes[`content-${anchor}`], { + [classes.contentShift]: open, + [classes[`contentShift-${anchor}`]]: open, + })} + > + <div className={classes.drawerHeader} /> + <Typography> + {'You think water moves fast? You should see ice.'} + </Typography> + </main> + {after} + </div> + </div> + ); + } +} + +PersistentDrawer.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(PersistentDrawer); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js new file mode 100644 index 0000000..ed6ac4a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import InboxIcon from '@material-ui/icons/MoveToInbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; +import SendIcon from '@material-ui/icons/Send'; + +import { MenuList, MenuItem, Paper, ListItemIcon, ListItemText } from '@material-ui/core'; + +const styles = theme => ({ + menu: { + maxWidth: 400, + margin: '20 auto' + }, + menuItem: { + '&:focus': { + backgroundColor: theme.palette.primary.main, + '& $primary, & $icon': { + color: theme.palette.common.white, + }, + }, + }, + primary: {}, + icon: {}, +}); + +function StyledMenu(props) { + const { classes } = props; + + return ( + <Paper className={classes.menu}> + <MenuList> + <MenuItem className={classes.menuItem}> + <ListItemIcon className={classes.icon}> + <SendIcon /> + </ListItemIcon> + <ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Sent mail" /> + </MenuItem> + <MenuItem className={classes.menuItem}> + <ListItemIcon className={classes.icon}> + <DraftsIcon /> + </ListItemIcon> + <ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Drafts" /> + </MenuItem> + <MenuItem className={classes.menuItem}> + <ListItemIcon className={classes.icon}> + <InboxIcon /> + </ListItemIcon> + <ListItemText classes={{ primary: classes.primary }} variant="inset" primary="Inbox" /> + </MenuItem> + </MenuList> + </Paper> + ); +} + +StyledMenu.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StyledMenu); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/SwipeDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/SwipeDrawer.js new file mode 100644 index 0000000..a91feb5 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/SwipeDrawer.js @@ -0,0 +1,124 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SwipeableDrawer, Button, List, Divider, Grid } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const styles = { + list: { + width: 250, + }, + fullList: { + width: 'auto', + }, +}; + +class SwipeDrawer extends React.Component { + state = { + top: false, + left: false, + bottom: false, + right: false, + }; + + toggleDrawer = (side, open) => () => { + this.setState({ + [side]: open, + }); + }; + + render() { + const { classes } = this.props; + + const sideList = ( + <div className={classes.list}> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + + const fullList = ( + <div className={classes.fullList}> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + + return ( + <Grid container justify="center" direction="row"> + <Button onClick={this.toggleDrawer('left', true)}>Open Left</Button> + <Button onClick={this.toggleDrawer('right', true)}>Open Right</Button> + <Button onClick={this.toggleDrawer('top', true)}>Open Top</Button> + <Button onClick={this.toggleDrawer('bottom', true)}>Open Bottom</Button> + <SwipeableDrawer + open={this.state.left} + onClose={this.toggleDrawer('left', false)} + onOpen={this.toggleDrawer('left', true)} + > + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('left', false)} + onKeyDown={this.toggleDrawer('left', false)} + > + {sideList} + </div> + </SwipeableDrawer> + <SwipeableDrawer + anchor="top" + open={this.state.top} + onClose={this.toggleDrawer('top', false)} + onOpen={this.toggleDrawer('top', true)} + > + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('top', false)} + onKeyDown={this.toggleDrawer('top', false)} + > + {fullList} + </div> + </SwipeableDrawer> + <SwipeableDrawer + anchor="bottom" + open={this.state.bottom} + onClose={this.toggleDrawer('bottom', false)} + onOpen={this.toggleDrawer('bottom', true)} + > + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('bottom', false)} + onKeyDown={this.toggleDrawer('bottom', false)} + > + {fullList} + </div> + </SwipeableDrawer> + <SwipeableDrawer + anchor="right" + open={this.state.right} + onClose={this.toggleDrawer('right', false)} + onOpen={this.toggleDrawer('right', true)} + > + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('right', false)} + onKeyDown={this.toggleDrawer('right', false)} + > + {sideList} + </div> + </SwipeableDrawer> + </Grid> + ); + } +} + +SwipeDrawer.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SwipeDrawer); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js new file mode 100644 index 0000000..6af2a24 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js @@ -0,0 +1,109 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Drawer, Button, List, Divider, Grid } from '@material-ui/core'; +import { mailFolderListItems, otherMailFolderListItems } from './menuData'; + + +const styles = { + list: { + width: 250, + }, + fullList: { + width: 'auto', + }, +}; + +class TemporaryDrawer extends React.Component { + state = { + top: false, + left: false, + bottom: false, + right: false, + }; + + toggleDrawer = (side, open) => () => { + this.setState({ + [side]: open, + }); + }; + + render() { + const { classes } = this.props; + + const sideList = ( + <div className={classes.list}> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + + const fullList = ( + <div className={classes.fullList}> + <List>{mailFolderListItems}</List> + <Divider /> + <List>{otherMailFolderListItems}</List> + </div> + ); + + return ( + <Grid container justify="center" direction="row"> + <Button onClick={this.toggleDrawer('left', true)}>Open Left</Button> + <Button onClick={this.toggleDrawer('right', true)}>Open Right</Button> + <Button onClick={this.toggleDrawer('top', true)}>Open Top</Button> + <Button onClick={this.toggleDrawer('bottom', true)}>Open Bottom</Button> + <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}> + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('left', false)} + onKeyDown={this.toggleDrawer('left', false)} + > + {sideList} + </div> + </Drawer> + <Drawer anchor="top" open={this.state.top} onClose={this.toggleDrawer('top', false)}> + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('top', false)} + onKeyDown={this.toggleDrawer('top', false)} + > + {fullList} + </div> + </Drawer> + <Drawer + anchor="bottom" + open={this.state.bottom} + onClose={this.toggleDrawer('bottom', false)} + > + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('bottom', false)} + onKeyDown={this.toggleDrawer('bottom', false)} + > + {fullList} + </div> + </Drawer> + <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}> + <div + tabIndex={0} + role="button" + onClick={this.toggleDrawer('right', false)} + onKeyDown={this.toggleDrawer('right', false)} + > + {sideList} + </div> + </Drawer> + </Grid> + ); + } +} + +TemporaryDrawer.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TemporaryDrawer); diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js new file mode 100644 index 0000000..cd2d653 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js @@ -0,0 +1,64 @@ +// This file is shared across the demos. + +import React from 'react'; +import InboxIcon from '@material-ui/icons/MoveToInbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; +import StarIcon from '@material-ui/icons/Star'; +import SendIcon from '@material-ui/icons/Send'; +import MailIcon from '@material-ui/icons/Mail'; +import DeleteIcon from '@material-ui/icons/Delete'; +import ReportIcon from '@material-ui/icons/Report'; + +import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'; + +export const mailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <InboxIcon /> + </ListItemIcon> + <ListItemText primary="Inbox" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <StarIcon /> + </ListItemIcon> + <ListItemText primary="Starred" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <SendIcon /> + </ListItemIcon> + <ListItemText primary="Send mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DraftsIcon /> + </ListItemIcon> + <ListItemText primary="Drafts" /> + </ListItem> + </div> +); + +export const otherMailFolderListItems = ( + <div> + <ListItem button> + <ListItemIcon> + <MailIcon /> + </ListItemIcon> + <ListItemText primary="All mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DeleteIcon /> + </ListItemIcon> + <ListItemText primary="Trash" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <ReportIcon /> + </ListItemIcon> + <ListItemText primary="Spam" /> + </ListItem> + </div> +); diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js new file mode 100644 index 0000000..5d11f0d --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js @@ -0,0 +1,85 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import StarBorderIcon from '@material-ui/icons/StarBorder'; +import imgData from 'ba-api/imgData'; + +import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + width: 500, + height: 450, + // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. + transform: 'translateZ(0)', + }, + titleBar: { + background: + 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' + + 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', + }, + icon: { + color: 'white', + }, + img: { + maxWidth: 'none' + } +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const tileData = [ + * { + * img: image, + * title: 'Image', + * author: 'author', + * featured: true, + * }, + * { + * [etc...] + * }, + * ]; + */ +function AdvancedGridList(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <GridList cellHeight={200} spacing={1} className={classes.gridList}> + {imgData.map((tile, index) => ( + <GridListTile key={index.toString()} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}> + <img src={tile.img} className={classes.img} alt={tile.title} /> + <GridListTileBar + title={tile.title} + titlePosition="top" + actionIcon={( + <IconButton className={classes.icon}> + <StarBorderIcon /> + </IconButton> + )} + actionPosition="left" + className={classes.titleBar} + /> + </GridListTile> + ))} + </GridList> + </div> + ); +} + +AdvancedGridList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AdvancedGridList); diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js new file mode 100644 index 0000000..ce785ac --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgData from 'ba-api/imgData'; + +import { GridList, GridListTile } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + width: 500, + height: 450, + }, + subheader: { + width: '100%', + }, + img: { + maxWidth: 'none' + } +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const tileData = [ + * { + * img: image, + * title: 'Image', + * author: 'author', + * cols: 2, + * }, + * { + * [etc...] + * }, + * ]; + */ +function ImageGridList(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <GridList cellHeight={160} className={classes.gridList} cols={3}> + {imgData.map((tile, index) => ( + <GridListTile key={index.toString()} cols={tile.cols || 1}> + <img src={tile.img} className={classes.img} alt={tile.title} /> + </GridListTile> + ))} + </GridList> + </div> + ); +} + +ImageGridList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ImageGridList); diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js new file mode 100644 index 0000000..ac30e6f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import StarBorderIcon from '@material-ui/icons/StarBorder'; +import imgData from 'ba-api/imgData'; + +import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + flexWrap: 'nowrap', + // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. + transform: 'translateZ(0)', + }, + title: { + color: theme.palette.primary.light, + }, + titleBar: { + background: + 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', + }, + img: { + maxWidth: 'none' + } +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const tileData = [ + * { + * img: image, + * title: 'Image', + * author: 'author', + * }, + * { + * [etc...] + * }, + * ]; + */ +function SingleLineGridList(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <GridList className={classes.gridList} cols={2.5}> + {imgData.map((tile, index) => ( + <GridListTile key={index.toString()}> + <img src={tile.img} alt={tile.title} className={classes.img} /> + <GridListTileBar + title={tile.title} + classes={{ + root: classes.titleBar, + title: classes.title, + }} + actionIcon={( + <IconButton> + <StarBorderIcon className={classes.title} /> + </IconButton> + )} + /> + </GridListTile> + ))} + </GridList> + </div> + ); +} + +SingleLineGridList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SingleLineGridList); diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js new file mode 100644 index 0000000..41f8d1a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js @@ -0,0 +1,89 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import InfoIcon from '@material-ui/icons/Info'; +import imgData from 'ba-api/imgData'; + +import { + GridList, + GridListTile, + GridListTileBar, + ListSubheader as Subheader, + IconButton, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + width: 500, + height: 450, + }, + icon: { + color: 'rgba(255, 255, 255, 0.54)', + }, + img: { + maxWidth: 'none' + } +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const tileData = [ + * { + * img: image, + * title: 'Image', + * author: 'author', + * }, + * { + * [etc...] + * }, + * ]; + */ +function TitlebarGridList(props) { + const { classes } = props; + + return ( + <div className={classes.root}> + <GridList cellHeight={180} className={classes.gridList}> + <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}> + <Subheader component="div">December</Subheader> + </GridListTile> + {imgData.map((tile, index) => ( + <GridListTile key={index.toString()}> + <img src={tile.img} className={classes.img} alt={tile.title} /> + <GridListTileBar + title={tile.title} + subtitle={( + <span> +by: + {tile.author} + </span> + )} + actionIcon={( + <IconButton className={classes.icon}> + <InfoIcon /> + </IconButton> + )} + /> + </GridListTile> + ))} + </GridList> + </div> + ); +} + +TitlebarGridList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TitlebarGridList); diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js b/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js new file mode 100644 index 0000000..ba4f13a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js @@ -0,0 +1,116 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +// import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import ImageIcon from '@material-ui/icons/Image'; +import WorkIcon from '@material-ui/icons/Work'; +import BeachAccessIcon from '@material-ui/icons/BeachAccess'; + +import { red, green, amber } from '@material-ui/core/colors'; + +import { + Typography, Grid, List, + ListItem, ListItemText, ListItemAvatar, + Avatar, Divider +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + maxWidth: '360px', + backgroundColor: theme.palette.background.paper, + margin: 10 + }, + avatarRed: { + backgroundColor: red[500], + }, + avatarGreen: { + backgroundColor: green[500], + }, + avatarAmber: { + backgroundColor: amber[500], + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class ListBasic extends PureComponent { + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Simple List Divider</Typography> + <div className={classes.root}> + <List component="nav"> + <ListItem button> + <ListItemText primary="Inbox" /> + </ListItem> + <Divider /> + <ListItem button divider> + <ListItemText primary="Drafts" /> + </ListItem> + <ListItem button> + <ListItemText primary="Trash" /> + </ListItem> + <Divider light /> + <ListItem button> + <ListItemText primary="Spam" /> + </ListItem> + </List> + </div> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Inset Divider</Typography> + <div className={classes.root}> + <List> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarRed}> + <ImageIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Photos" secondary="Jan 9, 2014" /> + </ListItem> + <li> + <Divider variant="inset" /> + </li> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarGreen}> + <WorkIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Work" secondary="Jan 7, 2014" /> + </ListItem> + <Divider variant="inset" component="li" /> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarAmber}> + <BeachAccessIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Vacation" secondary="July 20, 2014" /> + </ListItem> + </List> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ListBasic.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ListBasic); diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListControl.js b/front/odiparpack/app/containers/UiElements/demos/List/ListControl.js new file mode 100644 index 0000000..2743d4b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/List/ListControl.js @@ -0,0 +1,159 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CommentIcon from '@material-ui/icons/Comment'; +import WifiIcon from '@material-ui/icons/Wifi'; +import BluetoothIcon from '@material-ui/icons/Bluetooth'; + +import { + List, + ListItem, + ListItemIcon, + ListItemSecondaryAction, + ListItemText, + ListSubheader, + ListItemAvatar, + Checkbox, + Switch, + IconButton, + Grid, + Typography, + Avatar, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + margin: 10 + }, +}); + +class ListControl extends React.Component { + state = { + checked: [0], + checked2: [1], + checked3: ['wifi'], + }; + + handleToggle = value => () => { + const { checked } = this.state; + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + + this.setState({ + checked: newChecked, + checked2: newChecked, + checked3: newChecked, + }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={4} xs={12}> + <Typography variant="button" className={classes.divider}>Checkbox</Typography> + <div className={classes.root}> + <List> + {[0, 1, 2, 3].map(value => ( + <ListItem + key={value} + role={undefined} + dense + button + onClick={this.handleToggle(value)} + className={classes.listItem} + > + <Checkbox + checked={this.state.checked.indexOf(value) !== -1} + tabIndex={-1} + disableRipple + /> + <ListItemText primary={`Line item ${value + 1}`} /> + <ListItemSecondaryAction> + <IconButton aria-label="Comments"> + <CommentIcon /> + </IconButton> + </ListItemSecondaryAction> + </ListItem> + ))} + </List> + </div> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button" className={classes.divider}>Checkbox</Typography> + <div className={classes.root}> + <List> + {[0, 1, 2, 3].map(value => ( + <ListItem key={value} dense button className={classes.listItem}> + <ListItemAvatar> + <Avatar alt="Remy Sharp" src="/images/pp_boy.svg" /> + </ListItemAvatar> + <ListItemText primary={`Line item ${value + 1}`} /> + <ListItemSecondaryAction> + <Checkbox + onChange={this.handleToggle(value)} + checked={this.state.checked2.indexOf(value) !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + ))} + </List> + </div> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button" className={classes.divider}>Switch</Typography> + <div className={classes.root}> + <List subheader={<ListSubheader>Settings</ListSubheader>}> + <ListItem> + <ListItemIcon> + <WifiIcon /> + </ListItemIcon> + <ListItemText primary="Wi-Fi" /> + <ListItemSecondaryAction> + <Switch + onChange={this.handleToggle('wifi')} + checked={this.state.checked3.indexOf('wifi') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + <ListItem> + <ListItemIcon> + <BluetoothIcon /> + </ListItemIcon> + <ListItemText primary="Bluetooth" /> + <ListItemSecondaryAction> + <Switch + onChange={this.handleToggle('bluetooth')} + checked={this.state.checked3.indexOf('bluetooth') !== -1} + /> + </ListItemSecondaryAction> + </ListItem> + </List> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ListControl.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ListControl); diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js b/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js new file mode 100644 index 0000000..f8d3fa8 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js @@ -0,0 +1,183 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FolderIcon from '@material-ui/icons/Folder'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { cyan } from '@material-ui/core/colors'; + +import { + List, + ListItem, + ListItemAvatar, + ListItemIcon, + ListItemSecondaryAction, + ListItemText, + Avatar, + IconButton, + FormGroup, + FormControlLabel, + Checkbox, + Grid, + Typography, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + maxWidth: 752, + }, + demo: { + backgroundColor: theme.palette.background.paper, + }, + title: { + margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`, + }, + iconCyan: { + color: cyan[300] + }, + avatarCyan: { + background: cyan[300] + } +}); + +function generate(element) { + return [0, 1, 2].map(value => React.cloneElement(element, { + key: value, + }), + ); +} + +class ListInteractive extends React.Component { + state = { + dense: false, + secondary: false, + }; + + render() { + const { classes } = this.props; + const { dense, secondary } = this.state; + + return ( + <div className={classes.root}> + <FormGroup row> + <FormControlLabel + control={( + <Checkbox + checked={dense} + onChange={(event, checked) => this.setState({ dense: checked })} + value="dense" + /> + )} + label="Enable dense" + /> + <FormControlLabel + control={( + <Checkbox + checked={secondary} + onChange={(event, checked) => this.setState({ secondary: checked })} + value="secondary" + /> + )} + label="Enable secondary text" + /> + </FormGroup> + <Grid container spacing={2}> + <Grid item xs={12} md={6}> + <Typography variant="button" className={classes.title}> + Text only + </Typography> + <div className={classes.demo}> + <List dense={dense}> + {generate( + <ListItem> + <ListItemText + primary="Single-line item" + secondary={secondary ? 'Secondary text' : null} + /> + </ListItem>, + )} + </List> + </div> + </Grid> + <Grid item xs={12} md={6}> + <Typography variant="button" className={classes.title}> + Icon with text + </Typography> + <div className={classes.demo}> + <List dense={dense}> + {generate( + <ListItem> + <ListItemIcon> + <FolderIcon className={classes.iconCyan} /> + </ListItemIcon> + <ListItemText + primary="Single-line item" + secondary={secondary ? 'Secondary text' : null} + /> + </ListItem>, + )} + </List> + </div> + </Grid> + </Grid> + <Grid container spacing={2}> + <Grid item xs={12} md={6}> + <Typography variant="button" className={classes.title}> + Avatar with text + </Typography> + <div className={classes.demo}> + <List dense={dense}> + {generate( + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarCyan}> + <FolderIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText + primary="Single-line item" + secondary={secondary ? 'Secondary text' : null} + /> + </ListItem>, + )} + </List> + </div> + </Grid> + <Grid item xs={12} md={6}> + <Typography variant="button" className={classes.title}> + Avatar with text and icon + </Typography> + <div className={classes.demo}> + <List dense={dense}> + {generate( + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarCyan}> + <FolderIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText + primary="Single-line item" + secondary={secondary ? 'Secondary text' : null} + /> + <ListItemSecondaryAction> + <IconButton aria-label="Delete"> + <DeleteIcon /> + </IconButton> + </ListItemSecondaryAction> + </ListItem>, + )} + </List> + </div> + </Grid> + </Grid> + </div> + ); + } +} + +ListInteractive.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ListInteractive); diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js b/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js new file mode 100644 index 0000000..f796f76 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js @@ -0,0 +1,204 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import StarIcon from '@material-ui/icons/Star'; +import ImageIcon from '@material-ui/icons/Image'; +import WorkIcon from '@material-ui/icons/Work'; +import BeachAccessIcon from '@material-ui/icons/BeachAccess'; +import InboxIcon from '@material-ui/icons/Inbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; +import SendIcon from '@material-ui/icons/Send'; +import ExpandLess from '@material-ui/icons/ExpandLess'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import StarBorder from '@material-ui/icons/StarBorder'; +import { red, green, amber, lightBlue, pink, teal } from '@material-ui/core/colors'; + +import { + Typography, + Grid, + List, + ListItem, + ListItemIcon, + ListItemText, + ListSubheader, + ListItemAvatar, + Divider, + Avatar, + Collapse, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + maxWidth: '360px', + backgroundColor: theme.palette.background.paper, + margin: 10 + }, + nested: { + paddingLeft: theme.spacing(4), + }, + avatarRed: { + backgroundColor: red[500], + }, + avatarGreen: { + backgroundColor: green[500], + }, + avatarAmber: { + backgroundColor: amber[500], + }, + iconBlue: { + color: lightBlue[500] + }, + iconPink: { + color: pink[500] + }, + iconAmber: { + color: amber[500] + }, + iconTeal: { + color: teal[500] + }, +}); + +class ListMenu extends PureComponent { + state = { open: true }; + + handleClick = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { classes } = this.props; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Menu List</Typography> + <div className={classes.root}> + <List component="nav"> + <ListItem button> + <ListItemIcon> + <InboxIcon className={classes.iconPink} /> + </ListItemIcon> + <ListItemText primary="Inbox" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DraftsIcon className={classes.iconBlue} /> + </ListItemIcon> + <ListItemText primary="Drafts" /> + </ListItem> + </List> + <Divider /> + <List component="nav"> + <ListItem button> + <ListItemText primary="Trash" /> + </ListItem> + <ListItem button component="a" href="#simple-list"> + <ListItemText primary="Spam" /> + </ListItem> + </List> + </div> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Folder List</Typography> + <div className={classes.root}> + <List> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarRed}> + <ImageIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Photos" secondary="Jan 9, 2014" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarGreen}> + <WorkIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Work" secondary="Jan 7, 2014" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar className={classes.avatarAmber}> + <BeachAccessIcon /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Vacation" secondary="July 20, 2014" /> + </ListItem> + </List> + </div> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Inset List</Typography> + <div className={classes.root}> + <List component="nav"> + <ListItem button> + <ListItemIcon> + <StarIcon className={classes.iconAmber} /> + </ListItemIcon> + <ListItemText variant="inset" primary="Chelsea Otakan" /> + </ListItem> + <ListItem button> + <ListItemText variant="inset" primary="Eric Hoffman" /> + </ListItem> + </List> + </div> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Nested List</Typography> + <div className={classes.root}> + <List + component="nav" + subheader={<ListSubheader component="div">Nested List Items</ListSubheader>} + > + <ListItem button> + <ListItemIcon> + <SendIcon className={classes.iconTeal} /> + </ListItemIcon> + <ListItemText variant="inset" primary="Sent mail" /> + </ListItem> + <ListItem button> + <ListItemIcon> + <DraftsIcon className={classes.iconBlue} /> + </ListItemIcon> + <ListItemText variant="inset" primary="Drafts" /> + </ListItem> + <ListItem button onClick={this.handleClick}> + <ListItemIcon> + <InboxIcon className={classes.iconPink} /> + </ListItemIcon> + <ListItemText variant="inset" primary="Inbox" /> + {this.state.open ? <ExpandLess /> : <ExpandMore />} + </ListItem> + <Collapse in={this.state.open} timeout="auto" unmountOnExit> + <List component="div" disablePadding> + <ListItem button className={classes.nested}> + <ListItemIcon> + <StarBorder className={classes.iconAmber} /> + </ListItemIcon> + <ListItemText variant="inset" primary="Starred" /> + </ListItem> + </List> + </Collapse> + </List> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +ListMenu.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ListMenu); diff --git a/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js b/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js new file mode 100644 index 0000000..e770fd0 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, ListSubheader, List, ListItem, ListItemText } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + position: 'relative', + overflow: 'auto', + maxHeight: 300, + }, + listSection: { + backgroundColor: 'inherit', + }, + ul: { + backgroundColor: 'inherit', + padding: 0, + }, + head: { + backgroundColor: theme.palette.secondary.light, + lineHeight: '30px', + height: 30, + textTransform: 'uppercase' + } +}); + +function PinnedList(props) { + const { classes } = props; + + return ( + <Grid + container + alignItems="center" + justify="center" + direction="row" + > + <List className={classes.root} subheader={<li />}> + {[0, 1, 2, 3, 4].map(sectionId => ( + <li key={`section-${sectionId}`} className={classes.listSection}> + <ul className={classes.ul}> + <ListSubheader className={classes.head}>{`I'm sticky ${sectionId}`}</ListSubheader> + {[0, 1, 2].map(item => ( + <ListItem key={`item-${sectionId}-${item}`}> + <ListItemText primary={`Item ${item}`} /> + </ListItem> + ))} + </ul> + </li> + ))} + </List> + </Grid> + ); +} + +PinnedList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PinnedList); diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js new file mode 100644 index 0000000..60cdbbd --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import { AppBar, Toolbar, IconButton, Typography, Button, Fab, Snackbar } from '@material-ui/core'; + +const styles = theme => ({ + root: { + position: 'relative', + overflow: 'hidden', + }, + appFrame: { + width: '100%', + height: 360, + backgroundColor: theme.palette.background.paper, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + button: { + marginBottom: theme.spacing(1), + }, + fab: { + position: 'absolute', + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + fabMoveUp: { + transform: 'translate3d(0, -46px, 0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.enteringScreen, + easing: theme.transitions.easing.easeOut, + }), + }, + fabMoveDown: { + transform: 'translate3d(0, 0, 0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.leavingScreen, + easing: theme.transitions.easing.sharp, + }), + }, + snackbar: { + position: 'absolute', + }, + snackbarContent: { + width: '100%', + }, +}); + +class MobileNotif extends React.Component { + state = { + open: false, + }; + + handleClick = () => { + this.setState({ open: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown); + + return ( + <div className={classes.root}> + <Button className={classes.button} variant="outlined" color="primary" onClick={this.handleClick}> + Open snackbar + </Button> + <div className={classes.appFrame}> + <AppBar position="static" color="primary"> + <Toolbar> + <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"> + <MenuIcon /> + </IconButton> + <Typography variant="h6" color="inherit"> + Out of my way! + </Typography> + </Toolbar> + </AppBar> + <Fab color="secondary" className={fabClassName}> + <AddIcon /> + </Fab> + <Snackbar + open={open} + autoHideDuration={4000} + onClose={this.handleClose} + ContentProps={{ + 'aria-describedby': 'snackbar-fab-message-id', + className: classes.snackbarContent, + }} + message={<span id="snackbar-fab-message-id">Archived</span>} + action={( + <Button color="inherit" size="small" onClick={this.handleClose}> + Undo + </Button> + )} + className={classes.snackbar} + /> + </div> + </div> + ); + } +} + +MobileNotif.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MobileNotif); diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js new file mode 100644 index 0000000..0b068b5 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js @@ -0,0 +1,132 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CloseIcon from '@material-ui/icons/Close'; +import { Typography, Button, Snackbar, IconButton, Grid } from '@material-ui/core'; + +const styles = theme => ({ + close: { + width: theme.spacing(4) + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1) + } +}); + +class SimpleNotif extends React.Component { + state = { + open: false, + open2: false, + vertical: 'bottom', + horizontal: 'left', + }; + + handleClick = () => { + this.setState({ open: true }); + }; + + handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + this.setState({ open: false }); + }; + + handleClick2 = state => () => { + this.setState({ open2: true, ...state }); + }; + + handleClose2 = () => { + this.setState({ open2: false }); + }; + + render() { + const { classes } = this.props; + const { vertical, horizontal, open2 } = this.state; + return ( + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Simple Notification</Typography> + <div> + <Button variant="contained" onClick={this.handleClick}>Open simple snackbar</Button> + <Snackbar + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + open={this.state.open} + autoHideDuration={6000} + onClose={this.handleClose} + ContentProps={{ + 'aria-describedby': 'message-id', + }} + message={<span id="message-id">Note archived</span>} + action={[ + <Button key="undo" color="secondary" size="small" onClick={this.handleClose}> + UNDO + </Button>, + <IconButton + key="close" + aria-label="Close" + color="inherit" + className={classes.close} + onClick={this.handleClose} + > + <CloseIcon /> + </IconButton>, + ]} + /> + </div> + </Grid> + <Grid item md={6}> + <Typography variant="button" className={classes.divider}>Positioning</Typography> + <div> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'top', horizontal: 'center' })}> + Top-Center + </Button> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'top', horizontal: 'right' })}> + Top-Right + </Button> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'bottom', horizontal: 'right' })}> + Bottom-Right + </Button> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'bottom', horizontal: 'center' })}> + Bottom-Center + </Button> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'bottom', horizontal: 'left' })}> + Bottom-Left + </Button> + <Button className={classes.button} variant="contained" onClick={this.handleClick2({ vertical: 'top', horizontal: 'left' })}> + Top-Left + </Button> + <Snackbar + anchorOrigin={{ vertical, horizontal }} + open={open2} + onClose={this.handleClose2} + ContentProps={{ + 'aria-describedby': 'message-id', + }} + message={<span id="message-id">I love snacks</span>} + /> + </div> + </Grid> + </Grid> + ); + } +} + +SimpleNotif.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleNotif); diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js new file mode 100644 index 0000000..2ad8dba --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js @@ -0,0 +1,198 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined'; +import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined'; +import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import CloseIcon from '@material-ui/icons/Close'; +import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined'; +import messageStyles from 'ba-styles/Messages.scss'; + +import { Typography, Button, IconButton, Snackbar, SnackbarContent, Grid } from '@material-ui/core'; + +const variantIcon = { + success: CheckCircleOutlinedIcon, + warning: ReportProblemOutlinedIcon, + error: ErrorOutlineOutlinedIcon, + info: InfoOutlinedIcon, +}; + +const styles1 = theme => ({ + success: { + backgroundColor: '#b6f8c4', + }, + error: { + backgroundColor: '#faabab', + }, + info: { + backgroundColor: '#b2e7f5', + }, + warning: { + backgroundColor: '#f5ea9f', + }, + icon: { + fontSize: 20, + color: 'black' + }, + iconVariant: { + opacity: 0.9, + marginRight: theme.spacing(1), + }, + message: { + display: 'flex', + alignItems: 'center', + color: 'black' + }, +}); + +function MySnackbarContent(props) { + const { + classes, + className, + message, + onClose, + variant, + ...other + } = props; + const Icon = variantIcon[variant]; + + return ( + <SnackbarContent + className={classNames(classes[variant], className)} + aria-describedby="client-snackbar" + message={( + <span id="client-snackbar" className={classes.message}> + <Icon className={classNames(classes.icon, classes.iconVariant)} /> + {message} + </span> + )} + action={[ + <IconButton + key="close" + aria-label="Close" + color="inherit" + className={classes.close} + onClick={onClose} + > + <CloseIcon className={classes.icon} /> + </IconButton>, + ]} + {...other} + /> + ); +} + +MySnackbarContent.propTypes = { + classes: PropTypes.object.isRequired, + className: PropTypes.string.isRequired, + message: PropTypes.node.isRequired, + onClose: PropTypes.func, + variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired, +}; + +MySnackbarContent.defaultProps = { + onClose: () => {} +}; + +const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent); + +const styles = theme => ({ + snackbar: { + margin: theme.spacing(1), + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + margin: { + margin: theme.spacing(1) + } +}); + +const action = ( + <Button color="secondary" size="small"> + Action + </Button> +); + +class StyledNotif extends React.Component { + state = { + openStyle: false, + }; + + handleClickStyle = () => { + this.setState({ openStyle: true }); + }; + + handleCloseStyle = (event, reason) => { + if (reason === 'clickaway') { + return; + } + this.setState({ openStyle: false }); + }; + + render() { + const { classes } = this.props; + return ( + <Grid container alignItems="flex-start" justify="center" direction="row" spacing={2}> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Default Styled Notification</Typography> + <Button className={classes.margin} variant="outlined" color="primary" onClick={this.handleClickStyle}> + Open success snackbar + </Button> + <Snackbar + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + open={this.state.openStyle} + autoHideDuration={6000} + onClose={this.handleCloseStyle} + > + <MySnackbarContentWrapper + onClose={this.handleCloseStyle} + variant="success" + message="This is a success message!" + /> + </Snackbar> + <MySnackbarContentWrapper + variant="error" + className={classes.margin} + message="This is an error message!" + /> + <MySnackbarContentWrapper + variant="warning" + className={classes.margin} + message="This is a warning message!" + /> + <MySnackbarContentWrapper + variant="info" + className={classes.margin} + message="This is an information message!" + /> + <MySnackbarContentWrapper + variant="success" + className={classes.margin} + message="This is a success message!" + /> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Custom Styled Notification with CSS</Typography> + <div> + <SnackbarContent className={classes.snackbar} message="Notification default" action={action} /> + <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgInfo)} message="Notification Info" action={action} /> + <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgSuccess)} message="Success Notification Message" /> + <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgWarning)} message="I love candy. I love cookies. I love cupcakes." action={action} /> + <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgError)} message="I love cheesecake. I love chocolate." action={action} /> + </div> + </Grid> + </Grid> + ); + } +} + +StyledNotif.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StyledNotif); diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js new file mode 100644 index 0000000..6ac8df5 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js @@ -0,0 +1,203 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CloseIcon from '@material-ui/icons/Close'; + +import { Typography, Button, Grid, Snackbar, Slide, Fade, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + row: { + display: 'flex', + justifyContent: 'flex-start', + }, + close: { + width: theme.spacing(4) + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1) + } +}); + +function TransitionLeft(props) { + return <Slide {...props} direction="left" />; +} + +function TransitionUp(props) { + return <Slide {...props} direction="up" />; +} + +function TransitionRight(props) { + return <Slide {...props} direction="right" />; +} + +function TransitionDown(props) { + return <Slide {...props} direction="down" />; +} + +class TransitionNotif extends PureComponent { + state = { + open: false, + open2: false, + open3: false, + transition: null, + messageInfo: {}, + }; + + queue = []; + + handleClickQueue = message => () => { + this.queue.push({ + message, + key: new Date().getTime(), + }); + + if (this.state.open3) { + // immediately begin dismissing current message + // to start showing new one + this.setState({ open3: false }); + } else { + this.processQueue(); + } + }; + + processQueue = () => { + if (this.queue.length > 0) { + this.setState({ + messageInfo: this.queue.shift(), + open3: true, + }); + } + }; + + handleCloseQueue = (event, reason) => { + if (reason === 'clickaway') { + return; + } + this.setState({ open3: false }); + }; + + handleExited = () => { + this.processQueue(); + }; + + handleClick = transition => () => { + this.setState({ open: true, transition }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleClick2 = () => { + this.setState({ open2: true }); + }; + + handleClose2 = () => { + this.setState({ open2: false }); + }; + + render() { + const { classes } = this.props; + const { message, key } = this.state.messageInfo; + return ( + <Fragment> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Transition</Typography> + <div> + <Button variant="contained" className={classes.button} onClick={this.handleClick(TransitionLeft)}>Right</Button> + <Button variant="contained" className={classes.button} onClick={this.handleClick(TransitionUp)}>Up</Button> + <Button variant="contained" className={classes.button} onClick={this.handleClick(TransitionRight)}>Left</Button> + <Button variant="contained" className={classes.button} onClick={this.handleClick(TransitionDown)}>Down</Button> + <Snackbar + open={this.state.open} + onClose={this.handleClose} + TransitionComponent={this.state.transition} + ContentProps={{ + 'aria-describedby': 'message-id', + }} + message={<span>I love snacks</span>} + /> + </div> + </Grid> + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Change Transition</Typography> + <div> + <Button variant="contained" className={classes.button} onClick={this.handleClick2}>Open with Fade Transition</Button> + <Snackbar + open={this.state.open2} + onClose={this.handleClose2} + TransitionComponent={Fade} + ContentProps={{ + 'aria-describedby': 'message-id', + }} + message={<span>I love snacks</span>} + /> + </div> + </Grid> + <Grid + item + md={4} + > + <Typography variant="button" className={classes.divider}>Consecutive Snackbars</Typography> + <div> + <Button variant="contained" className={classes.button} onClick={this.handleClickQueue('message a')}>Show message A</Button> + <Button variant="contained" className={classes.button} onClick={this.handleClickQueue('message b')}>Show message B</Button> + <Snackbar + key={key} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + open={this.state.open3} + autoHideDuration={6000} + onClose={this.handleCloseQueue} + onExited={this.handleExited} + ContentProps={{ + 'aria-describedby': 'message-id', + }} + message={<span>{message}</span>} + action={[ + <Button key="undo" color="secondary" size="small" onClick={this.handleClose2}> + UNDO + </Button>, + <IconButton + key="close" + aria-label="Close" + color="inherit" + className={classes.close} + onClick={this.handleCloseQueue} + > + <CloseIcon /> + </IconButton> + ]} + /> + </div> + </Grid> + </Grid> + </Fragment> + ); + } +} + +TransitionNotif.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TransitionNotif); diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js new file mode 100644 index 0000000..884be0a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js @@ -0,0 +1,136 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Pagination } from 'ba-components'; +import { Paper } from '@material-ui/core'; + +const styles = theme => ({ + paper: theme.mixins.gutters({ + paddingTop: 16, + paddingBottom: 16, + marginTop: theme.spacing(3), + }), +}); + +class GeneralPagination extends React.Component { + constructor() { + super(); + this.state = { + page: 1, + content: [ + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit', + 'Suspendisse sed urna in justo euismod condimentum', + 'Fusce placerat enim et odio molestie sagittis.', + 'Vestibulum dignissim orci vitae eros rutrum euismod.', + 'Vestibulum tempor, sem et molestie egestas, dui tortor laoreet tellus, id rhoncus mauris neque malesuada augue.', + 'Duis tristique metus magna, lobortis aliquam risus euismod sit amet.', + 'Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut.', + 'Nulla lobortis nunc vitae nisi semper semper.', + 'Sed mi neque, convallis at ipsum at, blandit pretium enim.', + 'Nunc quis sem quis velit tincidunt congue a sit amet ante.', + 'In hac habitasse platea dictumst.', + 'In mi nulla, fringilla vestibulum finibus et, vehicula non leo. Vivamus et luctus mauris.', + 'Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam. Vestibulum feugiat rhoncus metus.', + 'In non erat et ipsum molestie porta sit amet ut felis.', + 'Vestibulum a massa vestibulum, gravida odio id, fringilla ipsum.', + 'Ut sed eros finibus, placerat orci id, dapibus mauris.', + 'Proin varius, tortor faucibus tempor pharetra, nunc mi consectetur enim, nec posuere ante magna vitae quam.', + 'Cras convallis lacus orci, tristique tincidunt magna consequat in.', + 'Vestibulum consequat hendrerit lacus. In id nisi id neque venenatis molestie.', + 'Quisque lacinia purus ut libero facilisis, at vulputate sem maximus.', + 'Pellentesque ac bibendum tortor, vel blandit nulla.', + 'Nulla eget lobortis lacus.', + 'Aliquam venenatis magna et odio lobortis maximus.', + 'Nullam in tortor ligula.', + 'Proin maximus risus nunc, eu aliquam nibh tempus a.', + 'Interdum et malesuada fames ac ante ipsum primis in faucibus.', + ], + contentsPerPage: 3 + }; + this.onPageChange = this.onPageChange.bind(this); + this.onPrev = this.onPrev.bind(this); + this.onNext = this.onNext.bind(this); + this.onGoFirst = this.onGoFirst.bind(this); + this.onGoLast = this.onGoLast.bind(this); + } + + onPageChange(page) { + this.setState({ page }); + } + + onPrev() { + if (this.state.page > 1) { + this.setState({ page: this.state.page -= 1 }); + } else { + this.setState({ page: 1 }); + } + } + + onNext(totalPages) { + if (this.state.page < totalPages) { + this.setState({ page: this.state.page += 1 }); + } else { + this.setState({ page: totalPages }); + } + } + + onGoFirst() { + this.setState({ page: 1 }); + } + + onGoLast(totalPages) { + this.setState({ page: totalPages }); + } + + render() { + const { classes } = this.props; + const { page, content, contentsPerPage } = this.state; + + // Logic for displaying current todos + const indexOfLastTodo = page * contentsPerPage; + const indexOfFirstTodo = indexOfLastTodo - contentsPerPage; + const currentContent = content.slice(indexOfFirstTodo, indexOfLastTodo); + + const renderContent = currentContent.map((ctn, index) => ( + <p key={index.toString()}>{ctn}</p> + )); + + // Logic for displaying page numbers + const pageNumbers = []; + for (let i = 1; i <= Math.ceil(content.length / contentsPerPage); i += 1) { + pageNumbers.push(i); + } + + return ( + <div className={classes.root}> + <Paper className={classes.paper}> + <h3> +We are in page + {page} + </h3> + <article> + {renderContent} + </article> + </Paper> + <Pagination + curpage={page} + totpages={pageNumbers.length} + boundaryPagesRange={1} + onChange={this.onPageChange} + siblingPagesRange={1} + hideEllipsis={false} + onPrev={this.onPrev} + onNext={() => this.onNext(pageNumbers.length)} + onGoFirst={this.onGoFirst} + onGoLast={() => this.onGoLast(pageNumbers.length)} + /> + </div> + ); + } +} + +GeneralPagination.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(GeneralPagination); diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js new file mode 100644 index 0000000..d1a0214 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js @@ -0,0 +1,110 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, Paper } from '@material-ui/core'; + +let counter = 0; +function createData(name, calories, fat) { + counter += 1; + return { + id: counter, + name, + calories, + fat + }; +} + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + }, + table: { + minWidth: 500, + }, + tableWrapper: { + overflowX: 'auto', + }, +}); + +class TbPagination extends React.Component { + constructor(props, context) { + super(props, context); + + this.state = { + data: [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Eclair', 262, 16.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Gingerbread', 356, 16.0), + createData('Honeycomb', 408, 3.2), + createData('Ice cream sandwich', 237, 9.0), + createData('Jelly Bean', 375, 0.0), + createData('KitKat', 518, 26.0), + createData('Lollipop', 392, 0.2), + createData('Marshmallow', 318, 0), + createData('Nougat', 360, 19.0), + createData('Oreo', 437, 18.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + }; + } + + handleChangePage = (event, page) => { + this.setState({ page }); + }; + + handleChangeRowsPerPage = event => { + this.setState({ rowsPerPage: event.target.value }); + }; + + render() { + const { classes } = this.props; + const { data, rowsPerPage, page } = this.state; + const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage)); + + return ( + <Paper className={classes.root}> + <div className={classes.tableWrapper}> + <Table className={classes.table}> + <TableBody> + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => ( + <TableRow key={n.id}> + <TableCell>{n.name}</TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + </TableRow> + ))} + {emptyRows > 0 && ( + <TableRow style={{ height: 48 * emptyRows }}> + <TableCell colSpan={6} /> + </TableRow> + )} + </TableBody> + <TableFooter> + <TableRow> + <TablePagination + colSpan={3} + rowsPerPageOptions={[5, 10, 25]} + count={data.length} + rowsPerPage={rowsPerPage} + page={page} + onChangePage={this.handleChangePage} + onChangeRowsPerPage={this.handleChangeRowsPerPage} + /> + </TableRow> + </TableFooter> + </Table> + </div> + </Paper> + ); + } +} + +TbPagination.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TbPagination); diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationActions.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationActions.js new file mode 100644 index 0000000..3f56fa0 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationActions.js @@ -0,0 +1,93 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FirstPageIcon from '@material-ui/icons/FirstPage'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; +import LastPageIcon from '@material-ui/icons/LastPage'; +import { IconButton } from '@material-ui/core'; + +const actionsStyles = theme => ({ + root: { + flexShrink: 0, + color: theme.palette.text.secondary, + marginLeft: theme.spacing(2.5), + }, +}); + +class TbPaginationActions extends React.Component { + handleFirstPageButtonClick = event => { + this.props.onChangePage(event, 0); + }; + + handleBackButtonClick = event => { + this.props.onChangePage(event, this.props.page - 1); + }; + + handleNextButtonClick = event => { + this.props.onChangePage(event, this.props.page + 1); + }; + + handleLastPageButtonClick = event => { + this.props.onChangePage( + event, + Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1), + ); + }; + + render() { + const { + classes, + count, + page, + rowsPerPage, + theme + } = this.props; + + return ( + <div className={classes.root}> + <IconButton + onClick={this.handleFirstPageButtonClick} + disabled={page === 0} + aria-label="First Page" + > + {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />} + </IconButton> + <IconButton + onClick={this.handleBackButtonClick} + disabled={page === 0} + aria-label="Previous Page" + > + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + </IconButton> + <IconButton + onClick={this.handleNextButtonClick} + disabled={page >= Math.ceil(count / rowsPerPage) - 1} + aria-label="Next Page" + > + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </IconButton> + <IconButton + onClick={this.handleLastPageButtonClick} + disabled={page >= Math.ceil(count / rowsPerPage) - 1} + aria-label="Last Page" + > + {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />} + </IconButton> + </div> + ); + } +} + +TbPaginationActions.propTypes = { + classes: PropTypes.object.isRequired, + count: PropTypes.number.isRequired, + onChangePage: PropTypes.func.isRequired, + page: PropTypes.number.isRequired, + rowsPerPage: PropTypes.number.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(actionsStyles, { withTheme: true })( + TbPaginationActions, +); diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js new file mode 100644 index 0000000..49494dc --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Table, TableBody, TableCell, TablePagination, TableRow, TableFooter, Paper } from '@material-ui/core'; +import TbPaginationActions from './TbPaginationActions'; + + +let counter = 0; +function createData(name, calories, fat) { + counter += 1; + return { + id: counter, + name, + calories, + fat + }; +} + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + }, + table: { + minWidth: 500, + }, + tableWrapper: { + overflowX: 'auto', + }, +}); + +class TbPaginationCustom extends React.Component { + constructor(props, context) { + super(props, context); + + this.state = { + data: [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Eclair', 262, 16.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Gingerbread', 356, 16.0), + createData('Honeycomb', 408, 3.2), + createData('Ice cream sandwich', 237, 9.0), + createData('Jelly Bean', 375, 0.0), + createData('KitKat', 518, 26.0), + createData('Lollipop', 392, 0.2), + createData('Marshmallow', 318, 0), + createData('Nougat', 360, 19.0), + createData('Oreo', 437, 18.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + }; + } + + handleChangePage = (event, page) => { + this.setState({ page }); + }; + + handleChangeRowsPerPage = event => { + this.setState({ rowsPerPage: event.target.value }); + }; + + render() { + const { classes } = this.props; + const { data, rowsPerPage, page } = this.state; + const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage)); + + return ( + <Paper className={classes.root}> + <div className={classes.tableWrapper}> + <Table className={classes.table}> + <TableBody> + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => ( + <TableRow key={n.id}> + <TableCell component="th" scope="row"> + {n.name} + </TableCell> + <TableCell align="right">{n.calories}</TableCell> + <TableCell align="right">{n.fat}</TableCell> + </TableRow> + ))} + {emptyRows > 0 && ( + <TableRow style={{ height: 48 * emptyRows }}> + <TableCell colSpan={6} /> + </TableRow> + )} + </TableBody> + <TableFooter> + <TableRow> + <TablePagination + rowsPerPageOptions={[5, 10, 25]} + colSpan={3} + count={data.length} + rowsPerPage={rowsPerPage} + page={page} + onChangePage={this.handleChangePage} + onChangeRowsPerPage={this.handleChangeRowsPerPage} + ActionsComponent={TbPaginationActions} + /> + </TableRow> + </TableFooter> + </Table> + </div> + </Paper> + ); + } +} + +TbPaginationCustom.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TbPaginationCustom); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/CustomizedTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/CustomizedTooltips.js new file mode 100644 index 0000000..f0f9111 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/CustomizedTooltips.js @@ -0,0 +1,125 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Button, Tooltip } from '@material-ui/core'; + +const styles = theme => ({ + lightTooltip: { + background: theme.palette.common.white, + color: theme.palette.text.primary, + boxShadow: theme.shadows[1], + fontSize: 11, + }, + arrowPopper: { + '&[x-placement*="bottom"] $arrowArrow': { + top: 0, + left: 0, + marginTop: '-0.9em', + width: '3em', + height: '1em', + '&::before': { + borderWidth: '0 1em 1em 1em', + borderColor: `transparent transparent ${theme.palette.grey[700]} transparent`, + }, + }, + '&[x-placement*="top"] $arrowArrow': { + bottom: 0, + left: 0, + marginBottom: '-0.9em', + width: '3em', + height: '1em', + '&::before': { + borderWidth: '1em 1em 0 1em', + borderColor: `${theme.palette.grey[700]} transparent transparent transparent`, + }, + }, + '&[x-placement*="right"] $arrowArrow': { + left: 0, + marginLeft: '-0.9em', + height: '3em', + width: '1em', + '&::before': { + borderWidth: '1em 1em 1em 0', + borderColor: `transparent ${theme.palette.grey[700]} transparent transparent`, + }, + }, + '&[x-placement*="left"] $arrowArrow': { + right: 0, + marginRight: '-0.9em', + height: '3em', + width: '1em', + '&::before': { + borderWidth: '1em 0 1em 1em', + borderColor: `transparent transparent transparent ${theme.palette.grey[700]}`, + }, + }, + }, + arrowArrow: { + position: 'absolute', + fontSize: 7, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, + }, +}); + +class CustomizedTooltips extends React.Component { + state = { + arrowRef: null, + }; + + handleArrowRef = node => { + this.setState({ + arrowRef: node, + }); + }; + + render() { + const { classes } = this.props; + + return ( + <div> + <Tooltip title="Add"> + <Button>Default</Button> + </Tooltip> + <Tooltip title="Add" classes={{ tooltip: classes.lightTooltip }}> + <Button>Light</Button> + </Tooltip> + <Tooltip + title={( + <React.Fragment> + Add + <span className={classes.arrowArrow} ref={this.handleArrowRef} /> + </React.Fragment> + )} + classes={{ popper: classes.arrowPopper }} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(this.state.arrowRef), + element: this.state.arrowRef, + }, + }, + }, + }} + > + <Button>Arrow</Button> + </Tooltip> + </div> + ); + } +} + +CustomizedTooltips.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomizedTooltips); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js new file mode 100644 index 0000000..786dd4f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { Button, Tooltip } from '@material-ui/core'; + +function DelayTooltips() { + return ( + <Tooltip title="Add" enterDelay={500} leaveDelay={200}> + <Button>[500ms, 200ms]</Button> + </Tooltip> + ); +} + +export default DelayTooltips; diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js new file mode 100644 index 0000000..7878df1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js @@ -0,0 +1,340 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'; +import jsx from 'react-syntax-highlighter/languages/prism/jsx'; +import themeSource from 'react-syntax-highlighter/styles/prism/prism'; +import { green } from '@material-ui/core/colors'; + +import { + FormControl, + FormLabel, + FormControlLabel, + Radio, + RadioGroup, + Grid, + Typography, + Button, + Popover, + Input, + InputLabel, +} from '@material-ui/core'; + +const styles = theme => ({ + buttonWrapper: { + position: 'relative', + marginBottom: theme.spacing(4), + }, + anchor: { + backgroundColor: green[500], + width: 10, + height: 10, + borderRadius: '50%', + position: 'absolute', + }, + radioAnchor: { + color: green[600], + '&$checked': { + color: green[500], + }, + }, + checked: {}, + typography: { + margin: theme.spacing(2), + }, +}); + +const inlineStyles = { + anchorVertical: { + top: { + top: -5, + }, + center: { + top: 'calc(50% - 5px)', + }, + bottom: { + bottom: -5, + }, + }, + anchorHorizontal: { + left: { + left: -5, + }, + center: { + left: 'calc(50% - 5px)', + }, + right: { + right: -5, + }, + }, +}; + +class PopoverPlayground extends React.Component { + state = { + open: false, + anchorOriginVertical: 'top', + anchorOriginHorizontal: 'left', + transformOriginVertical: 'top', + transformOriginHorizontal: 'left', + positionTop: 200, // Just so the popover can be spotted more easily + positionLeft: 400, // Same as above + anchorReference: 'anchorEl', + }; + + handleChange = key => (event, value) => { + this.setState({ + [key]: value, + }); + }; + + handleNumberInputChange = key => event => { + this.setState({ + [key]: parseInt(event.target.value, 10), + }); + }; + + handleClickButton = () => { + this.setState({ + open: true, + }); + }; + + handleClose = () => { + this.setState({ + open: false, + }); + }; + + anchorEl = null; + + render() { + const { classes } = this.props; + registerLanguage('jsx', jsx); + const { + open, + anchorOriginVertical, + anchorOriginHorizontal, + transformOriginVertical, + transformOriginHorizontal, + positionTop, + positionLeft, + anchorReference, + } = this.state; + + let mode = ''; + + if (anchorReference === 'anchorPosition') { + mode = ` + anchorReference="${anchorReference}" + anchorPosition={{ top: ${positionTop}, left: ${positionLeft} }}`; + } + + const code = ` +<Popover ${mode} + anchorOrigin={{ + vertical: '${anchorOriginVertical}', + horizontal: '${anchorOriginHorizontal}', + }} + transformOrigin={{ + vertical: '${transformOriginVertical}', + horizontal: '${transformOriginHorizontal}', + }} +> +`; + + const radioAnchorClasses = { root: classes.radioAnchor, checked: classes.checked }; + + return ( + <div> + <Grid container justify="center" spacing={0}> + <Grid item className={classes.buttonWrapper}> + <Button + buttonRef={node => { + this.anchorEl = node; + }} + variant="contained" + onClick={this.handleClickButton} + > + Open Popover + </Button> + {anchorReference === 'anchorEl' && ( + <div + className={classes.anchor} + style={{ + ...inlineStyles.anchorVertical[anchorOriginVertical], + ...inlineStyles.anchorHorizontal[anchorOriginHorizontal], + }} + /> + )} + </Grid> + </Grid> + <Popover + open={open} + anchorEl={this.anchorEl} + anchorReference={anchorReference} + anchorPosition={{ top: positionTop, left: positionLeft }} + onClose={this.handleClose} + anchorOrigin={{ + vertical: anchorOriginVertical, + horizontal: anchorOriginHorizontal, + }} + transformOrigin={{ + vertical: transformOriginVertical, + horizontal: transformOriginHorizontal, + }} + > + <Typography className={classes.typography}>The content of the Popover.</Typography> + </Popover> + <Grid container spacing={2}> + <Grid item xs={12} sm={6}> + <FormControl component="fieldset"> + <FormLabel component="legend">anchorReference</FormLabel> + <RadioGroup + row + aria-label="anchorReference" + name="anchorReference" + value={this.state.anchorReference} + onChange={this.handleChange('anchorReference')} + > + <FormControlLabel value="anchorEl" control={<Radio />} label="anchorEl" /> + <FormControlLabel + value="anchorPosition" + control={<Radio />} + label="anchorPosition" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={12} sm={6}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="position-top">anchorPosition.top</InputLabel> + <Input + id="position-top" + type="number" + value={this.state.positionTop} + onChange={this.handleNumberInputChange('positionTop')} + /> + </FormControl> + + <FormControl className={classes.formControl}> + <InputLabel htmlFor="position-left">anchorPosition.left</InputLabel> + <Input + id="position-left" + type="number" + value={this.state.positionLeft} + onChange={this.handleNumberInputChange('positionLeft')} + /> + </FormControl> + </Grid> + <Grid item xs={12} sm={6}> + <FormControl component="fieldset"> + <FormLabel component="legend">anchorOrigin.vertical</FormLabel> + <RadioGroup + aria-label="anchorOriginVertical" + name="anchorOriginVertical" + value={this.state.anchorOriginVertical} + onChange={this.handleChange('anchorOriginVertical')} + > + <FormControlLabel + value="top" + control={<Radio classes={radioAnchorClasses} />} + label="Top" + /> + <FormControlLabel + value="center" + control={<Radio classes={radioAnchorClasses} />} + label="Center" + /> + <FormControlLabel + value="bottom" + control={<Radio classes={radioAnchorClasses} />} + label="Bottom" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={12} sm={6}> + <FormControl component="fieldset"> + <FormLabel component="legend">transformOrigin.vertical</FormLabel> + <RadioGroup + aria-label="transformOriginVertical" + name="transformOriginVertical" + value={this.state.transformOriginVertical} + onChange={this.handleChange('transformOriginVertical')} + > + <FormControlLabel value="top" control={<Radio color="primary" />} label="Top" /> + <FormControlLabel + value="center" + control={<Radio color="primary" />} + label="Center" + /> + <FormControlLabel + value="bottom" + control={<Radio color="primary" />} + label="Bottom" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={12} sm={6}> + <FormControl component="fieldset"> + <FormLabel component="legend">anchorOrigin.horizontal</FormLabel> + <RadioGroup + row + aria-label="anchorOriginHorizontal" + name="anchorOriginHorizontal" + value={this.state.anchorOriginHorizontal} + onChange={this.handleChange('anchorOriginHorizontal')} + > + <FormControlLabel + value="left" + control={<Radio classes={radioAnchorClasses} />} + label="Left" + /> + <FormControlLabel + value="center" + control={<Radio classes={radioAnchorClasses} />} + label="Center" + /> + <FormControlLabel + value="right" + control={<Radio classes={radioAnchorClasses} />} + label="Right" + /> + </RadioGroup> + </FormControl> + </Grid> + <Grid item xs={12} sm={6}> + <FormControl component="fieldset"> + <FormLabel component="legend">transformOrigin.horizontal</FormLabel> + <RadioGroup + row + aria-label="transformOriginHorizontal" + name="transformOriginHorizontal" + value={this.state.transformOriginHorizontal} + onChange={this.handleChange('transformOriginHorizontal')} + > + <FormControlLabel value="left" control={<Radio color="primary" />} label="Left" /> + <FormControlLabel + value="center" + control={<Radio color="primary" />} + label="Center" + /> + <FormControlLabel value="right" control={<Radio color="primary" />} label="Right" /> + </RadioGroup> + </FormControl> + </Grid> + </Grid> + <SyntaxHighlighter language="jsx" style={themeSource} showLineNumbers="true"> + {code} + </SyntaxHighlighter> + </div> + ); + } +} + +PopoverPlayground.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PopoverPlayground); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js new file mode 100644 index 0000000..336d932 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js @@ -0,0 +1,83 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Grid, Button, Tooltip } from '@material-ui/core'; + +const styles = { + root: { + width: 500, + margin: '0 auto' + }, +}; + +function PositionedTooltips(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <Grid container justify="center"> + <Grid item> + <Tooltip id="tooltip-top-start" title="Add" placement="top-start"> + <Button>top-start</Button> + </Tooltip> + <Tooltip id="tooltip-top" title="Add" placement="top"> + <Button>top</Button> + </Tooltip> + <Tooltip id="tooltip-top-end" title="Add" placement="top-end"> + <Button>top-end</Button> + </Tooltip> + </Grid> + </Grid> + <Grid container justify="center"> + <Grid item xs={6}> + <Tooltip id="tooltip-left-start" title="Add" placement="left-start"> + <Button>left-start</Button> + </Tooltip> + <br /> + <Tooltip id="tooltip-left" title="Add" placement="left"> + <Button>left</Button> + </Tooltip> + <br /> + <Tooltip id="tooltip-left-end" title="Add" placement="left-end"> + <Button>left-end</Button> + </Tooltip> + </Grid> + <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}> + <Grid item> + <Tooltip id="tooltip-right-start" title="Add" placement="right-start"> + <Button>right-start</Button> + </Tooltip> + </Grid> + <Grid item> + <Tooltip id="tooltip-right" title="Add" placement="right"> + <Button>right</Button> + </Tooltip> + </Grid> + <Grid item> + <Tooltip id="tooltip-right-end" title="Add" placement="right-end"> + <Button>right-end</Button> + </Tooltip> + </Grid> + </Grid> + </Grid> + <Grid container justify="center"> + <Grid item> + <Tooltip id="tooltip-bottom-start" title="Add" placement="bottom-start"> + <Button>bottom-start</Button> + </Tooltip> + <Tooltip id="tooltip-bottom" title="Add" placement="bottom"> + <Button>bottom</Button> + </Tooltip> + <Tooltip id="tooltip-bottom-end" title="Add" placement="bottom-end"> + <Button>bottom-end</Button> + </Tooltip> + </Grid> + </Grid> + </div> + ); +} + +PositionedTooltips.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PositionedTooltips); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js new file mode 100644 index 0000000..23d2462 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js @@ -0,0 +1,79 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Button, Popover, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + typography: { + margin: theme.spacing(2), + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + textAlign: 'center' + }, + button: { + margin: theme.spacing(1), + }, +}); + +class SimplePopover extends React.Component { + state = { + anchorEl: null, + }; + + handleClick = event => { + this.setState({ + anchorEl: event.currentTarget, + }); + }; + + handleClose = () => { + this.setState({ + anchorEl: null, + }); + }; + + render() { + const { classes } = this.props; + const { anchorEl } = this.state; + return ( + <div> + <Grid + container + alignItems="center" + justify="center" + direction="row" + spacing={2} + > + <Grid item md={6}> + <Button className={classes.button} variant="contained" onClick={this.handleClick}> + Open Simple Popover + </Button> + <Popover + open={Boolean(anchorEl)} + anchorEl={anchorEl} + onClose={this.handleClose} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'center', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'center', + }} + > + <Typography className={classes.typography}>The content of the Popover.</Typography> + </Popover> + </Grid> + </Grid> + </div> + ); + } +} + +SimplePopover.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimplePopover); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js new file mode 100644 index 0000000..0714e6c --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { Fab, IconButton, Tooltip, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + fab: { + margin: theme.spacing(2), + }, + fixed: { + position: 'fixed', + bottom: theme.spacing(2), + right: theme.spacing(3), + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + textAlign: 'center' + }, +}); + +class SimpleTooltips extends React.Component { + state = { + open: false, + }; + + handleTooltipClose = () => { + this.setState({ open: false }); + }; + + handleTooltipOpen = () => { + this.setState({ open: true }); + }; + + render() { + const { classes } = this.props; + return ( + <div> + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid + item + md={6} + > + <Typography variant="button" className={classes.divider}>Simple Tooltips</Typography> + <Grid + container + alignItems="center" + justify="center" + direction="row" + spacing={2} + > + <Tooltip title="Delete"> + <IconButton aria-label="Delete"> + <DeleteIcon /> + </IconButton> + </Tooltip> + <Tooltip title="Add"> + <Fab color="primary" aria-label="Add" className={classes.fab}> + <AddIcon /> + </Fab> + </Tooltip> + <br /> + <br /> + <Tooltip title="FAB 'position: absolute;'"> + <Fab color="secondary" className={classes.fixed}> + <AddIcon /> + </Fab> + </Tooltip> + </Grid> + </Grid> + <Grid + item + md={6} + > + <Typography variant="button" className={classes.divider}>Delayed Tooltips</Typography> + <Grid + container + alignItems="center" + justify="center" + direction="row" + spacing={2} + > + <Tooltip + enterDelay={300} + leaveDelay={300} + onClose={this.handleTooltipClose} + onOpen={this.handleTooltipOpen} + open={this.state.open} + placement="bottom" + title="Delete" + > + <IconButton aria-label="Delete"> + <DeleteIcon /> + </IconButton> + </Tooltip> + </Grid> + </Grid> + </Grid> + </div> + ); + } +} + +SimpleTooltips.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleTooltips); diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js new file mode 100644 index 0000000..7b8adc1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { Button, Tooltip, Fade, Zoom } from '@material-ui/core'; + +function TransitionsTooltips() { + return ( + <div> + <Tooltip title="Add"> + <Button>Grow</Button> + </Tooltip> + <Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title="Add"> + <Button>Fade</Button> + </Tooltip> + <Tooltip TransitionComponent={Zoom} title="Add"> + <Button>Zoom</Button> + </Tooltip> + </div> + ); +} + +export default TransitionsTooltips; diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js new file mode 100644 index 0000000..bd4db5b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { Grid, Button, Tooltip, ClickAwayListener } from '@material-ui/core'; + +class TriggersTooltips extends React.Component { + state = { + open: false, + }; + + handleTooltipClose = () => { + this.setState({ open: false }); + }; + + handleTooltipOpen = () => { + this.setState({ open: true }); + }; + + render() { + return ( + <div> + <Grid container justify="center"> + <Grid item> + <Tooltip disableFocusListener title="Add"> + <Button>Hover or touch</Button> + </Tooltip> + </Grid> + <Grid item> + <Tooltip disableHoverListener title="Add"> + <Button>Focus or touch</Button> + </Tooltip> + </Grid> + <Grid item> + <Tooltip disableFocusListener disableTouchListener title="Add"> + <Button>Hover</Button> + </Tooltip> + </Grid> + <Grid item> + <ClickAwayListener onClickAway={this.handleTooltipClose}> + <div> + <Tooltip + PopperProps={{ + disablePortal: true, + }} + onClose={this.handleTooltipClose} + open={this.state.open} + disableFocusListener + disableHoverListener + disableTouchListener + title="Add" + > + <Button onClick={this.handleTooltipOpen}>Click</Button> + </Tooltip> + </div> + </ClickAwayListener> + </Grid> + </Grid> + </div> + ); + } +} + +export default TriggersTooltips; diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js new file mode 100644 index 0000000..0b1312b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { CircularProgress } from '@material-ui/core'; + +const styles = theme => ({ + progress: { + margin: theme.spacing(2), + }, +}); + +class CircularDeterminate extends React.Component { + state = { + completed: 0, + }; + + componentDidMount() { + this.timer = setInterval(this.progress, 20); + } + + componentWillUnmount() { + clearInterval(this.timer); + } + + timer; + + progress = () => { + const { completed } = this.state; + this.setState({ completed: completed === 100 ? 0 : completed + 1 }); + }; + + render() { + const { classes } = this.props; + return ( + <div> + <CircularProgress + className={classes.progress} + variant="determinate" + value={this.state.completed} + /> + <CircularProgress + className={classes.progress} + variant="determinate" + size={50} + value={this.state.completed} + /> + <CircularProgress + className={classes.progress} + color="secondary" + variant="determinate" + value={this.state.completed} + /> + <CircularProgress + className={classes.progress} + color="secondary" + variant="determinate" + size={50} + value={this.state.completed} + /> + </div> + ); + } +} + +CircularDeterminate.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CircularDeterminate); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js new file mode 100644 index 0000000..cc37de8 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { purple } from '@material-ui/core/colors'; +import { CircularProgress } from '@material-ui/core'; + +const styles = theme => ({ + progress: { + margin: theme.spacing(2), + }, +}); + +function CircularIndeterminate(props) { + const { classes } = props; + return ( + <div> + <CircularProgress className={classes.progress} /> + <CircularProgress className={classes.progress} size={50} /> + <CircularProgress className={classes.progress} color="secondary" /> + <CircularProgress className={classes.progress} style={{ color: purple[500] }} thickness={7} /> + </div> + ); +} + +CircularIndeterminate.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CircularIndeterminate); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js new file mode 100644 index 0000000..ff19f5c --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js @@ -0,0 +1,114 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import CheckIcon from '@material-ui/icons/Check'; +import SaveIcon from '@material-ui/icons/Save'; +import { green } from '@material-ui/core/colors'; + +import { CircularProgress, Button, Fab } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + alignItems: 'center', + }, + wrapper: { + margin: theme.spacing(1), + position: 'relative', + }, + buttonSuccess: { + backgroundColor: green[500], + '&:hover': { + backgroundColor: green[700], + }, + }, + fabProgress: { + color: green[500], + position: 'absolute', + top: -6, + left: -6, + zIndex: 1, + }, + buttonProgress: { + color: green[500], + position: 'absolute', + top: '50%', + left: '50%', + marginTop: -12, + marginLeft: -12, + }, +}); + +class CircularIntegration extends React.Component { + state = { + loading: false, + success: false, + }; + + componentWillUnmount() { + clearTimeout(this.timer); + } + + handleButtonClick = () => { + if (!this.state.loading) { + this.setState( + { + success: false, + loading: true, + }, + () => { + this.timer = setTimeout(() => { + this.setState({ + loading: false, + success: true, + }); + }, 2000); + }, + ); + } + }; + + timer = undefined; + + render() { + const { loading, success } = this.state; + const { classes } = this.props; + const buttonClassname = classNames({ + [classes.buttonSuccess]: success, + }); + + return ( + <div className={classes.root}> + <div className={classes.wrapper}> + <Fab + color="primary" + className={buttonClassname} + onClick={this.handleButtonClick} + > + {success ? <CheckIcon /> : <SaveIcon />} + </Fab> + {loading && <CircularProgress size={68} className={classes.fabProgress} />} + </div> + <div className={classes.wrapper}> + <Button + variant="contained" + color="primary" + className={buttonClassname} + disabled={loading} + onClick={this.handleButtonClick} + > + Accept terms + </Button> + {loading && <CircularProgress size={24} className={classes.buttonProgress} />} + </div> + </div> + ); + } +} + +CircularIntegration.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CircularIntegration); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js new file mode 100644 index 0000000..bfa931a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { CircularProgress } from '@material-ui/core'; + +const styles = theme => ({ + progress: { + margin: theme.spacing(2), + }, +}); + +function CircularStatic(props) { + const { classes } = props; + return ( + <div> + <CircularProgress className={classes.progress} variant="static" value={5} /> + <CircularProgress className={classes.progress} variant="static" value={25} /> + <CircularProgress className={classes.progress} variant="static" value={50} /> + <CircularProgress className={classes.progress} variant="static" value={75} /> + <CircularProgress className={classes.progress} variant="static" value={100} /> + </div> + ); +} + +CircularStatic.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CircularStatic); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js new file mode 100644 index 0000000..44bca71 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +class LinearBuffer extends React.Component { + state = { + completed: 0, + buffer: 10, + }; + + componentDidMount() { + this.timer = setInterval(this.progress, 500); + } + + componentWillUnmount() { + clearInterval(this.timer); + } + + timer = null; + + progress = () => { + const { completed } = this.state; + if (completed > 100) { + this.setState({ completed: 0, buffer: 10 }); + } else { + const diff = Math.random() * 10; + const diff2 = Math.random() * 10; + this.setState({ completed: completed + diff, buffer: completed + diff + diff2 }); + } + }; + + render() { + const { classes } = this.props; + const { completed, buffer } = this.state; + return ( + <div className={classes.root}> + <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} /> + <br /> + <LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer} /> + </div> + ); + } +} + +LinearBuffer.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LinearBuffer); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js new file mode 100644 index 0000000..08c718d --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js @@ -0,0 +1,53 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +class LinearDeterminate extends React.Component { + state = { + completed: 0, + }; + + componentDidMount() { + this.timer = setInterval(this.progress, 500); + } + + componentWillUnmount() { + clearInterval(this.timer); + } + + timer = null; + + progress = () => { + const { completed } = this.state; + if (completed === 100) { + this.setState({ completed: 0 }); + } else { + const diff = Math.random() * 10; + this.setState({ completed: Math.min(completed + diff, 100) }); + } + }; + + render() { + const { classes } = this.props; + return ( + <div className={classes.root}> + <LinearProgress variant="determinate" value={this.state.completed} /> + <br /> + <LinearProgress color="secondary" variant="determinate" value={this.state.completed} /> + </div> + ); + } +} + +LinearDeterminate.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LinearDeterminate); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js new file mode 100644 index 0000000..de5071a --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +function LinearIndeterminate(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <LinearProgress /> + <br /> + <LinearProgress color="secondary" /> + </div> + ); +} + +LinearIndeterminate.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LinearIndeterminate); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js new file mode 100644 index 0000000..6e51da7 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +function LinearQuery(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <LinearProgress variant="query" /> + <br /> + <LinearProgress color="secondary" variant="query" /> + </div> + ); +} + +LinearQuery.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LinearQuery); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js new file mode 100644 index 0000000..55ad2a1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +function LinearIndeterminate(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <LinearProgress variant="determinate" value={20} /> + <br /> + <LinearProgress variant="determinate" value={60} color="secondary" /> + </div> + ); +} + +LinearIndeterminate.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LinearIndeterminate); diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js new file mode 100644 index 0000000..6417795 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js @@ -0,0 +1,105 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Fade, Button, CircularProgress, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, + button: { + margin: theme.spacing(2), + }, + placeholder: { + height: 40, + }, +}); + +class ProgressDelay extends React.Component { + state = { + loading: false, + query: 'idle', + }; + + componentWillUnmount() { + clearTimeout(this.timer); + } + + timer = null; + + handleClickLoading = () => { + this.setState({ + loading: !this.state.loading, + }); + }; + + handleClickQuery = () => { + clearTimeout(this.timer); + + if (this.state.query !== 'idle') { + this.setState({ + query: 'idle', + }); + return; + } + + this.setState({ + query: 'progress', + }); + this.timer = setTimeout(() => { + this.setState({ + query: 'success', + }); + }, 2e3); + }; + + render() { + const { classes } = this.props; + const { loading, query } = this.state; + + return ( + <div className={classes.root}> + <div className={classes.placeholder}> + <Fade + in={loading} + style={{ + transitionDelay: loading ? '800ms' : '0ms', + }} + unmountOnExit + > + <CircularProgress /> + </Fade> + </div> + <Button onClick={this.handleClickLoading} className={classes.button}> + {loading ? 'Stop loading' : 'Loading'} + </Button> + <div className={classes.placeholder}> + {query === 'success' ? ( + <Typography>Success!</Typography> + ) : ( + <Fade + in={query === 'progress'} + style={{ + transitionDelay: query === 'progress' ? '800ms' : '0ms', + }} + unmountOnExit + > + <CircularProgress /> + </Fade> + )} + </div> + <Button onClick={this.handleClickQuery} className={classes.button}> + {query !== 'idle' ? 'Reset' : 'Simulate a load'} + </Button> + </div> + ); + } +} + +ProgressDelay.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ProgressDelay); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js new file mode 100644 index 0000000..57fb5e4 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js @@ -0,0 +1,72 @@ +import React from 'react'; +import Type from 'ba-styles/Typography.scss'; +import Slider from 'react-animated-slider'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css'; + +import { Button, Typography, Hidden } from '@material-ui/core'; + +const content = [ + { + title: 'Vulputate Mollis Ultricies Fermentum Parturient', + description: + 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis.', + button: 'Read More', + image: imgApi[38], + user: 'Luanda Gjokaj', + userProfile: avatarApi[1] + }, + { + title: 'Tortor Dapibus Commodo Aenean Quam', + description: + 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.', + button: 'Discover', + image: imgApi[2], + user: 'Erich Behrens', + userProfile: avatarApi[8] + }, + { + title: 'Phasellus volutpat metus', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.', + button: 'Buy now', + image: imgApi[28], + user: 'Bruno Vizovskyy', + userProfile: avatarApi[10] + } +]; + +const AnimatedSlider = () => ( + <div> + <Slider className="slider-wrapper"> + {content.map((item, index) => ( + <div + key={index.toString()} + className="slider-content" + style={{ background: `url('${item.image}') no-repeat center center` }} + > + <div className="inner"> + <Typography variant="h4" component="h1" className={Type.light} gutterBottom>{item.title}</Typography> + <Hidden mdDown> + <p>{item.description}</p> + </Hidden> + <Button variant="contained" color="primary"> + {item.button} + </Button> + </div> + <section> + <img src={item.userProfile} alt={item.user} /> + <span> + Posted by + {' '} + <strong>{item.user}</strong> + </span> + </section> + </div> + ))} + </Slider> + </div> +); + +export default AnimatedSlider; diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js new file mode 100644 index 0000000..59c11ef --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js @@ -0,0 +1,52 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgData from 'ba-api/imgData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; + +const styles = ({ + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +class AutoplayCarousel extends React.Component { + render() { + const { classes } = this.props; + const settings = { + dots: true, + infinite: true, + centerMode: false, + speed: 500, + autoplaySpeed: 2000, + pauseOnHover: true, + autoplay: true, + slidesToShow: 3, + slidesToScroll: 1, + cssEase: 'ease-out' + }; + return ( + <div className="container"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + ); + } +} + +AutoplayCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AutoplayCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js new file mode 100644 index 0000000..a558d8e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js @@ -0,0 +1,93 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ArrowForward from '@material-ui/icons/ArrowForward'; +import ArrowBack from '@material-ui/icons/ArrowBack'; +import imgData from 'ba-api/imgData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; +import { IconButton } from '@material-ui/core'; + +function SampleNextArrow(props) { + const { onClick } = props; + return ( + <IconButton + className="nav-next" + onClick={onClick} + > + <ArrowForward /> + </IconButton> + ); +} + +SampleNextArrow.propTypes = { + onClick: PropTypes.func, +}; + +SampleNextArrow.defaultProps = { + onClick: undefined, +}; + +function SamplePrevArrow(props) { + const { onClick } = props; + return ( + <IconButton + className="nav-prev" + onClick={onClick} + > + <ArrowBack /> + </IconButton> + ); +} + +SamplePrevArrow.propTypes = { + onClick: PropTypes.func, +}; + +SamplePrevArrow.defaultProps = { + onClick: undefined, +}; + +const styles = ({ + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +class CustomCarousel extends React.Component { + render() { + const { classes } = this.props; + const settings = { + dots: true, + infinite: true, + centerMode: true, + speed: 500, + slidesToShow: 3, + slidesToScroll: 1, + nextArrow: <SampleNextArrow />, + prevArrow: <SamplePrevArrow /> + }; + return ( + <div className="container custom-arrow"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + ); + } +} + +CustomCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js new file mode 100644 index 0000000..c8ff743 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js @@ -0,0 +1,48 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgData from 'ba-api/imgData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; + +const styles = ({ + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +class MultipleCarousel extends React.Component { + render() { + const { classes } = this.props; + const settings = { + dots: true, + infinite: true, + centerMode: true, + speed: 500, + slidesToShow: 3, + slidesToScroll: 1 + }; + return ( + <div className="container"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + ); + } +} + +MultipleCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MultipleCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js new file mode 100644 index 0000000..76158f7 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js @@ -0,0 +1,80 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgData from 'ba-api/imgData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; + +import { FormControl, MenuItem, InputLabel, Select } from '@material-ui/core'; + +const styles = ({ + root: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center' + }, + formControl: { + width: '50%', + margin: '0 auto' + }, + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +class SingleCarousel extends React.Component { + state = { + transition: 'slide' + } + + handleChange = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + const { transition } = this.state; + const settings = { + dots: true, + fade: this.state.transition === 'fade', + }; + return ( + <div className={classes.root}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple">Carousel Transition</InputLabel> + <Select + value={transition} + onChange={this.handleChange} + inputProps={{ + name: 'transition', + id: 'transition-single-carousel', + }} + > + <MenuItem value="slide">Slide</MenuItem> + <MenuItem value="fade">Fade</MenuItem> + </Select> + </FormControl> + <div className="container"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + </div> + ); + } +} + +SingleCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SingleCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js new file mode 100644 index 0000000..9860b55 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js @@ -0,0 +1,90 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; +import imgData from 'ba-api/imgData'; + +import { FormControl, MenuItem, InputLabel, Select } from '@material-ui/core'; + +const styles = ({ + root: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center' + }, + formControl: { + width: '50%', + margin: '0 auto' + }, + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +const getThumb = imgData.map(a => a.thumb); + +class ThumbnailCarousel extends React.Component { + state = { + transition: 'slide' + } + + handleChange = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + const { transition } = this.state; + const settings = { + customPaging: (i) => ( + <a> + <img src={getThumb[i]} alt="thumb" /> + </a> + ), + infinite: true, + dots: true, + slidesToShow: 1, + slidesToScroll: 1, + fade: this.state.transition === 'fade', + }; + return ( + <div className={classes.root}> + <FormControl className={classes.formControl}> + <InputLabel htmlFor="age-simple">Carousel Transition</InputLabel> + <Select + value={transition} + onChange={this.handleChange} + inputProps={{ + name: 'transition', + id: 'transition-single-carousel', + }} + > + <MenuItem value="slide">Slide</MenuItem> + <MenuItem value="fade">Fade</MenuItem> + </Select> + </FormControl> + <div className="container thumb-nav custom-nav"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + </div> + ); + } +} + +ThumbnailCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ThumbnailCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js new file mode 100644 index 0000000..36dd7c3 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js @@ -0,0 +1,48 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgData from 'ba-api/imgData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; + +const styles = ({ + item: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + } +}); + +class VerticalCarousel extends React.Component { + render() { + const { classes } = this.props; + const settings = { + infinite: true, + slidesToShow: 2, + slidesToScroll: 1, + vertical: true, + verticalSwiping: true, + swipeToSlide: true, + }; + return ( + <div className="container"> + <Slider {...settings}> + {imgData.map((item, index) => ( + <div key={index.toString()} className={classes.item}> + <img src={item.img} alt={item.title} /> + </div> + ))} + </Slider> + </div> + ); + } +} + +VerticalCarousel.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(VerticalCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js new file mode 100644 index 0000000..db47ee1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js @@ -0,0 +1,196 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; + +import { + Stepper, + Step, + StepLabel, + Button, + Typography, + FormGroup, + FormControlLabel, + Switch, + Divider, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + button: { + marginRight: theme.spacing(1), + }, + instructions: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + }, +}); + +function getSteps() { + return ['Select campaign settings', 'Create an ad group', 'Create an ad']; +} + +function getStepContent(step) { + switch (step) { + case 0: + return 'Select campaign settings...'; + case 1: + return 'What is an ad group anyways?'; + case 2: + return 'This is the bit I really care about!'; + default: + return 'Unknown step'; + } +} + +class HorizontalLinear extends React.Component { + static propTypes = { + classes: PropTypes.object.isRequired, + }; + + state = { + activeStep: 0, + altLabel: false, + skipped: new Set(), + }; + + isStepOptional = step => (step === 1); + + isStepSkipped(step) { + return this.state.skipped.has(step); + } + + handleNext = () => { + const { activeStep } = this.state; + let { skipped } = this.state; + if (this.isStepSkipped(activeStep)) { + skipped = new Set(skipped.values()); + skipped.delete(activeStep); + } + this.setState({ + activeStep: activeStep + 1, + skipped, + }); + }; + + handleBack = () => { + const { activeStep } = this.state; + this.setState({ + activeStep: activeStep - 1, + }); + }; + + handleSkip = () => { + const { activeStep } = this.state; + if (!this.isStepOptional(activeStep)) { + // You probably want to guard against something like this, + // it should never occur unless someone's actively trying to break something. + throw new Error("You can't skip a step that isn't optional."); + } + const skipped = new Set(this.state.skipped.values()); + skipped.add(activeStep); + this.setState({ + activeStep: this.state.activeStep + 1, + skipped, + }); + }; + + handleReset = () => { + this.setState({ + activeStep: 0, + }); + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + const steps = getSteps(); + const { activeStep, altLabel } = this.state; + + return ( + <div className={classes.root}> + <FormGroup row> + <FormControlLabel + control={( + <Switch + checked={altLabel} + onChange={this.handleChange('altLabel')} + value="altLabel" + /> + )} + label="Alternative Design" + /> + </FormGroup> + <Divider /> + <Stepper activeStep={activeStep} alternativeLabel={altLabel}> + {steps.map((label, index) => { + const props = {}; + const labelProps = {}; + if (this.isStepOptional(index)) { + labelProps.optional = <Typography className={altLabel ? Type.textCenter : ''} variant="caption">Optional</Typography>; + } + if (this.isStepSkipped(index)) { + props.completed = false; + } + return ( + <Step key={label} {...props}> + <StepLabel {...labelProps}>{label}</StepLabel> + </Step> + ); + })} + </Stepper> + <Divider /> + <div> + {activeStep === steps.length ? ( + <div> + <Typography className={classes.instructions}> + All steps completed - you"re finished + </Typography> + <Button onClick={this.handleReset} className={classes.button}> + Reset + </Button> + </div> + ) : ( + <div> + <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography> + <div> + <Button + disabled={activeStep === 0} + onClick={this.handleBack} + className={classes.button} + > + Back + </Button> + {this.isStepOptional(activeStep) && ( + <Button + variant="contained" + color="primary" + onClick={this.handleSkip} + className={classes.button} + > + Skip + </Button> + )} + <Button + variant="contained" + color="primary" + onClick={this.handleNext} + className={classes.button} + > + {activeStep === steps.length - 1 ? 'Finish' : 'Next'} + </Button> + </div> + </div> + )} + </div> + </div> + ); + } +} + +export default withStyles(styles)(HorizontalLinear); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js new file mode 100644 index 0000000..3c72df3 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js @@ -0,0 +1,213 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Stepper, + Step, + StepButton, + Button, + Divider, + FormGroup, + FormControlLabel, + Switch, + Typography, +} from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + button: { + marginRight: theme.spacing(1), + }, + completed: { + display: 'inline-block', + }, + instructions: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + }, + stepItem: { + whiteSpace: 'inherit' + } +}); + +function getSteps() { + return ['Select campaign settings', 'Create an ad group', 'Create an ad']; +} + +function getStepContent(step) { + switch (step) { + case 0: + return 'Step 1: Select campaign settings...'; + case 1: + return 'Step 2: What is an ad group anyways?'; + case 2: + return 'Step 3: This is the bit I really care about!'; + default: + return 'Unknown step'; + } +} + +class HorizontalNonLinear extends React.Component { + state = { + activeStep: 0, + altLabel: false, + completed: {}, + }; + + completedSteps() { + return Object.keys(this.state.completed).length; + } + + totalSteps = () => ( + getSteps().length + ); + + isLastStep() { + return this.state.activeStep === this.totalSteps() - 1; + } + + allStepsCompleted() { + return this.completedSteps() === this.totalSteps(); + } + + handleNext = () => { + let activeStep; + + if (this.isLastStep() && !this.allStepsCompleted()) { + // It's the last step, but not all steps have been completed, + // find the first step that has been completed + const steps = getSteps(); + activeStep = steps.findIndex((step, i) => !(i in this.state.completed)); + } else { + activeStep = this.state.activeStep + 1; + } + this.setState({ + activeStep, + }); + }; + + handleBack = () => { + const { activeStep } = this.state; + this.setState({ + activeStep: activeStep - 1, + }); + }; + + handleStep = step => () => { + this.setState({ + activeStep: step, + }); + }; + + handleComplete = () => { + const { completed } = this.state; + completed[this.state.activeStep] = true; + this.setState({ + completed, + }); + this.handleNext(); + }; + + handleReset = () => { + this.setState({ + activeStep: 0, + completed: {}, + }); + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + const steps = getSteps(); + const { activeStep, altLabel } = this.state; + + return ( + <div className={classes.root}> + <FormGroup row> + <FormControlLabel + control={( + <Switch + checked={altLabel} + onChange={this.handleChange('altLabel')} + value="altLabel" + /> + )} + label="Alternative Design" + /> + </FormGroup> + <Divider /> + <Stepper nonLinear activeStep={activeStep} alternativeLabel={altLabel}> + {steps.map((label, index) => ( + <Step key={label}> + <StepButton + className={classes.stepItem} + onClick={this.handleStep(index)} + completed={this.state.completed[index]} + > + {label} + </StepButton> + </Step> + ))} + </Stepper> + <Divider /> + <div> + {this.allStepsCompleted() ? ( + <div> + <Typography className={classes.instructions}> + All steps completed - you"re finished + </Typography> + <Button onClick={this.handleReset}>Reset</Button> + </div> + ) : ( + <div> + <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography> + <div> + <Button + disabled={activeStep === 0} + onClick={this.handleBack} + className={classes.button} + > + Back + </Button> + <Button + variant="contained" + color="primary" + onClick={this.handleNext} + className={classes.button} + > + Next + </Button> + {activeStep !== steps.length + && (this.state.completed[this.state.activeStep] ? ( + <Typography variant="caption" className={classes.completed}> + Step + {' '} + {activeStep + 1} + {' '} +already completed + </Typography> + ) : ( + <Button variant="contained" color="primary" onClick={this.handleComplete}> + {this.completedSteps() === this.totalSteps() - 1 ? 'Finish' : 'Complete Step'} + </Button> + ))} + </div> + </div> + )} + </div> + </div> + ); + } +} + +HorizontalNonLinear.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(HorizontalNonLinear); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js new file mode 100644 index 0000000..c9d7cf1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; + +import { MobileStepper, Button, Grid, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + [theme.breakpoints.up('sm')]: { + width: 400, + margin: '0 auto' + }, + flexGrow: 1, + }, + title: { + textAlign: 'center', + margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`, + }, +}); + +class MobileSteppers extends React.Component { + state = { + activeStepDots: 0, + activeStepLine: 0, + }; + + handleNextDots = () => { + this.setState({ + activeStepDots: this.state.activeStepDots + 1, + }); + }; + + handleBackDots = () => { + this.setState({ + activeStepDots: this.state.activeStepDots - 1, + }); + }; + + handleNextLine = () => { + this.setState({ + activeStepLine: this.state.activeStepLine + 1, + }); + }; + + handleBackLine = () => { + this.setState({ + activeStepLine: this.state.activeStepLine - 1, + }); + }; + + render() { + const { classes, theme } = this.props; + + return ( + <Grid container spacing={2}> + <Grid item container justify="center" direction="column" md={6}> + <Typography variant="button" className={classes.title}> + Mobile Stepper - Dots + </Typography> + <MobileStepper + variant="dots" + steps={6} + position="static" + activeStep={this.state.activeStepDots} + className={classes.root} + nextButton={( + <Button size="small" onClick={this.handleNextDots} disabled={this.state.activeStepDots === 5}> + Next + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </Button> + )} + backButton={( + <Button size="small" onClick={this.handleBackDots} disabled={this.state.activeStepDots === 0}> + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + Back + </Button> + )} + /> + </Grid> + <Grid item container justify="center" direction="column" md={6}> + <Typography variant="button" className={classes.title}> + Mobile Stepper - Progress + </Typography> + <MobileStepper + variant="progress" + steps={6} + position="static" + activeStep={this.state.activeStepLine} + className={classes.root} + nextButton={( + <Button size="small" onClick={this.handleNextLine} disabled={this.state.activeStepLine === 5}> + Next + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </Button> + )} + backButton={( + <Button size="small" onClick={this.handleBackLine} disabled={this.state.activeStepLine === 0}> + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + Back + </Button> + )} + /> + </Grid> + </Grid> + ); + } +} + +MobileSteppers.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(MobileSteppers); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperCarousel.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperCarousel.js new file mode 100644 index 0000000..0f127b3 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperCarousel.js @@ -0,0 +1,187 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; +import SwipeableViews from 'react-swipeable-views'; +import imgApi from 'ba-api/images'; + +import { MobileStepper, Paper, Typography, Button, Grid } from '@material-ui/core'; + +const tutorialSteps = [ + { + label: 'How to be happy :)', + imgPath: imgApi[45], + }, + { + label: '1. Work with something that you like, like…', + imgPath: imgApi[33], + }, + { + label: '2. Keep your friends close to you and hangout with them', + imgPath: imgApi[14], + }, + { + label: '3. Travel everytime that you have a chance', + imgPath: imgApi[9], + }, + { + label: '4. And contribute to Material-UI :D', + imgPath: imgApi[44], + }, +]; + +const styles = theme => ({ + root: { + [theme.breakpoints.up('sm')]: { + width: 400, + }, + flexGrow: 1, + }, + header: { + textAlign: 'center', + height: 50, + paddingLeft: theme.spacing(4), + marginBottom: 20, + backgroundColor: theme.palette.background.default, + }, + img: { + height: 255, + maxWidth: 400, + overflow: 'hidden', + width: '100%', + margin: '0 auto' + }, + figure: { + maxWidth: 400, + overflow: 'hidden', + margin: '0 auto' + }, + mobileStepper: { + [theme.breakpoints.up('sm')]: { + width: 400, + }, + margin: '0 auto', + textAlign: 'center' + } +}); + +class StepperCarousel extends React.Component { + state = { + activeStep: 0, + activeStepSwipe: 0, + }; + + handleNext = () => { + this.setState(prevState => ({ + activeStep: prevState.activeStep + 1, + })); + }; + + handleBack = () => { + this.setState(prevState => ({ + activeStep: prevState.activeStep - 1, + })); + }; + + handleNextSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe + 1, + })); + }; + + handleBackSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe - 1, + })); + }; + + handleStepChangeSwipe = activeStepSwipe => { + this.setState({ activeStepSwipe }); + }; + + render() { + const { classes, theme } = this.props; + const { activeStep, activeStepSwipe } = this.state; + + const maxSteps = tutorialSteps.length; + const maxStepsSwipe = tutorialSteps.length; + + return ( + <Grid container spacing={2}> + <Grid item container justify="center" direction="column" md={6}> + <Paper square elevation={0} className={classes.header}> + <Typography>{tutorialSteps[activeStep].label}</Typography> + </Paper> + <img + className={classes.img} + src={tutorialSteps[activeStep].imgPath} + alt={tutorialSteps[activeStep].label} + /> + <MobileStepper + variant="text" + steps={maxSteps} + position="static" + activeStep={activeStep} + className={classes.mobileStepper} + nextButton={( + <Button size="small" onClick={this.handleNext} disabled={activeStep === maxSteps - 1}> + Next + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </Button> + )} + backButton={( + <Button size="small" onClick={this.handleBack} disabled={activeStep === 0}> + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + Back + </Button> + )} + /> + </Grid> + <Grid item container justify="center" direction="column" md={6}> + <Paper square elevation={0} className={classes.header}> + <Typography>{tutorialSteps[activeStepSwipe].label}</Typography> + </Paper> + <SwipeableViews + axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'} + index={this.state.activeStepSwipe} + onChangeIndex={this.handleStepChangeSwipe} + enableMouseEvents + > + {tutorialSteps.map((step, index) => ( + <div className={classes.figure} key={index.toString()}> + <img key={step.label} className={classes.img} src={step.imgPath} alt={step.label} /> + </div> + ))} + </SwipeableViews> + <MobileStepper + variant="text" + steps={maxStepsSwipe} + position="static" + activeStep={activeStepSwipe} + className={classes.mobileStepper} + nextButton={( + <Button size="small" onClick={this.handleNextSwipe} disabled={activeStepSwipe === maxStepsSwipe - 1}> + Next + {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />} + </Button> + )} + backButton={( + <Button size="small" onClick={this.handleBackSwipe} disabled={activeStepSwipe === 0}> + {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />} + Back + </Button> + )} + /> + </Grid> + </Grid> + ); + } +} + +StepperCarousel.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(StepperCarousel); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperError.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperError.js new file mode 100644 index 0000000..85630a1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/StepperError.js @@ -0,0 +1,178 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Stepper, Step, StepLabel, Button, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + }, + button: { + marginRight: theme.spacing(1), + }, + instructions: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + }, +}); + +function getSteps() { + return ['Select campaign settings', 'Create an ad group', 'Create an ad']; +} + +function getStepContent(step) { + switch (step) { + case 0: + return 'Select campaign settings...'; + case 1: + return 'What is an ad group anyways?'; + case 2: + return 'This is the bit I really care about!'; + default: + return 'Unknown step'; + } +} + +class StepperError extends React.Component { + static propTypes = { + classes: PropTypes.object.isRequired, + }; + + state = { + activeStep: 0, + skipped: new Set(), + }; + + isStepOptional = step => ( + step === 1 + ); + + isStepSkipped(step) { + return this.state.skipped.has(step); + } + + isStepFailed = step => ( + step === 1 + ); + + handleNext = () => { + const { activeStep } = this.state; + let { skipped } = this.state; + if (this.isStepSkipped(activeStep)) { + skipped = new Set(skipped.values()); + skipped.delete(activeStep); + } + this.setState({ + activeStep: activeStep + 1, + skipped, + }); + }; + + handleBack = () => { + const { activeStep } = this.state; + this.setState({ + activeStep: activeStep - 1, + }); + }; + + handleSkip = () => { + const { activeStep } = this.state; + if (!this.isStepOptional(activeStep)) { + // You probably want to guard against something like this, + // it should never occur unless someone's actively trying to break something. + throw new Error("You can't skip a step that isn't optional."); + } + const skipped = new Set(this.state.skipped.values()); + skipped.add(activeStep); + this.setState({ + activeStep: this.state.activeStep + 1, + skipped, + }); + }; + + handleReset = () => { + this.setState({ + activeStep: 0, + }); + }; + + render() { + const { classes } = this.props; + const steps = getSteps(); + const { activeStep } = this.state; + + return ( + <div className={classes.root}> + <Stepper activeStep={activeStep}> + {steps.map((label, index) => { + const props = {}; + const labelProps = {}; + if (this.isStepOptional(index)) { + labelProps.optional = ( + <Typography variant="caption" color="error"> + Alert message + </Typography> + ); + } + if (this.isStepFailed(index)) { + labelProps.error = true; + } + if (this.isStepSkipped(index)) { + props.completed = false; + } + return ( + <Step key={label} {...props}> + <StepLabel {...labelProps}>{label}</StepLabel> + </Step> + ); + })} + </Stepper> + <div> + {activeStep === steps.length ? ( + <div> + <Typography className={classes.instructions}> + All steps completed - you"re finished + </Typography> + <Button onClick={this.handleReset} className={classes.button}> + Reset + </Button> + </div> + ) : ( + <div> + <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography> + <div> + <Button + disabled={activeStep === 0} + onClick={this.handleBack} + className={classes.button} + > + Back + </Button> + {this.isStepOptional(activeStep) && ( + <Button + variant="contained" + color="primary" + onClick={this.handleSkip} + className={classes.button} + > + Skip + </Button> + )} + <Button + variant="contained" + color="primary" + onClick={this.handleNext} + className={classes.button} + > + {activeStep === steps.length - 1 ? 'Finish' : 'Next'} + </Button> + </div> + </div> + )} + </div> + </div> + ); + } +} + +export default withStyles(styles)(StepperError); diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js new file mode 100644 index 0000000..5a2314b --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Stepper, Step, StepLabel, StepContent, Button, Paper, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '90%', + }, + button: { + marginTop: theme.spacing(1), + marginRight: theme.spacing(1), + }, + actionsContainer: { + marginBottom: theme.spacing(2), + }, + resetContainer: { + padding: theme.spacing(3), + }, +}); + +function getSteps() { + return ['Select campaign settings', 'Create an ad group', 'Create an ad']; +} + +function getStepContent(step) { + switch (step) { + case 0: + return `For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more.`; + case 1: + return 'An ad group contains one or more ads which target a shared set of keywords.'; + case 2: + return `Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues.`; + default: + return 'Unknown step'; + } +} + +class VerticalStepper extends React.Component { + state = { + activeStep: 0, + }; + + handleNext = () => { + this.setState({ + activeStep: this.state.activeStep + 1, + }); + }; + + handleBack = () => { + this.setState({ + activeStep: this.state.activeStep - 1, + }); + }; + + handleReset = () => { + this.setState({ + activeStep: 0, + }); + }; + + render() { + const { classes } = this.props; + const steps = getSteps(); + const { activeStep } = this.state; + + return ( + <div className={classes.root}> + <Stepper activeStep={activeStep} orientation="vertical"> + {steps.map((label, index) => ( + <Step key={label}> + <StepLabel>{label}</StepLabel> + <StepContent> + <Typography>{getStepContent(index)}</Typography> + <div className={classes.actionsContainer}> + <div> + <Button + disabled={activeStep === 0} + onClick={this.handleBack} + className={classes.button} + > + Back + </Button> + <Button + variant="contained" + color="primary" + onClick={this.handleNext} + className={classes.button} + > + {activeStep === steps.length - 1 ? 'Finish' : 'Next'} + </Button> + </div> + </div> + </StepContent> + </Step> + ))} + </Stepper> + {activeStep === steps.length && ( + <Paper square elevation={0} className={classes.resetContainer}> + <Typography>All steps completed - you"re finished</Typography> + <Button onClick={this.handleReset} className={classes.button}> + Reset + </Button> + </Paper> + )} + </div> + ); + } +} + +VerticalStepper.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(VerticalStepper); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js new file mode 100644 index 0000000..f3aa033 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import RestoreIcon from '@material-ui/icons/Restore'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import LocationOnIcon from '@material-ui/icons/LocationOn'; + +import { Typography, Grid, BottomNavigation, BottomNavigationAction, Icon } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class BottomNav extends React.Component { + state = { + value: 0, + value2: 'recents', + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + handleChange2 = (event, value2) => { + this.setState({ value2 }); + }; + + + render() { + const { classes } = this.props; + const { value, value2 } = this.state; + + return ( + <Grid + container + alignItems="flex-start" + justify="flex-start" + direction="row" + spacing={2} + > + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>With Label</Typography> + <div> + <BottomNavigation + value={value} + onChange={this.handleChange} + showLabels + className={classes.root} + > + <BottomNavigationAction label="Recents" icon={<RestoreIcon />} /> + <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} /> + <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} /> + </BottomNavigation> + </div> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" className={classes.divider}>Without Label</Typography> + <div> + <BottomNavigation value={value2} onChange={this.handleChange2} className={classes.root}> + <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} /> + <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} /> + <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} /> + <BottomNavigationAction label="Folder" value="folder" icon={<Icon>folder</Icon>} /> + </BottomNavigation> + </div> + </Grid> + </Grid> + ); + } +} + +BottomNav.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BottomNav); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js new file mode 100644 index 0000000..00a285e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Paper, Tabs, Tab } from '@material-ui/core'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +class CenteredTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + + return ( + <Paper className={classes.root}> + <Tabs + value={this.state.value} + onChange={this.handleChange} + indicatorColor="primary" + textColor="primary" + centered + > + <Tab label="Item One" /> + <Tab label="Item Two" /> + <Tab label="Item Three" /> + </Tabs> + </Paper> + ); + } +} + +CenteredTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CenteredTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js new file mode 100644 index 0000000..96fd136 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Tabs, Tab, Typography } from '@material-ui/core'; + +const styles = theme => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, + tabsRoot: { + borderBottom: '1px solid #e8e8e8', + }, + tabsIndicator: { + backgroundColor: '#1890ff', + }, + tabRoot: { + textTransform: 'initial', + minWidth: 64, + [theme.breakpoints.up('sm')]: { + minWidth: 72, + }, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(4), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&$tabSelected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#40a9ff', + }, + }, + tabSelected: {}, + typography: { + padding: theme.spacing(3), + }, +}); + +class CustomTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( + <div className={classes.root}> + <Tabs + value={value} + onChange={this.handleChange} + classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }} + > + <Tab + disableRipple + classes={{ root: classes.tabRoot, selected: classes.tabSelected }} + label="Tab 1" + /> + <Tab + disableRipple + classes={{ root: classes.tabRoot, selected: classes.tabSelected }} + label="Tab 2" + /> + <Tab + disableRipple + classes={{ root: classes.tabRoot, selected: classes.tabSelected }} + label="Tab 3" + /> + </Tabs> + <Typography className={classes.typography}>powered by Material-UI</Typography> + </div> + ); + } +} + +CustomTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js new file mode 100644 index 0000000..17808a1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Paper, Tabs, Tab } from '@material-ui/core'; + +class DisabledTab extends React.Component { + state = { + value: 2, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + return ( + <Paper> + <Tabs + value={this.state.value} + indicatorColor="primary" + textColor="primary" + onChange={this.handleChange} + > + <Tab label="Active" /> + <Tab label="Disabled" disabled /> + <Tab label="Active" /> + </Tabs> + </Paper> + ); + } +} + +export default DisabledTab; diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js new file mode 100644 index 0000000..f64240f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js @@ -0,0 +1,80 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import SwipeableViews from 'react-swipeable-views'; +import { AppBar, Tabs, Tab, Typography } from '@material-ui/core'; + +function TabContainer({ children, dir }) { + return ( + <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}> + {children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, + dir: PropTypes.string.isRequired, +}; + +const styles = theme => ({ + root: { + backgroundColor: theme.palette.background.paper, + [theme.breakpoints.up('sm')]: { + width: 500, + }, + margin: '10px auto' + }, +}); + +class FixedTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + handleChangeIndex = index => { + this.setState({ value: index }); + }; + + render() { + const { classes, theme } = this.props; + + return ( + <div className={classes.root}> + <AppBar position="static" color="default"> + <Tabs + value={this.state.value} + onChange={this.handleChange} + indicatorColor="primary" + textColor="primary" + variant="fullWidth" + > + <Tab label="Item One" /> + <Tab label="Item Two" /> + <Tab label="Item Three" /> + </Tabs> + </AppBar> + <SwipeableViews + axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'} + index={this.state.value} + onChangeIndex={this.handleChangeIndex} + > + <TabContainer dir={theme.direction}>Item One</TabContainer> + <TabContainer dir={theme.direction}>Item Two</TabContainer> + <TabContainer dir={theme.direction}>Item Three</TabContainer> + </SwipeableViews> + </div> + ); + } +} + +FixedTabs.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(FixedTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js new file mode 100644 index 0000000..ff97d16 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; +import { Paper, Grid, Tabs, Tab, Typography } from '@material-ui/core'; + +export default class IconTabs extends React.Component { + state = { + value: 0, + value2: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + handleChange2 = (event, value2) => { + this.setState({ value2 }); + }; + + render() { + return ( + <div> + <Grid container spacing={3}> + <Grid item md={6} xs={12}> + <Typography variant="button" gutterBottom>Without Text</Typography> + <Paper> + <Tabs + value={this.state.value2} + onChange={this.handleChange2} + variant="fullWidth" + indicatorColor="primary" + textColor="primary" + > + <Tab icon={<PhoneIcon />} /> + <Tab icon={<FavoriteIcon />} /> + <Tab icon={<PersonPinIcon />} /> + </Tabs> + </Paper> + </Grid> + <Grid item md={6} xs={12}> + <Typography variant="button" gutterBottom>With Text</Typography> + <Paper> + <Tabs + value={this.state.value} + onChange={this.handleChange} + variant="fullWidth" + indicatorColor="secondary" + textColor="secondary" + > + <Tab icon={<PhoneIcon />} label="RECENTS" /> + <Tab icon={<FavoriteIcon />} label="FAVORITES" /> + <Tab icon={<PersonPinIcon />} label="NEARBY" /> + </Tabs> + </Paper> + </Grid> + </Grid> + </div> + ); + } +} diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js new file mode 100644 index 0000000..724ac03 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { AppBar, Tabs, Tab, Typography } from '@material-ui/core'; + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +}); + +class LongTextTabs extends React.Component { + state = { + value: 'one', + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( + <div className={classes.root}> + <AppBar position="static"> + <Tabs value={value} onChange={this.handleChange}> + <Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" /> + <Tab value="two" label="Item Two" /> + <Tab value="three" label="Item Three" /> + </Tabs> + </AppBar> + {value === 'one' && <TabContainer>Item One</TabContainer>} + {value === 'two' && <TabContainer>Item Two</TabContainer>} + {value === 'three' && <TabContainer>Item Three</TabContainer>} + </div> + ); + } +} + +LongTextTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(LongTextTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js new file mode 100644 index 0000000..98f52d2 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import PhoneIcon from '@material-ui/icons/Phone'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import PersonPinIcon from '@material-ui/icons/PersonPin'; +import HelpIcon from '@material-ui/icons/Help'; +import ShoppingBasket from '@material-ui/icons/ShoppingBasket'; +import ThumbDown from '@material-ui/icons/ThumbDown'; +import ThumbUp from '@material-ui/icons/ThumbUp'; +import { AppBar, Tabs, Tab, Typography } from '@material-ui/core'; + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + }, +}); + +class ScrollIconTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( + <div className={classes.root}> + <AppBar position="static" color="default"> + <Tabs + value={value} + onChange={this.handleChange} + variant="scrollable" + scrollButtons="on" + indicatorColor="primary" + textColor="secondary" + > + <Tab label="Item One" icon={<PhoneIcon />} /> + <Tab label="Item Two" icon={<FavoriteIcon />} /> + <Tab label="Item Three" icon={<PersonPinIcon />} /> + <Tab label="Item Four" icon={<HelpIcon />} /> + <Tab label="Item Five" icon={<ShoppingBasket />} /> + <Tab label="Item Six" icon={<ThumbDown />} /> + <Tab label="Item Seven" icon={<ThumbUp />} /> + </Tabs> + </AppBar> + {value === 0 && <TabContainer>Item One</TabContainer>} + {value === 1 && <TabContainer>Item Two</TabContainer>} + {value === 2 && <TabContainer>Item Three</TabContainer>} + {value === 3 && <TabContainer>Item Four</TabContainer>} + {value === 4 && <TabContainer>Item Five</TabContainer>} + {value === 5 && <TabContainer>Item Six</TabContainer>} + {value === 6 && <TabContainer>Item Seven</TabContainer>} + </div> + ); + } +} + +ScrollIconTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ScrollIconTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js new file mode 100644 index 0000000..f7f9477 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { AppBar, Tabs, Tab, Typography } from '@material-ui/core'; + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + width: '100%', + backgroundColor: theme.palette.background.paper, + }, +}); + +class ScrollTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( + <div className={classes.root}> + <AppBar position="static" color="default"> + <Tabs + value={value} + onChange={this.handleChange} + indicatorColor="secondary" + textColor="secondary" + variant="scrollable" + scrollButtons="auto" + > + <Tab label="Item One" /> + <Tab label="Item Two" /> + <Tab label="Item Three" /> + <Tab label="Item Four" /> + <Tab label="Item Five" /> + <Tab label="Item Six" /> + <Tab label="Item Seven" /> + </Tabs> + </AppBar> + {value === 0 && <TabContainer>Item One</TabContainer>} + {value === 1 && <TabContainer>Item Two</TabContainer>} + {value === 2 && <TabContainer>Item Three</TabContainer>} + {value === 3 && <TabContainer>Item Four</TabContainer>} + {value === 4 && <TabContainer>Item Five</TabContainer>} + {value === 5 && <TabContainer>Item Six</TabContainer>} + {value === 6 && <TabContainer>Item Seven</TabContainer>} + </div> + ); + } +} + +ScrollTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ScrollTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js new file mode 100644 index 0000000..fd791cc --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { AppBar, Tabs, Tab, Typography } from '@material-ui/core'; + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +}); + +class SimpleTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( + <div className={classes.root}> + <AppBar position="static"> + <Tabs value={value} onChange={this.handleChange}> + <Tab label="Item One" /> + <Tab label="Item Two" /> + <Tab label="Item Three" href="#basic-tabs" /> + </Tabs> + </AppBar> + {value === 0 && <TabContainer>Item One</TabContainer>} + {value === 1 && <TabContainer>Item Two</TabContainer>} + {value === 2 && <TabContainer>Item Three</TabContainer>} + </div> + ); + } +} + +SimpleTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleTabs); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js b/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js new file mode 100644 index 0000000..921a668 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import TagFacesIcon from '@material-ui/icons/TagFaces'; + +import { Avatar, Chip, Paper } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + justifyContent: 'center', + flexWrap: 'wrap', + padding: theme.spacing(0.5), + }, + chip: { + margin: theme.spacing(0.5), + }, +}); + +class ArrayTags extends React.Component { + state = { + chipData: [ + { key: 0, label: 'Angular' }, + { key: 1, label: 'jQuery' }, + { key: 2, label: 'Polymer' }, + { key: 3, label: 'React' }, + { key: 4, label: 'Vue.js' }, + ], + }; + + handleDelete = data => () => { + if (data.label === 'React') { + alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert + return; + } + + const chipData = [...this.state.chipData]; + const chipToDelete = chipData.indexOf(data); + chipData.splice(chipToDelete, 1); + this.setState({ chipData }); + }; + + render() { + const { classes } = this.props; + + return ( + <Paper className={classes.root}> + {this.state.chipData.map(data => { + let avatar = null; + + if (data.label === 'React') { + avatar = ( + <Avatar> + <TagFacesIcon className={classes.svgIcon} /> + </Avatar> + ); + } + + return ( + <Chip + key={data.key} + avatar={avatar} + label={data.label} + onDelete={this.handleDelete(data)} + className={classes.chip} + /> + ); + })} + </Paper> + ); + } +} + +ArrayTags.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ArrayTags); diff --git a/front/odiparpack/app/containers/UiElements/demos/Tags/BasicTags.js b/front/odiparpack/app/containers/UiElements/demos/Tags/BasicTags.js new file mode 100644 index 0000000..f2e3693 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Tags/BasicTags.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FaceIcon from '@material-ui/icons/Face'; +import DoneIcon from '@material-ui/icons/Done'; + +import { Avatar, Chip } from '@material-ui/core'; + +const styles = theme => ({ + root: { + display: 'flex', + justifyContent: 'center', + flexWrap: 'wrap', + }, + chip: { + margin: theme.spacing(1), + }, +}); + +function handleDelete() { + alert('You clicked the delete icon.'); // eslint-disable-line no-alert +} + +function handleClick() { + alert('You clicked the Chip.'); // eslint-disable-line no-alert +} + +function BasicTags(props) { + const { classes } = props; + return ( + <div className={classes.root}> + <Chip label="Basic Tag" className={classes.chip} color="primary" /> + <Chip + avatar={<Avatar>MB</Avatar>} + label="Clickable Tag" + onClick={handleClick} + className={classes.chip} + color="primary" + /> + <Chip + avatar={<Avatar src="/images/pp_girl.svg" />} + label="Deletable Tag" + onDelete={handleDelete} + className={classes.chip} + /> + <Chip + avatar={( + <Avatar> + <FaceIcon /> + </Avatar> + )} + label="Clickable Deletable Tag" + onClick={handleClick} + onDelete={handleDelete} + className={classes.chip} + /> + <Chip + label="Custom delete icon Tag" + onClick={handleClick} + onDelete={handleDelete} + className={classes.chip} + deleteIcon={<DoneIcon />} + /> + </div> + ); +} + +BasicTags.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BasicTags); diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js new file mode 100644 index 0000000..38088a9 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import { Typography, Divider } from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class AlignTypo extends React.Component { + render() { + const { classes } = this.props; + return ( + <div> + <Typography variant="subtitle1" className={Type.textCenter} gutterBottom> + Align center: Nullam in + <span className={Type.bold}> tortor </span> + <span className={Type.italic}> ligula </span> + </Typography> + <Divider className={classes.divider} /> + <Typography variant="h5" className={Type.textLeft} gutterBottom> + Align Left + </Typography> + <Typography variant="h5" className={Type.textRight} gutterBottom> + Align Right + </Typography> + <Divider className={classes.divider} /> + <Typography variant="h4" className={Type.medium} gutterBottom>Justify Align</Typography> + <Typography gutterBottom className={Type.textJustify}> + Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti. + Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. + </Typography> + </div> + ); + } +} + +AlignTypo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AlignTypo); diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js new file mode 100644 index 0000000..b7b1516 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js @@ -0,0 +1,35 @@ +import React from 'react'; +import Type from 'ba-styles/Typography.scss'; +import { Typography } from '@material-ui/core'; + +class ColouredTypo extends React.Component { + render() { + return ( + <div> + <Typography variant="h5" className={Type.textInfo} gutterBottom> + Ut sed eros finibus + </Typography> + <Typography variant="body1" className={Type.textSuccess} gutterBottom> + Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. + </Typography> + <Typography variant="h5" className={Type.textWarning} gutterBottom> + Aliquam nec ex aliquet + </Typography> + <Typography variant="h6" className={Type.textError} gutterBottom> + Aenean facilisis vitae purus facilisis semper + </Typography> + <Typography className={Type.textGreyDark} gutterBottom> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum. + </Typography> + <Typography className={Type.textGrey} gutterBottom> + Vivamus et luctus mauris. Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam. + </Typography> + <Typography className={Type.textGreyLight} gutterBottom> + Curabitur egestas consequat lorem, vel fermentum augue porta id. + </Typography> + </div> + ); + } +} + +export default ColouredTypo; diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js new file mode 100644 index 0000000..6a1079f --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js @@ -0,0 +1,139 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import { Typography, Divider } from '@material-ui/core'; + +const background = { + width: '100%', + maxWidth: 500, + background: + 'transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAMKGlDQ1BJQ0MgUHJvZmlsZQAASMetl3dUU8kex+eWJCQktEAoUkJvovQqNbQIAlIFGyEJJJQYEoKKHRUVWAsqFqzoqoiiawFkURELtkWx9wUVFGVdLNhQeZME0PW998c75805c+dzfvc3v/n+7p2ZewcA9RiOWJyNagCQI8qTxIYFMSckpzBJHYACMKAFrIANhysVB8bERAJYhtp/lve3ACJvrzvIY4H/rWjy+FIuAEgM5DSelJsD+QgAuDtXLMkDgNAD7ebT88SQiVAl0JZAgZAt5JyhZE85pyk5UuETH8uCnAqACpXDkWQAoCbXxcznZsA4aqWQHUU8oQhyI2Q/roDDg/wF8sicnGmQ1W0g26T9ECfjHzHThmNyOBnDrMxFUVSChVJxNmcm+H+XnGzZ0BjmsFIFkvBYec7y55Y1LULOVMjnRWlR0ZC1IN8Q8hT+cu4SyMITBv0/cqUs+MwAAwCUyuMER0A2hGwmy0oIHGQ/jkTRF/qjKQWC+CRlfFQkmRY7GB8tEGVHRQ7GKRXw2UNcyZeGxA35pAtD2ZDhO0TrhXns+MGY5/OFiVGQ1SA/kGbFRQz2fVEgYEUNjyWLlWuG7xwDOdKhXDCLdElorNIfcxcI2VGD9sg8QXy4si82hctRaNCDnMmXTogc0sPjB4co9WCFfFHCoE6sTJwXFDvov1OcHTPojzXys8PkdjPIrdL8uKG+vXlwsilzwUEmZ2yMclxcW5wXE6/UhjNBJGCBYMAEMljTwDSQCYStPXU9YOhOKOAACcgAfOAwaBnqkaS4I4LXOFAA/oLEB9LhfkGKu3yQD+1fh63KqwNIV9zNV/TIAl2Qc3AD3A/3wSPhNQBWZ9wT9xrqx1QfGpUYQgwmhhNDibZThYWSn+IyARdmkA2rBETAlg+zkmsQDWn/HofQRWgjPCbcJLQT7oJE8BT6Cf8tw+/RhMO2caAdRg0dzC7tx+xwK6jaDQ/CfaF+qB1n4AbAAXeFmQTi/jA3N2j9/tT+k3bZkGqyIxkl65IDyDY/+6nZqbkN95Hn9qNOpa604UxYw3d+Ho31Q2482Eb87IktxQ5jLdgp7ALWiNUBJnYSq8cuY8flPDw3nirmxtBosQo9WTCOcMjHsdqx2/HLT2NzBseXKN4/yOPPyJMvHNY08UyJMEOQxwyEuzWfyRZxR41kOjs6eQAg3/uVW8tbhmJPRxgXv9sK3wHgyxsYGGj8bouEa/LIYgAoXd9t1ifgctYF4HwJVybJV9pw+YUAvyrqcKXoA2O4d9nAjJyBO/ABASAEjAXRIB4kgynwOQtADlQ9HcwGC0ARKAErwVqwEWwFO8AesB8cAnWgEZwC58AlcBXcBPfhXOkEL0EveA/6EQQhITSEjugjJoglYo84I56IHxKCRCKxSDKSimQgIkSGzEYWIiVIGbIR2Y5UIb8hx5BTyAWkDbmLdCDdyBvkM4qhVFQbNUKt0NGoJxqIRqDx6GQ0A81FC9BF6HJ0PVqJ7kNr0VPoJfQm2o6+RPswgKliDMwUc8A8MRYWjaVg6ZgEm4sVY+VYJVaDNcA3fR1rx3qwTzgRp+NM3AHO13A8AefiufhcvBTfiO/Ba/Ez+HW8A+/FvxFoBEOCPcGbwCZMIGQQphOKCOWEXYSjhLNwTXUS3hOJRAbRmugB12oyMZM4i1hK3Ew8QGwithGfEPtIJJI+yZ7kS4omcUh5pCLSBtI+0knSNVIn6aOKqoqJirNKqEqKikilUKVcZa/KCZVrKs9U+skaZEuyNzmazCPPJK8g7yQ3kK+QO8n9FE2KNcWXEk/JpCygrKfUUM5SHlDeqqqqmql6qY5XFarOV12velD1vGqH6ieqFtWOyqJOosqoy6m7qU3Uu9S3NBrNihZAS6Hl0ZbTqminaY9oH9XoaqPU2Go8tXlqFWq1atfUXqmT1S3VA9WnqBeol6sfVr+i3qNB1rDSYGlwNOZqVGgc07it0adJ13TSjNbM0SzV3Kt5QfO5FknLSitEi6e1SGuH1mmtJ3SMbk5n0bn0hfSd9LP0Tm2itrU2WztTu0R7v3ardq+Olo6rTqLODJ0KneM67QyMYcVgM7IZKxiHGLcYn3WNdAN1+brLdGt0r+l+0BuhF6DH1yvWO6B3U++zPlM/RD9Lf5V+nf5DA9zAzmC8wXSDLQZnDXpGaI/wGcEdUTzi0Ih7hqihnWGs4SzDHYaXDfuMjI3CjMRGG4xOG/UYM4wDjDON1xifMO42oZv4mQhN1picNHnB1GEGMrOZ65lnmL2mhqbhpjLT7aatpv1m1mYJZoVmB8wemlPMPc3TzdeYN5v3WphYjLOYbVFtcc+SbOlpKbBcZ9li+cHK2irJaolVndVzaz1rtnWBdbX1Axuajb9Nrk2lzQ1boq2nbZbtZturdqidm53ArsLuij1q724vtN9s3zaSMNJrpGhk5cjbDlSHQId8h2qHjlGMUZGjCkfVjXo12mJ0yuhVo1tGf3N0c8x23Ol430nLaaxToVOD0xtnO2euc4XzDReaS6jLPJd6l9eu9q581y2ud9zobuPclrg1u31193CXuNe4d3tYeKR6bPK47antGeNZ6nnei+AV5DXPq9Hrk7e7d573Ie+/fRx8snz2+jwfYz2GP2bnmCe+Zr4c3+2+7X5Mv1S/bX7t/qb+HP9K/8cB5gG8gF0BzwJtAzMD9wW+CnIMkgQdDfrA8mbNYTUFY8FhwcXBrSFaIQkhG0MehZqFZoRWh/aGuYXNCmsKJ4RHhK8Kv802YnPZVezesR5j54w9E0GNiIvYGPE40i5SEtkwDh03dtzqcQ+iLKNEUXXRIJodvTr6YYx1TG7M7+OJ42PGV4zvinWKnR3bEkePmxq3N+59fFD8ivj7CTYJsoTmRPXESYlViR+SgpPKktonjJ4wZ8KlZINkYXJ9CiklMWVXSt/EkIlrJ3ZOcptUNOnWZOvJMyZfmGIwJXvK8anqUzlTD6cSUpNS96Z+4URzKjl9aey0TWm9XBZ3HfclL4C3htfN9+WX8Z+l+6aXpT/P8M1YndEt8BeUC3qELOFG4evM8MytmR+yorN2Zw1kJ2UfyFHJSc05JtISZYnOTDOeNmNam9heXCRuz/XOXZvbK4mQ7JIi0snS+jxt+JN9WWYjWyzryPfLr8j/OD1x+uEZmjNEMy7PtJu5bOazgtCCX2fhs7izmmebzl4wu2NO4Jztc5G5aXOb55nPWzSvc37Y/D0LKAuyFvxR6FhYVvhuYdLChkVGi+YverI4bHF1kVqRpOj2Ep8lW5fiS4VLW5e5LNuw7Fsxr/hiiWNJecmXUm7pxV+cfln/y8Dy9OWtK9xXbFlJXClaeWuV/6o9ZZplBWVPVo9bXbuGuaZ4zbu1U9deKHct37qOsk62rn195Pr6DRYbVm74slGw8WZFUMWBTYablm36sJm3+dqWgC01W422lmz9vE247c72sO21lVaV5TuIO/J3dO1M3Nnyq+evVbsMdpXs+rpbtLt9T+yeM1UeVVV7DfeuqEarZdXd+ybtu7o/eH99jUPN9gOMAyUHwUHZwRe/pf5261DEoebDnodrjlge2XSUfrS4FqmdWdtbJ6hrr0+ubzs29lhzg0/D0d9H/b670bSx4rjO8RUnKCcWnRg4WXCyr0nc1HMq49ST5qnN909POH3jzPgzrWcjzp4/F3rudEtgy8nzvucbL3hfOHbR82LdJfdLtZfdLh/9w+2Po63urbVXPK7UX/W62tA2pu3ENf9rp64HXz93g33j0s2om223Em7duT3pdvsd3p3nd7Pvvr6Xf6///vwHhAfFDzUelj8yfFT5p+2fB9rd2493BHdcfhz3+P4T7pOXT6VPv3Qu6qJ1lT8zeVb13Pl5Y3do99UXE190vhS/7O8p+kvzr02vbF4d+Tvg78u9E3o7X0teD7wpfav/dvc713fNfTF9j97nvO//UPxR/+OeT56fWj4nfX7WP/0L6cv6r7ZfG75FfHswkDMwIOZIOIpfAQxWND0dgDe7AaAlA0C/Cv8fJirPZoqCKM+TCgL/jZXnN0VxB6AGNvLfcFYTAAdhtZoPYwcAIP8djw8AqIvLcB0s0nQXZ2UsKjzhED4ODLw1AoDUAMBXycBA/+aBga87odi7ADTlKs+E8iI/g25zldM1Rvb2n89m/wJHBnEU5n9PrQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAAd0SU1FB+EKBRI2IMFyTLcAAAAaSURBVAjXY/h++dF/hl+/fv1nYmBgYMBJAAAKEQellAoQBwAAAABJRU5ErkJggg==)', // eslint-disable-line max-len +}; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class GeneralTypo extends React.Component { + render() { + const { classes } = this.props; + return ( + <div style={background}> + <Typography variant="h4" gutterBottom> + Lorem ipsum dolor + {' '} + <span className={Type.bold}>sit amet</span> + </Typography> + <Typography variant="subtitle1" gutterBottom> + Duis tristique metus magna, lobortis aliquam risus euismod sit amet. + </Typography> + <Typography variant="subtitle1" gutterBottom> + Nullam in + <span className={Type.bold}> tortor </span> + <span className={Type.italic}> ligula </span> + </Typography> + <Divider className={classes.divider} /> + <Typography variant="h5" gutterBottom> + <span className={Type.bolder}>Bolder</span> + + <span className={Type.bold}>Bold</span> + + <span className={Type.medium}>Medium</span> + + <br /> + <span className={Type.regular}>Regular</span> + + <span className={Type.light}>Light</span> + + <span className={Type.lighter}>Lighter</span> + + </Typography> + <Typography gutterBottom> + Duis tristique metus magna, lobortis aliquam risus euismod sit amet. Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut. Nulla lobortis nunc vitae nisi semper semper. + {' '} + <br /> + Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. + </Typography> + <Divider className={classes.divider} /> + <Typography variant="h4" className={classNames(Type.light, Type.uppercase)} gutterBottom> + Vestibulum nec mi + {' '} + <span className={Type.bolder}>suscipit</span> + </Typography> + <Typography variant="body1" className={Type.lowercase} gutterBottom> + <span className={Type.bolder}>Bolder</span> + + <span className={Type.bold}>Bold</span> + + <span className={Type.medium}>Medium</span> + + <span className={Type.regular}>Regular</span> + + <span className={Type.light}>Light</span> + + <span className={Type.lighter}>Lighter</span> + + </Typography> + <Typography gutterBottom className={Type.uppercase}> + Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti. + <br /> + Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at. Duis sed augue leo. Phasellus ante massa, aliquam non ante at, suscipit ornare ipsum. Quisque a consequat ante, at volutpat enim. + </Typography> + <Divider className={classes.divider} /> + <Typography variant="h6" className={Type.lighter} gutterBottom> + <span className={Type.bold}>Numbers</span> + {' '} +looks great! 1234 + <span className={classNames(Type.bold, Type.italic, Type.underline)}>56</span> +7890 + </Typography> + <Typography variant="h6" className={Type.regular} gutterBottom> + Let your Creativity Flow + {' '} + <span className={Type.bold}> +123 + <sup>$</sup> + </span> + </Typography> + <Typography variant="h6" className={Type.Bold} gutterBottom> + Numerics + {' '} + <span className={Type.light}> +123 + <sup className={Type.italic}>00</sup> + </span> + </Typography> + <Divider className={classes.divider} /> + <Typography variant="body1" gutterBottom> + Body 2 + </Typography> + <Typography variant="body1" gutterBottom align="right"> + Body 1 + </Typography> + <Typography variant="caption" gutterBottom align="center"> + Caption + </Typography> + <Typography gutterBottom noWrap> + {` + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + `} + </Typography> + <Typography variant="button" gutterBottom> + Button + </Typography> + </div> + ); + } +} + +GeneralTypo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(GeneralTypo); diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js b/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js new file mode 100644 index 0000000..cf97396 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Typography } from '@material-ui/core'; + +class Heading extends React.Component { + render() { + return ( + <div> + {/* <Typography variant="h1" gutterBottom> + Disp 4 + </Typography> + <Typography variant="h2" gutterBottom> + Display 3 + </Typography> + <Typography variant="h3" gutterBottom> + Display 2 + </Typography> + <Typography variant="h4" gutterBottom> + Display 1 + </Typography> + <Typography variant="h5" gutterBottom> + Headline + </Typography> + <Typography variant="h6" gutterBottom> + Title + </Typography> + <Typography variant="subtitle1" gutterBottom> + Subheading + </Typography> + <Typography gutterBottom noWrap> + {` + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + `} + </Typography> */} + <Typography variant="h4"> + {`h4 Título`} + </Typography> + + <Typography variant="h5"> + {`h5 Subtítulos`} + </Typography> + + <Typography variant="h6"> + {`h6 Título de tablas`} + </Typography> + + <Typography> + {` Cuerpo de texto `} + </Typography> + + </div> + ); + } +} + +export default Heading; diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js new file mode 100644 index 0000000..2f76ff1 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import { Typography, Divider } from '@material-ui/core'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class ListTypo extends React.Component { + render() { + const { classes } = this.props; + return ( + <div> + <Typography variant="button" className={classes.divider}>Unordered List</Typography> + <div> + <ul className={Type.list}> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li> +Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <Divider className={classes.divider} /> + <Typography variant="button" className={classes.divider}>Ordered List</Typography> + <div> + <ul className={Type.orderedlist}> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li> +Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + </div> + ); + } +} + +ListTypo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ListTypo); diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js new file mode 100644 index 0000000..afd9197 --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Quote } from 'ba-components'; + +const styles = theme => ({ + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + } +}); + +class QuotesDemo extends React.Component { + render() { + const { classes } = this.props; + return ( + <div> + <div className={classes.divider}> + <Quote align="left" content="Imagine all the people living life in peace. You may say I'm a dreamer, but I'm not the only one. I hope someday you'll join us, and the world will be as one." footnote="John Lennon" /> + </div> + <div className={classes.divider}> + <Quote align="right" content="A lot of people are afraid to say what they want. That's why they don't get what they want." footnote="Madonna" /> + </div> + </div> + ); + } +} + +QuotesDemo.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(QuotesDemo); diff --git a/front/odiparpack/app/containers/UiElements/demos/index.js b/front/odiparpack/app/containers/UiElements/demos/index.js new file mode 100644 index 0000000..311d50e --- /dev/null +++ b/front/odiparpack/app/containers/UiElements/demos/index.js @@ -0,0 +1,117 @@ +// Badges +export CommonBadges from './Badges/CommonBadges'; +export VariantBadges from './Badges/VariantBadges'; +// Avatars +export AvatarsDemo from './Avatars/AvatarsDemo'; +export AvatarsPractice from './Avatars/AvatarsPractice'; +// Accordion +export SimpleAccordion from './Accordion/SimpleAccordion'; +export AdvancedAccordion from './Accordion/AdvancedAccordion'; +export ControlledAccordion from './Accordion/ControlledAccordion'; +// List +export ListBasic from './List/ListBasic'; +export ListControl from './List/ListControl'; +export ListMenu from './List/ListMenu'; +export ListInteractive from './List/ListInteractive'; +export PinnedList from './List/PinnedList'; +// Popover & Tooltip +export SimpleTooltips from './PopoverTooltip/SimpleTooltips'; +export PositionedTooltips from './PopoverTooltip/PositionedTooltips'; +export SimplePopover from './PopoverTooltip/SimplePopover'; +export PopoverPlayground from './PopoverTooltip/PopoverPlayground'; +export DelayTooltips from './PopoverTooltip/DelayTooltips'; +export TransitionsTooltips from './PopoverTooltip/TransitionsTooltips'; +export TriggersTooltips from './PopoverTooltip/TriggersTooltips'; +export CustomizedTooltips from './PopoverTooltip/CustomizedTooltips'; +// Notification +export SimpleNotif from './Notification/SimpleNotif'; +export StyledNotif from './Notification/StyledNotif'; +export TransitionNotif from './Notification/TransitionNotif'; +export MobileNotif from './Notification/MobileNotif'; +// Typography +export GeneralTypo from './Typography/GeneralTypo'; +export Heading from './Typography/Heading'; +export ListTypo from './Typography/ListTypo'; +export ColouredTypo from './Typography/ColouredTypo'; +export QuotesDemo from './Typography/QuotesDemo'; +export AlignTypo from './Typography/AlignTypo'; +// Tabs +export SimpleTabs from './Tabs/SimpleTabs'; +export LongTextTabs from './Tabs/LongTextTabs'; +export FixedTabs from './Tabs/FixedTabs'; +export CenteredTabs from './Tabs/CenteredTabs'; +export IconTabs from './Tabs/IconTabs'; +export ScrollTabs from './Tabs/ScrollTabs'; +export ScrollIconTabs from './Tabs/ScrollIconTabs'; +export DisabledTab from './Tabs/DisabledTab'; +export CustomTabs from './Tabs/CustomTabs'; +export BottomNav from './Tabs/BottomNav'; +// Card +export StandardCards from './Cards/StandardCards'; +export ControlCards from './Cards/ControlCards'; +export PaperSheet from './Cards/PaperSheet'; +export SocialCards from './Cards/SocialCards'; +export EcommerceCards from './Cards/EcommerceCards'; +// Image Grid +export ImageGridList from './ImageGrid/ImageGridList'; +export TitlebarGridList from './ImageGrid/TitlebarGridList'; +export AdvancedGridList from './ImageGrid/AdvancedGridList'; +export SingleLineGridList from './ImageGrid/SingleLineGridList'; +// Progress +export CircularIndeterminate from './Progress/CircularIndeterminate'; +export CircularIntegration from './Progress/CircularIntegration'; +export CircularDeterminate from './Progress/CircularDeterminate'; +export CircularStatic from './Progress/CircularStatic'; +export LinearIndeterminate from './Progress/LinearIndeterminate'; +export LinearDeterminate from './Progress/LinearDeterminate'; +export LinearBuffer from './Progress/LinearBuffer'; +export LinearQuery from './Progress/LinearQuery'; +export LinearStatic from './Progress/LinearStatic'; +export ProgressDelay from './Progress/ProgressDelay'; +// Dialog +export ModalDemo from './DialogModal/ModalDemo'; +export AlertDialog from './DialogModal/AlertDialog'; +export SelectDialog from './DialogModal/SelectDialog'; +export SelectRadioDialog from './DialogModal/SelectRadioDialog'; +export FormDialog from './DialogModal/FormDialog'; +export FullScreenDialog from './DialogModal/FullScreenDialog'; +export ImagePopup from './DialogModal/ImagePopup'; +export ScrollDialog from './DialogModal/ScrollDialog'; +// Steppers +export HorizontalLinear from './Steppers/HorizontalLinear'; +export HorizontalNonLinear from './Steppers/HorizontalNonLinear'; +export StepperError from './Steppers/StepperError'; +export VerticalStepper from './Steppers/VerticalStepper'; +export MobileSteppers from './Steppers/MobileSteppers'; +export StepperCarousel from './Steppers/StepperCarousel'; +// Menu and Drawer +export TemporaryDrawer from './DrawerMenu/TemporaryDrawer'; +export PermanentDrawer from './DrawerMenu/PermanentDrawer'; +export PersistentDrawer from './DrawerMenu/PersistentDrawer'; +export SwipeDrawer from './DrawerMenu/SwipeDrawer'; +export MiniDrawer from './DrawerMenu/MiniDrawer'; +export BasicMenu from './DrawerMenu/BasicMenu'; +export DropdownMenu from './DrawerMenu/DropdownMenu'; +export MenuTransition from './DrawerMenu/MenuTransition'; +export StyledMenu from './DrawerMenu/StyledMenu'; +// Pagination +export TbPagination from './Pagination/TbPagination'; +export TbPaginationCustom from './Pagination/TbPaginationCustom'; +export GeneralPagination from './Pagination/GeneralPagination'; +// Breadcrumb +export ClassicBreadcrumbs from './Breadcrumbs/ClassicBreadcrumbs'; +export PaperBreadcrumbs from './Breadcrumbs/PaperBreadcrumbs'; +// Slider Carousel +export SingleCarousel from './SliderCaraousel/SingleCarousel'; +export MultipleCarousel from './SliderCaraousel/MultipleCarousel'; +export AutoplayCarousel from './SliderCaraousel/AutoplayCarousel'; +export ThumbnailCarousel from './SliderCaraousel/ThumbnailCarousel'; +export VerticalCarousel from './SliderCaraousel/VerticalCarousel'; +export CustomCarousel from './SliderCaraousel/CustomCarousel'; +export AnimatedSlider from './SliderCaraousel/AnimatedSlider'; +// Tags +export BasicTags from './Tags/BasicTags'; +export ArrayTags from './Tags/ArrayTags'; +// Dividers +export CommonDividers from './Dividers/CommonDividers'; +export SpecialDividers from './Dividers/SpecialDividers'; diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js new file mode 100644 index 0000000..feff750 --- /dev/null +++ b/front/odiparpack/app/containers/pageListAsync.js @@ -0,0 +1,324 @@ +import Loadable from 'react-loadable'; +import Loading from 'ba-components/Loading'; + +// Dashboard +export const DashboardV1 = Loadable({ + loader: () => import('./Dashboard/Dashboard'), + loading: Loading, +}); +export const DashboardV2 = Loadable({ + loader: () => import('./Dashboard/DashboardV2'), + loading: Loading, +}); + +// Layouts +export const AppLayout = Loadable({ + loader: () => import('./Layouts/AppLayout'), + loading: Loading, +}); +export const Responsive = Loadable({ + loader: () => import('./Layouts/Responsive'), + loading: Loading, +}); +export const Grid = Loadable({ + loader: () => import('./Layouts/Grid'), + loading: Loading, +}); + +// Tables +export const SimpleTable = Loadable({ + loader: () => import('./Tables/BasicTable'), + loading: Loading, +}); +export const AdvancedTable = Loadable({ + loader: () => import('./Tables/AdvancedTable'), + loading: Loading, +}); +export const TreeTable = Loadable({ + loader: () => import('./Tables/TreeTable'), + loading: Loading, +}); +export const CrudTable = Loadable({ + loader: () => import('./Tables/CrudTable'), + loading: Loading, +}); +export const TablePlayground = Loadable({ + loader: () => import('./Tables/TablePlayground'), + loading: Loading, +}); + +// Forms +export const ReduxForm = Loadable({ + loader: () => import('./Forms/ReduxForm'), + loading: Loading, +}); +export const DateTimePicker = Loadable({ + loader: () => import('./Forms/DateTimePicker'), + loading: Loading, +}); +export const CheckboxRadio = Loadable({ + loader: () => import('./Forms/CheckboxRadio'), + loading: Loading, +}); +export const Switches = Loadable({ + loader: () => import('./Forms/Switches'), + loading: Loading, +}); +export const Selectbox = Loadable({ + loader: () => import('./Forms/Selectbox'), + loading: Loading, +}); +export const Rating = Loadable({ + loader: () => import('./Forms/Rating'), + loading: Loading, +}); +export const SliderRange = Loadable({ + loader: () => import('./Forms/SliderRange'), + loading: Loading, +}); +export const Buttons = Loadable({ + loader: () => import('./Forms/Buttons'), + loading: Loading, +}); +export const Textbox = Loadable({ + loader: () => import('./Forms/Textbox'), + loading: Loading, +}); +export const Autocomplete = Loadable({ + loader: () => import('./Forms/Autocomplete'), + loading: Loading, +}); +export const TextEditor = Loadable({ + loader: () => import('./Forms/TextEditor'), + loading: Loading, +}); +export const Upload = Loadable({ + loader: () => import('./Forms/Upload'), + loading: Loading, +}); + +// UI Components +export const Badges = Loadable({ + loader: () => import('./UiElements/Badges'), + loading: Loading, +}); +export const Avatars = Loadable({ + loader: () => import('./UiElements/Avatars'), + loading: Loading, +}); +export const Accordion = Loadable({ + loader: () => import('./UiElements/Accordion'), + loading: Loading, +}); +export const List = Loadable({ + loader: () => import('./UiElements/List'), + loading: Loading, +}); +export const PopoverTooltip = Loadable({ + loader: () => import('./UiElements/PopoverTooltip'), + loading: Loading, +}); +export const Notification = Loadable({ + loader: () => import('./UiElements/Notification'), + loading: Loading, +}); +export const Typography = Loadable({ + loader: () => import('./UiElements/Typography'), + loading: Loading, +}); +export const Tabs = Loadable({ + loader: () => import('./UiElements/Tabs'), + loading: Loading, +}); +export const Cards = Loadable({ + loader: () => import('./UiElements/Cards'), + loading: Loading, +}); +export const ImageGrid = Loadable({ + loader: () => import('./UiElements/ImageGrid'), + loading: Loading, +}); +export const Progress = Loadable({ + loader: () => import('./UiElements/Progress'), + loading: Loading, +}); +export const DialogModal = Loadable({ + loader: () => import('./UiElements/DialogModal'), + loading: Loading, +}); +export const Steppers = Loadable({ + loader: () => import('./UiElements/Steppers'), + loading: Loading, +}); +export const DrawerMenu = Loadable({ + loader: () => import('./UiElements/DrawerMenu'), + loading: Loading, +}); +export const Paginations = Loadable({ + loader: () => import('./UiElements/Paginations'), + loading: Loading, +}); +export const Breadcrumbs = Loadable({ + loader: () => import('./UiElements/Breadcrumbs'), + loading: Loading, +}); +export const Icons = Loadable({ + loader: () => import('./UiElements/Icons'), + loading: Loading, +}); +export const SliderCarousel = Loadable({ + loader: () => import('./UiElements/SliderCarousel'), + loading: Loading, +}); +export const Tags = Loadable({ + loader: () => import('./UiElements/Tags'), + loading: Loading, +}); +export const Dividers = Loadable({ + loader: () => import('./UiElements/Dividers'), + loading: Loading, +}); + +// Chart +export const LineCharts = Loadable({ + loader: () => import('./Charts/LineCharts'), + loading: Loading, +}); +export const BarCharts = Loadable({ + loader: () => import('./Charts/BarCharts'), + loading: Loading, +}); +export const AreaCharts = Loadable({ + loader: () => import('./Charts/AreaCharts'), + loading: Loading, +}); +export const PieCharts = Loadable({ + loader: () => import('./Charts/PieCharts'), + loading: Loading, +}); +export const RadarCharts = Loadable({ + loader: () => import('./Charts/RadarCharts'), + loading: Loading, +}); +export const ScatterCharts = Loadable({ + loader: () => import('./Charts/ScatterCharts'), + loading: Loading, +}); +export const CompossedCharts = Loadable({ + loader: () => import('./Charts/CompossedCharts'), + loading: Loading, +}); +export const ResponsiveCharts = Loadable({ + loader: () => import('./Charts/ResponsiveCharts'), + loading: Loading, +}); + +// Pages +export const Login = Loadable({ + loader: () => import('./Pages/Users/Login'), + loading: Loading, +}); +export const Register = Loadable({ + loader: () => import('./Pages/Users/Register'), + loading: Loading, +}); +export const Profile = Loadable({ + loader: () => import('./Pages/UserProfile'), + loading: Loading, +}); +export const SocialMedia = Loadable({ + loader: () => import('./Pages/SocialMedia'), + loading: Loading, +}); +export const BlankPage = Loadable({ + loader: () => import('./Pages/BlankPage'), + loading: Loading, +}); +export const Ecommerce = Loadable({ + loader: () => import('./Pages/Ecommerce'), + loading: Loading, +}); +export const Contact = Loadable({ + loader: () => import('./Pages/Contact'), + loading: Loading, +}); +export const ResetPassword = Loadable({ + loader: () => import('./Pages/Users/ResetPassword'), + loading: Loading, +}); +export const LockScreen = Loadable({ + loader: () => import('./Pages/Users/LockScreen'), + loading: Loading, +}); +export const Chat = Loadable({ + loader: () => import('./Pages/Chat'), + loading: Loading, +}); +export const Email = Loadable({ + loader: () => import('./Pages/Email'), + loading: Loading, +}); +export const Photos = Loadable({ + loader: () => import('./Pages/Photos'), + loading: Loading, +}); +export const Calendar = Loadable({ + loader: () => import('./Pages/Calendar'), + loading: Loading, +}); +export const LoginDedicated = Loadable({ + loader: () => import('./Pages/Standalone/LoginDedicated'), + loading: Loading, +}); + +// Maps +export const MapMarker = Loadable({ + loader: () => import('./Maps/MapMarker'), + loading: Loading, +}); +export const MapDirection = Loadable({ + loader: () => import('./Maps/MapDirection'), + loading: Loading, +}); +export const SearchMap = Loadable({ + loader: () => import('./Maps/SearchMap'), + loading: Loading, +}); +export const TrafficIndicator = Loadable({ + loader: () => import('./Maps/TrafficIndicator'), + loading: Loading, +}); +export const StreetViewMap = Loadable({ + loader: () => import('./Maps/StreetViewMap'), + loading: Loading, +}); + +// Other +export const NotFound = Loadable({ + loader: () => import('./NotFound/NotFound'), + loading: Loading, +}); +export const NotFoundDedicated = Loadable({ + loader: () => import('./Pages/Standalone/NotFoundDedicated'), + loading: Loading, +}); +export const Error = Loadable({ + loader: () => import('./Pages/Error'), + loading: Loading, +}); +export const Maintenance = Loadable({ + loader: () => import('./Pages/Maintenance'), + loading: Loading, +}); +export const Parent = Loadable({ + loader: () => import('./Parent'), + loading: Loading, +}); +export const Settings = Loadable({ + loader: () => import('./Pages/Settings'), + loading: Loading, +}); +export const HelpSupport = Loadable({ + loader: () => import('./Pages/HelpSupport'), + loading: Loading, +}); |