Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Batch small changes #19016

Merged
merged 10 commits into from
Dec 30, 2019
4 changes: 2 additions & 2 deletions docs/pages/api/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">loadingText</span> | <span class="prop-type">node</span> | <span class="prop-default">'Loading…'</span> | Text to display when in a loading state.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
| <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, `value` must be an array and the menu will support multiple selections. |
| <span class="prop-name">noOptionsText</span> | <span class="prop-type">node</span> | <span class="prop-default">'No options'</span> | Text to display when there are no options.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* null |
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback.<br>*value:* null |
| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> | | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> | | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
| <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
| <span class="prop-name">open</span> | <span class="prop-type">bool</span> | | Control the popup` open state. |
| <span class="prop-name">openText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Open'</span> | Override the default text for the *open popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
Expand Down
36 changes: 23 additions & 13 deletions docs/src/modules/components/Ad.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ const styles = theme => ({
},
});

function getAdblock(classes, t) {
function Adblock(props) {
const t = useSelector(state => state.options.t);

return (
<Paper component="span" elevation={0} className={classes.paper}>
<Paper component="span" elevation={0} {...props}>
<Typography variant="body2" display="block" component="span" gutterBottom>
{t('likeMui')}
</Typography>
Expand Down Expand Up @@ -86,9 +88,9 @@ const inHouseAds = [

function Ad(props) {
const { classes } = props;
const t = useSelector(state => state.options.t);

const timerAdblock = React.useRef();
const { current: randomSplit } = React.useRef(Math.random());
const [adblock, setAdblock] = React.useState(null);
const [carbonOut, setCarbonOut] = React.useState(null);
const [codeFundOut, setCodeFundOut] = React.useState(null);
Expand Down Expand Up @@ -157,11 +159,11 @@ function Ad(props) {
children = <span />;
}

if (adblock) {
if (!children && adblock) {
minHeight = 'auto';

if (Math.random() < 0.2) {
children = getAdblock(classes, t);
children = <Adblock className={classes.paper} />;
} else {
children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
}
Expand All @@ -171,7 +173,7 @@ function Ad(props) {
if (carbonOut || codeFundOut) {
children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
minHeight = 'auto';
} else if (Math.random() < 0.35) {
} else if (randomSplit < 0.35) {
children = <AdCodeFund />;
} else {
children = <AdCarbon />;
Expand All @@ -180,8 +182,8 @@ function Ad(props) {

React.useEffect(() => {
// Avoid a flood of events.
if (Math.random < 0.1) {
return null;
if (Math.random() < 0.9) {
return undefined;
}

const delay = setTimeout(() => {
Expand All @@ -192,9 +194,17 @@ function Ad(props) {
} else if (children.type === AdCarbon) {
type = 'carbon';
} else if (children.type === AdInHouse) {
type = 'in-house';
if (!adblock && codeFundOut) {
type = 'in-house-codefund';
} else if (!adblock && carbonOut) {
type = 'in-house-carbon';
} else {
type = 'in-house';
}
} else if (children.type === Adblock) {
type = 'in-house-adblock';
} else {
type = 'disable-adblock';
return;
}

window.ga('send', {
Expand All @@ -212,12 +222,12 @@ function Ad(props) {
eventLabel: children.props.ad.name,
});
}
}, 2000);
}, 2500);

return () => {
clearTimeout(delay);
};
}, [children.type, children.props.ad]);
}, [children.type, children.props.ad, codeFundOut, carbonOut, adblock]);

return (
<span className={classes.root} style={{ minHeight }}>
Expand All @@ -230,4 +240,4 @@ Ad.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Ad);
export default React.memo(withStyles(styles)(Ad));
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppTableOfContents.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable react/no-danger */
import React from 'react';
import PropTypes from 'prop-types';
import marked from 'marked';
import marked from 'marked/lib/marked';
import throttle from 'lodash/throttle';
import clsx from 'clsx';
import Box from '@material-ui/core/Box';
Expand Down
13 changes: 12 additions & 1 deletion docs/src/modules/components/MarkdownDocs.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,17 @@ function flattenPages(pages, current = []) {
}, current);
}

// To replace with .findIndex() once we stop IE 11 support.
function findIndex(array, comp) {
for (let i = 0; i < array.length; i += 1) {
if (comp(array[i])) {
return i;
}
}

return -1;
}

function MarkdownDocs(props) {
const {
blog,
Expand Down Expand Up @@ -145,7 +156,7 @@ function MarkdownDocs(props) {

const { activePage, pages } = React.useContext(PageContext);
const pageList = flattenPages(pages);
const currentPageNum = pageList.findIndex(page => page.pathname === activePage.pathname);
const currentPageNum = findIndex(pageList, page => page.pathname === activePage.pathname);
const currentPage = pageList[currentPageNum];
const prevPage = pageList[currentPageNum - 1];
const nextPage = pageList[currentPageNum + 1];
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/MarkdownElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useSelector } from 'react-redux';
import marked from 'marked';
import marked from 'marked/lib/marked';
import { withStyles } from '@material-ui/core/styles';
import textToHash from 'docs/src/modules/utils/textToHash';
import prism from 'docs/src/modules/components/prism';
Expand Down
4 changes: 0 additions & 4 deletions docs/src/modules/components/bootstrap.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
// Use the same helper as Babel to avoid bundle bloat.
import 'core-js/modules/es6.array.find-index';
import 'core-js/modules/es6.set';

// Disable auto highlighting
// https://github.com/PrismJS/prism/issues/765
if (process.browser) {
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/components/app-bar/app-bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ A prominent app bar.

## Bottom App Bar

{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}
{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}}

## Fixed placement

Expand Down Expand Up @@ -93,19 +93,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions.

The app bar hides on scroll down to leave more space for reading.

{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}}
{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}}

### Elevate App Bar

The app bar elevates on scroll to communicate that the user is not at the top of the page.

{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}}
{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}}

### Back to top

A floating action buttons appears on scroll to make it easy to get back to the top of the page.

{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}}
{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}}

### `useScrollTrigger([options]) => trigger`

Expand Down
4 changes: 2 additions & 2 deletions packages/material-ui-lab/src/Autocomplete/Autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,7 @@ Autocomplete.propTypes = {
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback
* @param {object} event The event source of the callback.
* @param {any} value
*/
onChange: PropTypes.func,
Expand All @@ -651,7 +651,7 @@ Autocomplete.propTypes = {
* Callback fired when the input value changes.
*
* @param {object} event The event source of the callback.
* @param {string} value The new value of the text input
* @param {string} value The new value of the text input.
* @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`.
*/
onInputChange: PropTypes.func,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export interface UseAutocompleteProps {
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback
* @param {object} event The event source of the callback.
* @param {any} value
*/
onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
Expand All @@ -147,7 +147,7 @@ export interface UseAutocompleteProps {
* Callback fired when the input value changes.
*
* @param {object} event The event source of the callback.
* @param {string} value The new value of the text input
* @param {string} value The new value of the text input.
* @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`.
*/
onInputChange?: (event: React.ChangeEvent<{}>, value: any, reason: 'input' | 'reset') => void;
Expand Down
19 changes: 12 additions & 7 deletions packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,17 @@ export function createFilterOptions(config = {}) {
};
}

// To replace with .findIndex() once we stop IE 11 support.
function findIndex(array, comp) {
for (let i = 0; i < array.length; i += 1) {
if (comp(array[i])) {
return i;
}
}

return -1;
}

const defaultFilterOptions = createFilterOptions();

// Number of options to jump in list box when pageup and pagedown keys are used.
Expand Down Expand Up @@ -424,13 +435,7 @@ export default function useAutocomplete(props) {
const item = newValue;
newValue = Array.isArray(value) ? [...value] : [];

let itemIndex = -1;
// To replace with .findIndex() once we stop IE 11 support.
for (let i = 0; i < newValue.length; i += 1) {
if (getOptionSelected(item, newValue[i])) {
itemIndex = i;
}
}
const itemIndex = findIndex(newValue, valueItem => getOptionSelected(item, valueItem));

if (itemIndex === -1) {
newValue.push(item);
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui-utils/src/elementAcceptingRef.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('elementAcceptingRef', () => {
}

before(() => {
mount = createMount();
mount = createMount({ strict: true });
});

after(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ describe('elementTypeAcceptingRef', () => {
}

before(() => {
mount = createMount();
mount = createMount({ strict: true });
});

after(() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SvgIcon/SvgIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
focusable="false"
viewBox={viewBox}
color={htmlColor}
aria-hidden={titleAccess ? 'false' : 'true'}
aria-hidden={titleAccess ? null : 'true'}
role={titleAccess ? 'img' : 'presentation'}
ref={ref}
{...other}
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SvgIcon/SvgIcon.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ describe('<SvgIcon />', () => {
</SvgIcon>,
);
assert.strictEqual(wrapper.find('title').text(), 'Network');
assert.strictEqual(wrapper.props()['aria-hidden'], 'false');
assert.strictEqual(wrapper.props()['aria-hidden'], null);
});
});

Expand Down