Hide remote label when user-provided URL includes remote
@@ -36,6 +36,7 @@ type State = {
remote: Remote
hint: Option<string>
repo: Option<string>
+ input: string,
}
export class RepoSelector extends React.Component<RepoSelectorProps, State> {
@@ -43,6 +44,7 @@ export class RepoSelector extends React.Component<RepoSelectorProps, State> {
remote: { type: 'None' },
hint: new None(),
repo: new None(),
+ input: '',
};
componentDidMount () {
@@ -64,6 +66,12 @@ export class RepoSelector extends React.Component<RepoSelectorProps, State> {
.exhaustive()
}
+ isLabelVisible = () => {
+ return match(this.state.remote)
+ .with({ type: 'Some', value: when((v) => this.state.input.startsWith(v)) }, () => false )
+ .otherwise(() => true)
+ }
+
getHint = () => {
return this.state.hint.isEmpty() ? false : <div className={'repo-selector-hint'}>
{this.state.hint.getOrElse('')}
@@ -106,6 +114,7 @@ export class RepoSelector extends React.Component<RepoSelectorProps, State> {
this.setState({
hint: hint,
repo: repo,
+ input: e.target.value,
})
})
.with({ type: 'None' }, () => {
@@ -133,9 +142,11 @@ export class RepoSelector extends React.Component<RepoSelectorProps, State> {
return <div>
<h3>Select repo</h3>
<div className={'repo-selector-repo'}>
+ { this.isLabelVisible() &&
<span className={'repo-selector-status-label'}>
{this.getStatus()}
</span>
+ }
<input
type={'text'}
className={'repo-selector-input ui-input'}
