mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-01 05:05:25 +08:00
fixed code style problems.
This commit is contained in:
Nelson, Joe
parent
622dadb4ef
commit
ad0fcfe94f
@ -44,7 +44,12 @@ export default class PropTable extends React.Component {
|
||||
? type.__docgenInfo.props[property].description
|
||||
: null;
|
||||
if (propType === 'other') {
|
||||
if (type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] && type.__docgenInfo.props[property].type) {
|
||||
if (
|
||||
type.__docgenInfo &&
|
||||
type.__docgenInfo.props &&
|
||||
type.__docgenInfo.props[property] &&
|
||||
type.__docgenInfo.props[property].type
|
||||
) {
|
||||
propType = type.__docgenInfo.props[property].type.name;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,109 +1,109 @@
|
||||
import React from 'react'
|
||||
import createFragment from 'react-addons-create-fragment'
|
||||
import React from 'react';
|
||||
import createFragment from 'react-addons-create-fragment';
|
||||
|
||||
const valueStyles = {
|
||||
func: {
|
||||
color: '#170'
|
||||
color: '#170',
|
||||
},
|
||||
|
||||
attr: {
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
},
|
||||
|
||||
object: {
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
},
|
||||
|
||||
array: {
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
},
|
||||
|
||||
number: {
|
||||
color: '#a11'
|
||||
color: '#a11',
|
||||
},
|
||||
|
||||
string: {
|
||||
color: '#22a',
|
||||
wordBreak: 'break-word'
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
|
||||
bool: {
|
||||
color: '#a11'
|
||||
color: '#a11',
|
||||
},
|
||||
|
||||
empty: {
|
||||
color: '#777'
|
||||
}
|
||||
}
|
||||
color: '#777',
|
||||
},
|
||||
};
|
||||
|
||||
function previewArray (val) {
|
||||
const items = {}
|
||||
function previewArray(val) {
|
||||
const items = {};
|
||||
val.slice(0, 3).forEach((item, i) => {
|
||||
items[`n${i}`] = <PropVal val={item} />
|
||||
items[`c${i}`] = ', '
|
||||
})
|
||||
items[`n${i}`] = <PropVal val={item} />;
|
||||
items[`c${i}`] = ', ';
|
||||
});
|
||||
if (val.length > 3) {
|
||||
items.last = '…'
|
||||
items.last = '…';
|
||||
} else {
|
||||
delete items[`c${val.length - 1}`]
|
||||
delete items[`c${val.length - 1}`];
|
||||
}
|
||||
return (
|
||||
<span style={valueStyles.array}>
|
||||
[{createFragment(items)}]
|
||||
</span>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function previewObject (val) {
|
||||
const names = Object.keys(val)
|
||||
const items = {}
|
||||
function previewObject(val) {
|
||||
const names = Object.keys(val);
|
||||
const items = {};
|
||||
names.slice(0, 3).forEach((name, i) => {
|
||||
items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>
|
||||
items[`c${i}`] = ': '
|
||||
items[`v${i}`] = <PropVal val={val[name]} />
|
||||
items[`m${i}`] = ', '
|
||||
})
|
||||
items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
|
||||
items[`c${i}`] = ': ';
|
||||
items[`v${i}`] = <PropVal val={val[name]} />;
|
||||
items[`m${i}`] = ', ';
|
||||
});
|
||||
if (names.length > 3) {
|
||||
items.rest = '…'
|
||||
items.rest = '…';
|
||||
} else {
|
||||
delete items[`m${names.length - 1}`]
|
||||
delete items[`m${names.length - 1}`];
|
||||
}
|
||||
return (
|
||||
<span style={valueStyles.object}>
|
||||
{'{'}{createFragment(items)}{'}'}
|
||||
</span>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function previewProp (val) {
|
||||
let braceWrap = true
|
||||
let content = null
|
||||
function previewProp(val) {
|
||||
let braceWrap = true;
|
||||
let content = null;
|
||||
if (typeof val === 'number') {
|
||||
content = <span style={valueStyles.number}>{val}</span>
|
||||
content = <span style={valueStyles.number}>{val}</span>;
|
||||
} else if (typeof val === 'string') {
|
||||
if (val.length > 50) {
|
||||
val = `${val.slice(0, 50)}…`
|
||||
val = `${val.slice(0, 50)}…`;
|
||||
}
|
||||
content = <span style={valueStyles.string}>"{val}"</span>
|
||||
braceWrap = false
|
||||
content = <span style={valueStyles.string}>"{val}"</span>;
|
||||
braceWrap = false;
|
||||
} else if (typeof val === 'boolean') {
|
||||
content = <span style={valueStyles.bool}>{`${val}`}</span>
|
||||
content = <span style={valueStyles.bool}>{`${val}`}</span>;
|
||||
} else if (Array.isArray(val)) {
|
||||
content = previewArray(val)
|
||||
content = previewArray(val);
|
||||
} else if (typeof val === 'function') {
|
||||
content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>
|
||||
content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
|
||||
} else if (!val) {
|
||||
content = <span style={valueStyles.empty}>{`${val}`}</span>
|
||||
content = <span style={valueStyles.empty}>{`${val}`}</span>;
|
||||
} else if (typeof val !== 'object') {
|
||||
content = <span>…</span>
|
||||
content = <span>…</span>;
|
||||
} else if (React.isValidElement(val)) {
|
||||
content = (
|
||||
<span style={valueStyles.object}>
|
||||
{`<${val.type.displayName || val.type.name || val.type} />`}
|
||||
</span>
|
||||
)
|
||||
);
|
||||
} else {
|
||||
content = previewObject(val)
|
||||
content = previewObject(val);
|
||||
}
|
||||
|
||||
if (!braceWrap) return content;
|
||||
@ -111,9 +111,9 @@ function previewProp (val) {
|
||||
}
|
||||
|
||||
export default class PropVal extends React.Component {
|
||||
render () {
|
||||
return previewProp(this.props.val)
|
||||
render() {
|
||||
return previewProp(this.props.val);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PropVal
|
||||
module.exports = PropVal;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
import MTRC from 'markdown-to-react-components'
|
||||
import PropTable from './PropTable'
|
||||
import Node from './Node'
|
||||
import { baseFonts } from './theme'
|
||||
import { Pre } from './markdown'
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import MTRC from 'markdown-to-react-components';
|
||||
import PropTable from './PropTable';
|
||||
import Node from './Node';
|
||||
import { baseFonts } from './theme';
|
||||
import { Pre } from './markdown';
|
||||
|
||||
const stylesheet = {
|
||||
link: {
|
||||
@ -17,13 +17,13 @@ const stylesheet = {
|
||||
background: '#28c',
|
||||
color: '#fff',
|
||||
padding: '5px 15px',
|
||||
cursor: 'pointer'
|
||||
cursor: 'pointer',
|
||||
},
|
||||
topRight: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
borderRadius: '0 0 0 5px'
|
||||
}
|
||||
borderRadius: '0 0 0 5px',
|
||||
},
|
||||
},
|
||||
info: {
|
||||
position: 'fixed',
|
||||
@ -33,81 +33,81 @@ const stylesheet = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '0 40px',
|
||||
overflow: 'auto'
|
||||
overflow: 'auto',
|
||||
},
|
||||
children: {
|
||||
position: 'relative',
|
||||
zIndex: 0
|
||||
zIndex: 0,
|
||||
},
|
||||
infoBody: {
|
||||
...baseFonts,
|
||||
fontWeight: 300,
|
||||
lineHeight: 1.45,
|
||||
fontSize: '15px'
|
||||
fontSize: '15px',
|
||||
},
|
||||
infoContent: {
|
||||
marginBottom: 0
|
||||
marginBottom: 0,
|
||||
},
|
||||
jsxInfoContent: {
|
||||
borderTop: '1px solid #eee',
|
||||
margin: '20px 0 0 0'
|
||||
margin: '20px 0 0 0',
|
||||
},
|
||||
header: {
|
||||
h1: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: '35px'
|
||||
fontSize: '35px',
|
||||
},
|
||||
h2: {
|
||||
margin: '0 0 10px 0',
|
||||
padding: 0,
|
||||
fontWeight: 400,
|
||||
fontSize: '22px'
|
||||
fontSize: '22px',
|
||||
},
|
||||
body: {
|
||||
borderBottom: '1px solid #eee',
|
||||
paddingTop: 10,
|
||||
marginBottom: 10
|
||||
}
|
||||
marginBottom: 10,
|
||||
},
|
||||
},
|
||||
source: {
|
||||
h1: {
|
||||
margin: '20px 0 0 0',
|
||||
padding: '0 0 5px 0',
|
||||
fontSize: '25px',
|
||||
borderBottom: '1px solid #EEE'
|
||||
}
|
||||
borderBottom: '1px solid #EEE',
|
||||
},
|
||||
},
|
||||
propTableHead: {
|
||||
margin: '20px 0 0 0'
|
||||
}
|
||||
}
|
||||
margin: '20px 0 0 0',
|
||||
},
|
||||
};
|
||||
|
||||
export default class Story extends React.Component {
|
||||
constructor (...args) {
|
||||
super(...args)
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
open: false,
|
||||
stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet)))
|
||||
}
|
||||
MTRC.configure(this.props.mtrcConf)
|
||||
stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))),
|
||||
};
|
||||
MTRC.configure(this.props.mtrcConf);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState({
|
||||
stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet)))
|
||||
})
|
||||
stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))),
|
||||
});
|
||||
}
|
||||
|
||||
_renderStory () {
|
||||
_renderStory() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_renderInline () {
|
||||
_renderInline() {
|
||||
return (
|
||||
<div>
|
||||
<div style={this.state.stylesheet.infoPage}>
|
||||
@ -127,29 +127,29 @@ export default class Story extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_renderOverlay () {
|
||||
_renderOverlay() {
|
||||
const linkStyle = {
|
||||
...stylesheet.link.base,
|
||||
...stylesheet.link.topRight
|
||||
}
|
||||
...stylesheet.link.topRight,
|
||||
};
|
||||
|
||||
const infoStyle = Object.assign({}, stylesheet.info)
|
||||
const infoStyle = Object.assign({}, stylesheet.info);
|
||||
if (!this.state.open) {
|
||||
infoStyle.display = 'none'
|
||||
infoStyle.display = 'none';
|
||||
}
|
||||
|
||||
const openOverlay = () => {
|
||||
this.setState({ open: true })
|
||||
return false
|
||||
}
|
||||
this.setState({ open: true });
|
||||
return false;
|
||||
};
|
||||
|
||||
const closeOverlay = () => {
|
||||
this.setState({ open: false })
|
||||
return false
|
||||
}
|
||||
this.setState({ open: false });
|
||||
return false;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -170,12 +170,12 @@ export default class Story extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_getInfoHeader () {
|
||||
_getInfoHeader() {
|
||||
if (!this.props.context || !this.props.showHeader) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -183,12 +183,12 @@ export default class Story extends React.Component {
|
||||
<h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1>
|
||||
<h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_getInfoContent () {
|
||||
_getInfoContent() {
|
||||
if (!this.props.info) {
|
||||
return ''
|
||||
return '';
|
||||
}
|
||||
|
||||
if (React.isValidElement(this.props.info)) {
|
||||
@ -196,28 +196,28 @@ export default class Story extends React.Component {
|
||||
<div style={this.props.showInline ? stylesheet.jsxInfoContent : stylesheet.infoContent}>
|
||||
{this.props.info}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const lines = this.props.info.split('\n')
|
||||
const lines = this.props.info.split('\n');
|
||||
while (lines[0].trim() === '') {
|
||||
lines.shift()
|
||||
lines.shift();
|
||||
}
|
||||
let padding = 0
|
||||
const matches = lines[0].match(/^ */)
|
||||
let padding = 0;
|
||||
const matches = lines[0].match(/^ */);
|
||||
if (matches) {
|
||||
padding = matches[0].length
|
||||
padding = matches[0].length;
|
||||
}
|
||||
const source = lines.map(s => s.slice(padding)).join('\n')
|
||||
const source = lines.map(s => s.slice(padding)).join('\n');
|
||||
return (
|
||||
<div style={this.state.stylesheet.infoContent}>
|
||||
{MTRC(source).tree}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_getComponentDescription () {
|
||||
let retDiv = null
|
||||
_getComponentDescription() {
|
||||
let retDiv = null;
|
||||
|
||||
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach((key, index) => {
|
||||
@ -226,17 +226,17 @@ export default class Story extends React.Component {
|
||||
<div>
|
||||
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return retDiv
|
||||
return retDiv;
|
||||
}
|
||||
|
||||
_getSourceCode () {
|
||||
_getSourceCode() {
|
||||
if (!this.props.showSource) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -248,37 +248,37 @@ export default class Story extends React.Component {
|
||||
))}
|
||||
</Pre>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
_getPropTables () {
|
||||
const types = new Map()
|
||||
_getPropTables() {
|
||||
const types = new Map();
|
||||
|
||||
if (this.props.propTables === null) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!this.props.children) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
if (this.props.propTables) {
|
||||
this.props.propTables.forEach(type => {
|
||||
types.set(type, true)
|
||||
})
|
||||
types.set(type, true);
|
||||
});
|
||||
}
|
||||
|
||||
// depth-first traverse and collect types
|
||||
const extract = children => {
|
||||
if (!children) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(children)) {
|
||||
children.forEach(extract)
|
||||
return
|
||||
children.forEach(extract);
|
||||
return;
|
||||
}
|
||||
if (children.props && children.props.children) {
|
||||
extract(children.props.children)
|
||||
extract(children.props.children);
|
||||
}
|
||||
if (
|
||||
typeof children === 'string' ||
|
||||
@ -289,15 +289,15 @@ export default class Story extends React.Component {
|
||||
return;
|
||||
}
|
||||
if (children.type && !types.has(children.type)) {
|
||||
types.set(children.type, true)
|
||||
types.set(children.type, true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// extract components from children
|
||||
extract(this.props.children)
|
||||
extract(this.props.children);
|
||||
|
||||
const array = Array.from(types.keys())
|
||||
array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name))
|
||||
const array = Array.from(types.keys());
|
||||
array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
|
||||
|
||||
const propTables = array.map((type, idx) => (
|
||||
<div key={idx}>
|
||||
@ -306,10 +306,10 @@ export default class Story extends React.Component {
|
||||
</h2>
|
||||
<PropTable type={type} />
|
||||
</div>
|
||||
))
|
||||
));
|
||||
|
||||
if (!propTables || propTables.length === 0) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -317,19 +317,19 @@ export default class Story extends React.Component {
|
||||
<h1 style={this.state.stylesheet.source.h1}>Prop Types</h1>
|
||||
{propTables}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
if (this.props.showInline) {
|
||||
return this._renderInline()
|
||||
return this._renderInline();
|
||||
}
|
||||
|
||||
return this._renderOverlay()
|
||||
return this._renderOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
Story.displayName = 'Story'
|
||||
Story.displayName = 'Story';
|
||||
Story.propTypes = {
|
||||
context: PropTypes.object,
|
||||
info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||
@ -340,12 +340,12 @@ Story.propTypes = {
|
||||
showSource: PropTypes.bool,
|
||||
styles: PropTypes.func.isRequired,
|
||||
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
mtrcConf: PropTypes.object
|
||||
}
|
||||
mtrcConf: PropTypes.object,
|
||||
};
|
||||
|
||||
Story.defaultProps = {
|
||||
showInline: false,
|
||||
showHeader: true,
|
||||
showSource: true,
|
||||
mtrcConf: {}
|
||||
}
|
||||
mtrcConf: {},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user