Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Further fixes to RM #3853

Merged
merged 4 commits into from
Jun 24, 2020
Merged

Further fixes to RM #3853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf61f9f
Downgrade react-dropzone
donker Jun 24, 2020
22cd992
Fix dropzone
donker Jun 24, 2020
482116f
Improve package description, icon and owner
donker Jun 24, 2020
9e22f30
Update DNN Platform/Modules/ResourceManager/ResourceManager.dnn
donker Jun 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 158 additions & 127 deletions ...tform/Modules/ResourceManager/ResourceManager.Web/app/containers/AssetsPanelContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,145 +13,176 @@ import localizeService from "../services/localizeService.js";
import ReactCSSTransitionGroup from "react-transition-group/CSSTransitionGroup";

class AssetsPanelContainer extends React.Component {
constructor(props) {
super(props);
this.mainContainer = React.createRef();
}
componentWillMount() {
window.addEventListener("scroll", this.handleScroll.bind(this));
}

getDetailsPosition(i) {
const itemWidth = this.props.itemWidth;
const container = this.mainContainer;
const containerWidth = container.clientWidth;
const itemsPerRow = Math.floor(containerWidth / itemWidth);
let position = Math.floor(i / itemsPerRow) * itemsPerRow + itemsPerRow - 1;

return position;
}

getDetailsPanel(showPanel, i) {
return <ReactCSSTransitionGroup key={"item-details-" + i}
transitionName="dnn-slide-in-out"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
transitionLeave={!showPanel}>
{showPanel && <ItemDetailsContainer />}
</ReactCSSTransitionGroup>;
}

handleScroll() {
const {folderPanelState, loadContent, searchFiles} = this.props;
const {totalCount, loadedItems, search, loading} = folderPanelState;

const bodyHeight = document.body.offsetHeight;
const windowHeight = window.innerHeight;
const totalScrolled = window.pageYOffset;
const scrollMax = bodyHeight - windowHeight;

if ((loadedItems < totalCount) && (totalScrolled+100 > scrollMax)) {
if (!loading) {
this.setState({
loadingFlag:true
});

if (search) {
searchFiles(folderPanelState, search, true);
}
else {
loadContent(folderPanelState);
}
}
constructor(props) {
super(props);
this.mainContainer = React.createRef();
}
componentWillMount() {
window.addEventListener("scroll", this.handleScroll.bind(this));
}

getDetailsPosition(i) {
const itemWidth = this.props.itemWidth;
const container = this.mainContainer;
const containerWidth = container.clientWidth;
const itemsPerRow = Math.floor(containerWidth / itemWidth);
let position = Math.floor(i / itemsPerRow) * itemsPerRow + itemsPerRow - 1;

return position;
}

getDetailsPanel(showPanel, i) {
return (
<ReactCSSTransitionGroup
key={"item-details-" + i}
transitionName="dnn-slide-in-out"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
transitionLeave={!showPanel}
>
{showPanel && <ItemDetailsContainer />}
</ReactCSSTransitionGroup>
);
}

handleScroll() {
const { folderPanelState, loadContent, searchFiles } = this.props;
const { totalCount, loadedItems, search, loading } = folderPanelState;

const bodyHeight = document.body.offsetHeight;
const windowHeight = window.innerHeight;
const totalScrolled = window.pageYOffset;
const scrollMax = bodyHeight - windowHeight;

if (loadedItems < totalCount && totalScrolled + 100 > scrollMax) {
if (!loading) {
this.setState({
loadingFlag: true,
});

if (search) {
searchFiles(folderPanelState, search, true);
} else {
loadContent(folderPanelState);
}
}
}
}

render() {
const {
items,
itemEditing,
search,
itemContainerDisabled,
loading,
} = this.props;
let propsPosition = -1;

let result = [];
for (let i = 0; i < items.length; i++) {
const item = items[i];
const { itemId, itemName, isFolder } = item;
result.push(<Item key={itemId + itemName} item={item} />);

if (
itemEditing &&
((isFolder && itemEditing.folderId === itemId) ||
(!isFolder && itemEditing.fileId === itemId))
) {
propsPosition = this.getDetailsPosition(i);
}

let showPanel =
i === propsPosition ||
(propsPosition >= items.length && i === items.length - 1);
result.push(this.getDetailsPanel(showPanel, i));
}

render() {
const { items, itemEditing, search, itemContainerDisabled, loading } = this.props;
let propsPosition = -1;

let result = [];
for (let i = 0; i<items.length; i++)
{
const item = items[i];
const {itemId, itemName, isFolder} = item;
result.push(<Item key={itemId + itemName} item={item} />);

if (itemEditing &&
((isFolder && itemEditing.folderId === itemId) ||
(!isFolder && itemEditing.fileId === itemId))) {
propsPosition = this.getDetailsPosition(i);
}

let showPanel = i === propsPosition || (propsPosition >= items.length && i === items.length-1);
result.push(this.getDetailsPanel(showPanel, i));
}

return (
<div id="Assets-panel">
<AssetsHeader />

<div className="assets-body">
<TopBarContainer />

<div ref={c => this.mainContainer = c} className={"main-container" + (loading ? " loading" : "")}>
<AddFolderPanelContainer />
<AddAssetPanelContainer />

<div className={ "item-container" + (search ? " rm_search" : "") + (!items.length ? " empty" : "") + (itemContainerDisabled ? " disabled" : "") }>
{ result }

<div className="empty-label rm_search">
<span className="empty-title">{ localizeService.getString("AssetsPanelNoSearchResults") }</span>
</div>
<div className="empty-label rm-folder">
<span className="empty-title">{ localizeService.getString("AssetsPanelEmpty_Title") }</span>
<span className="empty-subtitle">{ localizeService.getString("AssetsPanelEmpty_Subtitle") }</span>
</div>
</div>
</div>
</div>
return (
<div id="Assets-panel" onClick={(e) => e.stopPropagation()}>
<AssetsHeader />
<div className="assets-body">
<TopBarContainer />
<div
ref={(c) => (this.mainContainer = c)}
className={"main-container" + (loading ? " loading" : "")}
>
<AddFolderPanelContainer />
<AddAssetPanelContainer />
<div
className={
"item-container" +
(search ? " rm_search" : "") +
(!items.length ? " empty" : "") +
(itemContainerDisabled ? " disabled" : "")
}
>
{result}
<div className="empty-label rm_search">
<span className="empty-title">
{localizeService.getString("AssetsPanelNoSearchResults")}
</span>
</div>
<div className="empty-label rm-folder">
<span className="empty-title">
{localizeService.getString("AssetsPanelEmpty_Title")}
</span>
<span className="empty-subtitle">
{localizeService.getString("AssetsPanelEmpty_Subtitle")}
</span>
</div>
</div>
);
}
</div>
</div>
</div>
);
}
}

AssetsPanelContainer.propTypes = {
folderPanelState: PropTypes.object,
items: PropTypes.array,
search: PropTypes.string,
itemContainerDisabled: PropTypes.bool,
loading: PropTypes.bool,
itemEditing: PropTypes.object,
itemWidth: PropTypes.number,
loadContent: PropTypes.func,
searchFiles: PropTypes.func
folderPanelState: PropTypes.object,
items: PropTypes.array,
search: PropTypes.string,
itemContainerDisabled: PropTypes.bool,
loading: PropTypes.bool,
itemEditing: PropTypes.object,
itemWidth: PropTypes.number,
loadContent: PropTypes.func,
searchFiles: PropTypes.func,
};

function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({
loadContent: folderPanelActions.loadContent,
searchFiles: folderPanelActions.searchFiles
}, dispatch)
};
return {
...bindActionCreators(
{
loadContent: folderPanelActions.loadContent,
searchFiles: folderPanelActions.searchFiles,
},
dispatch
),
};
}

