-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
77 additions
and
186 deletions.
There are no files selected for viewing
207 changes: 23 additions & 184 deletions
207
packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div | ||
| role="group" | ||
| className={clsx( | ||
| classes.root, | ||
| { | ||
| [classes.vertical]: orientation === 'vertical', | ||
| }, | ||
| className, | ||
| )} | ||
| ref={ref} | ||
| {...other} | ||
| > | ||
| {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, | ||
| }); | ||
| })} | ||
| </div> | ||
| ); | ||
| 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 ref={ref} {...props} />; | ||
| }); | ||
|
|
||
| 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters