diff --git a/package.json b/package.json index ad870740d597..0bd3d2d71860 100644 --- a/package.json +++ b/package.json @@ -162,6 +162,7 @@ "unified": "^6.1.4", "unist-builder": "^1.0.2", "unist-util-visit-parents": "^1.1.1", + "url": "^0.11.0", "uuid": "^2.0.3", "whatwg-fetch": "^1.0.0" }, diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index 9ba52e16972a..6dfdfa030f30 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -32,7 +32,7 @@ export function insertMedia(mediaPath) { return { type: MEDIA_INSERT, payload: { mediaPath } }; } -export function loadMedia(delay = 0) { +export function loadMedia(delay = 0, query) { return (dispatch, getState) => { const state = getState(); const backend = currentBackend(state.config); @@ -40,8 +40,8 @@ export function loadMedia(delay = 0) { if (integration) { const provider = getIntegrationProvider(state.integrations, backend.getToken, integration); dispatch(mediaLoading()); - return provider.retrieve() - .then(files => dispatch(mediaLoaded(files))) + return provider.retrieve(query) + .then(files => dispatch(mediaLoaded(files, true))) .catch(error => dispatch(mediaLoadFailed())); } dispatch(mediaLoading()); @@ -128,10 +128,10 @@ export function mediaLoading() { return { type: MEDIA_LOAD_REQUEST }; } -export function mediaLoaded(files) { +export function mediaLoaded(files, dynamicSearch) { return { type: MEDIA_LOAD_SUCCESS, - payload: { files } + payload: { files, dynamicSearch } }; } diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index 1789a00f455d..26f2f1a874c1 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -26,7 +26,7 @@ class MediaLibrary extends React.Component { componentDidMount() { const { dispatch, closeMediaLibrary } = this.props; - dispatch(loadMedia()); + dispatch(loadMedia(0, this.state.query)); } componentWillReceiveProps(nextProps) { @@ -113,7 +113,7 @@ class MediaLibrary extends React.Component { const files = [...fileList]; const file = files[0]; return dispatch(persistMedia(file, privateUpload)) - .then(() => dispatch(loadMedia())); + .then(() => dispatch(0, loadMedia(this.state.query))); }; handleInsert = () => { @@ -138,7 +138,13 @@ class MediaLibrary extends React.Component { }); }; - handleSearch = event => { + handleSearchKeyDown = (event, dynamicSearch) => { + if (event.key === 'Enter' && dynamicSearch) { + this.props.dispatch(loadMedia(0, this.state.query)); + } + }; + + handleSearchChange = event => { this.setState({ query: event.target.value }); }; @@ -191,10 +197,10 @@ class MediaLibrary extends React.Component { }; render() { - const { isVisible, canInsert, files, forImage, isLoading, isPersisting, isDeleting } = this.props; + const { isVisible, canInsert, files, dynamicSearch, forImage, isLoading, isPersisting, isDeleting } = this.props; const { query, selectedFile } = this.state; const filteredFiles = forImage ? this.filterImages(files) : files; - const queriedFiles = query ? this.queryFilter(query, filteredFiles) : filteredFiles; + const queriedFiles = query && !dynamicSearch ? this.queryFilter(query, filteredFiles) : filteredFiles; const tableData = this.toTableData(queriedFiles); const hasFiles = files && !!files.length; const hasImages = filteredFiles && !!filteredFiles.length; @@ -227,7 +233,15 @@ class MediaLibrary extends React.Component { footer={footer} >