diff --git a/lib/gui/app/components/file-selector/file-selector/file-selector.jsx b/lib/gui/app/components/file-selector/file-selector/file-selector.jsx
index 6474f61a..04c33110 100644
--- a/lib/gui/app/components/file-selector/file-selector/file-selector.jsx
+++ b/lib/gui/app/components/file-selector/file-selector/file-selector.jsx
@@ -53,6 +53,7 @@ const Flex = styled.div`
align-items: ${ props => props.alignItems };
flex-wrap: ${ props => props.wrap };
flex-grow: ${ props => props.grow };
+ overflow: ${ props => props.overflow };
`
const Header = Flex.extend`
@@ -72,21 +73,54 @@ const Footer = Flex.extend`
> * {
margin: 0 10px;
}
+
+ > button {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+`
+
+class UnstyledFilePath extends React.PureComponent {
+ render () {
+ return (
+
+ {
+ this.props.file && !this.props.file.isDirectory
+ ? this.props.file.basename
+ : ''
+ }
+
+ )
+ }
+}
+
+const FilePath = styled(UnstyledFilePath)`
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ overflow: hidden;
+
+ > span {
+ font-size: 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
`
class FileSelector extends React.PureComponent {
constructor (props) {
super(props)
- this.highlighted = null
this.state = {
path: props.path,
+ highlighted: null,
files: [],
}
}
confirmSelection () {
- if (this.highlighted) {
- this.selectFile(this.highlighted)
+ if (this.state.highlighted) {
+ this.selectFile(this.state.highlighted)
}
}
@@ -192,7 +226,7 @@ class FileSelector extends React.PureComponent {
}
onHighlight (file) {
- this.highlighted = file
+ this.setState({ highlighted: file })
}
render () {
@@ -205,7 +239,7 @@ class FileSelector extends React.PureComponent {
{/**/}
-
+