Current File : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/node_modules/@material-ui/lab/esm/ToggleButtonGroup/ToggleButtonGroup.js
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import isValueSelected from './isValueSelected';
import { withStyles } from '@material-ui/core/styles';
import { capitalize } from '@material-ui/core/utils';
export var styles = function styles(theme) {
return {
/* 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
}
}
};
};
var ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButton(props, ref) {
var children = props.children,
classes = props.classes,
className = props.className,
_props$exclusive = props.exclusive,
exclusive = _props$exclusive === void 0 ? false : _props$exclusive,
onChange = props.onChange,
_props$orientation = props.orientation,
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
_props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
value = props.value,
other = _objectWithoutProperties(props, ["children", "classes", "className", "exclusive", "onChange", "orientation", "size", "value"]);
var handleChange = function handleChange(event, buttonValue) {
if (!onChange) {
return;
}
var index = value && value.indexOf(buttonValue);
var newValue;
if (value && index >= 0) {
newValue = value.slice();
newValue.splice(index, 1);
} else {
newValue = value ? value.concat(buttonValue) : [buttonValue];
}
onChange(event, newValue);
};
var handleExclusiveChange = function handleExclusiveChange(event, buttonValue) {
if (!onChange) {
return;
}
onChange(event, value === buttonValue ? null : buttonValue);
};
return /*#__PURE__*/React.createElement("div", _extends({
role: "group",
className: clsx(classes.root, className, orientation === 'vertical' && classes.vertical),
ref: ref
}, other), React.Children.map(children, function (child) {
if (! /*#__PURE__*/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 /*#__PURE__*/React.cloneElement(child, {
className: clsx(classes.grouped, classes["grouped".concat(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
});
}));
});
process.env.NODE_ENV !== "production" ? 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.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, only allow one of the child ToggleButton values to be selected.
*/
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).
*/
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* The size of the buttons.
*/
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
} : void 0;
export default withStyles(styles, {
name: 'MuiToggleButtonGroup'
})(ToggleButtonGroup);
Mini Shell