forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[stepper] Implement StepContent component and start cleaning up CSS a…
…cross all components to match material guidelines. (mui#4799)
- Loading branch information
Showing
8 changed files
with
345 additions
and
38 deletions.
There are no files selected for viewing
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
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
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
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 |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import React, {Component} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import warning from 'warning'; | ||
| import classNames from "classnames"; | ||
| import { createStyleSheet } from "jss-theme-reactor"; | ||
| import TransitionComponent from '../internal/ExpandTransition'; | ||
| import withStyles from "../styles/withStyles"; | ||
|
|
||
| function ExpandTransition(props) { | ||
| return <TransitionComponent {...props} />; | ||
| } | ||
|
|
||
| export const styleSheet = createStyleSheet("MuiStepContent", theme => ({ | ||
| root: { | ||
| marginTop: theme.spacing.unit, | ||
| marginLeft: 12, // half icon | ||
| marginBottom: 0, | ||
| paddingTop: 0, | ||
| paddingLeft: theme.spacing.unit + 12, // margin + half icon | ||
| paddingRight: theme.spacing.unit, | ||
| overflow: 'hidden', | ||
| borderLeft: `1px solid ${theme.palette.line.stepper}`, | ||
| }, | ||
| last: { | ||
| borderLeft: 'none', | ||
| } | ||
| })); | ||
|
|
||
|
|
||
| function StepContent(props) { | ||
| const { | ||
| active, | ||
| children, | ||
| className: classNameProp, | ||
| classes, | ||
| completed, // eslint-disable-line no-unused-vars | ||
| last, // eslint-disable-line no-unused-vars | ||
| transition, | ||
| transitionDuration, | ||
| orientation, | ||
| ...other | ||
| } = props; | ||
|
|
||
| if (orientation !== 'vertical') { | ||
| warning(false, 'Material-UI: <StepContent /> is only designed for use with the vertical stepper.'); | ||
| return null; | ||
| } | ||
|
|
||
| const className = classNames( | ||
| classes.root, | ||
| { | ||
| [classes.last]: last, | ||
| }, | ||
| classNameProp | ||
| ); | ||
|
|
||
| const transitionProps = { | ||
| enterDelay: transitionDuration, | ||
| transitionDuration: transitionDuration, | ||
| open: active, | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={className} {...other}> | ||
| {React.createElement(transition, transitionProps, <div style={{overflow: 'hidden'}}>{children}</div>)} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| StepContent.propTypes = { | ||
| /** | ||
| * Expands the content | ||
| */ | ||
| active: PropTypes.bool, | ||
| /** | ||
| * Step content | ||
| */ | ||
| children: PropTypes.node, | ||
| /** | ||
| * Useful to extend the style applied to the component. | ||
| */ | ||
| classes: PropTypes.object.isRequired, | ||
| /** | ||
| * @ignore | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * @ignore | ||
| */ | ||
| completed: PropTypes.bool, | ||
| /** | ||
| * @ignore | ||
| */ | ||
| last: PropTypes.bool, | ||
| /** | ||
| * @ignore | ||
| */ | ||
| orientation: PropTypes.oneOf(["vertical"]).isRequired, | ||
| /** | ||
| * ReactTransitionGroup component. | ||
| */ | ||
| transition: PropTypes.func, | ||
| /** | ||
| * Adjust the duration of the content expand transition. Passed as a prop to the transition component. | ||
| */ | ||
| transitionDuration: PropTypes.number, | ||
| }; | ||
|
|
||
| StepContent.defaultProps = { | ||
| transition: ExpandTransition, | ||
| transitionDuration: 450, | ||
| }; | ||
|
|
||
| export default withStyles(styleSheet)(StepContent); |
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
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
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 |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import React, {Component} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import ReactTransitionGroup from 'react-transition-group/TransitionGroup'; | ||
| import ExpandTransitionChild from './ExpandTransitionChild'; | ||
|
|
||
| class ExpandTransition extends Component { | ||
| static propTypes = { | ||
| children: PropTypes.node, | ||
| enterDelay: PropTypes.number, | ||
| loading: PropTypes.bool, | ||
| open: PropTypes.bool, | ||
| style: PropTypes.object, | ||
| transitionDelay: PropTypes.number, | ||
| transitionDuration: PropTypes.number, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| enterDelay: 0, | ||
| transitionDelay: 0, | ||
| transitionDuration: 450, | ||
| loading: false, | ||
| open: false, | ||
| }; | ||
|
|
||
| renderChildren(children) { | ||
| const {enterDelay, transitionDelay, transitionDuration} = this.props; | ||
| return React.Children.map(children, (child) => { | ||
| return ( | ||
| <ExpandTransitionChild | ||
| enterDelay={enterDelay} | ||
| transitionDelay={transitionDelay} | ||
| transitionDuration={transitionDuration} | ||
| key={child.key} | ||
| > | ||
| {child} | ||
| </ExpandTransitionChild> | ||
| ); | ||
| }, this); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| children, | ||
| enterDelay, // eslint-disable-line no-unused-vars | ||
| loading, | ||
| open, | ||
| style, | ||
| transitionDelay, // eslint-disable-line no-unused-vars | ||
| transitionDuration, // eslint-disable-line no-unused-vars | ||
| ...other | ||
| } = this.props; | ||
|
|
||
| const mergedRootStyles = Object.assign({}, { | ||
| position: 'relative', | ||
| overflow: 'hidden', | ||
| height: 'auto', | ||
| }, style); | ||
|
|
||
| const newChildren = loading ? [] : this.renderChildren(children); | ||
|
|
||
| return ( | ||
| <ReactTransitionGroup | ||
| style={mergedRootStyles} | ||
| component="div" | ||
| {...other} | ||
| > | ||
| {open && newChildren} | ||
| </ReactTransitionGroup> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ExpandTransition; |
Oops, something went wrong.