function mapStateToProps(state) {
const folderPanelState = state.folderPanel;
const addFolderPanelState = state.addFolderPanel;
const addAssetPanelState = state.addAssetPanel;
const itemDetailsState = state.itemDetails;

return {
folderPanelState,
items: folderPanelState.items || [],
search: folderPanelState.search,
itemContainerDisabled: addFolderPanelState.expanded || addAssetPanelState.expanded,
loading: folderPanelState.loading,
itemEditing: itemDetailsState.itemEditing,
itemWidth: folderPanelState.itemWidth
};
const folderPanelState = state.folderPanel;
const addFolderPanelState = state.addFolderPanel;
const addAssetPanelState = state.addAssetPanel;
const itemDetailsState = state.itemDetails;

return {
folderPanelState,
items: folderPanelState.items || [],
search: folderPanelState.search,
itemContainerDisabled:
addFolderPanelState.expanded || addAssetPanelState.expanded,
loading: folderPanelState.loading,
itemEditing: itemDetailsState.itemEditing,
itemWidth: folderPanelState.itemWidth,
};
}

export default connect(mapStateToProps, mapDispatchToProps)(AssetsPanelContainer);
export default connect(
mapStateToProps,
mapDispatchToProps
)(AssetsPanelContainer);
4 changes: 0 additions & 4 deletions ...Platform/Modules/ResourceManager/ResourceManager.Web/app/containers/DropZoneContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,8 @@ class DropZoneContainer extends React.Component {

render() {
const { hasPermission, style, activeStyle, className } = this.props;

return hasPermission ? (
<DropZone
onClick={(e) => {
if (this.props.disableClick) e.preventDefault();
}}
style={style}
activeStyle={activeStyle}
className={className}
Expand Down
2 changes: 1 addition & 1 deletion DNN Platform/Modules/ResourceManager/ResourceManager.Web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"raw-loader": "2.0.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-dropzone": "^8.2.0",
"react-dropzone": "6.2.4",
"react-height": "^3.0.1",
"react-hot-loader": "4.8.5",
"react-modal": "^3.5.1",
Expand Down
14 changes: 7 additions & 7 deletions DNN Platform/Modules/ResourceManager/ResourceManager.dnn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<packages>
<package name="ResourceManager" type="Module" version="09.06.00">
<friendlyName>Resource Manager</friendlyName>
<description>DNN Software, Inc. ResourceManager module</description>
<iconFile>~/Images/icon_extensions_32px.png</iconFile>
<description>This module allows you to manage files on the server</description>
<iconFile>~/Images/icon_filemanager_32px.gif</iconFile>
<owner>
<name>DNN Software, Inc.</name>
<organization>DNN Software, Inc.</organization>
<url>http://www.dnnsoftware.com</url>
<email>[email protected]</email>
<name>DNN</name>
<organization>.NET Foundation</organization>
<url>https://dnncommunity.org</url>
<email>[email protected]</email>
</owner>
<license src="License.txt"></license>
<releaseNotes src="ReleaseNotes.txt"></releaseNotes>
Expand Down Expand Up @@ -86,4 +86,4 @@
</components>
</package>
</packages>
</dotnetnuke>
</dotnetnuke>
Loading