Fix #819
parent
f1d1512451
commit
9d3bba3c31
|
@ -12,12 +12,16 @@ const factory = (Overlay, Button) => {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
action: PropTypes.string,
|
action: PropTypes.string,
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
|
children: PropTypes.node,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
icon: PropTypes.oneOfType([
|
icon: PropTypes.oneOfType([
|
||||||
PropTypes.string,
|
PropTypes.string,
|
||||||
PropTypes.element
|
PropTypes.element
|
||||||
]),
|
]),
|
||||||
label: PropTypes.string,
|
label: PropTypes.oneOfType([
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.element
|
||||||
|
]),
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
onTimeout: PropTypes.func,
|
onTimeout: PropTypes.func,
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
|
@ -49,7 +53,7 @@ const factory = (Overlay, Button) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {action, active, icon, label, onClick, theme, type } = this.props;
|
const {action, active, children, icon, label, onClick, theme, type } = this.props;
|
||||||
const className = classnames([theme.snackbar, theme[type]], {
|
const className = classnames([theme.snackbar, theme[type]], {
|
||||||
[theme.active]: active
|
[theme.active]: active
|
||||||
}, this.props.className);
|
}, this.props.className);
|
||||||
|
@ -58,7 +62,10 @@ const factory = (Overlay, Button) => {
|
||||||
<Overlay invisible>
|
<Overlay invisible>
|
||||||
<div data-react-toolbox='snackbar' className={className}>
|
<div data-react-toolbox='snackbar' className={className}>
|
||||||
{icon ? <FontIcon value={icon} className={theme.icon} /> : null}
|
{icon ? <FontIcon value={icon} className={theme.icon} /> : null}
|
||||||
<span className={theme.label}>{label}</span>
|
<span className={theme.label}>
|
||||||
|
{label}
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
{action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
|
{action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
|
||||||
</div>
|
</div>
|
||||||
</Overlay>
|
</Overlay>
|
||||||
|
|
|
@ -41,9 +41,10 @@ This component can be styled by context providing a theme with the key `RTSnackb
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `action` | `String` | | Label for the action component inside the Snackbar.|
|
| `action` | `String` | | Label for the action component inside the Snackbar.|
|
||||||
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
|
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
|
||||||
|
| `children` | `String or Element` | `false` | Text or node to be displayed in the content as alternative to `label`.|
|
||||||
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
||||||
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
|
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
|
||||||
| `label` | `String` | | Text to display in the content. Required.|
|
| `label` | `String or Element` | | Text to display in the content.|
|
||||||
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
|
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
|
||||||
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
|
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
|
||||||
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
|
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
|
||||||
|
|
|
@ -29,12 +29,13 @@ class SnackbarTest extends React.Component {
|
||||||
action='Hide'
|
action='Hide'
|
||||||
active={this.state.active}
|
active={this.state.active}
|
||||||
icon='question_answer'
|
icon='question_answer'
|
||||||
label='Snackbar action cancel'
|
|
||||||
timeout={2000}
|
timeout={2000}
|
||||||
onClick={this.handleSnackbarClick}
|
onClick={this.handleSnackbarClick}
|
||||||
onTimeout={this.handleSnackbarTimeout}
|
onTimeout={this.handleSnackbarTimeout}
|
||||||
type='warning'
|
type='warning'
|
||||||
/>
|
>
|
||||||
|
Snackbar action <strong>cancel</strong>
|
||||||
|
</Snackbar>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue