Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table update #44

Merged
merged 2 commits into from
Oct 12, 2015
Merged

Table update #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
633641c
update table component, use on prop types
levithomason Oct 9, 2015
0f6e95c
remove unnecessary markup
levithomason Oct 9, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions docs/app/Component/ComponentDescription.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, {Component, PropTypes} from 'react';
import SEMANTIC_TYPES from 'docs/app/utils/SemanticTypes';
import STARDUST_TYPES from 'docs/app/utils/StardustTypes';
import {Segment} from 'stardust';

class ComponentDescription extends Component {
export default class ComponentDescription extends Component {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating old export syntax to our new standard.

static propTypes = {
/**
* String describing the Stardust component.
Expand Down Expand Up @@ -48,7 +49,7 @@ class ComponentDescription extends Component {
</a>
);
return (
<div>
<Segment className='basic vertical'>
<div className='ui large header'>
{_.capitalize(this.props.name)}
<code className='sub header' style={{float: 'right'}}>
Expand All @@ -59,9 +60,7 @@ class ComponentDescription extends Component {
</code>
</div>
{this.isSemanticComponent && semanticDocsLink}
</div>
</Segment>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ComponentDescription is the top section of every component doc section. It is now a basic segment so that it has a bottom margin. This is needed to keep whitespace between the header and prop types table.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ComponentDescription is the top section of every component doc section. It is now a basic segment so that it has a bottom whitespace. This is needed to keep whitespace between the header and prop types table segment.

);
}
}

export default ComponentDescription;
2 changes: 1 addition & 1 deletion docs/app/Component/ComponentList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class ComponentList extends Component {
.map(name => {
let doc = new ComponentDoc(name);
return (
<Segment key={doc.name} id={doc.name} className='vertical'>
<Segment key={doc.name} id={doc.name}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the vertical class so each component segment is the default style. Gives depth separation between component doc sections:

image

<ComponentDescription
path={doc.path}
name={doc.name}
Expand Down
70 changes: 35 additions & 35 deletions docs/app/Component/ComponentProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import _ from 'lodash';
import React, {Component, PropTypes} from 'react';
import {Segment} from 'stardust';
import {Segment, Table, TableColumn} from 'stardust';

/**
* Displays a table of a Component's PropTypes.
Expand All @@ -14,13 +14,27 @@ export default class ComponentProps extends Component {
props: PropTypes.object
};

nameRenderer(item) {
let required = item.required && <span className='ui mini red circular label'>required</span>;
return <div>{item.name} {required}</div>;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The name column also includes a required label, if the prop is required.


defaultValueRenderer(item) {
let defaultValue = _.get(item, 'defaultValue.value');
let defaultIsComputed = <span className='ui mini gray circular label'>computed</span>;

return (
<div>
{defaultValue} {_.get(item, 'defaultValue.computed') && defaultIsComputed}
</div>
);
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Default Value column includes a computed label if the prop value is computed from a function.


render() {
var propsDefinition = this.props.props;
var content = _.map(propsDefinition, (propConfig, propName) => {
let name = propName;
let defaultValue;
let defaultIsComputed;
let description = propConfig.docBlock;
let description = _.get(propConfig, 'docBlock.description');

let type = _.get(propConfig, 'type.name');
let value = _.get(propConfig, 'type.value');
Expand All @@ -29,42 +43,28 @@ export default class ComponentProps extends Component {
}
type = type && `{${type}}`;

let required = propConfig.required && (
<span className='ui mini red circular label'>required</span>
);

// default value
if (propConfig.defaultValue) {
defaultValue = (
<span>{propConfig.defaultValue.value}</span>
);
defaultIsComputed = propConfig.defaultValue.computed && (
<span className='ui mini gray circular label'>computed</span>
);
}
let required = propConfig.required;
let defaultValue = propConfig.defaultValue;

return (
<div key={propName}>
<div style={{display: 'flex'}}>
<div style={{flex: '4'}}>{name} {required}</div>
<div style={{flex: '2'}}>{type}</div>
<div style={{flex: '4'}}>{defaultValue} {defaultIsComputed}</div>
<div style={{flex: '8'}}>{description}</div>
</div>
</div>
);
return {
name,
type,
value,
required,
defaultValue,
description,
};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now return an array of objects describing each property. The table will use this array of PropType objects creating a row for every object.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

});

return (
<Segment className='basic vertical'>
<Segment className='vertical'>
<div className='ui header'>Props</div>
<div style={{display: 'flex'}}>
<b style={{flex: '4'}}>name</b>
<b style={{flex: '2'}}>type</b>
<b style={{flex: '4'}}>default</b>
<b style={{flex: '8'}}>description</b>
</div>
{content}
<Table data={content} className='very basic'>
<TableColumn dataKey='name' cellRenderer={this.nameRenderer} />
<TableColumn dataKey='type' />
<TableColumn dataKey='defaultValue' cellRenderer={this.defaultValueRenderer} />
<TableColumn dataKey='description' />
</Table>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is the new PropTypes table, each column uses some key from each object in the array of PropTypes. Columns with renderer functions (defined above) are combining multiple properties (like name and required) into a single column.

</Segment>
);
}
Expand Down
5 changes: 2 additions & 3 deletions docs/app/Style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ const style = {};
let sidebarWidth = 200;

style.container = {
display: 'flex',
};

style.menu = {
Expand All @@ -16,9 +15,9 @@ style.menu = {
};

style.main = {
flex: '1 0 auto',
marginLeft: sidebarWidth,
minWidth: 700,
minWidth: sidebarWidth + 300,
maxWidth: sidebarWidth + 900,
};

export default style;
15 changes: 4 additions & 11 deletions src/collections/Table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import TableHeader from './TableHeader';
import TableRow from './TableRow';
import TableCell from './TableCell';

class Table extends Component {
export default class Table extends Component {
static propTypes = {
basic: PropTypes.bool,
children: function(props, propName, componentName) {
Expand All @@ -20,8 +20,8 @@ class Table extends Component {
return new Error('`Table` must only have `TableColumn` children.');
}
},
className: PropTypes.string,
data: PropTypes.array.isRequired,
striped: PropTypes.bool,
};

static getSafeCellContents(content) {
Expand Down Expand Up @@ -65,16 +65,11 @@ class Table extends Component {
let classes = classNames(
'sd-table',
'ui',
{'very basic': this.props.basic},
'selectable',
'fixed',
'compact',
'small',
{striped: this.props.striped},
this.props.className,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Table now inherits classes.

'table',
);
return (
<table className={classes}>
<table {...this.props} className={classes}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Table also now spreads props.

<thead>
<tr>
{this._getHeaders()}
Expand All @@ -87,5 +82,3 @@ class Table extends Component {
);
}
}

export default Table;