From 7166775bbb8891276ce9b966093f17a92f304ab5 Mon Sep 17 00:00:00 2001 From: Matt Date: Thu, 1 Oct 2020 23:48:17 +0100 Subject: [PATCH] fix rebase --- .../ToggleButtonGroup/ToggleButtonGroup.js | 207 ++---------------- .../ToggleButtonGroup/ToggleButtonGroup.js | 56 ++++- 2 files changed, 77 insertions(+), 186 deletions(-) diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js index 316b168105c571..ae403a39b30dba 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -1,185 +1,24 @@ -import * as React from 'react'; -import { isFragment } from 'react-is'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; -import { capitalize } from '@material-ui/core/utils'; -import isValueSelected from './isValueSelected'; - -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - display: 'inline-flex', - borderRadius: theme.shape.borderRadius, - }, - /* Styles applied to the root element if `orientation="vertical"`. */ - vertical: { - flexDirection: 'column', - }, - /* Styles applied to the children. */ - grouped: {}, - /* Styles applied to the children if `orientation="horizontal"`. */ - groupedHorizontal: { - '&:not(:first-child)': { - marginLeft: -1, - borderLeft: '1px solid transparent', - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }, - '&:not(:last-child)': { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }, - }, - /* Styles applied to the children if `orientation="vertical"`. */ - groupedVertical: { - '&:not(:first-child)': { - marginTop: -1, - borderTop: '1px solid transparent', - borderTopLeftRadius: 0, - borderTopRightRadius: 0, - }, - '&:not(:last-child)': { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, - }, -}); - -const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) { - const { - children, - classes, - className, - exclusive = false, - onChange, - orientation = 'horizontal', - size = 'medium', - value, - ...other - } = props; - - const handleChange = (event, buttonValue) => { - if (!onChange) { - return; - } - - const index = value && value.indexOf(buttonValue); - let newValue; - - if (value && index >= 0) { - newValue = value.slice(); - newValue.splice(index, 1); - } else { - newValue = value ? value.concat(buttonValue) : [buttonValue]; - } - - onChange(event, newValue); - }; - - const handleExclusiveChange = (event, buttonValue) => { - if (!onChange) { - return; - } - - onChange(event, value === buttonValue ? null : buttonValue); - }; - - return ( -
- {React.Children.map(children, (child) => { - if (!React.isValidElement(child)) { - return null; - } - - if (process.env.NODE_ENV !== 'production') { - if (isFragment(child)) { - console.error( - [ - "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", - 'Consider providing an array instead.', - ].join('\n'), - ); - } - } - - return React.cloneElement(child, { - className: clsx( - classes.grouped, - classes[`grouped${capitalize(orientation)}`], - child.props.className, - ), - onChange: exclusive ? handleExclusiveChange : handleChange, - selected: - child.props.selected === undefined - ? isValueSelected(child.props.value, value) - : child.props.selected, - size: child.props.size || size, - }); - })} -
- ); +import React from 'react'; +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'; + +let warnedOnce = false; + +/** + * @ignore - do not document. + */ +export default React.forwardRef(function DeprecatedToggleButtonGroup(props, ref) { + if (!warnedOnce) { + console.warn( + [ + 'Material-UI: The ToggleButtonGroup component was moved from the lab to the core.', + '', + "You should use `import { ToggleButtonGroup } from '@material-ui/core'`", + "or `import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'`", + ].join('\n'), + ); + + warnedOnce = true; + } + + return ; }); - -ToggleButtonGroup.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * The content of the button. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * If `true`, only allow one of the child ToggleButton values to be selected. - * @default false - */ - exclusive: PropTypes.bool, - /** - * Callback fired when the value changes. - * - * @param {object} event The event source of the callback. - * @param {any} value of the selected buttons. When `exclusive` is true - * this is a single value; when false an array of selected values. If no value - * is selected and `exclusive` is true the value is null; when false an empty array. - */ - onChange: PropTypes.func, - /** - * The group orientation (layout flow direction). - * @default 'horizontal' - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * The size of the buttons. - * @default 'medium' - */ - size: PropTypes.oneOf(['large', 'medium', 'small']), - /** - * The currently selected value within the group or an array of selected - * values when `exclusive` is false. - * - * The value must have reference equality with the option in order to be selected. - */ - value: PropTypes.any, -}; - -export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup); diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js index d39b3f31a382ff..316b168105c571 100644 --- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { withStyles } from '../styles'; -import { capitalize } from '../utils'; +import { withStyles } from '@material-ui/core/styles'; +import { capitalize } from '@material-ui/core/utils'; import isValueSelected from './isValueSelected'; export const styles = (theme) => ({ @@ -131,3 +131,55 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref ); }); + +ToggleButtonGroup.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the button. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, only allow one of the child ToggleButton values to be selected. + * @default false + */ + exclusive: PropTypes.bool, + /** + * Callback fired when the value changes. + * + * @param {object} event The event source of the callback. + * @param {any} value of the selected buttons. When `exclusive` is true + * this is a single value; when false an array of selected values. If no value + * is selected and `exclusive` is true the value is null; when false an empty array. + */ + onChange: PropTypes.func, + /** + * The group orientation (layout flow direction). + * @default 'horizontal' + */ + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + /** + * The size of the buttons. + * @default 'medium' + */ + size: PropTypes.oneOf(['large', 'medium', 'small']), + /** + * The currently selected value within the group or an array of selected + * values when `exclusive` is false. + * + * The value must have reference equality with the option in order to be selected. + */ + value: PropTypes.any, +}; + +export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);