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 --- .../app/containers/Forms/Autocomplete.js | 91 +++++ front/odiparpack/app/containers/Forms/Buttons.js | 58 ++++ .../app/containers/Forms/CheckboxRadio.js | 46 +++ .../app/containers/Forms/DateTimePicker.js | 52 +++ front/odiparpack/app/containers/Forms/Rating.js | 46 +++ front/odiparpack/app/containers/Forms/ReduxForm.js | 51 +++ front/odiparpack/app/containers/Forms/Selectbox.js | 58 ++++ .../odiparpack/app/containers/Forms/SliderRange.js | 46 +++ front/odiparpack/app/containers/Forms/Switches.js | 40 +++ .../odiparpack/app/containers/Forms/TextEditor.js | 40 +++ front/odiparpack/app/containers/Forms/Textbox.js | 58 ++++ front/odiparpack/app/containers/Forms/Upload.js | 52 +++ .../app/containers/Forms/demos/AutoSuggest.js | 184 ++++++++++ .../app/containers/Forms/demos/Checkboxes.js | 242 +++++++++++++ .../app/containers/Forms/demos/ComplexButtons.js | 154 +++++++++ .../containers/Forms/demos/ControlledSelectbox.js | 200 +++++++++++ .../app/containers/Forms/demos/CustomButtons.js | 257 ++++++++++++++ .../app/containers/Forms/demos/DateInput.js | 193 +++++++++++ .../app/containers/Forms/demos/DateTimeInput.js | 123 +++++++ .../app/containers/Forms/demos/FloatingButtons.js | 185 ++++++++++ .../app/containers/Forms/demos/FormattedInputs.js | 109 ++++++ .../app/containers/Forms/demos/HighlightSuggest.js | 198 +++++++++++ .../app/containers/Forms/demos/InputAdornments.js | 221 ++++++++++++ .../containers/Forms/demos/MultipleSelectbox.js | 165 +++++++++ .../app/containers/Forms/demos/NativeSelectbox.js | 153 +++++++++ .../app/containers/Forms/demos/RadioButton.js | 212 ++++++++++++ .../app/containers/Forms/demos/RangeInput.js | 92 +++++ .../app/containers/Forms/demos/RatingCustom.js | 176 ++++++++++ .../app/containers/Forms/demos/RatingNormal.js | 92 +++++ .../app/containers/Forms/demos/ReduxFormDemo.js | 229 +++++++++++++ .../containers/Forms/demos/SelectSuggestionTags.js | 379 +++++++++++++++++++++ .../containers/Forms/demos/SelectSuggestions.js | 378 ++++++++++++++++++++ .../app/containers/Forms/demos/SimpleSelectbox.js | 180 ++++++++++ .../app/containers/Forms/demos/SliderInput.js | 104 ++++++ .../app/containers/Forms/demos/StandardButtons.js | 223 ++++++++++++ .../app/containers/Forms/demos/SwitchesInput.js | 210 ++++++++++++ .../app/containers/Forms/demos/TagSuggestions.js | 249 ++++++++++++++ .../app/containers/Forms/demos/TextFields.js | 124 +++++++ .../app/containers/Forms/demos/TextFieldsLayout.js | 174 ++++++++++ .../app/containers/Forms/demos/TimeInput.js | 124 +++++++ .../app/containers/Forms/demos/UploadInputAll.js | 31 ++ .../app/containers/Forms/demos/UploadInputBtn.js | 32 ++ .../app/containers/Forms/demos/UploadInputImg.js | 32 ++ .../app/containers/Forms/demos/Wysiwyg.js | 91 +++++ .../odiparpack/app/containers/Forms/demos/index.js | 44 +++ 45 files changed, 6198 insertions(+) create mode 100644 front/odiparpack/app/containers/Forms/Autocomplete.js create mode 100644 front/odiparpack/app/containers/Forms/Buttons.js create mode 100644 front/odiparpack/app/containers/Forms/CheckboxRadio.js create mode 100644 front/odiparpack/app/containers/Forms/DateTimePicker.js create mode 100644 front/odiparpack/app/containers/Forms/Rating.js create mode 100644 front/odiparpack/app/containers/Forms/ReduxForm.js create mode 100644 front/odiparpack/app/containers/Forms/Selectbox.js create mode 100644 front/odiparpack/app/containers/Forms/SliderRange.js create mode 100644 front/odiparpack/app/containers/Forms/Switches.js create mode 100644 front/odiparpack/app/containers/Forms/TextEditor.js create mode 100644 front/odiparpack/app/containers/Forms/Textbox.js create mode 100644 front/odiparpack/app/containers/Forms/Upload.js create mode 100644 front/odiparpack/app/containers/Forms/demos/AutoSuggest.js create mode 100644 front/odiparpack/app/containers/Forms/demos/Checkboxes.js create mode 100644 front/odiparpack/app/containers/Forms/demos/ComplexButtons.js create mode 100644 front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js create mode 100644 front/odiparpack/app/containers/Forms/demos/CustomButtons.js create mode 100644 front/odiparpack/app/containers/Forms/demos/DateInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/DateTimeInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/FloatingButtons.js create mode 100644 front/odiparpack/app/containers/Forms/demos/FormattedInputs.js create mode 100644 front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js create mode 100644 front/odiparpack/app/containers/Forms/demos/InputAdornments.js create mode 100644 front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js create mode 100644 front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js create mode 100644 front/odiparpack/app/containers/Forms/demos/RadioButton.js create mode 100644 front/odiparpack/app/containers/Forms/demos/RangeInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/RatingCustom.js create mode 100644 front/odiparpack/app/containers/Forms/demos/RatingNormal.js create mode 100644 front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js create mode 100644 front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js create mode 100644 front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js create mode 100644 front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js create mode 100644 front/odiparpack/app/containers/Forms/demos/SliderInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/StandardButtons.js create mode 100644 front/odiparpack/app/containers/Forms/demos/SwitchesInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/TagSuggestions.js create mode 100644 front/odiparpack/app/containers/Forms/demos/TextFields.js create mode 100644 front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js create mode 100644 front/odiparpack/app/containers/Forms/demos/TimeInput.js create mode 100644 front/odiparpack/app/containers/Forms/demos/UploadInputAll.js create mode 100644 front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js create mode 100644 front/odiparpack/app/containers/Forms/demos/UploadInputImg.js create mode 100644 front/odiparpack/app/containers/Forms/demos/Wysiwyg.js create mode 100644 front/odiparpack/app/containers/Forms/demos/index.js (limited to 'front/odiparpack/app/containers/Forms') diff --git a/front/odiparpack/app/containers/Forms/Autocomplete.js b/front/odiparpack/app/containers/Forms/Autocomplete.js new file mode 100644 index 0000000..23c6a13 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Autocomplete.js @@ -0,0 +1,91 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Grid } from '@material-ui/core'; +import { + AutoSuggest, + TagSuggestions, + SelectSuggestions, + SelectSuggestionTags, + HighlightSuggest +} from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Textbox extends React.Component { + render() { + const { classes } = this.props; + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + +
+ + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + +
+
+ ); + } +} + +Textbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Textbox); diff --git a/front/odiparpack/app/containers/Forms/Buttons.js b/front/odiparpack/app/containers/Forms/Buttons.js new file mode 100644 index 0000000..0935ac2 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Buttons.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { StandardButtons, FloatingButtons, CustomButtons, ComplexButtons } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Buttons extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(Buttons); diff --git a/front/odiparpack/app/containers/Forms/CheckboxRadio.js b/front/odiparpack/app/containers/Forms/CheckboxRadio.js new file mode 100644 index 0000000..9833964 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/CheckboxRadio.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Checkboxes, RadioButton } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/DateTimePicker.js b/front/odiparpack/app/containers/Forms/DateTimePicker.js new file mode 100644 index 0000000..b079d2e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/DateTimePicker.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { DateInput, TimeInput, DateTimeInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Rating.js b/front/odiparpack/app/containers/Forms/Rating.js new file mode 100644 index 0000000..5d28bca --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Rating.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { RatingNormal, RatingCustom } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/ReduxForm.js b/front/odiparpack/app/containers/Forms/ReduxForm.js new file mode 100644 index 0000000..d8ef3a7 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/ReduxForm.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { ReduxFormDemo } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class ReduxForm extends React.Component { + state = { + valueForm: [] + } + + showResult(values) { + setTimeout(() => { + this.setState({ valueForm: values }); + window.alert(`You submitted:\n\n${this.state.valueForm}`); + }, 500); // simulate server latency + } + + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ this.showResult(values)} /> + +
+ +
+ ); + } +} + +export default withStyles(styles)(ReduxForm); diff --git a/front/odiparpack/app/containers/Forms/Selectbox.js b/front/odiparpack/app/containers/Forms/Selectbox.js new file mode 100644 index 0000000..4f0c090 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Selectbox.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SimpleSelectbox, NativeSelectbox, MultipleSelectbox, ControlledSelectbox } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Selectbox extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(Selectbox); diff --git a/front/odiparpack/app/containers/Forms/SliderRange.js b/front/odiparpack/app/containers/Forms/SliderRange.js new file mode 100644 index 0000000..779e251 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/SliderRange.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SliderInput, RangeInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Switches.js b/front/odiparpack/app/containers/Forms/Switches.js new file mode 100644 index 0000000..988e0a3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Switches.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { SwitchesInput } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/TextEditor.js b/front/odiparpack/app/containers/Forms/TextEditor.js new file mode 100644 index 0000000..84a1a82 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/TextEditor.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { Wysiwyg } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/Textbox.js b/front/odiparpack/app/containers/Forms/Textbox.js new file mode 100644 index 0000000..3eff0ba --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Textbox.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { TextFields, TextFieldsLayout, InputAdornments, FormattedInputs } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class Textbox extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(Textbox); diff --git a/front/odiparpack/app/containers/Forms/Upload.js b/front/odiparpack/app/containers/Forms/Upload.js new file mode 100644 index 0000000..99ef3bf --- /dev/null +++ b/front/odiparpack/app/containers/Forms/Upload.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { Helmet } from 'react-helmet'; +import brand from 'ba-api/brand'; +import { withStyles } from '@material-ui/core/styles'; +import { SourceReader, PapperBlock } from 'ba-components'; +import { UploadInputAll, UploadInputImg, UploadInputBtn } from './demos'; + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class DateTime extends React.Component { + render() { + const title = brand.name + ' - Form'; + const description = brand.desc; + const docSrc = 'containers/Forms/demos/'; + return ( +
+ + {title} + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); + } +} + +export default withStyles(styles)(DateTime); diff --git a/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js b/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js new file mode 100644 index 0000000..6d90ed3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/AutoSuggest.js @@ -0,0 +1,184 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Downshift from 'downshift'; +import { withStyles } from '@material-ui/core/styles'; +import { TextField, Paper, MenuItem } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { + InputProps, + classes, + ref, + ...other + } = inputProps; + + return ( + + ); +} + +function renderSuggestion({ + suggestion, + index, + itemProps, + highlightedIndex, + selectedItem +}) { + const isHighlighted = highlightedIndex === index; + const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; + + return ( + + {suggestion.label} + + ); +} + +renderSuggestion.propTypes = { + highlightedIndex: PropTypes.number.isRequired, + index: PropTypes.number.isRequired, + itemProps: PropTypes.object.isRequired, + selectedItem: PropTypes.string.isRequired, + suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired, +}; + +function getSuggestions(inputValue) { + let count = 0; + + return suggestions.filter(suggestion => { + const keep = (!inputValue || suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) + && count < 5; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 100, + }, + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`, + }, + inputRoot: { + flexWrap: 'wrap', + }, +}); + +function AutoSuggest(props) { + const { classes } = props; + + return ( +
+ + {({ + getInputProps, + getItemProps, + isOpen, + inputValue, + selectedItem, + highlightedIndex + }) => ( +
+ {renderInput({ + fullWidth: true, + classes, + InputProps: getInputProps({ + placeholder: 'Search a country (start with a)', + id: 'integration-downshift-simple', + }), + })} + {isOpen ? ( + + {getSuggestions(inputValue).map((suggestion, index) => renderSuggestion({ + suggestion, + index, + itemProps: getItemProps({ item: suggestion.label }), + highlightedIndex, + selectedItem, + }), + )} + + ) : null} +
+ )} + +
+ ); +} + +AutoSuggest.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AutoSuggest); diff --git a/front/odiparpack/app/containers/Forms/demos/Checkboxes.js b/front/odiparpack/app/containers/Forms/demos/Checkboxes.js new file mode 100644 index 0000000..4979e60 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/Checkboxes.js @@ -0,0 +1,242 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import Favorite from '@material-ui/icons/Favorite'; +import FavoriteBorder from '@material-ui/icons/FavoriteBorder'; +import { green } from '@material-ui/core/colors'; + +import { + Checkbox, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormHelperText, + FormGroup, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + color: green[600], + '&$checked': { + color: green[500], + }, + }, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class Checkboxes extends PureComponent { + state = { + checkedA: true, + checkedB: true, + checkedF: true, + checkedG: true, + gilad: true, + jason: false, + antoine: true, + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + return ( + + + + Basic usage +
+ + + + + + + +
+ + + Checkbox with label + Checkbox can also be used with a label description thanks to the FormControlLabel component. +
+ + + )} + label="Secondary" + /> + + )} + label="Primary" + /> + } label="Uncontrolled" /> + } label="Disabled" /> + } + label="Disabled" + /> + + )} + label="Indeterminate" + /> + + )} + label="Custom color" + /> + } checkedIcon={} value="checkedH" /> + } + label="Custom icon" + /> + } + checkedIcon={} + value="checkedI" + /> + )} + label="Custom size" + /> + +
+ + + Checkbox in Form Group + FormGroup is a helpful wrapper used to group selection controls components that provides an easier API. +
+ + Assign responsibility + + + )} + label="Gilad Gray" + /> + + )} + label="Jason Killian" + /> + + )} + label="Antoine Llorca" + /> + + Be careful + +
+ + + + ); + } +} + +Checkboxes.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Checkboxes); diff --git a/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js b/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js new file mode 100644 index 0000000..dbeab99 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ComplexButtons.js @@ -0,0 +1,154 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import imgApi from 'ba-api/images'; + +import { Typography, ButtonBase } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + minWidth: 300, + width: '100%', + }, + image: { + position: 'relative', + height: 200, + [theme.breakpoints.down('xs')]: { + width: '100% !important', // Overrides inline-style + height: 100, + }, + '&:hover, &$focusVisible': { + zIndex: 1, + '& $imageBackdrop': { + opacity: 0.15, + }, + '& $imageMarked': { + opacity: 0, + }, + '& $imageTitle': { + border: '4px solid currentColor', + }, + }, + }, + focusVisible: {}, + imageButton: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.common.white, + }, + imageSrc: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + backgroundSize: 'cover', + backgroundPosition: 'center 40%', + }, + imageBackdrop: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + backgroundColor: theme.palette.common.black, + opacity: 0.4, + transition: theme.transitions.create('opacity'), + }, + imageTitle: { + position: 'relative', + padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`, + }, + imageMarked: { + height: 3, + width: 18, + backgroundColor: theme.palette.common.white, + position: 'absolute', + bottom: -2, + left: 'calc(50% - 9px)', + transition: theme.transitions.create('opacity'), + }, +}); + +const images = [ + { + url: imgApi[0], + title: '330x200', + width: '40%', + id: '0' + }, + { + url: imgApi[3], + title: '250x200', + width: '30%', + id: '1' + }, + { + url: imgApi[5], + title: '250x200', + width: '30%', + id: '2' + }, +]; + +class ComplexButtons extends PureComponent { + render() { + const { classes } = this.props; + return ( + +
+ {images.map(image => ( + + + + + + {image.title} + + + + + ))} +
+ + ); + } +} + +ComplexButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ComplexButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js b/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js new file mode 100644 index 0000000..8ba1163 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ControlledSelectbox.js @@ -0,0 +1,200 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; + +import { + Button, + Typography, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Input, + InputLabel, + MenuItem, + FormControl, + Select, + Grid, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + button: { + display: 'block', + marginTop: theme.spacing(2), + }, +}); + +class ControlledSelectbox extends PureComponent { + state = { + open: false, + openRemotely: false, + age: '', + }; + + handleChange = name => event => { + this.setState({ [name]: Number(event.target.value) }); + }; + + handleChangeControll = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + handleClickOpen = () => { + this.setState({ open: true }); + }; + + handleClickOpenRemot = () => { + this.setState({ openRemotely: true }); + }; + + handleClose = () => { + this.setState({ open: false }); + }; + + handleOpen = () => { + this.setState({ open: true }); + }; + + handleCloseRemot = () => { + this.setState({ openRemotely: false }); + }; + + handleOpenRemot = () => { + this.setState({ openRemotely: true }); + }; + + render() { + const { classes } = this.props; + return ( + + + + With a Dialog + While its not encouraged by the Material Design specification, you can use a select inside a dialog. +
+ + + Fill the form + +
+ + Age + + + + Age + + +
+ + + + + + +
+ + + Controlled open Select +
+
+ + + Age + + +
+
+ + + + ); + } +} + +ControlledSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ControlledSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/CustomButtons.js b/front/odiparpack/app/containers/Forms/demos/CustomButtons.js new file mode 100644 index 0000000..f1600a0 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/CustomButtons.js @@ -0,0 +1,257 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; +import FileUpload from '@material-ui/icons/CloudUpload'; +import { Link } from 'react-router-dom'; + +import { purple, green } from '@material-ui/core/colors'; + +import { Typography, Grid, Button, Fab, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(1), + }, + cssRoot: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, + bootstrapRoot: { + boxShadow: 'none', + textTransform: 'none', + borderRadius: 4, + fontSize: 16, + padding: '6px 12px', + border: '1px solid', + backgroundColor: '#007bff', + borderColor: '#007bff', + '&:hover': { + backgroundColor: '#0069d9', + borderColor: '#0062cc', + }, + '&:active': { + boxShadow: 'none', + backgroundColor: '#0062cc', + borderColor: '#005cbf', + }, + '&:focus': { + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', + }, + }, + gradientBtn: { + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + borderRadius: 3, + border: 0, + color: 'white', + height: 48, + padding: '0 30px', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', + }, + label: { + textTransform: 'capitalize', + }, + inputUpload: { + display: 'none', + }, +}); + +const theme = createMuiTheme({ + palette: { + primary: green, + }, +}); + +const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line + return ; // eslint-disable-line +}); + +class CustomButtons extends PureComponent { + render() { + const { classes } = this.props; + const MyLink = React.forwardRef((props, ref) => ); // eslint-disable-line + return ( + + + + Sizes + + Fancy larger or smaller buttons? Use the size or the mini property. + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + + + + +
+
+ + + Style + + Here is an example of how you can change the main color of a Button. + +
+ + + + + + +
+ + + Linked Button + + One common use case is to use the button to trigger a navigation to a new page. + +
+ + +
+ + + Upload Button + + This a sample to trigger input files from button + +
+ + + + +
+ + + + ); + } +} + +CustomButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/DateInput.js b/front/odiparpack/app/containers/Forms/demos/DateInput.js new file mode 100644 index 0000000..fc3397c --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/DateInput.js @@ -0,0 +1,193 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import DateFnsUtils from '@date-io/date-fns'; +import { withStyles } from '@material-ui/core/styles'; + +import frLocale from 'date-fns/locale/fr'; +import ruLocale from 'date-fns/locale/ru'; +import enLocale from 'date-fns/locale/en-US'; + +import { MenuItem, Menu, Icon, IconButton, Typography, Grid } from '@material-ui/core'; + +const localeMap = { + en: enLocale, + fr: frLocale, + ru: ruLocale, +}; + +const styles = theme => ({ + demo: { + height: 240, + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class DateInput extends PureComponent { + state = { + selectedDate: new Date(), + anchorEl: null, + currentLocale: 'fr', + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + handleMenuOpen = (event) => { + event.stopPropagation(); + this.setState({ anchorEl: event.currentTarget }); + } + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + }; + + selectLocale = (selectedLocale) => { + this.setState({ + currentLocale: selectedLocale, + anchorEl: null, + }); + } + + render() { + const { selectedDate, currentLocale, anchorEl } = this.state; + const { classes } = this.props; + const locale = localeMap[currentLocale]; + return ( + + + + Basic usage +
+ + + +
+ +
+ + + +
+ + + Keyboard Input +
+ + + +
+ +
+ + + +
+ + + Localization +
+
+ + + more_vert + + ), + }} + /> + +
+ + + { + Object.keys(localeMap).map(localeItem => ( + this.selectLocale(localeItem)} + > + {localeItem} + + )) + } + +
+ + + + ); + } +} + + +DateInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DateInput); diff --git a/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js b/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js new file mode 100644 index 0000000..e594013 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/DateTimeInput.js @@ -0,0 +1,123 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DateTimePicker, KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { IconButton, Icon, InputAdornment, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class DateTimeInput extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + const { classes } = this.props; + return ( + + + + Basic usage +
+ + + +
+ +
+ + + +
+ + + Customization +
+ + add_alarm } + rightArrowIcon={ snooze } + InputProps={{ + endAdornment: ( + + + add_alarm + + + ), + }} + /> + +
+
+ + + +
+ + + + ); + } +} + +DateTimeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DateTimeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js b/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js new file mode 100644 index 0000000..5fbfa1c --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/FloatingButtons.js @@ -0,0 +1,185 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import SwipeableViews from 'react-swipeable-views'; +import AddIcon from '@material-ui/icons/Add'; +import EditIcon from '@material-ui/icons/Create'; +import NavigationIcon from '@material-ui/icons/Navigation'; +import UpIcon from '@material-ui/icons/KeyboardArrowUp'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { green } from '@material-ui/core/colors'; + +import { Typography, Grid, Fab, AppBar, Tabs, Tab, Zoom, Icon } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + button: { + margin: theme.spacing(1), + }, + root: { + backgroundColor: theme.palette.background.paper, + [theme.breakpoints.up('sm')]: { + width: 500, + }, + margin: '0 auto', + position: 'relative', + minHeight: 200, + }, + fab: { + position: 'absolute', + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + fabGreen: { + color: theme.palette.common.white, + backgroundColor: green[500], + }, + extendedIcon: { + marginRight: theme.spacing(1), + }, +}); + +function TabContainer(props) { + const { children, dir } = props; + + return ( + + {children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, + dir: PropTypes.string.isRequired, +}; + +class FloatingButtons extends PureComponent { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + handleChangeIndex = index => { + this.setState({ value: index }); + }; + + render() { + const { classes, theme } = this.props; + const transitionDuration = { + enter: theme.transitions.duration.enteringScreen, + exit: theme.transitions.duration.leavingScreen, + }; + const fabs = [ + { + color: 'primary', + className: classes.fab, + icon: , + }, + { + color: 'secondary', + className: classes.fab, + icon: , + }, + { + color: 'inherit', + className: classNames(classes.fab, classes.fabGreen), + icon: , + }, + ]; + + return ( + + + + Floating Action Buttons + + A floating action button represents the primary action in an application. + + + + + + edit_icon + + + + Extended + + + + + + + Floating BUtton in Tab + + A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes. + +
+ + + + + + + + + Item One + Item Two + Item Three + + {fabs.map((fab, index) => ( + + + {fab.icon} + + + ))} +
+ + + + ); + } +} + +FloatingButtons.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(FloatingButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js b/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js new file mode 100644 index 0000000..9fbe9cd --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/FormattedInputs.js @@ -0,0 +1,109 @@ +import React from 'react'; +import MaskedInput from 'react-text-mask'; +import NumberFormat from 'react-number-format'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Input, InputLabel, TextField, FormControl } from '@material-ui/core'; + +const styles = theme => ({ + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(3), + }, +}); + +function TextMaskCustom(props) { + const { inputRef, ...other } = props; + + return ( + { + inputRef(ref ? ref.inputElement : null); + }} + mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} + placeholderChar={'\u2000'} + showMask + /> + ); +} + +TextMaskCustom.propTypes = { + inputRef: PropTypes.func.isRequired, +}; + +function NumberFormatCustom(props) { + const { inputRef, onChange, ...other } = props; + + return ( + { + onChange({ + target: { + value: values.value, + }, + }); + }} + thousandSeparator + prefix="$" + /> + ); +} + +NumberFormatCustom.propTypes = { + inputRef: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, +}; + +class FormattedInputs extends React.Component { + state = { + textmask: '(1  )    -    ', + numberformat: '1320', + }; + + handleChange = name => event => { + this.setState({ + [name]: event.target.value, + }); + }; + + render() { + const { classes } = this.props; + const { textmask, numberformat } = this.state; + + return ( +
+ + react-text-mask + + + +
+ ); + } +} + +FormattedInputs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FormattedInputs); diff --git a/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js new file mode 100644 index 0000000..ee13fd7 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js @@ -0,0 +1,198 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Autosuggest from 'react-autosuggest'; +import match from 'autosuggest-highlight/match'; +import parse from 'autosuggest-highlight/parse'; +import { withStyles } from '@material-ui/core/styles'; + +import { TextField, Paper, MenuItem } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { classes, ref, ...other } = inputProps; + + return ( + + ); +} + +function renderSuggestion(suggestion, { query, isHighlighted }) { + const matches = match(suggestion.label, query); + const parts = parse(suggestion.label, matches); + + return ( + +
+ {parts.map((part, index) => ( + part.highlight ? ( + + {part.text} + + ) : ( + + {part.text} + + ) + ))} +
+ + ); +} + +function renderSuggestionsContainer(options) { + const { containerProps, children } = options; + + return ( + + {children} + + ); +} + +function getSuggestionValue(suggestion) { + return suggestion.label; +} + +function getSuggestions(value) { + const inputValue = value.trim().toLowerCase(); + const inputLength = inputValue.length; + let count = 0; + + return inputLength === 0 + ? [] : suggestions.filter(suggestion => { + const keep = count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +const styles = theme => ({ + container: { + flexGrow: 1, + position: 'relative', + height: 250, + }, + suggestionsContainerOpen: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + suggestion: { + display: 'block', + }, + suggestionsList: { + margin: 0, + padding: 0, + listStyleType: 'none', + }, +}); + +class HighlightSuggest extends React.Component { + state = { + value: '', + suggestions: [], + }; + + handleSuggestionsFetchRequested = ({ value }) => { + this.setState({ + suggestions: getSuggestions(value), + }); + }; + + handleSuggestionsClearRequested = () => { + this.setState({ + suggestions: [], + }); + }; + + handleChange = (event, { newValue }) => { + this.setState({ + value: newValue, + }); + }; + + render() { + const { classes } = this.props; + + return ( + + ); + } +} + +HighlightSuggest.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(HighlightSuggest); diff --git a/front/odiparpack/app/containers/Forms/demos/InputAdornments.js b/front/odiparpack/app/containers/Forms/demos/InputAdornments.js new file mode 100644 index 0000000..1d6307e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/InputAdornments.js @@ -0,0 +1,221 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import Visibility from '@material-ui/icons/Visibility'; +import VisibilityOff from '@material-ui/icons/VisibilityOff'; +import AccountCircle from '@material-ui/icons/AccountCircle'; + +import { + Typography, + Grid, + IconButton, + Input, + InputLabel, + InputAdornment, + FormControl, + FormHelperText, + TextField, + MenuItem, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(3), + }, + withoutLabel: { + marginTop: theme.spacing(3), + }, + textField: { + flexBasis: 200, + }, +}); + +const ranges = [ + { + value: '0-20', + label: '0 to 20', + }, + { + value: '21-50', + label: '21 to 50', + }, + { + value: '51-100', + label: '51 to 100', + }, +]; + +class InputAdornments extends PureComponent { + state = { + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }; + + handleChange = prop => event => { + this.setState({ [prop]: event.target.value }); + }; + + handleMouseDownPassword = event => { + event.preventDefault(); + }; + + handleClickShowPassword = () => { + this.setState({ showPassword: !this.state.showPassword }); + }; + + render() { + const { classes } = this.props; + return ( + + + + Input Adornments + TextField is composed of smaller components that you can leverage directly to significantly customize your form inputs. +
+ Kg, + }} + /> + Kg, + }} + > + {ranges.map(option => ( + + {option.label} + + ))} + + + Amount + $} + /> + + + Kg} + inputProps={{ + 'aria-label': 'Weight', + }} + /> + Weight + + + Password + + + {this.state.showPassword ? : } + + + )} + /> + +
+ + + With icon + Icons can be specified as prepended or appended. + + With a start adornment + + + + )} + /> + + + + + ), + }} + /> +
+ + + + + + + + +
+ + + + ); + } +} + +InputAdornments.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(InputAdornments); diff --git a/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js b/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js new file mode 100644 index 0000000..6609147 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/MultipleSelectbox.js @@ -0,0 +1,165 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { + Input, + InputLabel, + MenuItem, + FormControl, + ListItemText, + Select, + Checkbox, + Chip, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + maxWidth: 300, + }, + chips: { + display: 'flex', + flexWrap: 'wrap', + }, + chip: { + margin: theme.spacing(0.25), + }, +}); + +const ITEM_HEIGHT = 48; +const ITEM_PADDING_TOP = 8; +const MenuProps = { + PaperProps: { + style: { + maxHeight: (ITEM_HEIGHT * 4.5) + ITEM_PADDING_TOP, + width: 250, + }, + }, +}; + +const names = [ + 'Oliver Hansen', + 'Van Henry', + 'April Tucker', + 'Ralph Hubbard', + 'Omar Alexander', + 'Carlos Abbott', + 'Miriam Wagner', + 'Bradley Wilkerson', + 'Virginia Andrews', + 'Kelly Snyder', +]; + +class MultipleSelectbox extends PureComponent { + state = { + name: [], + }; + + handleChange = event => { + this.setState({ name: event.target.value }); + }; + + render() { + const { classes, theme } = this.props; + return ( + + + Name + + + + Tag + + + + Chip + + + + ); + } +} + +MultipleSelectbox.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(MultipleSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js b/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js new file mode 100644 index 0000000..a0e3c4d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/NativeSelectbox.js @@ -0,0 +1,153 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { Input, InputLabel, FormControl, FormHelperText, Select } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, +}); + +class NativeSelectbox extends PureComponent { + state = { + age: '', + name: 'hai', + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + + + Age + + + + Age + + Some important helper text + + + + Without label + + + Name + + Disabled + + + Name + + Error + + + Name + + Alignment with an input + + + Name + + Uncontrolled + + + ); + } +} + +NativeSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(NativeSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/RadioButton.js b/front/odiparpack/app/containers/Forms/demos/RadioButton.js new file mode 100644 index 0000000..c378d96 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RadioButton.js @@ -0,0 +1,212 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'; +import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'; +import { green } from '@material-ui/core/colors'; + +import { + Radio, + RadioGroup, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormHelperText, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + color: green[600], + '&$checked': { + color: green[500], + }, + }, + formControl: { + margin: theme.spacing(3), + }, + group: { + margin: `${theme.spacing(1)}px 0`, + }, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class RadioButton extends PureComponent { + state = { + value: 'female', + selectedValue: 'a', + }; + + handleChange = event => { + this.setState({ value: event.target.value }); + }; + + handleChangeOther = event => { + this.setState({ selectedValue: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + + + + Basic usage + Radio buttons should have the most commonly used option selected by default. +
+ + + + Gender + + } label="Female" /> + } label="Male" /> + } label="Other" /> + } + label="(Disabled option)" + /> + + + + + + Gender + + } label="Male" /> + } label="Female" /> + } label="Other" /> + } + label="(Disabled option)" + /> + + You can display an error + + + +
+ + +
+ Radio without label + Radio can also be used standalone, without the wrapper. + + + + + } + checkedIcon={} + /> +
+ + + + ); + } +} + +RadioButton.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RadioButton); diff --git a/front/odiparpack/app/containers/Forms/demos/RangeInput.js b/front/odiparpack/app/containers/Forms/demos/RangeInput.js new file mode 100644 index 0000000..247050e --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RangeInput.js @@ -0,0 +1,92 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import InputRange from 'react-input-range'; +import { withStyles } from '@material-ui/core/styles'; +import 'ba-styles/vendors/react-input-range/react-input-range.css'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + inputRange: { + width: 300, + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class RangeInput extends PureComponent { + state = { + valueRange: { + min: 3, + max: 7, + }, + valueRangeLabel: { + min: 5, + max: 10, + }, + } + + render() { + const { classes } = this.props; + return ( + + + + Range Input Basic + +
+ this.setState({ valueRange: value })} + value={this.state.valueRange} + /> +
+ + + + Range with Label + +
+ `${value} kg`} + value={this.state.valueRangeLabel} + onChange={value => this.setState({ valueRangeLabel: value })} + /> +
+ + + + + ); + } +} + +RangeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RangeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/RatingCustom.js b/front/odiparpack/app/containers/Forms/demos/RatingCustom.js new file mode 100644 index 0000000..002548b --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RatingCustom.js @@ -0,0 +1,176 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { AddCircle, AddCircleOutline, Remove, ThumbUp } from '@material-ui/icons'; +import { Rating } from 'ba-components'; + +import { green, red, indigo as blue } from '@material-ui/core/colors'; + +import { FormControl, Typography, Grid, Chip } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 0`, + }, + chip: { + margin: theme.spacing(1), + fontWeight: 'bold', + color: '#FFF', + background: red[300] + }, + blue: { + color: blue[300] + }, + green: { + color: green[500] + }, + red: { + color: red[300] + }, + small: { + '& button': { + width: 72, + height: 72, + padding: 16 + }, + '& svg': { + width: 36, + height: 36 + } + }, + medium: { + '& button': { + width: 96, + height: 96, + padding: 24 + }, + '& svg': { + width: 48, + height: 48 + } + }, + large: { + '& button': { + width: 120, + height: 120, + padding: 30 + }, + '& svg': { + width: 60, + height: 60 + } + } +}); + +class RatingCustom extends PureComponent { + state = { + rating: 3 + } + + handleChange = value => { + this.setState({ rating: value }); + } + + render() { + const { classes } = this.props; + return ( + + + + Ratting Custom Icon + + this.handleChange(value)} + iconFilled={} + iconHovered={} + iconNormal={} + /> + + + + Show Counter + + + this.handleChange(value)} + iconFilled={} + iconHovered={} + iconNormal={} + tooltipRenderer={(index) => { index }} + tooltipPosition="bottom-center" + /> + + + + + + Ratting Custom Size + +
+ this.handleChange(value)} + /> +
+
+ this.handleChange(value)} + /> +
+
+ this.handleChange(value)} + /> +
+ + + + + ); + } +} + +RatingCustom.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RatingCustom); diff --git a/front/odiparpack/app/containers/Forms/demos/RatingNormal.js b/front/odiparpack/app/containers/Forms/demos/RatingNormal.js new file mode 100644 index 0000000..acfb50d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/RatingNormal.js @@ -0,0 +1,92 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Rating } from 'ba-components'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, +}); + +class RatingCustom extends PureComponent { + state = { + rating: 3 + } + + handleChange = value => { + this.setState({ rating: value }); + } + + render() { + const { classes } = this.props; + return ( + + + + Ratting Normal + + this.handleChange(value)} + /> + + + + Read Only + + + + + + Disabled + + + + + + + ); + } +} + +RatingCustom.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RatingCustom); diff --git a/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js b/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js new file mode 100644 index 0000000..32b5d3d --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/ReduxFormDemo.js @@ -0,0 +1,229 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Field, reduxForm } from 'redux-form/immutable'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { + CheckboxRedux, + SelectRedux, + TextFieldRedux, + SwitchRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { initAction, clearAction } from 'ba-actions/ReduxFormActions'; + +import { + Paper, + MenuItem, + InputLabel, + Grid, + Radio, + RadioGroup, + FormControl, + FormLabel, + FormControlLabel, + Typography, + Button, +} from '@material-ui/core'; + +const renderRadioGroup = ({ input, ...rest }) => ( + input.onChange(value)} + /> +); + +// validation functions +const required = value => (value == null ? 'Required' : undefined); +const email = value => ( + value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) + ? 'Invalid email' + : undefined +); + +const styles = theme => ({ + root: { + flexGrow: 1, + padding: 30 + }, + field: { + width: '100%', + marginBottom: 20 + }, + fieldBasic: { + width: '100%', + marginBottom: 20, + marginTop: 10 + }, + inlineWrap: { + display: 'flex', + flexDirection: 'row' + }, + buttonInit: { + margin: theme.spacing(4), + textAlign: 'center' + }, +}); + +const initData = { + text: 'Sample Text', + email: 'sample@mail.com', + radio: 'option1', + selection: 'option1', + onof: true, + checkbox: true, + textarea: 'This is default text' +}; + +class ReduxFormDemo extends Component { + render() { + const trueBool = true; + const { + classes, + handleSubmit, + pristine, + reset, + submitting, + init, + clear + } = this.props; + return ( +
+ + + + + Simple Form Example + + + The delay between when you click (Submit) and when the alert dialog pops up is intentional, to simulate server latency. + +
+ + +
+
+
+ +
+
+ +
+
+ Choose One Option + + } label="Option 1" /> + } label="Option 2" /> + +
+
+ + Selection + + Option One + Option Two + Option Three + + +
+
+ Toggle Input +
+ } label="On/OF Switch" /> + } label="Checkbox" /> +
+
+
+ +
+
+ + +
+
+ + + +
+ ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +ReduxFormDemo.propTypes = { + classes: PropTypes.object.isRequired, + handleSubmit: PropTypes.func.isRequired, + reset: PropTypes.func.isRequired, + pristine: PropTypes.bool.isRequired, + submitting: PropTypes.bool.isRequired, + init: PropTypes.func.isRequired, + clear: PropTypes.func.isRequired, +}; + +const mapDispatchToProps = dispatch => ({ + init: bindActionCreators(initAction, dispatch), + clear: () => dispatch(clearAction), +}); + +const ReduxFormMapped = reduxForm({ + form: 'immutableExample', + enableReinitialize: true, +})(ReduxFormDemo); + +const reducer = 'initval'; +const FormInit = connect( + state => ({ + force: state, + initialValues: state.getIn([reducer, 'formValues']) + }), + mapDispatchToProps, +)(ReduxFormMapped); + +export default withStyles(styles)(FormInit); diff --git a/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js new file mode 100644 index 0000000..125fd23 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js @@ -0,0 +1,379 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Select from 'react-select'; +import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import NoSsr from '@material-ui/core/NoSsr'; +import TextField from '@material-ui/core/TextField'; +import Paper from '@material-ui/core/Paper'; +import Chip from '@material-ui/core/Chip'; +import MenuItem from '@material-ui/core/MenuItem'; +import CancelIcon from '@material-ui/icons/Cancel'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +].map(suggestion => ({ + value: suggestion.label, + label: suggestion.label, +})); + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + height: 250, + }, + input: { + display: 'flex', + padding: 0, + height: 'auto', + }, + valueContainer: { + display: 'flex', + flexWrap: 'wrap', + flex: 1, + alignItems: 'center', + overflow: 'hidden', + }, + chip: { + margin: theme.spacing(0.5, 0.25), + }, + chipFocused: { + backgroundColor: emphasize( + theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + 0.08, + ), + }, + noOptionsMessage: { + padding: theme.spacing(1, 2), + }, + singleValue: { + fontSize: 16, + }, + placeholder: { + position: 'absolute', + left: 8, + bottom: 6, + fontSize: 16, + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, +})); + +function NoOptionsMessage(props) { + const { selectProps, innerProps, children } = props; + return ( + + {children} + + ); +} + +NoOptionsMessage.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +NoOptionsMessage.defaultProps = { + children: null, + innerProps: null +}; + +function inputComponent({ inputRef, ...props }) { + return
; +} + +inputComponent.propTypes = { + inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +}; + +inputComponent.defaultProps = { + inputRef: undefined +}; + +function Control(props) { + const { + children, + innerProps, + innerRef, + selectProps: { classes, TextFieldProps }, + } = props; + + return ( + + ); +} + +Control.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + selectProps: PropTypes.object.isRequired, +}; + +Control.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined +}; + +function Option(props) { + const { + innerRef, + isFocused, + isSelected, + innerProps, + children + } = props; + return ( + + {children} + + ); +} + +Option.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + isFocused: PropTypes.bool, + isSelected: PropTypes.bool, +}; + +Option.defaultProps = { + children: null, + innerProps: null, + innerRef: undefined, + isFocused: false, + isSelected: false +}; + +function Placeholder(props) { + const { selectProps, innerProps, children } = props; + return ( + + {children} + + ); +} + +Placeholder.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +Placeholder.defaultProps = { + children: null, + innerProps: null, +}; + +function SingleValue(props) { + const { selectProps, children, innerProps } = props; + return ( + + {children} + + ); +} + +SingleValue.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object.isRequired, +}; + +SingleValue.defaultProps = { + children: null, + innerProps: null, +}; + +function ValueContainer(props) { + const { selectProps, children } = props; + return
{children}
; +} + +ValueContainer.propTypes = { + children: PropTypes.node, + selectProps: PropTypes.object.isRequired, +}; + +ValueContainer.defaultProps = { + children: null, +}; + +function MultiValue(props) { + const { + children, + selectProps, + removeProps, + isFocused + } = props; + return ( + } + /> + ); +} + +MultiValue.propTypes = { + children: PropTypes.node, + isFocused: PropTypes.bool, + removeProps: PropTypes.object.isRequired, + selectProps: PropTypes.object.isRequired, +}; + +MultiValue.defaultProps = { + children: null, + isFocused: false, +}; + +function Menu(props) { + const { selectProps, innerProps, children } = props; + return ( + + {children} + + ); +} + +Menu.propTypes = { + children: PropTypes.node, + innerProps: PropTypes.object, + selectProps: PropTypes.object, +}; + +Menu.defaultProps = { + children: null, + innerProps: null, + selectProps: null, +}; + +const components = { + Control, + Menu, + MultiValue, + NoOptionsMessage, + Option, + Placeholder, + SingleValue, + ValueContainer, +}; + +export default function SelectSuggestions() { + const classes = useStyles(); + const theme = useTheme(); + const [multi, setMulti] = React.useState(null); + + function handleChangeMulti(value) { + setMulti(value); + } + + const selectStyles = { + input: base => ({ + ...base, + color: theme.palette.text.primary, + '& input': { + font: 'inherit', + }, + }), + }; + + return ( +
+ + + +
+ ); +} diff --git a/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js new file mode 100644 index 0000000..eb7bd0a --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js @@ -0,0 +1,180 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { withStyles } from '@material-ui/core/styles'; + +import { Input, InputLabel, MenuItem, FormControl, FormHelperText, Select } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + root: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(1), + minWidth: 120, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, +}); + +class SimpleSelectbox extends PureComponent { + state = { + age: '', + name: 'hai', + }; + + handleChange = event => { + this.setState({ [event.target.name]: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + +
+ + Age + + + + Age + + Some important helper text + + + + Without label + + + Name + + Disabled + + + Name + } + > + + None + + Hai + Olivier + Kevin + + Error + + + Name + + Alignment with an input + + + Name + + Read only + + + Age + + Auto width + +
+ + ); + } +} + +SimpleSelectbox.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SimpleSelectbox); diff --git a/front/odiparpack/app/containers/Forms/demos/SliderInput.js b/front/odiparpack/app/containers/Forms/demos/SliderInput.js new file mode 100644 index 0000000..d0513ed --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SliderInput.js @@ -0,0 +1,104 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import InputRange from 'react-input-range'; +import { withStyles } from '@material-ui/core/styles'; +import 'ba-styles/vendors/react-input-range/react-input-range.css'; + +import { FormControl, Typography, Grid } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + inputRange: { + width: 200, + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class SliderInput extends PureComponent { + state = { + value: 10, + valueDisabled: 5, + valueDecimal: 16, + } + + render() { + const { classes } = this.props; + return ( + + + + Slider Input Basic + +
+ this.setState({ value })} + /> +
+ + + + Slider Input Disabled + +
+ this.setState({ valueDisabled: value })} + /> +
+ + + + Formated Value + +
+ value.toFixed(2)} + value={this.state.valueDecimal} + onChange={value => this.setState({ valueDecimal: value })} + /> +
+ + + + + ); + } +} + +SliderInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SliderInput); diff --git a/front/odiparpack/app/containers/Forms/demos/StandardButtons.js b/front/odiparpack/app/containers/Forms/demos/StandardButtons.js new file mode 100644 index 0000000..d88c004 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/StandardButtons.js @@ -0,0 +1,223 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import DeleteIcon from '@material-ui/icons/Delete'; +import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'; +import PhotoCamera from '@material-ui/icons/PhotoCamera'; +import FileUpload from '@material-ui/icons/CloudUpload'; +import KeyboardVoice from '@material-ui/icons/KeyboardVoice'; +import Save from '@material-ui/icons/Save'; + +import { Button, Typography, Grid, Icon, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + button: { + margin: theme.spacing(1), + }, + inputUpload: { + display: 'none', + }, + leftIcon: { + marginRight: theme.spacing(1), + }, + rightIcon: { + marginLeft: theme.spacing(1), + }, + iconSmall: { + fontSize: 20, + }, +}); + +function doSomething(event) { + alert(event.currentTarget.getAttribute('data-something')); +} + +class StandardButtons extends PureComponent { + render() { + const { classes } = this.props; + return ( + + + + Flat Button + + Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press. + + + + + + + + + + + Raised Button + + Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press. + + + + + + + + + + Outline Button + + + + + + + + + + Icon Button + + Icon buttons are commonly found in app bars and toolbars. + + + + + + + + + alarm + + + + + + + + + Icon Raised Button + + Icon buttons are commonly found in app bars and toolbars. + + + + + + + + + + ); + } +} + +StandardButtons.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StandardButtons); diff --git a/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js b/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js new file mode 100644 index 0000000..3c10803 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/SwitchesInput.js @@ -0,0 +1,210 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { green } from '@material-ui/core/colors'; + +import { + Switch, + Typography, + Grid, + FormControl, + FormLabel, + FormControlLabel, + FormGroup, + FormHelperText, +} from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + field: { + margin: `${theme.spacing(3)}px 5px`, + }, + formControl: { + margin: theme.spacing(3), + }, + group: { + margin: `${theme.spacing(1)}px 0`, + }, + switchBase: { + color: green[50], + '&$checked': { + color: green[500], + '& + $bar': { + backgroundColor: green[500], + }, + }, + }, + bar: {}, + checked: {}, + size: { + width: 40, + height: 40, + }, + sizeIcon: { + fontSize: 20, + }, +}); + +class RadioButton extends PureComponent { + state = { + checkedA: true, + checkedB: true, + checkedF: true, + gilad: true, + jason: false, + antoine: true, + }; + + handleChange = name => event => { + this.setState({ [name]: event.target.checked }); + }; + + render() { + const { classes } = this.props; + return ( + + + + Basic usage +
+ + + + + + +
+ + + Switch with label + Switch can also be used with a label description thanks to the FormControlLabel component. +
+ + + )} + label="Secondary" + /> + + )} + label="Primary" + /> + } label="Uncontrolled" /> + } label="Disabled" /> + } label="Disabled" /> + + )} + label="Custom color" + /> + +
+ + + Switch in Form Group + FormGroup is a helpful wrapper used to group selection controls components that provides an easier API. However, we encourage you to use a Checkbox instead. +
+ + Assign responsibility + + + )} + label="Gilad Gray" + /> + + )} + label="Jason Killian" + /> + + )} + label="Antoine Llorca" + /> + + Be careful + +
+ + + + ); + } +} + +RadioButton.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RadioButton); diff --git a/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js b/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js new file mode 100644 index 0000000..1648fc3 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TagSuggestions.js @@ -0,0 +1,249 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import keycode from 'keycode'; +import Downshift from 'downshift'; +import { withStyles } from '@material-ui/core/styles'; +import { TextField, Paper, MenuItem, Chip } from '@material-ui/core'; + +const suggestions = [ + { label: 'Afghanistan' }, + { label: 'Aland Islands' }, + { label: 'Albania' }, + { label: 'Algeria' }, + { label: 'American Samoa' }, + { label: 'Andorra' }, + { label: 'Angola' }, + { label: 'Anguilla' }, + { label: 'Antarctica' }, + { label: 'Antigua and Barbuda' }, + { label: 'Argentina' }, + { label: 'Armenia' }, + { label: 'Aruba' }, + { label: 'Australia' }, + { label: 'Austria' }, + { label: 'Azerbaijan' }, + { label: 'Bahamas' }, + { label: 'Bahrain' }, + { label: 'Bangladesh' }, + { label: 'Barbados' }, + { label: 'Belarus' }, + { label: 'Belgium' }, + { label: 'Belize' }, + { label: 'Benin' }, + { label: 'Bermuda' }, + { label: 'Bhutan' }, + { label: 'Bolivia, Plurinational State of' }, + { label: 'Bonaire, Sint Eustatius and Saba' }, + { label: 'Bosnia and Herzegovina' }, + { label: 'Botswana' }, + { label: 'Bouvet Island' }, + { label: 'Brazil' }, + { label: 'British Indian Ocean Territory' }, + { label: 'Brunei Darussalam' }, +]; + +function renderInput(inputProps) { + const { + InputProps, + classes, + ref, + ...other + } = inputProps; + + return ( + + ); +} + +function renderSuggestion({ + suggestion, + index, + itemProps, + highlightedIndex, + selectedItem +}) { + const isHighlighted = highlightedIndex === index; + const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; + + return ( + + {suggestion.label} + + ); +} + +renderSuggestion.propTypes = { + highlightedIndex: PropTypes.number.isRequired, + index: PropTypes.number.isRequired, + itemProps: PropTypes.object.isRequired, + selectedItem: PropTypes.string.isRequired, + suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired, +}; + +function getSuggestions(inputValue) { + let count = 0; + + return suggestions.filter(suggestion => { + const keep = (!inputValue || suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) + && count < 5; + + if (keep) { + count += 1; + } + + return keep; + }); +} + +class DownshiftMultiple extends React.Component { + state = { + inputValue: '', + selectedItem: [], + }; + + handleKeyDown = event => { + const { inputValue, selectedItem } = this.state; + if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') { + this.setState({ + selectedItem: selectedItem.slice(0, selectedItem.length - 1), + }); + } + }; + + handleInputChange = event => { + this.setState({ inputValue: event.target.value }); + }; + + handleChange = item => { + let { selectedItem } = this.state; + + if (selectedItem.indexOf(item) === -1) { + selectedItem = [...selectedItem, item]; + } + + this.setState({ + inputValue: '', + selectedItem, + }); + }; + + handleDelete = item => () => { + const selectedItem = [...this.state.selectedItem]; + selectedItem.splice(selectedItem.indexOf(item), 1); + + this.setState({ selectedItem }); + }; + + render() { + const { classes } = this.props; + const { inputValue, selectedItem } = this.state; + + return ( + + {({ + getInputProps, + getItemProps, + isOpen, + inputValue: inputValue2, + selectedItem: selectedItem2, + highlightedIndex, + }) => ( +
+ {renderInput({ + fullWidth: true, + classes, + InputProps: getInputProps({ + startAdornment: selectedItem.map(item => ( + + )), + onChange: this.handleInputChange, + onKeyDown: this.handleKeyDown, + placeholder: 'Select multiple countries', + id: 'integration-downshift-multiple', + }), + })} + {isOpen ? ( + + {getSuggestions(inputValue2).map((suggestion, index) => renderSuggestion({ + suggestion, + index, + itemProps: getItemProps({ item: suggestion.label }), + highlightedIndex, + selectedItem: selectedItem2, + }), + )} + + ) : null} +
+ )} + + ); + } +} + +DownshiftMultiple.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + height: 100, + }, + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`, + }, + inputRoot: { + flexWrap: 'wrap', + }, +}); + +function TagSuggestions(props) { + const { classes } = props; + + return ( +
+ +
+ ); +} + +TagSuggestions.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TagSuggestions); diff --git a/front/odiparpack/app/containers/Forms/demos/TextFields.js b/front/odiparpack/app/containers/Forms/demos/TextFields.js new file mode 100644 index 0000000..b408284 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TextFields.js @@ -0,0 +1,124 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Grid, Input, InputLabel, FormControl, FormHelperText } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + input: { + margin: theme.spacing(3), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + formControl: { + margin: theme.spacing(3), + }, +}); + +class TextFields extends PureComponent { + state = { + name: 'Composed TextField', + }; + + handleChange = event => { + this.setState({ name: event.target.value }); + }; + + render() { + const { classes } = this.props; + return ( + + + + Textfield Components + TextField is composed of smaller components that you can leverage directly to significantly customize your form inputs. +
+ + Name + + + + Name + + Some important helper text + + + Name + + Disabled + + + Name + + Error + +
+ + + Input State +
+ + + + +
+ + + + ); + } +} + +TextFields.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TextFields); diff --git a/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js b/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js new file mode 100644 index 0000000..27809f4 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TextFieldsLayout.js @@ -0,0 +1,174 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { purple, green } from '@material-ui/core/colors'; + +import { Typography, Grid, Input, InputLabel, TextField, FormControl } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + lineHeight: '24px' + }, + input: { + margin: theme.spacing(3), + }, + margin: { + margin: theme.spacing(1), + }, + container: { + display: 'flex', + flexWrap: 'wrap', + }, + textField: { + margin: `${theme.spacing(2)}px ${theme.spacing(1)}px`, + width: 200, + }, + cssLabel: { + '&$cssFocused': { + color: purple[500], + }, + }, + cssFocused: {}, + cssUnderline: { + '&:after': { + backgroundColor: purple[500], + }, + }, + bootstrapRoot: { + padding: 0, + 'label + &': { + marginTop: theme.spacing(3), + }, + }, + bootstrapInput: { + borderRadius: 4, + backgroundColor: theme.palette.common.white, + border: '1px solid #ced4da', + fontSize: 16, + padding: '10px 12px', + width: 'calc(100% - 24px)', + transition: theme.transitions.create(['border-color', 'box-shadow']), + '&:focus': { + borderColor: '#80bdff', + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', + }, + }, + bootstrapFormLabel: { + fontSize: 18, + }, +}); + +const theme = createMuiTheme({ + palette: { + primary: green, + }, +}); + +class TextFields extends PureComponent { + render() { + const { classes } = this.props; + return ( + + + + Layout + TextField, FormControl allow the specification of margin to alter the vertical spacing of inputs. Using none (default) will not apply margins to the FormControl, whereas dense and normal will as well as alter other styles to meet the specification. +
+ + + +
+ + + Customized Designs + Here is an example of how you can change the main color of an Input. +
+ + + Custom CSS + + + + + + + +
+ + + + ); + } +} + +TextFields.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TextFields); diff --git a/front/odiparpack/app/containers/Forms/demos/TimeInput.js b/front/odiparpack/app/containers/Forms/demos/TimeInput.js new file mode 100644 index 0000000..d8ed35b --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/TimeInput.js @@ -0,0 +1,124 @@ +import React, { Fragment, PureComponent } from 'react'; +import { TimePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import MomentUtils from '@date-io/moment'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography, Grid, InputAdornment, Icon, IconButton } from '@material-ui/core'; + +const styles = theme => ({ + demo: { + height: 'auto', + }, + divider: { + display: 'block', + margin: `${theme.spacing(3)}px 0`, + }, + picker: { + margin: `${theme.spacing(3)}px 5px`, + } +}); + +class TimeInput extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + const { classes } = this.props; + return ( + + + + Basic usage + + A time picker should adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format. + +
+ +
+ +
+ +
+ +
+ + + +
+ + + Keyboard Input +
+ + + +
+ Custom Icon +
+ + + + access_time + + + ), + }} + /> + +
+ + + + ); + } +} + +TimeInput.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TimeInput); diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js b/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js new file mode 100644 index 0000000..22ae742 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputAll.js @@ -0,0 +1,31 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputAll extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + +
+ +
+ + ); + } +} + +export default UploadInputAll; diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js b/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js new file mode 100644 index 0000000..959ee85 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputBtn.js @@ -0,0 +1,32 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputBtn extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + +
+ +
+ + ); + } +} + +export default UploadInputBtn; diff --git a/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js b/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js new file mode 100644 index 0000000..3600f37 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/UploadInputImg.js @@ -0,0 +1,32 @@ +import React, { Fragment } from 'react'; +import { MaterialDropZone } from 'ba-components'; + +class UploadInputImg extends React.Component { + constructor(props) { + super(props); + + this.state = { + files: [], + }; + } + + render() { + const { files } = this.state; + return ( + +
+ +
+ + ); + } +} + +export default UploadInputImg; diff --git a/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js b/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js new file mode 100644 index 0000000..61c64a8 --- /dev/null +++ b/front/odiparpack/app/containers/Forms/demos/Wysiwyg.js @@ -0,0 +1,91 @@ +import React, { Fragment, PureComponent } from 'react'; +import { convertFromRaw, EditorState, convertToRaw } from 'draft-js'; +import { Editor } from 'react-draft-wysiwyg'; +import draftToHtml from 'draftjs-to-html'; +import draftToMarkdown from 'draftjs-to-markdown'; +import EditorStyle from 'ba-styles/TextEditor.scss'; +import 'ba-styles/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css'; + +import { Grid, Typography } from '@material-ui/core'; + +const content = { + blocks: [{ + key: '637gr', + text: 'Lorem ipsum dolor sit amet 😀', + type: 'unstyled', + depth: 0, + inlineStyleRanges: [], + entityRanges: [], + data: {} + }], + entityMap: {} +}; + +class Wysiwyg extends PureComponent { + constructor(props) { + super(props); + const contentBlock = convertFromRaw(content); + if (contentBlock) { + const editorState = EditorState.createWithContent(contentBlock); + this.state = { + editorState, + }; + } + } + + onEditorStateChange = editorState => { + this.setState({ + editorState, + }); + }; + + render() { + const { editorState } = this.state; + return ( + + + + + + + JSON Result : +