From ddea909d139c45ac8088d3e75490c14b5fe64ec6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Nov 2019 12:48:25 +0100 Subject: [PATCH 1/5] [docs] Remove Integrated autocomplete --- .../components/integrated-autocomplete.js | 18 - docs/src/pages.js | 1 - .../IntegrationAutosuggest.js | 230 ---------- .../IntegrationAutosuggest.tsx | 241 ---------- .../IntegrationDownshift.js | 419 ------------------ .../IntegrationDownshift.tsx | 414 ----------------- .../IntegrationReactSelect.js | 415 ----------------- .../IntegrationReactSelect.tsx | 301 ------------- .../autocomplete-fr.md | 45 -- .../autocomplete-pt.md | 45 -- .../autocomplete-ru.md | 45 -- .../autocomplete-zh.md | 45 -- .../integrated-autocomplete-aa.md | 35 -- .../integrated-autocomplete-de.md | 35 -- .../integrated-autocomplete-es.md | 35 -- .../integrated-autocomplete-fr.md | 35 -- .../integrated-autocomplete-ja.md | 35 -- .../integrated-autocomplete-pt.md | 35 -- .../integrated-autocomplete-ru.md | 35 -- .../integrated-autocomplete-zh.md | 35 -- .../integrated-autocomplete.md | 39 -- 21 files changed, 2538 deletions(-) delete mode 100644 docs/pages/components/integrated-autocomplete.js delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js delete mode 100644 docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx delete mode 100644 docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md delete mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md diff --git a/docs/pages/components/integrated-autocomplete.js b/docs/pages/components/integrated-autocomplete.js deleted file mode 100644 index de2110603730a9..00000000000000 --- a/docs/pages/components/integrated-autocomplete.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; - -const req = require.context( - 'docs/src/pages/components/integrated-autocomplete', - false, - /\.(md|js|tsx)$/, -); -const reqSource = require.context( - '!raw-loader!../../src/pages/components/integrated-autocomplete', - false, - /\.(js|tsx)$/, -); -const reqPrefix = 'pages/components/integrated-autocomplete'; - -export default function Page() { - return ; -} diff --git a/docs/src/pages.js b/docs/src/pages.js index 03d0b7dc2d2322..0100c8c2cdb7b8 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -42,7 +42,6 @@ const pages = [ { pathname: '/components/switches' }, { pathname: '/components/text-fields' }, { pathname: '/components/transfer-list' }, - { pathname: '/components/integrated-autocomplete' }, ], }, { diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js b/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js deleted file mode 100644 index 577f5afd089b30..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.js +++ /dev/null @@ -1,230 +0,0 @@ -import React from 'react'; -import deburr from 'lodash/deburr'; -import Autosuggest from 'react-autosuggest'; -import match from 'autosuggest-highlight/match'; -import parse from 'autosuggest-highlight/parse'; -import TextField from '@material-ui/core/TextField'; -import Paper from '@material-ui/core/Paper'; -import MenuItem from '@material-ui/core/MenuItem'; -import Popper from '@material-ui/core/Popper'; -import { makeStyles } from '@material-ui/core/styles'; - -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 renderInputComponent(inputProps) { - const { classes, inputRef = () => {}, ref, ...other } = inputProps; - - return ( - { - ref(node); - inputRef(node); - }, - classes: { - input: classes.input, - }, - }} - {...other} - /> - ); -} - -function renderSuggestion(suggestion, { query, isHighlighted }) { - const matches = match(suggestion.label, query); - const parts = parse(suggestion.label, matches); - - return ( - -
- {parts.map(part => ( - - {part.text} - - ))} -
- - ); -} - -function getSuggestions(value) { - const inputValue = deburr(value.trim()).toLowerCase(); - const inputLength = inputValue.length; - let count = 0; - - return inputLength === 0 - ? [] - : suggestions.filter(suggestion => { - const keep = - count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue; - - if (keep) { - count += 1; - } - - return keep; - }); -} - -function getSuggestionValue(suggestion) { - return suggestion.label; -} - -const useStyles = makeStyles(theme => ({ - root: { - height: 250, - flexGrow: 1, - }, - container: { - position: 'relative', - }, - suggestionsContainerOpen: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - suggestion: { - display: 'block', - }, - suggestionsList: { - margin: 0, - padding: 0, - listStyleType: 'none', - }, - divider: { - height: theme.spacing(2), - }, -})); - -export default function IntegrationAutosuggest() { - const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); - const [state, setState] = React.useState({ - single: '', - popper: '', - }); - - const [stateSuggestions, setSuggestions] = React.useState([]); - - const handleSuggestionsFetchRequested = ({ value }) => { - setSuggestions(getSuggestions(value)); - }; - - const handleSuggestionsClearRequested = () => { - setSuggestions([]); - }; - - const handleChange = name => (event, { newValue }) => { - setState({ - ...state, - [name]: newValue, - }); - }; - - const autosuggestProps = { - renderInputComponent, - suggestions: stateSuggestions, - onSuggestionsFetchRequested: handleSuggestionsFetchRequested, - onSuggestionsClearRequested: handleSuggestionsClearRequested, - getSuggestionValue, - renderSuggestion, - }; - - return ( -
- ( - - {options.children} - - )} - /> -
- { - setAnchorEl(node); - }, - InputLabelProps: { - shrink: true, - }, - }} - theme={{ - suggestionsList: classes.suggestionsList, - suggestion: classes.suggestion, - }} - renderSuggestionsContainer={options => ( - - - {options.children} - - - )} - /> -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx deleted file mode 100644 index d945bb4b9ab42b..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationAutosuggest.tsx +++ /dev/null @@ -1,241 +0,0 @@ -import React from 'react'; -import deburr from 'lodash/deburr'; -import Autosuggest from 'react-autosuggest'; -import match from 'autosuggest-highlight/match'; -import parse from 'autosuggest-highlight/parse'; -import TextField from '@material-ui/core/TextField'; -import Paper from '@material-ui/core/Paper'; -import MenuItem from '@material-ui/core/MenuItem'; -import Popper from '@material-ui/core/Popper'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; - -interface OptionType { - label: string; -} - -const suggestions: OptionType[] = [ - { 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 renderInputComponent(inputProps: any) { - const { classes, inputRef = () => {}, ref, ...other } = inputProps; - - return ( - { - ref(node); - inputRef(node); - }, - classes: { - input: classes.input, - }, - }} - {...other} - /> - ); -} - -function renderSuggestion( - suggestion: OptionType, - { query, isHighlighted }: Autosuggest.RenderSuggestionParams, -) { - const matches = match(suggestion.label, query); - const parts = parse(suggestion.label, matches); - - return ( - -
- {parts.map(part => ( - - {part.text} - - ))} -
- - ); -} - -function getSuggestions(value: string) { - const inputValue = deburr(value.trim()).toLowerCase(); - const inputLength = inputValue.length; - let count = 0; - - return inputLength === 0 - ? [] - : suggestions.filter(suggestion => { - const keep = - count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue; - - if (keep) { - count += 1; - } - - return keep; - }); -} - -function getSuggestionValue(suggestion: OptionType) { - return suggestion.label; -} - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - height: 250, - flexGrow: 1, - }, - container: { - position: 'relative', - }, - suggestionsContainerOpen: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - suggestion: { - display: 'block', - }, - suggestionsList: { - margin: 0, - padding: 0, - listStyleType: 'none', - }, - divider: { - height: theme.spacing(2), - }, - }), -); - -export default function IntegrationAutosuggest() { - const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); - const [state, setState] = React.useState({ - single: '', - popper: '', - }); - const [stateSuggestions, setSuggestions] = React.useState([]); - - const handleSuggestionsFetchRequested = ({ value }: any) => { - setSuggestions(getSuggestions(value)); - }; - - const handleSuggestionsClearRequested = () => { - setSuggestions([]); - }; - - const handleChange = (name: keyof typeof state) => ( - event: React.ChangeEvent<{}>, - { newValue }: Autosuggest.ChangeEvent, - ) => { - setState({ - ...state, - [name]: newValue, - }); - }; - - const autosuggestProps = { - renderInputComponent, - suggestions: stateSuggestions, - onSuggestionsFetchRequested: handleSuggestionsFetchRequested, - onSuggestionsClearRequested: handleSuggestionsClearRequested, - getSuggestionValue, - renderSuggestion, - }; - - return ( -
- ( - - {options.children} - - )} - /> -
- { - setAnchorEl(node); - }, - InputLabelProps: { - shrink: true, - }, - }} - theme={{ - suggestionsList: classes.suggestionsList, - suggestion: classes.suggestion, - }} - renderSuggestionsContainer={options => ( - - - {options.children} - - - )} - /> -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js b/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js deleted file mode 100644 index 3b41a7bf3115ab..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.js +++ /dev/null @@ -1,419 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import deburr from 'lodash/deburr'; -import Downshift from 'downshift'; -import { makeStyles } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import Popper from '@material-ui/core/Popper'; -import Paper from '@material-ui/core/Paper'; -import MenuItem from '@material-ui/core/MenuItem'; -import Chip from '@material-ui/core/Chip'; - -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 ( - - ); -} - -renderInput.propTypes = { - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object.isRequired, - InputProps: PropTypes.object, -}; - -function renderSuggestion(suggestionProps) { - const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps; - const isHighlighted = highlightedIndex === index; - const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; - - return ( - - {suggestion.label} - - ); -} - -renderSuggestion.propTypes = { - highlightedIndex: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number]).isRequired, - index: PropTypes.number.isRequired, - itemProps: PropTypes.object.isRequired, - selectedItem: PropTypes.string.isRequired, - suggestion: PropTypes.shape({ - label: PropTypes.string.isRequired, - }).isRequired, -}; - -function getSuggestions(value, { showEmpty = false } = {}) { - const inputValue = deburr(value.trim()).toLowerCase(); - const inputLength = inputValue.length; - let count = 0; - - return inputLength === 0 && !showEmpty - ? [] - : suggestions.filter(suggestion => { - const keep = - count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue; - - if (keep) { - count += 1; - } - - return keep; - }); -} - -function DownshiftMultiple(props) { - const { classes } = props; - const [inputValue, setInputValue] = React.useState(''); - const [selectedItem, setSelectedItem] = React.useState([]); - - const handleKeyDown = event => { - if (selectedItem.length && !inputValue.length && event.key === 'Backspace') { - setSelectedItem(selectedItem.slice(0, selectedItem.length - 1)); - } - }; - - const handleInputChange = event => { - setInputValue(event.target.value); - }; - - const handleChange = item => { - let newSelectedItem = [...selectedItem]; - if (newSelectedItem.indexOf(item) === -1) { - newSelectedItem = [...newSelectedItem, item]; - } - setInputValue(''); - setSelectedItem(newSelectedItem); - }; - - const handleDelete = item => () => { - const newSelectedItem = [...selectedItem]; - newSelectedItem.splice(newSelectedItem.indexOf(item), 1); - setSelectedItem(newSelectedItem); - }; - - return ( - - {({ - getInputProps, - getItemProps, - getLabelProps, - isOpen, - inputValue: inputValue2, - selectedItem: selectedItem2, - highlightedIndex, - }) => { - const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({ - onKeyDown: handleKeyDown, - placeholder: 'Select multiple countries', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Countries', - InputLabelProps: getLabelProps(), - InputProps: { - startAdornment: selectedItem.map(item => ( - - )), - onBlur, - onChange: event => { - handleInputChange(event); - onChange(event); - }, - onFocus, - }, - inputProps, - })} - - {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 useStyles = makeStyles(theme => ({ - root: { - flexGrow: 1, - height: 250, - }, - container: { - flexGrow: 1, - position: 'relative', - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - chip: { - margin: theme.spacing(0.5, 0.25), - }, - inputRoot: { - flexWrap: 'wrap', - }, - inputInput: { - width: 'auto', - flexGrow: 1, - }, - divider: { - height: theme.spacing(2), - }, -})); - -let popperNode; - -export default function IntegrationDownshift() { - const classes = useStyles(); - - return ( -
- - {({ - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - selectedItem, - }) => { - const { onBlur, onFocus, ...inputProps } = getInputProps({ - placeholder: 'Search for a country (start with a)', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Country', - InputLabelProps: getLabelProps({ shrink: true }), - InputProps: { onBlur, onFocus }, - inputProps, - })} - -
- {isOpen ? ( - - {getSuggestions(inputValue).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - - ) : null} -
-
- ); - }} - -
- -
- - {({ - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - selectedItem, - }) => { - const { onBlur, onFocus, ...inputProps } = getInputProps({ - placeholder: 'With Popper', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Country', - InputProps: { onBlur, onFocus }, - InputLabelProps: getLabelProps({ shrink: true }), - inputProps, - ref: node => { - popperNode = node; - }, - })} - - -
- - {getSuggestions(inputValue).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - -
- -
- ); - }} - -
- - {({ - clearSelection, - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - openMenu, - selectedItem, - }) => { - const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({ - onChange: event => { - if (event.target.value === '') { - clearSelection(); - } - }, - onFocus: openMenu, - placeholder: 'With the clear & show empty options', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Countries', - InputLabelProps: getLabelProps({ shrink: true }), - InputProps: { onBlur, onChange, onFocus }, - inputProps, - })} - -
- {isOpen ? ( - - {getSuggestions(inputValue, { showEmpty: true }).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - - ) : null} -
-
- ); - }} - -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx deleted file mode 100644 index 4ae1d79601e199..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationDownshift.tsx +++ /dev/null @@ -1,414 +0,0 @@ -import React from 'react'; -import deburr from 'lodash/deburr'; -import Downshift from 'downshift'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import TextField, { TextFieldProps } from '@material-ui/core/TextField'; -import Popper from '@material-ui/core/Popper'; -import Paper from '@material-ui/core/Paper'; -import MenuItem, { MenuItemProps } from '@material-ui/core/MenuItem'; -import Chip from '@material-ui/core/Chip'; - -interface Suggestion { - label: string; -} - -const suggestions: Suggestion[] = [ - { 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' }, -]; - -type RenderInputProps = TextFieldProps & { - classes: ReturnType; - ref?: React.Ref; -}; - -function renderInput(inputProps: RenderInputProps) { - const { InputProps, classes, ref, ...other } = inputProps; - - return ( - - ); -} - -interface RenderSuggestionProps { - highlightedIndex: number | null; - index: number; - itemProps: MenuItemProps<'div', { button?: never }>; - selectedItem: Suggestion['label']; - suggestion: Suggestion; -} - -function renderSuggestion(suggestionProps: RenderSuggestionProps) { - const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps; - const isHighlighted = highlightedIndex === index; - const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1; - - return ( - - {suggestion.label} - - ); -} - -function getSuggestions(value: string, { showEmpty = false } = {}) { - const inputValue = deburr(value.trim()).toLowerCase(); - const inputLength = inputValue.length; - let count = 0; - - return inputLength === 0 && !showEmpty - ? [] - : suggestions.filter(suggestion => { - const keep = - count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue; - - if (keep) { - count += 1; - } - - return keep; - }); -} - -interface DownshiftMultipleProps { - classes: ReturnType; -} - -function DownshiftMultiple(props: DownshiftMultipleProps) { - const { classes } = props; - const [inputValue, setInputValue] = React.useState(''); - const [selectedItem, setSelectedItem] = React.useState>([]); - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (selectedItem.length && !inputValue.length && event.key === 'Backspace') { - setSelectedItem(selectedItem.slice(0, selectedItem.length - 1)); - } - }; - - const handleInputChange = (event: React.ChangeEvent<{ value: string }>) => { - setInputValue(event.target.value); - }; - - const handleChange = (item: Suggestion['label']) => { - let newSelectedItem = [...selectedItem]; - if (newSelectedItem.indexOf(item) === -1) { - newSelectedItem = [...newSelectedItem, item]; - } - setInputValue(''); - setSelectedItem(newSelectedItem); - }; - - const handleDelete = (item: string) => () => { - const newSelectedItem = [...selectedItem]; - newSelectedItem.splice(newSelectedItem.indexOf(item), 1); - setSelectedItem(newSelectedItem); - }; - - return ( - - {({ - getInputProps, - getItemProps, - getLabelProps, - isOpen, - inputValue: inputValue2, - selectedItem: selectedItem2, - highlightedIndex, - }) => { - const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({ - onKeyDown: handleKeyDown, - placeholder: 'Select multiple countries', - }); - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Countries', - InputLabelProps: getLabelProps(), - InputProps: { - startAdornment: selectedItem.map(item => ( - - )), - onBlur, - onChange: event => { - handleInputChange(event); - onChange!(event as React.ChangeEvent); - }, - onFocus, - }, - inputProps, - })} - {isOpen ? ( - - {getSuggestions(inputValue2!).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem: selectedItem2, - }), - )} - - ) : null} -
- ); - }} - - ); -} - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - flexGrow: 1, - height: 250, - }, - container: { - flexGrow: 1, - position: 'relative', - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - chip: { - margin: theme.spacing(0.5, 0.25), - }, - inputRoot: { - flexWrap: 'wrap', - }, - inputInput: { - width: 'auto', - flexGrow: 1, - }, - divider: { - height: theme.spacing(2), - }, - }), -); - -let popperNode: HTMLDivElement | null | undefined; - -export default function IntegrationDownshift() { - const classes = useStyles(); - - return ( -
- - {({ - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - selectedItem, - }) => { - const { onBlur, onFocus, ...inputProps } = getInputProps({ - placeholder: 'Search for a country (start with a)', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Country', - InputLabelProps: getLabelProps({ shrink: true } as any), - InputProps: { onBlur, onFocus }, - inputProps, - })} -
- {isOpen ? ( - - {getSuggestions(inputValue!).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - - ) : null} -
-
- ); - }} - -
- -
- - {({ - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - selectedItem, - }) => { - const { onBlur, onFocus, ...inputProps } = getInputProps({ - placeholder: 'With Popper', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Country', - InputProps: { onBlur, onFocus }, - InputLabelProps: getLabelProps({ shrink: true } as any), - inputProps, - ref: node => { - popperNode = node; - }, - })} - -
- - {getSuggestions(inputValue!).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - -
- -
- ); - }} - -
- - {({ - clearSelection, - getInputProps, - getItemProps, - getLabelProps, - getMenuProps, - highlightedIndex, - inputValue, - isOpen, - openMenu, - selectedItem, - }) => { - const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({ - onChange: (event: React.ChangeEvent) => { - if (event.target.value === '') { - clearSelection(); - } - }, - onFocus: openMenu, - placeholder: 'With the clear & show empty options', - }); - - return ( -
- {renderInput({ - fullWidth: true, - classes, - label: 'Countries', - InputLabelProps: getLabelProps({ shrink: true } as any), - InputProps: { onBlur, onChange, onFocus }, - inputProps, - })} -
- {isOpen ? ( - - {getSuggestions(inputValue!, { showEmpty: true }).map((suggestion, index) => - renderSuggestion({ - suggestion, - index, - itemProps: getItemProps({ item: suggestion.label }), - highlightedIndex, - selectedItem, - }), - )} - - ) : null} -
-
- ); - }} - -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js b/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js deleted file mode 100644 index c45197d68b0fb8..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.js +++ /dev/null @@ -1,415 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -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, - minWidth: 290, - }, - 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: 2, - bottom: 6, - fontSize: 16, - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - divider: { - height: theme.spacing(2), - }, -})); - -function NoOptionsMessage(props) { - return ( - - {props.children} - - ); -} - -NoOptionsMessage.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.node, - /** - * Props to be passed on to the wrapper. - */ - innerProps: PropTypes.object.isRequired, - selectProps: PropTypes.object.isRequired, -}; - -function inputComponent({ inputRef, ...props }) { - return
; -} - -inputComponent.propTypes = { - inputRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: PropTypes.any.isRequired, - }), - ]), -}; - -function Control(props) { - const { - children, - innerProps, - innerRef, - selectProps: { classes, TextFieldProps }, - } = props; - - return ( - - ); -} - -Control.propTypes = { - /** - * Children to render. - */ - children: PropTypes.node, - /** - * The mouse down event and the innerRef to pass down to the controller element. - */ - innerProps: PropTypes.shape({ - onMouseDown: PropTypes.func.isRequired, - }).isRequired, - innerRef: PropTypes.oneOfType([ - PropTypes.oneOf([null]), - PropTypes.func, - PropTypes.shape({ - current: PropTypes.any.isRequired, - }), - ]).isRequired, - selectProps: PropTypes.object.isRequired, -}; - -function Option(props) { - return ( - - {props.children} - - ); -} - -Option.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.node, - /** - * props passed to the wrapping element for the group. - */ - innerProps: PropTypes.shape({ - id: PropTypes.string.isRequired, - key: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, - onMouseMove: PropTypes.func.isRequired, - onMouseOver: PropTypes.func.isRequired, - tabIndex: PropTypes.number.isRequired, - }).isRequired, - /** - * Inner ref to DOM Node - */ - innerRef: PropTypes.oneOfType([ - PropTypes.oneOf([null]), - PropTypes.func, - PropTypes.shape({ - current: PropTypes.any.isRequired, - }), - ]).isRequired, - /** - * Whether the option is focused. - */ - isFocused: PropTypes.bool.isRequired, - /** - * Whether the option is selected. - */ - isSelected: PropTypes.bool.isRequired, -}; - -function Placeholder(props) { - const { selectProps, innerProps = {}, children } = props; - return ( - - {children} - - ); -} - -Placeholder.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.node, - /** - * props passed to the wrapping element for the group. - */ - innerProps: PropTypes.object, - selectProps: PropTypes.object.isRequired, -}; - -function SingleValue(props) { - return ( - - {props.children} - - ); -} - -SingleValue.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.node, - /** - * Props passed to the wrapping element for the group. - */ - innerProps: PropTypes.any.isRequired, - selectProps: PropTypes.object.isRequired, -}; - -function ValueContainer(props) { - return
{props.children}
; -} - -ValueContainer.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.node, - selectProps: PropTypes.object.isRequired, -}; - -function MultiValue(props) { - return ( - } - /> - ); -} - -MultiValue.propTypes = { - children: PropTypes.node, - isFocused: PropTypes.bool.isRequired, - removeProps: PropTypes.shape({ - onClick: PropTypes.func.isRequired, - onMouseDown: PropTypes.func.isRequired, - onTouchEnd: PropTypes.func.isRequired, - }).isRequired, - selectProps: PropTypes.object.isRequired, -}; - -function Menu(props) { - return ( - - {props.children} - - ); -} - -Menu.propTypes = { - /** - * The children to be rendered. - */ - children: PropTypes.element.isRequired, - /** - * Props to be passed to the menu wrapper. - */ - innerProps: PropTypes.object.isRequired, - selectProps: PropTypes.object.isRequired, -}; - -const components = { - Control, - Menu, - MultiValue, - NoOptionsMessage, - Option, - Placeholder, - SingleValue, - ValueContainer, -}; - -export default function IntegrationReactSelect() { - const classes = useStyles(); - const theme = useTheme(); - const [single, setSingle] = React.useState(null); - const [multi, setMulti] = React.useState(null); - - const handleChangeSingle = value => { - setSingle(value); - }; - - const handleChangeMulti = value => { - setMulti(value); - }; - - const selectStyles = { - input: base => ({ - ...base, - color: theme.palette.text.primary, - '& input': { - font: 'inherit', - }, - }), - }; - - return ( -
- - - -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx b/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx deleted file mode 100644 index d550070ac94795..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/IntegrationReactSelect.tsx +++ /dev/null @@ -1,301 +0,0 @@ -import React, { CSSProperties, HTMLAttributes } from 'react'; -import clsx from 'clsx'; -import Select from 'react-select'; -import { createStyles, emphasize, makeStyles, useTheme, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import NoSsr from '@material-ui/core/NoSsr'; -import TextField, { BaseTextFieldProps } 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'; -import { ValueContainerProps } from 'react-select/src/components/containers'; -import { ControlProps } from 'react-select/src/components/Control'; -import { MenuProps, NoticeProps } from 'react-select/src/components/Menu'; -import { MultiValueProps } from 'react-select/src/components/MultiValue'; -import { OptionProps } from 'react-select/src/components/Option'; -import { PlaceholderProps } from 'react-select/src/components/Placeholder'; -import { SingleValueProps } from 'react-select/src/components/SingleValue'; -import { ValueType } from 'react-select/src/types'; -import { Omit } from '@material-ui/types'; - -interface OptionType { - label: string; - value: string; -} - -const suggestions: OptionType[] = [ - { 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: Theme) => - createStyles({ - root: { - flexGrow: 1, - height: 250, - minWidth: 290, - }, - 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: 2, - bottom: 6, - fontSize: 16, - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - divider: { - height: theme.spacing(2), - }, - }), -); - -function NoOptionsMessage(props: NoticeProps) { - return ( - - {props.children} - - ); -} - -type InputComponentProps = Pick & HTMLAttributes; - -function inputComponent({ inputRef, ...props }: InputComponentProps) { - return
; -} - -function Control(props: ControlProps) { - const { - children, - innerProps, - innerRef, - selectProps: { classes, TextFieldProps }, - } = props; - - return ( - - ); -} - -function Option(props: OptionProps) { - return ( - - {props.children} - - ); -} - -type MuiPlaceholderProps = Omit, 'innerProps'> & - Partial, 'innerProps'>>; -function Placeholder(props: MuiPlaceholderProps) { - const { selectProps, innerProps = {}, children } = props; - return ( - - {children} - - ); -} - -function SingleValue(props: SingleValueProps) { - return ( - - {props.children} - - ); -} - -function ValueContainer(props: ValueContainerProps) { - return
{props.children}
; -} - -function MultiValue(props: MultiValueProps) { - return ( - } - /> - ); -} - -function Menu(props: MenuProps) { - return ( - - {props.children} - - ); -} - -const components = { - Control, - Menu, - MultiValue, - NoOptionsMessage, - Option, - Placeholder, - SingleValue, - ValueContainer, -}; - -export default function IntegrationReactSelect() { - const classes = useStyles(); - const theme = useTheme(); - const [single, setSingle] = React.useState>(null); - const [multi, setMulti] = React.useState>(null); - - const handleChangeSingle = (value: ValueType) => { - setSingle(value); - }; - - const handleChangeMulti = (value: ValueType) => { - setMulti(value); - }; - - const selectStyles = { - input: (base: CSSProperties) => ({ - ...base, - color: theme.palette.text.primary, - '& input': { - font: 'inherit', - }, - }), - }; - - return ( -
- - - -
- ); -} diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md deleted file mode 100644 index 72c7707c77dd45..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/autocomplete-fr.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Composant React Auto-complétion -components: TextField, Paper, MenuItem, Popper ---- - -# Autocomplete (Auto-complétion) - -

La saisie semi-automatique est une entrée de texte normale améliorée par un panneau d'options suggérées.

- -Material-UI doesn't provide a high-level API for solving this problem. You are encouraged to use a solution the React community has built, following one of the examples below. - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). - -La dernière démo permet à l'utilisateur d'effacer une entrée et de montrer un certain nombre d'options sur le focus. - -{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} - -## Projets complémentaires - -Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des projects suivants: - -- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values. -- [mui-downshift](https://github.com/techniq/mui-downshift): A thin layer over paypal's downshift to use Material-UI visual components. -- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI. -- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI. \ No newline at end of file diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md deleted file mode 100644 index 2ec8d464839491..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/autocomplete-pt.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Componente React para Autocompletar -components: TextField, Paper, MenuItem, Popper ---- - -# Autocompletar - -

O autocompletar é uma entrada de texto normal aprimorada por um painel de opções sugeridas.

- -Material-UI, não fornece nenhuma API de alto nível para resolver este problema. Você deve usar uma solução criada pela comunidade React, seguindo um dos exemplos abaixo. - -## downshift - -![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -Este exemplo demonstra como usar [downshift](https://github.com/downshift-js/downshift). - -A última demonstração permite ao usuário limpar a entrada e mostrar várias opções em foco. - -{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}} - -## react-select - -![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -Este exemplo demonstra como usar [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -Este exemplo demonstra como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Ele também usa [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para fazer o destaque do texto. - -{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} - -## Projetos Complementares - -Para usos mais avançados, você pode tirar vantagem com: - -- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): O componente chip e usado no input para permitir a seleção de múltiplos valores de texto. -- [mui-downshift](https://github.com/techniq/mui-downshift) Uma camada fina sobre o downshift do paypal para usar componentes visuais do Material-UI. -- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): Um componente de pesquisa difusa para React e Material-UI. -- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extensão do react-select com Material-UI. \ No newline at end of file diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md deleted file mode 100644 index b4c4721f3391bc..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/autocomplete-ru.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: React-компонент Автозаполнение -components: TextField, Paper, MenuItem, Popper ---- - -# Автодополнение - -

Автодополнение - это обычный ввод текста, дополненный панелью предлагаемых опций.

- -Material-UI doesn't provide a high-level API for solving this problem. You are encouraged to use a solution the React community has built, following one of the examples below. - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -Этот пример демонстрирует как использовать [downshift](https://github.com/downshift-js/downshift). - -The last demo allows the user to clear the input and show a number of options on focus. - -{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} - -## Дополнительные проекты - -Для более сложных вариантов использования вы можете воспользоваться: - -- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values. -- [mui-downshift](https://github.com/techniq/mui-downshift): A thin layer over paypal's downshift to use Material-UI visual components. -- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI. -- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI. \ No newline at end of file diff --git a/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md b/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md deleted file mode 100644 index 31eb4cbc5f782f..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/autocomplete-zh.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: React Autocomplete（自动补全）组件 -components: TextField, Paper, MenuItem, Popper ---- - -# Autocomplete（自动补全） - -

自动补全是一个通过一组建议选项来帮助用户输入的普通文本输入框。

- -Material-UI 则不会提供用于解决此问题的高层 API。 我们鼓励您使用任意一个 React 社区维护的解决方案，如下所示。 - -## downshift - -![评星](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -以下例子演示了如何使用 [downshift](https://github.com/downshift-js/downshift)。 - -在最后一个例子中，用户可以清除已有的输入，并在焦点的位置上显示一系列的选项。 - -{{"demo": "pages/components/autocomplete/IntegrationDownshift.js"}} - -## react-select - -![评星](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -以下例子演示了如何使用 [react-select](https://github.com/JedWatson/react-select)。 - -{{"demo": "pages/components/autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![评星](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -以下例子演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用了 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) 来实现高亮的逻辑。 - -{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} - -## 补充项目 - -对于更高级的用例，您可以参考： - -- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): 此 chip input 用于选择多个文本值的情况。 -- [mui-downshift](https://github.com/techniq/mui-downshift)：为了能够使用 Material-UI 的可视化组件，这在 paypal 的 downshift 上加了简单的一层。 -- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest)：一个用在 React 和 Material-UI 中的模糊搜索的组件。 -- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui)：使用 Material-UI 的 react-select 的扩展版本。 \ No newline at end of file diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md deleted file mode 100644 index 10255755c2275d..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: crwdns104428:0crwdne104428:0 ---- - -# crwdns104430:0crwdne104430:0 - -

crwdns104432:0crwdne104432:0

- -> crwdns104434:0crwdne104434:0 - -## crwdns104436:0crwdne104436:0 - -![crwdns104440:0crwdne104440:0](crwdns104438:0crwdne104438:0) ![crwdns104444:0crwdne104444:0](crwdns104442:0crwdne104442:0) - -crwdns104446:0crwdne104446:0 - -crwdns104448:0crwdne104448:0 - -crwdns104450:0crwdne104450:0 - -## crwdns104452:0crwdne104452:0 - -![crwdns104456:0crwdne104456:0](crwdns104454:0crwdne104454:0) ![crwdns104460:0crwdne104460:0](crwdns104458:0crwdne104458:0) - -crwdns104462:0crwdne104462:0 - -crwdns104464:0crwdne104464:0 - -## crwdns104466:0crwdne104466:0 - -![crwdns104470:0crwdne104470:0](crwdns104468:0crwdne104468:0) ![crwdns104474:0crwdne104474:0](crwdns104472:0crwdne104472:0) - -crwdns104476:0crwdne104476:0 crwdns104478:0crwdne104478:0 - -crwdns104480:0crwdne104480:0 diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md deleted file mode 100644 index 8e3c7c73915104..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -Dieses Beispiel zeigt die Benutzung von [downshift](https://github.com/downshift-js/downshift). - -The last demo allows the user to clear the input and show a number of options on focus. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -Dieses Beispiel zeigt die Benutzung von [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md deleted file mode 100644 index 931542870e8f3e..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![estrellas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/downshift.svg) - -This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). - -The last demo allows the user to clear the input and show a number of options on focus. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![estrellas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![estrellas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md deleted file mode 100644 index f87d0f54766103..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). - -La dernière démo permet à l'utilisateur d'effacer une entrée et de montrer un certain nombre d'options sur le focus. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md deleted file mode 100644 index 46d109f89aebc2..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![Stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/downshift.svg) - -次の例は、 [ダウンシフト](https://github.com/downshift-js/downshift)の使用方法を示します。 - -最後のデモでは、ユーザーが入力をクリアしてフォーカスのある多くのオプションを表示することができます。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![Stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-select.svg) - -次の例では、[react-select](https://github.com/JedWatson/react-select)の使用方法を示します。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![Stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-autosuggest.svg) - -次の例では、 [react-autosuggest](https://github.com/moroshko/react-autosuggest) の使用方法を示します。 ハイライトロジックに [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) を使用します。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md deleted file mode 100644 index b6eaac42a036de..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -Este exemplo demonstra como usar [downshift](https://github.com/downshift-js/downshift). - -A última demonstração permite ao usuário limpar a entrada e mostrar várias opções em foco. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -Este exemplo demonstra como usar [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -Este exemplo demonstra como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Ele também usa [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para fazer o destaque do texto. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md deleted file mode 100644 index a4d17b5415777e..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -Этот пример демонстрирует как использовать [downshift](https://github.com/downshift-js/downshift). - -The last demo allows the user to clear the input and show a number of options on focus. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md deleted file mode 100644 index 6999c953fcbb6b..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/downshift.svg) - -以下例子演示了如何使用 [downshift](https://github.com/downshift-js/downshift)。 - -在最后一个例子中，用户可以清除已有的输入，并在焦点的位置上显示一系列的选项。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-select.svg) - -以下例子演示了如何使用 [react-select](https://github.com/JedWatson/react-select)。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-autosuggest.svg) - -以下例子演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用了 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) 来实现高亮的逻辑。 - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md deleted file mode 100644 index 87c79ddcc43605..00000000000000 --- a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Integrated Autocomplete React component ---- - -# Integrated Autocomplete - -

Integration examples with third-party libraries.

- -> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). - -## downshift - -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) -![npm downloads](https://img.shields.io/npm/dm/downshift.svg) - -This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). - -The last demo allows the user to clear the input and show a number of options on focus. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} - -## react-select - -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) -![npm downloads](https://img.shields.io/npm/dm/react-select.svg) - -This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). - -{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} - -## react-autosuggest - -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) -![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) - -This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). -It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} From 24e109c80961e899451eff1c60f22d8b1956ce1e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Nov 2019 12:53:26 +0100 Subject: [PATCH 2/5] [docs] Improve version display --- docs/src/modules/components/Demo.js | 31 +++++++++++++++---- .../pages/discover-more/showcase/Showcase.js | 7 ----- .../pages/discover-more/showcase/showcase.md | 2 +- docs/src/pages/versions/LatestVersions.js | 5 ++- docs/src/pages/versions/StableVersions.js | 9 +++--- docs/src/pages/versions/versions.md | 6 ++-- 6 files changed, 35 insertions(+), 25 deletions(-) diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 63f826051f0a69..b358e76ff797a0 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -56,20 +56,33 @@ const styles = theme => ({ margin: 'auto', display: 'flex', justifyContent: 'center', + [theme.breakpoints.up('sm')]: { + borderRadius: theme.shape.borderRadius, + }, + }, + /* Isolate the demo with an outline. */ + demoBgOutlined: { + padding: theme.spacing(3), + border: `1px solid ${fade(theme.palette.action.active, 0.12)}`, borderLeftWidth: 0, borderRightWidth: 0, - border: `1px solid ${fade(theme.palette.action.active, 0.12)}`, - padding: theme.spacing(3), [theme.breakpoints.up('sm')]: { - borderRadius: theme.shape.borderRadius, borderLeftWidth: 1, borderRightWidth: 1, }, }, - demoBg: { - border: 'none', + /* Prepare the background to display an inner elevation. */ + demoBgTrue: { + padding: theme.spacing(3), backgroundColor: theme.palette.background.level2, }, + /* Make no difference between the demo and the markdown. */ + demoBgInline: { + // Maintain alignment with the markdown text + [theme.breakpoints.down('xs')]: { + padding: theme.spacing(3), + }, + }, demoHiddenHeader: { paddingTop: theme.spacing(2), [theme.breakpoints.up('sm')]: { @@ -250,6 +263,10 @@ function Demo(props) { [demoOptions.height, demoOptions.maxWidth], ); + if (demoOptions.bg == null) { + demoOptions.bg = 'outlined'; + } + if (demoOptions.iframe) { demoOptions.bg = true; } @@ -298,7 +315,9 @@ function Demo(props) {
({ root: { flexGrow: 1, - backgroundColor: theme.palette.background.default, - // Hide the demo container padding - margin: -theme.spacing(3), - // Maintain alignment with the markdown text - [theme.breakpoints.down('xs')]: { - padding: 30, - }, }, formControl: { marginBottom: theme.spacing(4), diff --git a/docs/src/pages/discover-more/showcase/showcase.md b/docs/src/pages/discover-more/showcase/showcase.md index cbe412093f64b5..d7d2e6d5feb3fa 100644 --- a/docs/src/pages/discover-more/showcase/showcase.md +++ b/docs/src/pages/discover-more/showcase/showcase.md @@ -8,4 +8,4 @@ Want to add your app? Found an app that no longer works or no longer uses Materi - High traffic - Open source -{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": true}} +{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": "inline"}} diff --git a/docs/src/pages/versions/LatestVersions.js b/docs/src/pages/versions/LatestVersions.js index 5e1572b1c2280f..31a96b23647b1b 100644 --- a/docs/src/pages/versions/LatestVersions.js +++ b/docs/src/pages/versions/LatestVersions.js @@ -5,7 +5,6 @@ import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Link from 'docs/src/modules/components/Link'; @@ -19,7 +18,7 @@ function LatestVersions(props) { const { classes } = props; return ( - +
@@ -72,7 +71,7 @@ function LatestVersions(props) {
- +
); } diff --git a/docs/src/pages/versions/StableVersions.js b/docs/src/pages/versions/StableVersions.js index 001fd75dc0ac7c..1ba5d998b85eb5 100644 --- a/docs/src/pages/versions/StableVersions.js +++ b/docs/src/pages/versions/StableVersions.js @@ -8,7 +8,6 @@ import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Link from 'docs/src/modules/components/Link'; @@ -17,7 +16,7 @@ const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next']; const styles = { root: { - height: 410, + minHeight: 33 * 11, overflow: 'auto', width: '100%', }, @@ -72,8 +71,8 @@ function StableVersions(props) { }, []); return ( - - +
+
{docs.map(doc => ( @@ -104,7 +103,7 @@ function StableVersions(props) { ))}
- +
); } diff --git a/docs/src/pages/versions/versions.md b/docs/src/pages/versions/versions.md index ce0126d96f6501..25ef15fb4e6144 100644 --- a/docs/src/pages/versions/versions.md +++ b/docs/src/pages/versions/versions.md @@ -6,14 +6,14 @@ The most recent version is recommended in production. -{{"demo": "pages/versions/StableVersions.js", "hideHeader": true}} +{{"demo": "pages/versions/StableVersions.js", "hideHeader": true, "bg": "inline"}} ## Latest versions Here you can find the latest unreleased documentation and code. You can use it to see what changes are coming and provide better feedback to Material-UI contributors. -{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true}} +{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true, "bg": "inline"}} ## Versioning strategy @@ -44,7 +44,7 @@ In general, you can expect the following release cycle: ## Release schedule | Date | Version | Status | -|:-----|:--------|--------| +|:-----|:--------|:-------| | May 2018 | v1.0.0 | Released | | Septembre 2018 | v3.0.0 | Released | | May 2019 | v4.0.0 | Released | From b5d5893b2f465eb88837192c2332c40be7ea7750 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Nov 2019 13:25:28 +0100 Subject: [PATCH 3/5] [templates] Add dark support --- .../getting-started/templates/dashboard/Chart.js | 15 +++++++++++---- .../templates/dashboard/Deposits.js | 7 +++++-- .../getting-started/templates/dashboard/Orders.js | 7 +++++-- .../getting-started/templates/pricing/Pricing.js | 5 +---- .../templates/sign-in-side/SignInSide.js | 3 ++- .../getting-started/templates/sign-in/SignIn.js | 5 ----- .../getting-started/templates/sign-up/SignUp.js | 5 ----- .../templates/sticky-footer/StickyFooter.js | 7 ++++--- 8 files changed, 28 insertions(+), 26 deletions(-) diff --git a/docs/src/pages/getting-started/templates/dashboard/Chart.js b/docs/src/pages/getting-started/templates/dashboard/Chart.js index a3a696cdae87e0..0c443b83fd17af 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Chart.js +++ b/docs/src/pages/getting-started/templates/dashboard/Chart.js @@ -1,4 +1,5 @@ import React from 'react'; +import { useTheme } from '@material-ui/core/styles'; import { LineChart, Line, XAxis, YAxis, Label, ResponsiveContainer } from 'recharts'; import Title from './Title'; @@ -20,6 +21,8 @@ const data = [ ]; export default function Chart() { + const theme = useTheme(); + return ( Today @@ -33,13 +36,17 @@ export default function Chart() { left: 24, }} > - - - diff --git a/docs/src/pages/getting-started/templates/dashboard/Deposits.js b/docs/src/pages/getting-started/templates/dashboard/Deposits.js index 51a4158d3105a7..9abb81f5045167 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Deposits.js +++ b/docs/src/pages/getting-started/templates/dashboard/Deposits.js @@ -1,10 +1,13 @@ -/* eslint-disable no-script-url */ import React from 'react'; import Link from '@material-ui/core/Link'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Title from './Title'; +function preventDefault(event) { + event.preventDefault(); +} + const useStyles = makeStyles({ depositContext: { flex: 1, @@ -23,7 +26,7 @@ export default function Deposits() { on 15 March, 2019
- + View balance
diff --git a/docs/src/pages/getting-started/templates/dashboard/Orders.js b/docs/src/pages/getting-started/templates/dashboard/Orders.js index 73819c62a6b99c..b6dff78a817640 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Orders.js +++ b/docs/src/pages/getting-started/templates/dashboard/Orders.js @@ -1,4 +1,3 @@ -/* eslint-disable no-script-url */ import React from 'react'; import Link from '@material-ui/core/Link'; import { makeStyles } from '@material-ui/core/styles'; @@ -22,6 +21,10 @@ const rows = [ createData(4, '15 Mar, 2019', 'Bruce Springsteen', 'Long Branch, NJ', 'VISA ⠀•••• 5919', 212.79), ]; +function preventDefault(event) { + event.preventDefault(); +} + const useStyles = makeStyles(theme => ({ seeMore: { marginTop: theme.spacing(3), @@ -56,7 +59,7 @@ export default function Orders() {
- + See more orders
diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js index 63da4a5eaf455c..9ebaace538debc 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.js +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js @@ -30,9 +30,6 @@ function Copyright() { const useStyles = makeStyles(theme => ({ '@global': { - body: { - backgroundColor: theme.palette.common.white, - }, ul: { margin: 0, padding: 0, @@ -57,7 +54,7 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(8, 0, 6), }, cardHeader: { - backgroundColor: theme.palette.grey[200], + backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200], }, cardPricing: { display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index 89dab37dc3197c..54b9be8c75a99f 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -33,7 +33,8 @@ const useStyles = makeStyles(theme => ({ image: { backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', - backgroundColor: theme.palette.grey[50], + backgroundColor: + theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50], backgroundSize: 'cover', backgroundPosition: 'center', }, diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.js b/docs/src/pages/getting-started/templates/sign-in/SignIn.js index 8df9ed083e119f..4d7ed4f8ca5868 100644 --- a/docs/src/pages/getting-started/templates/sign-in/SignIn.js +++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.js @@ -27,11 +27,6 @@ function Copyright() { } const useStyles = makeStyles(theme => ({ - '@global': { - body: { - backgroundColor: theme.palette.common.white, - }, - }, paper: { marginTop: theme.spacing(8), display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js index 1a0a50e5d28b5a..ee6f7a2d127318 100644 --- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js +++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js @@ -27,11 +27,6 @@ function Copyright() { } const useStyles = makeStyles(theme => ({ - '@global': { - body: { - backgroundColor: theme.palette.common.white, - }, - }, paper: { marginTop: theme.spacing(8), display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js index 1437ebc9f371c4..44f9f578596ef6 100644 --- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js +++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js @@ -7,7 +7,7 @@ import Link from '@material-ui/core/Link'; function Copyright() { return ( - + {'Copyright © '} Your Website @@ -29,9 +29,10 @@ const useStyles = makeStyles(theme => ({ marginBottom: theme.spacing(2), }, footer: { - padding: theme.spacing(2), + padding: theme.spacing(3, 2), marginTop: 'auto', - backgroundColor: 'white', + backgroundColor: + theme.palette.type === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200], }, })); From 854ebd840cfcc71963e56781b0a2cde9b44a358e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Nov 2019 14:40:29 +0100 Subject: [PATCH 4/5] [docs] Fix mobile usability issue reported by Google Bot --- docs/src/modules/components/MarkdownElement.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 7307a1d52bf570..dfd146dd61f0d5 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -213,6 +213,8 @@ const styles = theme => ({ }, }, '& table': { + // Trade display table for scroll overflow + display: 'block', width: '100%', overflowX: 'auto', WebkitOverflowScrolling: 'touch', // iOS momentum scrolling. From e00f2f37ccd9cb58ddf9c5f2dcded2e3cfa6ba1c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 24 Nov 2019 14:54:49 +0100 Subject: [PATCH 5/5] [Autocomplete] Fix demo warning --- docs/src/pages/components/autocomplete/GoogleMaps.js | 2 +- docs/src/pages/components/autocomplete/GoogleMaps.tsx | 2 +- docs/src/pages/getting-started/templates/pricing/Pricing.js | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js index 1ef5d1156428ec..23b342b0a93786 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.js +++ b/docs/src/pages/components/autocomplete/GoogleMaps.js @@ -89,7 +89,7 @@ export default function GoogleMaps() { option.description} + getOptionLabel={option => (typeof option === 'string' ? option : option.description)} filterOptions={x => x} options={options} autoComplete diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx index 96593ab0e23fd1..69c3afeeceec84 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx +++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx @@ -101,7 +101,7 @@ export default function GoogleMaps() { option.description} + getOptionLabel={option => (typeof option === 'string' ? option : option.description)} filterOptions={x => x} options={options} autoComplete diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js index 9ebaace538debc..0bd11c22524590 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.js +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js @@ -54,7 +54,8 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(8, 0, 6), }, cardHeader: { - backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200], + backgroundColor: + theme.palette.type === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200], }, cardPricing: { display: 'flex',