Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 2x 2x 1x 2x 2x 2x 1x 1x 1x 1x 1x 1x | import { withStyles } from '@material-ui/core/styles';
import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
import * as PropTypes from 'prop-types';
import * as React from 'react';
interface ClassesProp {
/** Material UI classes */
classes: {
root: string;
};
}
interface TestButtonBaseProps {
classes?: { [key: string]: any };
// add a comment below to show it in Prop Types in Storybook
// but currently it doesn't work well with 'withStyles'
/** Browser Tooltip */
title?: string;
onClick(): void;
}
const styles = (theme: ThemeOptions) => {
let color = 'white';
if (theme.bootstrap && theme.bootstrap.color) {
color = theme.bootstrap.color[800];
}
return {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color,
cursor: 'pointer',
height: 48,
padding: '0 30px',
'&:hover': {
color: 'red',
},
// increase CSS specificity
'&&:hover': {
color: 'black',
},
},
};
};
// React.SFC is alias of React.StatelessComponent
const ClassNames: React.SFC<ClassesProp> = ({ classes, ...otherProps }) => {
return <button type="button" className={classes.root} {...otherProps} />;
};
// FIXME: with 'withStyles' Prop Types in Storybook are not correctly generated.
// to provide the theme object to the component as a property, pass { withTheme: true }
// https://material-ui.com/customization/css-in-js/#withstyles-styles-options-higher-order-component
const TestButtonBase = withStyles(styles)<TestButtonBaseProps>(ClassNames);
// This is requried to show wanrings for Props in a compiled js version of this component.
TestButtonBase.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
onClick: PropTypes.func.isRequired,
title: PropTypes.string,
};
TestButtonBase.defaultProps = {
title: 'this is a default browser tooltip',
};
TestButtonBase.displayName = 'TestButtonBase';
export default TestButtonBase;
/* istanbul ignore next: test ignore comment */
// tslint:disable-next-line no-empty
function istanbulIgnoreNext() {}
// tslint:disable-next-line no-console
console.log(istanbulIgnoreNext);
|