From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../demos/Accordion/AdvancedAccordion.js | 97 ++++++ .../demos/Accordion/ControlledAccordion.js | 100 ++++++ .../UiElements/demos/Accordion/SimpleAccordion.js | 57 ++++ .../UiElements/demos/Avatars/AvatarsDemo.js | 112 +++++++ .../UiElements/demos/Avatars/AvatarsPractice.js | 212 +++++++++++++ .../UiElements/demos/Badges/CommonBadges.js | 121 ++++++++ .../UiElements/demos/Badges/VariantBadges.js | 117 +++++++ .../demos/Breadcrumbs/ClassicBreadcrumbs.js | 83 +++++ .../demos/Breadcrumbs/PaperBreadcrumbs.js | 97 ++++++ .../UiElements/demos/Cards/ControlCards.js | 204 +++++++++++++ .../UiElements/demos/Cards/EcommerceCards.js | 92 ++++++ .../UiElements/demos/Cards/PaperSheet.js | 34 +++ .../UiElements/demos/Cards/SocialCards.js | 75 +++++ .../UiElements/demos/Cards/StandardCards.js | 120 ++++++++ .../UiElements/demos/DialogModal/AlertDialog.js | 127 ++++++++ .../demos/DialogModal/ConfirmationDialog.js | 111 +++++++ .../UiElements/demos/DialogModal/FormDialog.js | 65 ++++ .../demos/DialogModal/FullScreenDialog.js | 134 ++++++++ .../UiElements/demos/DialogModal/ImagePopup.js | 51 ++++ .../UiElements/demos/DialogModal/ModalDemo.js | 73 +++++ .../UiElements/demos/DialogModal/ScrollDialog.js | 93 ++++++ .../UiElements/demos/DialogModal/SelectDialog.js | 120 ++++++++ .../demos/DialogModal/SelectRadioDialog.js | 68 +++++ .../UiElements/demos/Dividers/CommonDividers.js | 29 ++ .../UiElements/demos/Dividers/SpecialDividers.js | 23 ++ .../UiElements/demos/DrawerMenu/BasicMenu.js | 74 +++++ .../UiElements/demos/DrawerMenu/DropdownMenu.js | 148 +++++++++ .../UiElements/demos/DrawerMenu/MenuTransition.js | 108 +++++++ .../UiElements/demos/DrawerMenu/MiniDrawer.js | 235 ++++++++++++++ .../UiElements/demos/DrawerMenu/PermanentDrawer.js | 126 ++++++++ .../demos/DrawerMenu/PersistentDrawer.js | 228 ++++++++++++++ .../UiElements/demos/DrawerMenu/StyledMenu.js | 60 ++++ .../UiElements/demos/DrawerMenu/SwipeDrawer.js | 124 ++++++++ .../UiElements/demos/DrawerMenu/TemporaryDrawer.js | 109 +++++++ .../UiElements/demos/DrawerMenu/menuData.js | 64 ++++ .../UiElements/demos/ImageGrid/AdvancedGridList.js | 85 ++++++ .../UiElements/demos/ImageGrid/ImageGridList.js | 66 ++++ .../demos/ImageGrid/SingleLineGridList.js | 83 +++++ .../UiElements/demos/ImageGrid/TitlebarGridList.js | 89 ++++++ .../containers/UiElements/demos/List/ListBasic.js | 116 +++++++ .../UiElements/demos/List/ListControl.js | 159 ++++++++++ .../UiElements/demos/List/ListInteractive.js | 183 +++++++++++ .../containers/UiElements/demos/List/ListMenu.js | 204 +++++++++++++ .../containers/UiElements/demos/List/PinnedList.js | 62 ++++ .../UiElements/demos/Notification/MobileNotif.js | 116 +++++++ .../UiElements/demos/Notification/SimpleNotif.js | 132 ++++++++ .../UiElements/demos/Notification/StyledNotif.js | 198 ++++++++++++ .../demos/Notification/TransitionNotif.js | 203 ++++++++++++ .../demos/Pagination/GeneralPagination.js | 136 +++++++++ .../UiElements/demos/Pagination/TbPagination.js | 110 +++++++ .../demos/Pagination/TbPaginationActions.js | 93 ++++++ .../demos/Pagination/TbPaginationCustom.js | 115 +++++++ .../demos/PopoverTooltip/CustomizedTooltips.js | 125 ++++++++ .../demos/PopoverTooltip/DelayTooltips.js | 12 + .../demos/PopoverTooltip/PopoverPlayground.js | 340 +++++++++++++++++++++ .../demos/PopoverTooltip/PositionedTooltips.js | 83 +++++ .../demos/PopoverTooltip/SimplePopover.js | 79 +++++ .../demos/PopoverTooltip/SimpleTooltips.js | 116 +++++++ .../demos/PopoverTooltip/TransitionsTooltips.js | 20 ++ .../demos/PopoverTooltip/TriggersTooltips.js | 61 ++++ .../demos/Progress/CircularDeterminate.js | 69 +++++ .../demos/Progress/CircularIndeterminate.js | 29 ++ .../demos/Progress/CircularIntegration.js | 114 +++++++ .../UiElements/demos/Progress/CircularStatic.js | 29 ++ .../UiElements/demos/Progress/LinearBuffer.js | 56 ++++ .../UiElements/demos/Progress/LinearDeterminate.js | 53 ++++ .../demos/Progress/LinearIndeterminate.js | 27 ++ .../UiElements/demos/Progress/LinearQuery.js | 27 ++ .../UiElements/demos/Progress/LinearStatic.js | 27 ++ .../UiElements/demos/Progress/ProgressDelay.js | 105 +++++++ .../demos/SliderCaraousel/AnimatedSlider.js | 72 +++++ .../demos/SliderCaraousel/AutoplayCarousel.js | 52 ++++ .../demos/SliderCaraousel/CustomCarousel.js | 93 ++++++ .../demos/SliderCaraousel/MultipleCarousel.js | 48 +++ .../demos/SliderCaraousel/SingleCarousel.js | 80 +++++ .../demos/SliderCaraousel/ThumbnailCarousel.js | 90 ++++++ .../demos/SliderCaraousel/VerticalCarousel.js | 48 +++ .../UiElements/demos/Steppers/HorizontalLinear.js | 196 ++++++++++++ .../demos/Steppers/HorizontalNonLinear.js | 213 +++++++++++++ .../UiElements/demos/Steppers/MobileSteppers.js | 116 +++++++ .../UiElements/demos/Steppers/StepperCarousel.js | 187 ++++++++++++ .../UiElements/demos/Steppers/StepperError.js | 178 +++++++++++ .../UiElements/demos/Steppers/VerticalStepper.js | 120 ++++++++ .../containers/UiElements/demos/Tabs/BottomNav.js | 82 +++++ .../UiElements/demos/Tabs/CenteredTabs.js | 46 +++ .../containers/UiElements/demos/Tabs/CustomTabs.js | 101 ++++++ .../UiElements/demos/Tabs/DisabledTab.js | 31 ++ .../containers/UiElements/demos/Tabs/FixedTabs.js | 80 +++++ .../containers/UiElements/demos/Tabs/IconTabs.js | 61 ++++ .../UiElements/demos/Tabs/LongTextTabs.js | 59 ++++ .../UiElements/demos/Tabs/ScrollIconTabs.js | 82 +++++ .../containers/UiElements/demos/Tabs/ScrollTabs.js | 75 +++++ .../containers/UiElements/demos/Tabs/SimpleTabs.js | 59 ++++ .../containers/UiElements/demos/Tags/ArrayTags.js | 78 +++++ .../containers/UiElements/demos/Tags/BasicTags.js | 72 +++++ .../UiElements/demos/Typography/AlignTypo.js | 46 +++ .../UiElements/demos/Typography/ColouredTypo.js | 35 +++ .../UiElements/demos/Typography/GeneralTypo.js | 139 +++++++++ .../UiElements/demos/Typography/Heading.js | 56 ++++ .../UiElements/demos/Typography/ListTypo.js | 71 +++++ .../UiElements/demos/Typography/QuotesDemo.js | 33 ++ .../app/containers/UiElements/demos/index.js | 117 +++++++ 102 files changed, 10029 insertions(+) create mode 100644 front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Badges/CommonBadges.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Cards/EcommerceCards.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Cards/PaperSheet.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Cards/StandardCards.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/ModalDemo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/SwipeDrawer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/List/ListControl.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationActions.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/CustomizedTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/StepperCarousel.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/StepperError.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Tags/BasicTags.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js create mode 100644 front/odiparpack/app/containers/UiElements/demos/index.js (limited to 'front/odiparpack/app/containers/UiElements/demos') 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 ( +
+ + }> +
+ Location +
+
+ Select trip destination +
+ + +
+
+ {}} /> +
+
+ + Select your destination of choice +
+ + Learn more + + +
+ + + + + + + +
+ ); +} + +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 ( +
+ + }> + General settings + I am an expansion panel + + + + Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget + maximus est, id dignissim quam. + + + + + }> + Users + + You are currently not an owner + + + + + Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar + diam eros in elit. Pellentesque convallis laoreet laoreet. + + + + + }> + Advanced settings + + Filtering has been entirely disabled for whole web server + + + + + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + + + + + }> + Personal data + + + + Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas + eros, vitae egestas augue. Duis vel est augue. + + + +
+ ); + } +} + +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 ( +
+ + }> + Expansion Panel 1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + + + + + }> + Expansion Panel 2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. + + + + + }> + Disabled Expansion Panel + + +
+ ); +} + +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 ( + + + + Image Avatars +
+ + +
+ + + Icon Avatars +
+ + + + + + + + + +
+ + + Icon Avatars +
+ H + N + OP +
+ + + + ); + } +} + +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 ( + + + + Avatars in Tag(Chip) + + MB} + label="Clickable Chip" + onClick={handleClick} + className={classes.chip} + /> + } + label="Deletable Chip" + onDelete={handleDelete} + className={classes.chip} + /> + + + + )} + label="Clickable Deletable Chip" + onClick={handleClick} + onDelete={handleDelete} + className={classes.chip} + /> + + + Avatars in List Menu +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Avatars in Social Media +
+ + + } + action={( + + + + )} + title="Aliquam nec ex aliquet" + subheader="September 14, 2018" + /> + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum. + + + + + + + + + + + +
+ + + + ); + } +} + +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 ( + + + + Button Badges + +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + +
+ + + + Text Badges + +
+ + Badge Text + +
+
+ + Badges Bold Text + +
+ + + + + ); + } +} + +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 ( + + + + Icon Badges + +
+ + + +
+
+ + + + + +
+
+ + + +
+
+ + + + + +
+ + + + Tab Badges + + + + Item One + + )} + /> + + + + + + + + ); + } +} + +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 ( + + + + Arrow Separator +
+ +
+ + + Slash Separator +
+ +
+ + + Greater Than Separator +
+ +
+ + + + ); + } +} + +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 ( + + + + Arrow Separator +
+ + + +
+ + + Slash Separator +
+ + + +
+ + + Greater Than Separator +
+ + + +
+ + + + ); + } +} + +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 ( + + + UI Controls +
+ +
+ + + Video Thumb + + + + Complex Interaction +
+ + + R + + )} + action={( + + + + )} + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> + + + + 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. + + + + + + + + + + + + + + + + + Method: + + + Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 + minutes. + + + 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. + + + 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.) + + + Set aside off of the heat to let rest for 10 minutes, and then serve. + + + + +
+ + + ); + } +} + +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 ( + + + Product Card + + + + Product with discount + + + + Sold Out Product + + + + List Mode + + + + + + + ); + } +} + +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 ( +
+ + + This is a sheet of paper. + + + Paper can be used to build surface or other elements for your application. + + +
+ ); +} + +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 ( + + + Profile Card + + + + Post Card + + + + Post Card (Without Image) + + + + ); + } +} + +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 = •; + + return ( + + + Simple Card +
+ + + Word of the Day + + + be + {bull} +nev + {bull} +o + {bull} +lent + + + adjective + + + well meaning and kindly. +
+ {'"a benevolent smile"'} + + +
+ Media +
+ + + Lorem ipsum + + + Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc + + +
+ + + Quoted Card +
+ + + +
+
+ Identity Card + +
+ + + ); + } +} + +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 ; +}); + +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 ( +
+ + + + Fade Transition + + + + + {"Use Google's location service?"} + + + + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + + + + + + + + + + + Slide Transition + + + + + {"Use Google's location service?"} + + + + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + + + + + + + + + +
+ ); + } +} + +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 ( + + Phone Ringtone + + { + this.radioGroup = node; + }} + aria-label="ringtone" + name="ringtone" + value={this.state.value} + onChange={this.handleChange} + > + {options.map(option => ( + } label={option} /> + ))} + + + + + + + + ); + } +} + +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 ( +
+ + + + Subscribe + + + To subscribe to this website, please enter your email address here. We will send + updates occasionally. + + + + + + + + + +
+ ); + } +} 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 ; +}); + +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 ( +
+ + + + + + + + + + + Sound + + + + + + + + + + + + + + + + + + + + {'Use location service?'} + + + + Let Google help apps determine location. This means sending anonymous location data to + Google, even when no apps are running. + + + + + + + + + +
+ ); + } +} + +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 ( + + + + {isOpen && ( + this.setState({ isOpen: false })} + onMovePrevRequest={() => this.setState({ + photoIndex: (photoIndex + (images.length - 1)) % images.length, + }) + } + onMoveNextRequest={() => this.setState({ + photoIndex: (photoIndex + 1) % images.length, + }) + } + /> + )} + + ); + } +} 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 ( + + Click to get the full Modal experience! + + +
+ + Text in a modal + + + Duis mollis, est non commodo luctus, nisi erat porttitor ligula. + +
+ + + ); + } +} + +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 ( +
+ +   + + + Subscribe + + + 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. + + + + + + + +
+ ); + } +} + +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 = ['username@mail.com', 'user02@mail.com']; +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 ( + handleClose()} aria-labelledby="simple-dialog-title" {...other}> + Set backup account +
+ + {emails.map(email => ( + handleListItemClick(email)} key={email}> + + + + + + + + ))} + handleListItemClick('addAccount')}> + + + + + + + + +
+ + ); +}; + +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 ( +
+ + +Selected: + {this.state.selectedValue} + +
+ + + +
+ ); + } +} + + +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 ( +
+ + + + + + +
+ ); + } +} + +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 ( + + Gradient Divider + + Dash Divider + + Shadow Divider + + Inset Divider + + + ); + } +} + +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 ( + + Flaired Edges Divider + + Content Text Divider + + + ); + } +} + +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 ( + + + + + Profile + My account + Logout + + + + + + + Profile + My account + Logout + + + + ); + } +} + +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 ( +
+ + + + + + + + + {options.map((option, index) => ( + this.handleMenuItemClick(event, index)} + > + {option} + + ))} + + + + + + + + {optionsOpt.map(option => ( + + {option} + + ))} + + + +
+ ); + } +} + +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 ( + + + + this.handleClose('anchorFade')} + TransitionComponent={Fade} + > + this.handleClose('anchorFade')}>Profile + this.handleClose('anchorFade')}>My account + this.handleClose('anchorFade')}>Logout + + + + + this.handleClose('anchorGrow')} + TransitionComponent={Grow} + > + this.handleClose('anchorGrow')}>Profile + this.handleClose('anchorGrow')}>My account + this.handleClose('anchorGrow')}>Logout + + + +
+ + this.handleClose('anchorZoom')} + TransitionComponent={Zoom} + > + this.handleClose('anchorZoom')}>Profile + this.handleClose('anchorZoom')}>My account + this.handleClose('anchorZoom')}>Logout + +
+ + + ); + } +} + +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 = ( + +
+ + {theme.direction === 'rtl' ? : } + +
+ + {mailFolderListItems} + + {otherMailFolderListItems} + + ); + + const menuBtn = ( + + + + ); + + 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 ( +
+ + left + right + +
+ + + {beforeBtn} + + Mini variant drawer + + {afterBtn} + + + {before} +
+
+ + {'You think water moves fast? You should see ice.'} + +
+ {after} +
+
+ ); + } +} + +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 = ( + +
+ + {mailFolderListItems} + + {otherMailFolderListItems} + + ); + + let before = null; + let after = null; + + if (anchor === 'left') { + before = drawer; + } else { + after = drawer; + } + + return ( +
+ + left + right + +
+ + + + Permanent drawer + + + + {before} +
+
+ + {'You think water moves fast? You should see ice.'} + +
+ {after} +
+
+ ); + } +} + +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 = ( + +
+ + {theme.direction === 'rtl' ? : } + +
+ + {mailFolderListItems} + + {otherMailFolderListItems} + + ); + + const menuBtn = ( + + + + ); + + 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 ( +
+ + left + right + +
+ + + {beforeBtn} + + Persistent drawer + + {afterBtn} + + + {before} +
+
+ + {'You think water moves fast? You should see ice.'} + +
+ {after} +
+
+ ); + } +} + +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 ( + + + + + + + + + + + + + + + + + + + + + + + ); +} + +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 = ( +
+ {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + + const fullList = ( +
+ {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + + return ( + + + + + + +
+ {sideList} +
+ + +
+ {fullList} +
+ + +
+ {fullList} +
+ + +
+ {sideList} +
+ + + ); + } +} + +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 = ( +
+ {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + + const fullList = ( +
+ {mailFolderListItems} + + {otherMailFolderListItems} +
+ ); + + return ( + + + + + + +
+ {sideList} +
+ + +
+ {fullList} +
+ + +
+ {fullList} +
+ + +
+ {sideList} +
+ + + ); + } +} + +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 = ( +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+); + +export const otherMailFolderListItems = ( +
+ + + + + + + + + + + + + + + + + + +
+); 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 ( +
+ + {imgData.map((tile, index) => ( + + {tile.title} + + + + )} + actionPosition="left" + className={classes.titleBar} + /> + + ))} + +
+ ); +} + +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 ( +
+ + {imgData.map((tile, index) => ( + + {tile.title} + + ))} + +
+ ); +} + +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 ( +
+ + {imgData.map((tile, index) => ( + + {tile.title} + + + + )} + /> + + ))} + +
+ ); +} + +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 ( +
+ + + December + + {imgData.map((tile, index) => ( + + {tile.title} + +by: + {tile.author} + + )} + actionIcon={( + + + + )} + /> + + ))} + +
+ ); +} + +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 ( + + + + Simple List Divider +
+ + + + + + + + + + + + + + + + +
+ + + Inset Divider +
+ + + + + + + + + +
  • + +
    • + + + + + + + + + + + + + + + + + +     +
    +     +     +     + ); + } +} + +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 ( + + + + Checkbox +
    + + {[0, 1, 2, 3].map(value => ( + + + + + + + + + + ))} + +
    +     + + Checkbox +
    + + {[0, 1, 2, 3].map(value => ( + + + + + + + + + + ))} + +
    +     + + Switch +
    + Settings}> + + + + + + + + + + + + + + + + + + + +
    +     +     +     + ); + } +} + +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 ( +
    + + this.setState({ dense: checked })} + value="dense" + /> + )} + label="Enable dense" + /> + this.setState({ secondary: checked })} + value="secondary" + /> + )} + label="Enable secondary text" + /> + + + + + Text only + +
    + + {generate( + + + , + )} + +
    +     + + + Icon with text + +
    + + {generate( + + + + + + , + )} + +
    +     +     + + + + Avatar with text + +
    + + {generate( + + + + + + + + , + )} + +
    +     + + + Avatar with text and icon + +
    + + {generate( + + + + + + + + + + + + + , + )} + +
    +     +     +
    + ); + } +} + +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 ( + + + + Menu List +
    + + + + + + + + + + + + + + + + + + + + + + + +
    +     + + Folder List +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +     + + Inset List +
    + + + + + + + + + + + +
    +     + + Nested List +
    + Nested List Items} + > + + + + + + + + + + + + + + + + + + {this.state.open ? : } + + + + + + + + + + + + +
    +     +     +     + ); + } +} + +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 ( + + }> + {[0, 1, 2, 3, 4].map(sectionId => ( +
  • +
      + {`I'm sticky ${sectionId}`} + {[0, 1, 2].map(item => ( + + + + ))} +
    +
    • + ))} +     +     + ); +} + +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 ( +
    + +
    + + + + + + + Out of my way! + + + + + + + Archived} + action={( + + )} + className={classes.snackbar} + /> +
    +
    + ); + } +} + +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 ( + + + Simple Notification +
    + + Note archived} + action={[ + , + + + , + ]} + /> +
    +     + + Positioning +
    + + + + + + + I love snacks} + /> +
    +     +     + ); + } +} + +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 ( + + + {message} + + )} + action={[ + + + , + ]} + {...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 = ( + +); + +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 ( + + + Default Styled Notification + + + + + + + + + + + Custom Styled Notification with CSS +
    + + + + + +
    +     +     + ); + } +} + +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 ; +} + +function TransitionUp(props) { + return ; +} + +function TransitionRight(props) { + return ; +} + +function TransitionDown(props) { + return ; +} + +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 ( + + + + Transition +
    + + + + + I love snacks} + /> +
    +     + + Change Transition +
    + + I love snacks} + /> +
    +     + + Consecutive Snackbars +
    + + + {message}} + action={[ + , + + + + ]} + /> +
    +     +     +     + ); + } +} + +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) => ( +

    {ctn}

    + )); + + // Logic for displaying page numbers + const pageNumbers = []; + for (let i = 1; i <= Math.ceil(content.length / contentsPerPage); i += 1) { + pageNumbers.push(i); + } + + return ( +
    + +

    +We are in page + {page} +

    +
    + {renderContent} +
    +     + this.onNext(pageNumbers.length)} + onGoFirst={this.onGoFirst} + onGoLast={() => this.onGoLast(pageNumbers.length)} + /> +
    + ); + } +} + +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 ( + +
    + + + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => ( + + {n.name} + {n.calories} + {n.fat} + + ))} + {emptyRows > 0 && ( + + + + )} + + + + + + +
    +
    +     + ); + } +} + +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 ( +
    + + {theme.direction === 'rtl' ? : } + + + {theme.direction === 'rtl' ? : } + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="Next Page" + > + {theme.direction === 'rtl' ? : } + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="Last Page" + > + {theme.direction === 'rtl' ? : } + +
    + ); + } +} + +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 ( + +
    + + + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => ( + + + {n.name} + + {n.calories} + {n.fat} + + ))} + {emptyRows > 0 && ( + + + + )} + + + + + + +
    +
    +     + ); + } +} + +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 ( +
    + + + + + + + + Add + + + )} + classes={{ popper: classes.arrowPopper }} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(this.state.arrowRef), + element: this.state.arrowRef, + }, + }, + }, + }} + > + + +
    + ); + } +} + +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 ( + + + + ); +} + +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 = ` + +`; + + const radioAnchorClasses = { root: classes.radioAnchor, checked: classes.checked }; + + return ( +
    + + + + {anchorReference === 'anchorEl' && ( +
    + )} + + + + The content of the Popover. + + + + + anchorReference + + } label="anchorEl" /> + } + label="anchorPosition" + /> + + + + + + anchorPosition.top + + +   + + anchorPosition.left + + + + + + anchorOrigin.vertical + + } + label="Top" + /> + } + label="Center" + /> + } + label="Bottom" + /> + + + + + + transformOrigin.vertical + + } label="Top" /> + } + label="Center" + /> + } + label="Bottom" + /> + + + + + + anchorOrigin.horizontal + + } + label="Left" + /> + } + label="Center" + /> + } + label="Right" + /> + + + + + + transformOrigin.horizontal + + } label="Left" /> + } + label="Center" + /> + } label="Right" /> + + + + + + {code} + +
    + ); + } +} + +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 ( +
    + + + + + + + + + + + + + + + + + + +
    + + + +
    + + + +     + + + + + + + + + + + + + + + + + +     + + + + + + + + + + + + + +
    + ); +} + +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 ( +
    + + + + + The content of the Popover. + + + +
    + ); + } +} + +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 ( +
    + + + Simple Tooltips + + + + + + + + + + + +
    +
    + + + + + +     +     + + Delayed Tooltips + + + + + + + + +     +
    + ); + } +} + +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 ( +
    + + + + + + + + + +
    + ); +} + +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 ( +
    + + + + + + + + + + + + + + + + + + +
    + + + +
    +     +     +     +
    + ); + } +} + +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 ( +
    + + + + +
    + ); + } +} + +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 ( +
    + + + + +
    + ); +} + +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 ( +
    +
    + + {success ? : } + + {loading && } +
    +
    + + {loading && } +
    +
    + ); + } +} + +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 ( +
    + + + + + +
    + ); +} + +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 ( +
    + +
    + +
    + ); + } +} + +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 ( +
    + +
    + +
    + ); + } +} + +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 ( +
    + +
    + +
    + ); +} + +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 ( +
    + +
    + +
    + ); +} + +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 ( +
    + +
    + +
    + ); +} + +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 ( +
    +
    + + + +
    + +
    + {query === 'success' ? ( + Success! + ) : ( + + + + )} +
    + +
    + ); + } +} + +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 = () => ( +
    + + {content.map((item, index) => ( +
    +
    + {item.title} + +

    {item.description}

    +     + +
    +
    + {item.user} + + Posted by + {' '} + {item.user} + +
    +
    + ))} +     +
    +); + +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 ( +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    + ); + } +} + +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 ( + + + + ); +} + +SampleNextArrow.propTypes = { + onClick: PropTypes.func, +}; + +SampleNextArrow.defaultProps = { + onClick: undefined, +}; + +function SamplePrevArrow(props) { + const { onClick } = props; + return ( + + + + ); +} + +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: , + prevArrow: + }; + return ( +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    + ); + } +} + +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 ( +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    + ); + } +} + +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 ( +
    + + Carousel Transition + + +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    +
    + ); + } +} + +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) => ( + + thumb + + ), + infinite: true, + dots: true, + slidesToShow: 1, + slidesToScroll: 1, + fade: this.state.transition === 'fade', + }; + return ( +
    + + Carousel Transition + + +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    +
    + ); + } +} + +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 ( +
    + + {imgData.map((item, index) => ( +
    + {item.title} +
    + ))} +     +
    + ); + } +} + +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 ( +
    + + + )} + label="Alternative Design" + /> + + + + {steps.map((label, index) => { + const props = {}; + const labelProps = {}; + if (this.isStepOptional(index)) { + labelProps.optional = Optional; + } + if (this.isStepSkipped(index)) { + props.completed = false; + } + return ( + + {label} + + ); + })} + + +
    + {activeStep === steps.length ? ( +
    + + All steps completed - you"re finished + + +
    + ) : ( +
    + {getStepContent(activeStep)} +
    + + {this.isStepOptional(activeStep) && ( + + )} + +
    +
    + )} +
    +
    + ); + } +} + +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 ( +
    + + + )} + label="Alternative Design" + /> + + + + {steps.map((label, index) => ( + + + {label} + + + ))} + + +
    + {this.allStepsCompleted() ? ( +
    + + All steps completed - you"re finished + + +
    + ) : ( +
    + {getStepContent(activeStep)} +
    + + + {activeStep !== steps.length + && (this.state.completed[this.state.activeStep] ? ( + + Step + {' '} + {activeStep + 1} + {' '} +already completed + + ) : ( + + ))} +
    +
    + )} +
    +
    + ); + } +} + +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 ( + + + + Mobile Stepper - Dots + + + Next + {theme.direction === 'rtl' ? : } + + )} + backButton={( + + )} + /> + + + + Mobile Stepper - Progress + + + Next + {theme.direction === 'rtl' ? : } + + )} + backButton={( + + )} + /> + + + ); + } +} + +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 ( + + + + {tutorialSteps[activeStep].label} + + {tutorialSteps[activeStep].label} + + Next + {theme.direction === 'rtl' ? : } + + )} + backButton={( + + )} + /> + + + + {tutorialSteps[activeStepSwipe].label} + + + {tutorialSteps.map((step, index) => ( +
    + {step.label} +
    + ))} +     + + Next + {theme.direction === 'rtl' ? : } + + )} + backButton={( + + )} + /> +     +     + ); + } +} + +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 ( +
    + + {steps.map((label, index) => { + const props = {}; + const labelProps = {}; + if (this.isStepOptional(index)) { + labelProps.optional = ( + + Alert message + + ); + } + if (this.isStepFailed(index)) { + labelProps.error = true; + } + if (this.isStepSkipped(index)) { + props.completed = false; + } + return ( + + {label} + + ); + })} + +
    + {activeStep === steps.length ? ( +
    + + All steps completed - you"re finished + + +
    + ) : ( +
    + {getStepContent(activeStep)} +
    + + {this.isStepOptional(activeStep) && ( + + )} + +
    +
    + )} +
    +
    + ); + } +} + +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 ( +
    + + {steps.map((label, index) => ( + + {label} + + {getStepContent(index)} +
    +
    + + +
    +
    +     +     + ))} +     + {activeStep === steps.length && ( + + All steps completed - you"re finished + + + )} +
    + ); + } +} + +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 ( + + + With Label +
    + + } /> + } /> + } /> + +
    +     + + Without Label +
    + + } /> + } /> + } /> + folder} /> + +
    +     +     + ); + } +} + +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 ( + + + + + + + + ); + } +} + +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 ( +
    + + + + + + powered by Material-UI +
    + ); + } +} + +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 ( + + + + + + + + ); + } +} + +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 ( + + {children} + + ); +} + +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 ( +
    + + + + + + + + + Item One + Item Two + Item Three + +
    + ); + } +} + +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 ( +
    + + + Without Text + + + } /> + } /> + } /> + + + + + With Text + + + } label="RECENTS" /> + } label="FAVORITES" /> + } label="NEARBY" /> + + + + +
    + ); + } +} 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 ( + + {props.children} + + ); +} + +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 ( +
    + + + + + + + + {value === 'one' && Item One} + {value === 'two' && Item Two} + {value === 'three' && Item Three} +
    + ); + } +} + +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 ( + + {props.children} + + ); +} + +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 ( +
    + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} + {value === 3 && Item Four} + {value === 4 && Item Five} + {value === 5 && Item Six} + {value === 6 && Item Seven} +
    + ); + } +} + +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 ( + + {props.children} + + ); +} + +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 ( +
    + + + + + + + + + + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} + {value === 3 && Item Four} + {value === 4 && Item Five} + {value === 5 && Item Six} + {value === 6 && Item Seven} +
    + ); + } +} + +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 ( + + {props.children} + + ); +} + +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 ( +
    + + + + + + + + {value === 0 && Item One} + {value === 1 && Item Two} + {value === 2 && Item Three} +
    + ); + } +} + +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 ( + + {this.state.chipData.map(data => { + let avatar = null; + + if (data.label === 'React') { + avatar = ( + + + + ); + } + + return ( + + ); + })} + + ); + } +} + +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 ( +
    + + MB} + label="Clickable Tag" + onClick={handleClick} + className={classes.chip} + color="primary" + /> + } + label="Deletable Tag" + onDelete={handleDelete} + className={classes.chip} + /> + + + + )} + label="Clickable Deletable Tag" + onClick={handleClick} + onDelete={handleDelete} + className={classes.chip} + /> + } + /> +
    + ); +} + +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 ( +
    + + Align center: Nullam in + tortor + ligula + + + + Align Left + + + Align Right + + + Justify Align + + 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. + +
    + ); + } +} + +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 ( +
    + + Ut sed eros finibus + + + Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. + + + Aliquam nec ex aliquet + + + Aenean facilisis vitae purus facilisis semper + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum. + + + Vivamus et luctus mauris. Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam. + + + Curabitur egestas consequat lorem, vel fermentum augue porta id. + +
    + ); + } +} + +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 ( +
    + + Lorem ipsum dolor + {' '} + sit amet + + + Duis tristique metus magna, lobortis aliquam risus euismod sit amet. + + + Nullam in + tortor + ligula + + + + Bolder +  + Bold +  + Medium +  +
    + Regular +  + Light +  + Lighter +  +     + + 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. + {' '} +
    + 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. +     + + + Vestibulum nec mi + {' '} + suscipit + + + Bolder +  + Bold +  + Medium +  + Regular +  + Light +  + Lighter +  + + + Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti. +
    + 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. +     + + + Numbers + {' '} +looks great! 1234 + 56 +7890 + + + Let your Creativity Flow + {' '} + +123 + $ + + + + Numerics + {' '} + +123 + 00 + + + + + Body 2 + + + Body 1 + + + Caption + + + {` + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + `} + + + Button + +
    + ); + } +} + +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 ( +
    + {/* + Disp 4 + + + Display 3 + + + Display 2 + + + Display 1 + + + Headline + + + Title + + + Subheading + + + {` + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + `} + */} + + {`h4 Título`} + + + + {`h5 Subtítulos`} + + + + {`h6 Título de tablas`} + + + + {` Cuerpo de texto `} + + +
    + ); + } +} + +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 ( +
    + Unordered List +
    +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Consectetur adipiscing elit
      • +
    • Integer molestie lorem at massa
      • +
    • Facilisis in pretium nisl aliquet
      • +
    • +Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
        • +
      • Vestibulum laoreet porttitor sem
        • +
      • Ac tristique libero volutpat at
        • +
      +
      • +
    • Faucibus porta lacus fringilla vel
      • +
    • Aenean sit amet erat nunc
      • +
    • Eget porttitor lorem
      • +
    +
    + + Ordered List +
    +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Consectetur adipiscing elit
      • +
    • Integer molestie lorem at massa
      • +
    • Facilisis in pretium nisl aliquet
      • +
    • +Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
        • +
      • Vestibulum laoreet porttitor sem
        • +
      • Ac tristique libero volutpat at
        • +
      +
      • +
    • Faucibus porta lacus fringilla vel
      • +
    • Aenean sit amet erat nunc
      • +
    • Eget porttitor lorem
      • +
    +
    +
    + ); + } +} + +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 ( +
    +
    + +
    +
    + +
    +
    + ); + } +} + +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'; -- cgit v1.2.3