@@ -13,8 +13,13 @@ export default class BaseLayout extends React.Component { | |||||
getComponent: PropTypes.func.isRequired | getComponent: PropTypes.func.isRequired | ||||
} | } | ||||
onFilterChange =(e) => { | |||||
let {target: {value}} = e | |||||
this.props.layoutActions.updateFilter(value) | |||||
} | |||||
render() { | render() { | ||||
let { specSelectors, specActions, getComponent } = this.props | |||||
let { specSelectors, specActions, getComponent, layoutSelectors } = this.props | |||||
let info = specSelectors.info() | let info = specSelectors.info() | ||||
let url = specSelectors.url() | let url = specSelectors.url() | ||||
@@ -31,6 +36,15 @@ export default class BaseLayout extends React.Component { | |||||
let Row = getComponent("Row") | let Row = getComponent("Row") | ||||
let Col = getComponent("Col") | let Col = getComponent("Col") | ||||
let Errors = getComponent("errors", true) | let Errors = getComponent("errors", true) | ||||
let isLoading = specSelectors.loadingStatus() === "loading" | |||||
let isFailed = specSelectors.loadingStatus() === "failed" | |||||
let filter = layoutSelectors.currentFilter() | |||||
let inputStyle = {} | |||||
if(isFailed) inputStyle.color = "red" | |||||
if(isLoading) inputStyle.color = "#aaa" | |||||
const Schemes = getComponent("schemes") | const Schemes = getComponent("schemes") | ||||
const isSpecEmpty = !specSelectors.specStr() | const isSpecEmpty = !specSelectors.specStr() | ||||
@@ -57,6 +71,7 @@ export default class BaseLayout extends React.Component { | |||||
{ schemes && schemes.size ? ( | { schemes && schemes.size ? ( | ||||
<Schemes schemes={ schemes } specActions={ specActions } /> | <Schemes schemes={ schemes } specActions={ specActions } /> | ||||
) : null } | ) : null } | ||||
{ securityDefinitions ? ( | { securityDefinitions ? ( | ||||
<AuthorizeBtn /> | <AuthorizeBtn /> | ||||
) : null } | ) : null } | ||||
@@ -64,6 +79,15 @@ export default class BaseLayout extends React.Component { | |||||
</div> | </div> | ||||
) : null } | ) : null } | ||||
{ | |||||
filter === null || filter === false ? null : | |||||
<div className="filter-container"> | |||||
<Col className="filter wrapper" mobile={12}> | |||||
<input className="operation-filter-input" placeholder="Filter by tag" type="text" onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter} disabled={isLoading} style={inputStyle} /> | |||||
</Col> | |||||
</div> | |||||
} | |||||
<Row> | <Row> | ||||
<Col mobile={12} desktop={12} > | <Col mobile={12} desktop={12} > | ||||
<Operations/> | <Operations/> | ||||
@@ -7,7 +7,6 @@ import Logo from "./logo_small.png" | |||||
export default class Topbar extends React.Component { | export default class Topbar extends React.Component { | ||||
static propTypes = { | static propTypes = { | ||||
layoutSelectors: PropTypes.object.isRequired, | |||||
layoutActions: PropTypes.object.isRequired | layoutActions: PropTypes.object.isRequired | ||||
} | } | ||||
@@ -91,13 +90,12 @@ export default class Topbar extends React.Component { | |||||
} | } | ||||
render() { | render() { | ||||
let { getComponent, specSelectors, getConfigs, layoutSelectors } = this.props | |||||
let { getComponent, specSelectors, getConfigs } = this.props | |||||
const Button = getComponent("Button") | const Button = getComponent("Button") | ||||
const Link = getComponent("Link") | const Link = getComponent("Link") | ||||
let isLoading = specSelectors.loadingStatus() === "loading" | let isLoading = specSelectors.loadingStatus() === "loading" | ||||
let isFailed = specSelectors.loadingStatus() === "failed" | let isFailed = specSelectors.loadingStatus() === "failed" | ||||
let filter = layoutSelectors.currentFilter() | |||||
let inputStyle = {} | let inputStyle = {} | ||||
if(isFailed) inputStyle.color = "red" | if(isFailed) inputStyle.color = "red" | ||||
@@ -135,10 +133,6 @@ export default class Topbar extends React.Component { | |||||
<img height="30" width="30" src={ Logo } alt="Swagger UX"/> | <img height="30" width="30" src={ Logo } alt="Swagger UX"/> | ||||
<span>swagger</span> | <span>swagger</span> | ||||
</Link> | </Link> | ||||
{ | |||||
filter === null || filter === false ? null : | |||||
<input className="operation-filter-input" placeholder="filter..." type="text" onChange={this.onFilterChange} value={filter === true ? "" : filter} disabled={isLoading} style={inputStyle} /> | |||||
} | |||||
<form className="download-url-wrapper" onSubmit={formOnSubmit}> | <form className="download-url-wrapper" onSubmit={formOnSubmit}> | ||||
{control} | {control} | ||||
</form> | </form> | ||||
@@ -327,6 +327,18 @@ body | |||||
} | } | ||||
} | } | ||||
.filter | |||||
{ | |||||
.operation-filter-input | |||||
{ | |||||
width: 100%; | |||||
margin: 20px 0; | |||||
padding: 10px 10px; | |||||
border: 2px solid #d8dde7; | |||||
} | |||||
} | |||||
.tab | .tab | ||||
{ | { | ||||
@@ -29,12 +29,6 @@ | |||||
padding: 0 10px; | padding: 0 10px; | ||||
} | } | ||||
} | } | ||||
.operation-filter-input | |||||
{ | |||||
border: 2px solid #547f00; | |||||
border-right: none; | |||||
border-radius: 4px 0 0 4px; | |||||
} | |||||
.download-url-wrapper | .download-url-wrapper | ||||
{ | { | ||||
@@ -49,7 +43,6 @@ | |||||
margin: 0; | margin: 0; | ||||
border: 2px solid #547f00; | border: 2px solid #547f00; | ||||
border-radius: 0 0 0 0; | |||||
outline: none; | outline: none; | ||||
} | } | ||||