kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabs added

Browse Source
This commit is contained in:
Minasokoni
2017-05-26 07:43:02 -07:00
parent 128b910d58
commit 66321c8f66
5 changed files with 122 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/swagger-ui.css vendored
View File

File diff suppressed because one or more lines are too long

18
dist/swagger-ui.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/swagger-ui.js.map vendored
View File

@@ -1 +1 @@
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA21CA;AAoyHA;AAmyHA;AAokGA;AA+9BA;AA0hCA;AAgjCA;AAu5BA","sourceRoot":""}
{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAm2CA;AAoyHA;AAmyHA;AAokGA;AA89BA;AAwhCA;AA2kCA;AAu5BA","sourceRoot":""}

84
src/core/components/parameters.jsx
View File

@@ -7,6 +7,15 @@ const eachMap = (iterable, fn) => iterable.valueSeq().filter(Im.Map.isMap).map(f
export default class Parameters extends Component {
constructor(props) {
super(props)
this.state = {
callbackVisible: false,
parametersVisible: true
}
//this.toggleTab = this.toggleTab.bind(this)
}
static propTypes = {
parameters: ImPropTypes.list.isRequired,
specActions: PropTypes.object.isRequired,
@@ -48,6 +57,14 @@ export default class Parameters extends Component {
changeConsumesValue(onChangeKey, val)
}
// toggleTab = (tab) => {
// if(tab === "parameters"){
// this.setState({parametersVisible: true})
// }else if(tab === "callbacks"){
// this.setState({callbackVisible: true})
// }
// }
render(){
let {
@@ -71,38 +88,49 @@ export default class Parameters extends Component {
return (
<div className="opblock-section">
<div className="opblock-section-header">
<h4 className="opblock-title">Parameters</h4>
<div className="tab-header">
<div onClick={this.toggleTab("parameters")} className={this.state.parametersVisible ? "tab-item active" : "tab-item"}>
<h4 className="opblock-title"><span>Parameters</span></h4>
</div>
<div onClick={this.toggleTab("callbacks")} className="tab-item">
<h4 className="opblock-title"><span>Callbacks</span></h4>
</div>
</div>
{ allowTryItOut ? (
<TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
) : null }
</div>
{ !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
<div className="table-container">
<table className="parameters">
<thead>
<tr>
<th className="col col_header parameters-col_name">Name</th>
<th className="col col_header parameters-col_description">Description</th>
</tr>
</thead>
<tbody>
{
eachMap(parameters, (parameter) => (
<ParameterRow fn={ fn }
getComponent={ getComponent }
param={ parameter }
key={ parameter.get( "name" ) }
onChange={ this.onChange }
onChangeConsumes={this.onChangeConsumesWrapper}
specSelectors={ specSelectors }
pathMethod={ pathMethod }
isExecute={ isExecute }/>
)).toArray()
}
</tbody>
</table>
</div>
}
{this.state.parametersVisible ? <div className="parameters-container">
{ !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
<div className="table-container">
<table className="parameters">
<thead>
<tr>
<th className="col col_header parameters-col_name">Name</th>
<th className="col col_header parameters-col_description">Description</th>
</tr>
</thead>
<tbody>
{
eachMap(parameters, (parameter) => (
<ParameterRow fn={ fn }
getComponent={ getComponent }
param={ parameter }
key={ parameter.get( "name" ) }
onChange={ this.onChange }
onChangeConsumes={this.onChangeConsumesWrapper}
specSelectors={ specSelectors }
pathMethod={ pathMethod }
isExecute={ isExecute }/>
)).toArray()
}
</tbody>
</table>
</div>
}
</div> : "" }
{this.state.callbackVisible ? <div className="callbacks-container"></div> : "" }
</div>
)
}

61
src/style/_layout.scss
View File

@@ -75,6 +75,11 @@ body
{
border-color: $color;
}
.tab-header .tab-item.active h4 span:after
{
background: $color;
}
}
@@ -142,6 +147,51 @@ body
border-radius: 4px;
box-shadow: 0 0 3px rgba(#000,.19);
.tab-header
{
display: flex;
flex: 1;
.tab-item
{
padding: 0 40px;
cursor: pointer;
&:first-of-type
{
padding: 0 40px 0 0;
}
&.active
{
h4
{
span
{
position: relative;
&:after
{
position: absolute;
bottom: -15px;
left: 50%;
width: 120%;
height: 4px;
content: '';
transform: translateX(-50%);
background: #888;
}
}
}
}
}
}
&.is-open
{
@@ -186,7 +236,6 @@ body
margin: 0;
flex: 1;
@include text_headline();
}
}
@@ -310,12 +359,12 @@ body
.opblock-schemes
{
padding: 8px 20px;
padding: 8px 20px;
.schemes-title
{
padding: 0 10px 0 0;
}
.schemes-title
{
padding: 0 10px 0 0;
}
}
}