Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
import { Style, TextStyle } from '../styles/createTypography';
export interface TypographyProps extends StandardProps<
React.HTMLAttributes<HTMLElement>,
TypographyClassKey
> {
align?: PropTypes.Alignment;
component?: React.ReactType;
color?: PropTypes.Color | 'secondary' | 'error';
gutterBottom?: boolean;
headlineMapping?: { [type in TextStyle]: string };
noWrap?: boolean;
paragraph?: boolean;
type?: Style | 'caption' | 'button';
}
export type TypographyClassKey =
| 'root'
| 'display4'
| 'display3'
| 'display2'
| 'display1'
| 'headline'
| 'title'
| 'subheading'
| 'body2'
| 'body1'
| 'caption'
| 'button'
| 'alignLeft'
| 'alignCenter'
| 'alignRight'
| 'alignJustify'
| 'noWrap'
| 'gutterBottom'
| 'paragraph'
| 'colorInherit'
| 'colorSecondary'
| 'colorAccent'
;
declare const Typography: React.ComponentType<TypographyProps>;
export default Typography;

View File

@@ -0,0 +1,207 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
var _helpers = require('../utils/helpers');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
display: 'block',
margin: 0
},
display4: theme.typography.display4,
display3: theme.typography.display3,
display2: theme.typography.display2,
display1: theme.typography.display1,
headline: theme.typography.headline,
title: theme.typography.title,
subheading: theme.typography.subheading,
body2: theme.typography.body2,
body1: theme.typography.body1,
caption: theme.typography.caption,
button: theme.typography.button,
alignLeft: {
textAlign: 'left'
},
alignCenter: {
textAlign: 'center'
},
alignRight: {
textAlign: 'right'
},
alignJustify: {
textAlign: 'justify'
},
noWrap: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
gutterBottom: {
marginBottom: '0.35em'
},
paragraph: {
marginBottom: theme.spacing.unit * 2
},
colorInherit: {
color: 'inherit'
},
colorPrimary: {
color: theme.palette.primary[500]
},
colorSecondary: {
color: theme.palette.text.secondary
},
colorAccent: {
color: theme.palette.secondary.A400
},
colorError: {
color: theme.palette.error.A400
}
};
};
var babelPluginFlowReactPropTypes_proptype_Type = require('prop-types').oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button']);
var babelPluginFlowReactPropTypes_proptype_Props = {
align: require('prop-types').oneOf(['inherit', 'left', 'center', 'right', 'justify']),
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* By default we map the type to a good default headline component.
*/
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
/**
* The color of the component. It's using the theme palette when that makes sense.
*/
color: require('prop-types').oneOf(['inherit', 'primary', 'secondary', 'accent', 'error', 'default']),
/**
* If `true`, the text will have a bottom margin.
*/
gutterBottom: require('prop-types').bool,
/**
* We are empirically mapping the type property to a range of different DOM element type.
* For instance, h1 to h6. If you wish to change that mapping, you can provide your own.
* Alternatively, you can use the `component` property.
*/
headlineMapping: require('prop-types').shape({}),
/**
* If `true`, the text will not wrap, but instead will truncate with an ellipsis.
*/
noWrap: require('prop-types').bool,
/**
* If `true`, the text will have a bottom margin.
*/
paragraph: require('prop-types').bool,
/**
* Applies the theme typography styles.
*/
type: require('prop-types').oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'])
};
function Typography(props) {
var _classNames;
var align = props.align,
classes = props.classes,
classNameProp = props.className,
componentProp = props.component,
color = props.color,
gutterBottom = props.gutterBottom,
headlineMapping = props.headlineMapping,
noWrap = props.noWrap,
paragraph = props.paragraph,
type = props.type,
other = (0, _objectWithoutProperties3.default)(props, ['align', 'classes', 'className', 'component', 'color', 'gutterBottom', 'headlineMapping', 'noWrap', 'paragraph', 'type']);
var className = (0, _classnames2.default)(classes.root, classes[type], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['color' + (0, _helpers.capitalizeFirstLetter)(color)], color !== 'default'), (0, _defineProperty3.default)(_classNames, classes.noWrap, noWrap), (0, _defineProperty3.default)(_classNames, classes.gutterBottom, gutterBottom), (0, _defineProperty3.default)(_classNames, classes.paragraph, paragraph), (0, _defineProperty3.default)(_classNames, classes['align' + (0, _helpers.capitalizeFirstLetter)(align)], align !== 'inherit'), _classNames), classNameProp);
var Component = componentProp || (paragraph ? 'p' : headlineMapping[type]) || 'span';
return _react2.default.createElement(Component, (0, _extends3.default)({ className: className }, other));
}
Typography.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
headlineMapping: require('prop-types').shape({}).isRequired,
type: require('prop-types').oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button']).isRequired,
align: require('prop-types').oneOf(['inherit', 'left', 'center', 'right', 'justify']),
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'component', typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOf(['inherit', 'primary', 'secondary', 'accent', 'error', 'default'])), (0, _defineProperty3.default)(_ref, 'gutterBottom', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'headlineMapping', require('prop-types').shape({})), (0, _defineProperty3.default)(_ref, 'noWrap', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'paragraph', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'type', require('prop-types').oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'])), _ref) : {};
Typography.defaultProps = {
align: 'inherit',
color: 'default',
gutterBottom: false,
headlineMapping: {
display4: 'h1',
display3: 'h1',
display2: 'h1',
display1: 'h1',
headline: 'h1',
title: 'h2',
subheading: 'h3',
body2: 'aside',
body1: 'p'
},
noWrap: false,
paragraph: false,
type: 'body1'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTypography' })(Typography);

View File

@@ -0,0 +1,182 @@
// @flow
import React from 'react';
import type { ElementType, Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { capitalizeFirstLetter } from '../utils/helpers';
export const styles = (theme: Object) => ({
root: {
display: 'block',
margin: 0,
},
display4: theme.typography.display4,
display3: theme.typography.display3,
display2: theme.typography.display2,
display1: theme.typography.display1,
headline: theme.typography.headline,
title: theme.typography.title,
subheading: theme.typography.subheading,
body2: theme.typography.body2,
body1: theme.typography.body1,
caption: theme.typography.caption,
button: theme.typography.button,
alignLeft: {
textAlign: 'left',
},
alignCenter: {
textAlign: 'center',
},
alignRight: {
textAlign: 'right',
},
alignJustify: {
textAlign: 'justify',
},
noWrap: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
gutterBottom: {
marginBottom: '0.35em',
},
paragraph: {
marginBottom: theme.spacing.unit * 2,
},
colorInherit: {
color: 'inherit',
},
colorPrimary: {
color: theme.palette.primary[500],
},
colorSecondary: {
color: theme.palette.text.secondary,
},
colorAccent: {
color: theme.palette.secondary.A400,
},
colorError: {
color: theme.palette.error.A400,
},
});
export type Type =
| 'display4'
| 'display3'
| 'display2'
| 'display1'
| 'headline'
| 'title'
| 'subheading'
| 'body2'
| 'body1'
| 'caption'
| 'button';
type ProvidedProps = {
classes: Object,
headlineMapping: { [key: Type]: string },
type: Type,
};
export type Props = {
align?: 'inherit' | 'left' | 'center' | 'right' | 'justify',
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* By default we map the type to a good default headline component.
*/
component?: ElementType,
/**
* The color of the component. It's using the theme palette when that makes sense.
*/
color?: 'inherit' | 'primary' | 'secondary' | 'accent' | 'error' | 'default',
/**
* If `true`, the text will have a bottom margin.
*/
gutterBottom?: boolean,
/**
* We are empirically mapping the type property to a range of different DOM element type.
* For instance, h1 to h6. If you wish to change that mapping, you can provide your own.
* Alternatively, you can use the `component` property.
*/
headlineMapping?: { [key: Type]: string },
/**
* If `true`, the text will not wrap, but instead will truncate with an ellipsis.
*/
noWrap?: boolean,
/**
* If `true`, the text will have a bottom margin.
*/
paragraph?: boolean,
/**
* Applies the theme typography styles.
*/
type?: Type,
};
function Typography(props: ProvidedProps & Props) {
const {
align,
classes,
className: classNameProp,
component: componentProp,
color,
gutterBottom,
headlineMapping,
noWrap,
paragraph,
type,
...other
} = props;
const className = classNames(
classes.root,
classes[type],
{
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'default',
[classes.noWrap]: noWrap,
[classes.gutterBottom]: gutterBottom,
[classes.paragraph]: paragraph,
[classes[`align${capitalizeFirstLetter(align)}`]]: align !== 'inherit',
},
classNameProp,
);
const Component = componentProp || (paragraph ? 'p' : headlineMapping[type]) || 'span';
return <Component className={className} {...other} />;
}
Typography.defaultProps = {
align: 'inherit',
color: 'default',
gutterBottom: false,
headlineMapping: {
display4: 'h1',
display3: 'h1',
display2: 'h1',
display1: 'h1',
headline: 'h1',
title: 'h2',
subheading: 'h3',
body2: 'aside',
body1: 'p',
},
noWrap: false,
paragraph: false,
type: 'body1',
};
export default withStyles(styles, { name: 'MuiTypography' })(Typography);

View File

@@ -0,0 +1,2 @@
export { default } from './Typography';
export * from './Typography';

View File

@@ -0,0 +1,16 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Typography = require('./Typography');
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Typography).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

View File

@@ -0,0 +1,3 @@
// @flow
export { default } from './Typography';