IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

Browse Source 
# Conflicts:
#	products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js
#	products/ASC.Files/Client/src/components/Article/Body/index.js
This commit is contained in:
Alexey Safronov 2020-09-11 22:30:09 +03:00
commit 8045eecf1b
40 changed files with 438 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js
View File

@ -265,7 +265,7 @@ class TreeFolders extends React.Component {
};
onLoadData = treeNode => {
this.props.onLoading(true);
this.props.setIsLoading(true);
//console.log("load data...", treeNode);
return this.generateTreeNodes(treeNode)
@ -280,7 +280,7 @@ class TreeFolders extends React.Component {
this.setState({ treeData });
})
.catch(err => toastr.error(err))
.finally(() => this.props.onLoading(false));
.finally(() => this.props.setIsLoading(false));
};
onExpand = (data, treeNode) => {

8
products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js
View File

@ -109,7 +109,7 @@ const PureTreeSettings = props => {
);
};
const { selectedTreeNode, expandedSetting } = props;
const { selectedTreeNode, expandedSetting, isLoading } = props;
const nodes = renderTreeNode();
return (
@ -117,6 +117,7 @@ const PureTreeSettings = props => {
expandedKeys={expandedSetting}
selectedKeys={selectedTreeNode}
defaultExpandParent={false}
disabled={isLoading}
className="settings-tree-menu"
switcherIcon={switcherIcon}
onSelect={onSelect}
@ -142,7 +143,7 @@ const TreeSettings = props => {
};
function mapStateToProps(state) {
const { selectedTreeNode, settingsTree } = state.files;
const { selectedTreeNode, settingsTree, isLoading } = state.files;
const { isAdmin } = state.auth.user;
@ -152,7 +153,8 @@ function mapStateToProps(state) {
selectedTreeNode,
expandedSetting,
enableThirdParty,
isAdmin
isAdmin,
isLoading
};
}

20
products/ASC.Files/Client/src/components/Article/Body/index.js
View File

@ -26,8 +26,8 @@ class ArticleBodyContent extends React.Component {
const { organizationName, selectedFolderTitle, currentModuleName } = props;
document.title = selectedFolderTitle
? `${selectedFolderTitle} – ${currentModuleName}`
: `${currentModuleName} – ${organizationName}`;
? `${selectedFolderTitle} – ${currentModuleName}`
: `${currentModuleName} – ${organizationName}`;
this.state = {
expandedKeys: this.props.filter.treeFolders,
@ -88,8 +88,8 @@ class ArticleBodyContent extends React.Component {
(e.node && e.node.props && e.node.props.title) || null;
document.title = selectedFolderTitle
? `${selectedFolderTitle} – ${currentModuleName}`
: `${currentModuleName} – ${organizationName}`;
? `${selectedFolderTitle} – ${currentModuleName}`
: `${currentModuleName} – ${organizationName}`;
fetchFiles(data[0], newFilter, store.dispatch)
.catch(err => toastr.error(err))
@ -118,8 +118,6 @@ class ArticleBodyContent extends React.Component {
filter,
setFilter,
setTreeFolders,
setIsLoading,
isLoading,
dragging,
setDragItem,
isMy,
@ -131,7 +129,8 @@ class ArticleBodyContent extends React.Component {
isShare,
setDragging,
onTreeDrop,
selectedTreeNode
selectedTreeNode,
setIsLoading
} = this.props;
const { showNewFilesPanel, expandedKeys, newFolderId } = this.state;
@ -144,11 +143,10 @@ class ArticleBodyContent extends React.Component {
visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel}
setNewFilesCount={this.setNewFilesCount}
onLoading={setIsLoading}
folderId={newFolderId}
treeFolders={data}
setTreeFolders={setTreeFolders}
setIsLoading={setIsLoading}
//setNewItems={this.setNewItems}
/>
)}
@ -160,8 +158,6 @@ class ArticleBodyContent extends React.Component {
setFilter={setFilter}
setTreeFolders={setTreeFolders}
expandedKeys={expandedKeys}
onLoading={setIsLoading}
isLoading={isLoading}
dragging={dragging}
setDragging={setDragging}
setDragItem={setDragItem}
@ -194,7 +190,6 @@ function mapStateToProps(state) {
selection,
dragging,
updateTreeNew,
isLoading,
selectedTreeNode
} = state.files;
@ -241,7 +236,6 @@ function mapStateToProps(state) {
selection,
dragging,
updateTreeNew,
isLoading,
selectedTreeNode: selected,
currentModuleName: (currentModule && currentModule.title) || "",
selectedFolderTitle: (selectedFolder && selectedFolder.title) || ""

5
products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
View File

@ -263,11 +263,12 @@ const DeleteDialog = props => (
);
const mapStateToProps = state => {
const { selectedFolder, filter, treeFolders } = state.files;
const { selectedFolder, filter, treeFolders, isLoading } = state.files;
return {
currentFolderId: selectedFolder.id,
filter,
treeFolders
treeFolders,
isLoading
};
};

1
products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
View File

@ -6,6 +6,7 @@ import { api, utils } from "asc-web-common";
import { fetchFiles, clearProgressData } from "../../../store/files/actions";
import store from "../../../store/store";
import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({
page: "EmptyTrashDialog",
localesPath: "dialogs/EmptyTrashDialog"

94
products/ASC.Files/Client/src/components/pages/Home/Section/Body/EditingWrapperComponent.js
View File

@ -1,4 +1,4 @@
import React, { memo, useState } from "react";
import React, { memo } from "react";
import styled from "styled-components";
import { TextInput, Button } from "asc-web-components";
@ -39,59 +39,55 @@ const EditingWrapper = styled.div`
`;
const EditingWrapperComponent = props => {
const { itemTitle, itemId, okIcon, cancelIcon, renameTitle, onClickUpdateItem, cancelUpdateItem } = props;
const [loading, setLoading] = useState(false);
const { itemTitle, itemId, okIcon, cancelIcon, renameTitle, onClickUpdateItem, cancelUpdateItem, isLoading } = props;
const onUpdate = () => {
setLoading(true);
const onUpdate = () => {
onClickUpdateItem();
}
const onCancel = (e) => {
cancelUpdateItem(e);
}
const onKeyUpUpdateItem = e => {
if (e.keyCode === 13) {
onClickUpdateItem();
}
const onCancel = (e) => {
setLoading(true);
cancelUpdateItem(e);
}
if (e.keyCode === 27)
return cancelUpdateItem();
}
const onKeyUpUpdateItem = e => {
if (e.keyCode === 13) {
setLoading(true);
onClickUpdateItem();
}
if (e.keyCode === 27)
return cancelUpdateItem();
}
return(
<EditingWrapper>
<TextInput
className='edit-text'
name='title'
scale={true}
value={itemTitle}
tabIndex={1}
isAutoFocussed={true}
onChange={renameTitle}
onKeyUp={onKeyUpUpdateItem}
isDisabled={loading}
/>
<Button
className='edit-button'
size='medium'
isDisabled={loading}
onClick={onUpdate}
icon={okIcon}
/>
<Button
className='edit-button'
size='medium'
isDisabled={loading}
onClick={onCancel}
icon={cancelIcon}
data-itemid={itemId}
/>
</EditingWrapper>
)
return (
<EditingWrapper>
<TextInput
className='edit-text'
name='title'
scale={true}
value={itemTitle}
tabIndex={1}
isAutoFocussed={true}
onChange={renameTitle}
onKeyUp={onKeyUpUpdateItem}
isDisabled={isLoading}
/>
<Button
className='edit-button'
size='medium'
isDisabled={isLoading}
onClick={onUpdate}
icon={okIcon}
/>
<Button
className='edit-button'
size='medium'
isDisabled={isLoading}
onClick={onCancel}
icon={cancelIcon}
data-itemid={itemId}
/>
</EditingWrapper>
)
}
export default memo(EditingWrapperComponent);

54
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRowContent.js
View File

@ -6,7 +6,7 @@ import { withTranslation } from "react-i18next";
import styled from "styled-components";
import { RowContent, Link, Text, Icons, IconButton, Badge, toastr } from "asc-web-components";
import { constants, api } from 'asc-web-common';
import { createFile, createFolder, renameFolder, updateFile, fetchFiles, setTreeFolders, setProgressBarData, clearProgressData, setNewTreeFilesBadge, setNewRowItems } from '../../../../../store/files/actions';
import { createFile, createFolder, renameFolder, updateFile, fetchFiles, setTreeFolders, setProgressBarData, clearProgressData, setNewTreeFilesBadge, setNewRowItems, setIsLoading } from '../../../../../store/files/actions';
import { canWebEdit, isImage, isSound, isVideo, canConvert, getTitleWithoutExst } from '../../../../../store/files/selectors';
import store from "../../../../../store/store";
import { NewFilesPanel } from "../../../../panels";
@ -84,46 +84,46 @@ class FilesRowContent extends React.PureComponent {
}
updateItem = (e) => {
const { fileAction, updateFile, renameFolder, item, onLoading } = this.props;
const { fileAction, updateFile, renameFolder, item, setIsLoading } = this.props;
const { itemTitle } = this.state;
const originalTitle = getTitleWithoutExst(item);
onLoading(true);
setIsLoading(true);
if (originalTitle === itemTitle)
return this.completeAction(e);
item.fileExst
? updateFile(fileAction.id, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
: renameFolder(fileAction.id, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false));
.then(() => this.completeAction(e)).finally(() => setIsLoading(false));
};
createItem = (e) => {
const { createFile, createFolder, item, onLoading } = this.props;
const { createFile, createFolder, item, setIsLoading } = this.props;
const { itemTitle } = this.state;
onLoading(true);
setIsLoading(true);
if (itemTitle.trim() === '')
return this.completeAction(e);
!item.fileExst
? createFolder(item.parentId, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
}
componentDidUpdate(prevProps) {
const { fileAction, item, newRowItems, setNewRowItems } = this.props;
const itemId = item.id.toString();
if(newRowItems.length && newRowItems.includes(itemId)) {
if (newRowItems.length && newRowItems.includes(itemId)) {
const rowItems = newRowItems.filter(x => x !== itemId)
if(this.state.newItems !== 0) {
this.setState({newItems: 0}, () => setNewRowItems(rowItems));
if (this.state.newItems !== 0) {
this.setState({ newItems: 0 }, () => setNewRowItems(rowItems));
}
}
@ -151,9 +151,9 @@ class FilesRowContent extends React.PureComponent {
onFilesClick = () => {
const { id, fileExst, viewUrl } = this.props.item;
const { filter, parentFolder, onLoading, onMediaFileClick } = this.props;
const { filter, parentFolder, setIsLoading, onMediaFileClick } = this.props;
if (!fileExst) {
onLoading(true);
setIsLoading(true);
const newFilter = filter.clone();
if (!newFilter.treeFolders.includes(parentFolder.toString())) {
newFilter.treeFolders.push(parentFolder.toString());
@ -162,9 +162,9 @@ class FilesRowContent extends React.PureComponent {
fetchFiles(id, newFilter, store.dispatch)
.catch(err => {
toastr.error(err);
onLoading(false);
setIsLoading(false);
})
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
} else {
if (canWebEdit(fileExst)) {
return window.open(`./doceditor?fileId=${id}`, "_blank");
@ -260,22 +260,22 @@ class FilesRowContent extends React.PureComponent {
this.setState({ showConvertDialog: !this.state.showConvertDialog });
getConvertProgress = fileId => {
const { selectedFolder, filter, onLoading, setProgressBarData, t } = this.props;
const { selectedFolder, filter, setIsLoading, setProgressBarData, t } = this.props;
api.files.getConvertFile(fileId).then(res => {
if (res && res[0] && res[0].progress !== 100) {
setProgressBarData({ visible: true, percent: res[0].progress, label: t("Convert")});
setProgressBarData({ visible: true, percent: res[0].progress, label: t("Convert") });
setTimeout(() => this.getConvertProgress(fileId), 1000);
} else {
if (res[0].error) {
toastr.error(res[0].error);
clearProgressData(store.dispatch);
} else {
setProgressBarData({ visible: true, percent: 100, label: t("Convert")});
setProgressBarData({ visible: true, percent: 100, label: t("Convert") });
setTimeout(() => clearProgressData(), 5000)
const newFilter = filter.clone();
fetchFiles(selectedFolder.id, newFilter, store.dispatch)
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
}
}
});
@ -283,7 +283,7 @@ class FilesRowContent extends React.PureComponent {
onConvert = () => {
const { item, t, setProgressBarData } = this.props;
setProgressBarData({ visible: true, percent: 0, label: t("Convert")});
setProgressBarData({ visible: true, percent: 0, label: t("Convert") });
this.setState({ showConvertDialog: false }, () =>
api.files.convertFile(item.id).then(convertRes => {
if (convertRes && convertRes[0] && convertRes[0].progress !== 100) {
@ -294,7 +294,7 @@ class FilesRowContent extends React.PureComponent {
}
render() {
const { t, item, fileAction, isLoading, isTrashFolder, onLoading, folders, widthProp } = this.props;
const { t, item, fileAction, isTrashFolder, folders, widthProp, isLoading } = this.props;
const { itemTitle, editingId, showNewFilesPanel, newItems, newFolderId, showConvertDialog } = this.state;
const {
contentLength,
@ -321,7 +321,6 @@ class FilesRowContent extends React.PureComponent {
return isEdit
? <EditingWrapperComponent
isLoading={isLoading}
itemTitle={itemTitle}
okIcon={okIcon}
cancelIcon={cancelIcon}
@ -329,6 +328,7 @@ class FilesRowContent extends React.PureComponent {
onClickUpdateItem={this.onClickUpdateItem}
cancelUpdateItem={this.cancelUpdateItem}
itemId={id}
isLoading={isLoading}
/>
: (
<>
@ -343,7 +343,6 @@ class FilesRowContent extends React.PureComponent {
<NewFilesPanel
visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel}
onLoading={onLoading}
folderId={newFolderId}
folders={folders}
/>
@ -509,7 +508,7 @@ class FilesRowContent extends React.PureComponent {
};
function mapStateToProps(state) {
const { filter, fileAction, selectedFolder, treeFolders, folders, newRowItems, dragging } = state.files;
const { filter, fileAction, selectedFolder, treeFolders, folders, newRowItems, dragging, isLoading } = state.files;
const { settings } = state.auth;
const indexOfTrash = 3;
const rootFolderId = selectedFolder.pathParts && selectedFolder.pathParts[0];
@ -526,10 +525,11 @@ function mapStateToProps(state) {
selectedFolder,
folders,
newRowItems,
dragging
dragging,
isLoading
}
}
export default connect(mapStateToProps, { createFile, createFolder, updateFile, renameFolder, setTreeFolders, setProgressBarData, setNewTreeFilesBadge, setNewRowItems })(
export default connect(mapStateToProps, { createFile, createFolder, updateFile, renameFolder, setTreeFolders, setProgressBarData, setNewTreeFilesBadge, setNewRowItems, setIsLoading })(
withRouter(withTranslation()(FilesRowContent))
);

178
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js
View File

@ -6,7 +6,7 @@ import { withTranslation } from "react-i18next";
import styled from "styled-components";
import { Link, Text, Icons, Badge, toastr } from "asc-web-components";
import { constants, api } from 'asc-web-common';
import { createFile, createFolder, renameFolder, updateFile, fetchFiles, setTreeFolders } from '../../../../../store/files/actions';
import { createFile, createFolder, renameFolder, updateFile, fetchFiles, setTreeFolders, setIsLoading } from '../../../../../store/files/actions';
import { canWebEdit, isImage, isSound, isVideo, getTitleWithoutExst } from '../../../../../store/files/selectors';
import store from "../../../../../store/store";
import { NewFilesPanel } from "../../../../panels";
@ -99,36 +99,36 @@ class FilesTileContent extends React.PureComponent {
}
updateItem = (e) => {
const { fileAction, updateFile, renameFolder, item, onLoading } = this.props;
const { fileAction, updateFile, renameFolder, item, setIsLoading } = this.props;
const { itemTitle } = this.state;
const originalTitle = getTitleWithoutExst(item);
onLoading(true);
setIsLoading(true);
if (originalTitle === itemTitle)
return this.completeAction(e);
item.fileExst
? updateFile(fileAction.id, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
: renameFolder(fileAction.id, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false));
.then(() => this.completeAction(e)).finally(() => setIsLoading(false));
};
createItem = (e) => {
const { createFile, createFolder, item, onLoading } = this.props;
const { createFile, createFolder, item, setIsLoading } = this.props;
const { itemTitle } = this.state;
onLoading(true);
setIsLoading(true);
if (itemTitle.trim() === '')
return this.completeAction();
!item.fileExst
? createFolder(item.parentId, itemTitle)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
: createFile(item.parentId, `${itemTitle}.${item.fileExst}`)
.then(() => this.completeAction(e)).finally(() => onLoading(false))
.then(() => this.completeAction(e)).finally(() => setIsLoading(false))
}
componentDidUpdate(prevProps) {
@ -168,9 +168,9 @@ class FilesTileContent extends React.PureComponent {
onFilesClick = () => {
const { id, fileExst, viewUrl } = this.props.item;
const { filter, parentFolder, onLoading, onMediaFileClick } = this.props;
const { filter, parentFolder, setIsLoading, onMediaFileClick } = this.props;
if (!fileExst) {
onLoading(true);
setIsLoading(true);
const newFilter = filter.clone();
if (!newFilter.treeFolders.includes(parentFolder.toString())) {
newFilter.treeFolders.push(parentFolder.toString());
@ -179,9 +179,9 @@ class FilesTileContent extends React.PureComponent {
fetchFiles(id, newFilter, store.dispatch)
.catch(err => {
toastr.error("Something went wrong", err);
onLoading(false);
setIsLoading(false);
})
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
} else {
if (canWebEdit(fileExst)) {
return window.open(`./doceditor?fileId=${id}`, "_blank");
@ -248,15 +248,15 @@ class FilesTileContent extends React.PureComponent {
const { item, treeFolders, setTreeFolders, rootFolderId, newItems, filter } = this.props;
if (item.fileExst) {
api.files
.markAsRead([], [item.id])
.then(() => {
const data = treeFolders;
const dataItem = data.find((x) => x.id === rootFolderId);
dataItem.newItems = newItems ? dataItem.newItems - 1 : 0;//////newItems
setTreeFolders(data);
fetchFiles(this.props.selectedFolder.id, filter.clone(), store.dispatch);
})
.catch((err) => toastr.error(err))
.markAsRead([], [item.id])
.then(() => {
const data = treeFolders;
const dataItem = data.find((x) => x.id === rootFolderId);
dataItem.newItems = newItems ? dataItem.newItems - 1 : 0;//////newItems
setTreeFolders(data);
fetchFiles(this.props.selectedFolder.id, filter.clone(), store.dispatch);
})
.catch((err) => toastr.error(err))
} else {
const newFolderId = this.props.selectedFolder.pathParts;
newFolderId.push(item.id);
@ -269,12 +269,12 @@ class FilesTileContent extends React.PureComponent {
onShowNewFilesPanel = () => {
const { showNewFilesPanel } = this.state;
this.setState({showNewFilesPanel: !showNewFilesPanel});
this.setState({ showNewFilesPanel: !showNewFilesPanel });
};
render() {
const { item, fileAction, isLoading, isTrashFolder, onLoading, folders } = this.props;
const { item, fileAction, isTrashFolder, folders } = this.props;
const { itemTitle, editingId, showNewFilesPanel, newItems, newFolderId } = this.state;
const {
fileExst,
@ -289,7 +289,6 @@ class FilesTileContent extends React.PureComponent {
return isEdit
? <EditingWrapperComponent
isLoading={isLoading}
itemTitle={itemTitle}
okIcon={okIcon}
cancelIcon={cancelIcon}
@ -300,70 +299,69 @@ class FilesTileContent extends React.PureComponent {
itemId={id}
/>
: (
<>
{showNewFilesPanel && (
<NewFilesPanel
visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel}
onLoading={onLoading}
folderId={newFolderId}
folders={folders}
/>
)}
<SimpleFilesTileContent
sideColor="#333"
isFile={fileExst}
onClick={this.onMobileRowClick}
disableSideInfo
>
<Link
containerWidth='100%'
type='page'
title={titleWithoutExt}
fontWeight="bold"
fontSize='15px'
{...linkStyles}
color="#333"
isTextOverflow
<>
{showNewFilesPanel && (
<NewFilesPanel
visible={showNewFilesPanel}
onClose={this.onShowNewFilesPanel}
folderId={newFolderId}
folders={folders}
/>
)}
<SimpleFilesTileContent
sideColor="#333"
isFile={fileExst}
onClick={this.onMobileRowClick}
disableSideInfo
>
{titleWithoutExt}
</Link>
<>
{fileExst ?
<div className='badges'>
<Text
className='badge-ext'
as="span"
color="#A3A9AE"
fontSize='15px'
fontWeight={600}
title={fileExst}
truncate={true}
>
{fileExst}
</Text>
</div>
:
<div className='badges'>
{ !!showNew &&
<Badge
className='badge-version'
backgroundColor="#ED7309"
borderRadius="11px"
color="#FFFFFF"
fontSize="10px"
fontWeight={800}
label={newItems}
maxWidth="50px"
onClick={this.onBadgeClick}
padding="0 5px"
data-id={id}
/>
}
</div>
}
</>
</SimpleFilesTileContent>
<Link
containerWidth='100%'
type='page'
title={titleWithoutExt}
fontWeight="bold"
fontSize='15px'
{...linkStyles}
color="#333"
isTextOverflow
>
{titleWithoutExt}
</Link>
<>
{fileExst ?
<div className='badges'>
<Text
className='badge-ext'
as="span"
color="#A3A9AE"
fontSize='15px'
fontWeight={600}
title={fileExst}
truncate={true}
>
{fileExst}
</Text>
</div>
:
<div className='badges'>
{!!showNew &&
<Badge
className='badge-version'
backgroundColor="#ED7309"
borderRadius="11px"
color="#FFFFFF"
fontSize="10px"
fontWeight={800}
label={newItems}
maxWidth="50px"
onClick={this.onBadgeClick}
padding="0 5px"
data-id={id}
/>
}
</div>
}
</>
</SimpleFilesTileContent>
</>
)
}
@ -388,6 +386,6 @@ function mapStateToProps(state) {
}
}
export default connect(mapStateToProps, { createFile, createFolder, updateFile, renameFolder, setTreeFolders })(
export default connect(mapStateToProps, { createFile, createFolder, updateFile, renameFolder, setTreeFolders, setIsLoading })(
withRouter(withTranslation()(FilesTileContent))
);

71
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -40,7 +40,8 @@ import {
clearProgressData,
setSelection,
setSelected,
setNewTreeFilesBadge
setNewTreeFilesBadge,
setIsLoading
} from '../../../../../store/files/actions';
import { isFileSelected, getFileIcon, getFolderIcon, getFolderType, loopTreeFolders, isImage, isSound, isVideo } from '../../../../../store/files/selectors';
import store from "../../../../../store/store";
@ -90,7 +91,8 @@ class SectionBodyContent extends React.Component {
editingId: null,
showSharingPanel: false,
showMoveToPanel: false,
showCopyPanel: false
showCopyPanel: false,
isDrag: false
};
this.tooltipRef = React.createRef();
@ -148,7 +150,7 @@ class SectionBodyContent extends React.Component {
} */
shouldComponentUpdate(nextProps, nextState) {
const { showMoveToPanel, showCopyPanel } = this.state;
const { showMoveToPanel, showCopyPanel, isDrag } = this.state;
if (this.state.showSharingPanel !== nextState.showSharingPanel) {
return true;
}
@ -165,6 +167,10 @@ class SectionBodyContent extends React.Component {
return true;
}
if (isDrag !== nextState.isDrag) {
return true;
}
return false;
}
@ -183,13 +189,13 @@ class SectionBodyContent extends React.Component {
};
onEditComplete = (e) => {
const { folderId, fileAction, filter, folders, files, treeFolders, setTreeFolders, onLoading } = this.props;
const { folderId, fileAction, filter, folders, files, treeFolders, setTreeFolders, setIsLoading } = this.props;
const items = [...folders, ...files];
const itemId = e && e.currentTarget.dataset.itemid;
const item = items.filter(o => o.id === itemId);
if (fileAction.type === FileAction.Create || fileAction.type === FileAction.Rename) {
onLoading(true);
setIsLoading(true);
fetchFiles(folderId, filter, store.dispatch).then(data => {
const newItem = item.id === -1 ? null : item;
if (!item.fileExst) {
@ -199,7 +205,7 @@ class SectionBodyContent extends React.Component {
loopTreeFolders(path, newTreeFolders, folders, null, newItem);
setTreeFolders(newTreeFolders);
}
}).finally(() => onLoading(false))
}).finally(() => setIsLoading(false))
}
this.setState({ editingId: null }, () => {
@ -312,7 +318,7 @@ class SectionBodyContent extends React.Component {
}
lockFile = () => {
const { selection, /*files,*/ selectedFolderId, filter, onLoading } = this.props;
const { selection, /*files,*/ selectedFolderId, filter, setIsLoading } = this.props;
const file = selection[0];
api.files.lockFile(file.id, !file.locked)
@ -320,21 +326,21 @@ class SectionBodyContent extends React.Component {
/*const newFiles = files;
const indexOfFile = newFiles.findIndex(x => x.id === res.id);
newFiles[indexOfFile] = res;*/
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, filter, store.dispatch)
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
})
}
finalizeVersion = (e) => {
const { selectedFolderId, filter, onLoading } = this.props;
const { selectedFolderId, filter, setIsLoading } = this.props;
const fileId = e.currentTarget.dataset.id;
//const version = (e.currentTarget.dataset.version)++;
onLoading(true);
setIsLoading(true);
api.files.finalizeVersion(fileId, 0, false)
.then((data) => {
@ -344,7 +350,7 @@ class SectionBodyContent extends React.Component {
toastr.error(err)
);
})
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
}
onMoveAction = () => this.setState({ showMoveToPanel: !this.state.showMoveToPanel });
@ -571,29 +577,29 @@ class SectionBodyContent extends React.Component {
};
onResetFilter = () => {
const { selectedFolderId, onLoading } = this.props;
onLoading(true);
const { selectedFolderId, setIsLoading } = this.props;
setIsLoading(true);
const newFilter = FilesFilter.getDefault();
fetchFiles(selectedFolderId, newFilter, store.dispatch).catch(err =>
toastr.error(err)
).finally(() => onLoading(false));
).finally(() => setIsLoading(false));
}
onGoToMyDocuments = () => {
const { filter, myDocumentsId, onLoading } = this.props;
const { filter, myDocumentsId, setIsLoading } = this.props;
const newFilter = filter.clone();
onLoading(true);
setIsLoading(true);
fetchFiles(myDocumentsId, newFilter, store.dispatch).finally(() =>
onLoading(false)
setIsLoading(false)
);
};
onBackToParentFolder = () => {
const { filter, parentId, onLoading } = this.props;
const { filter, parentId, setIsLoading } = this.props;
const newFilter = filter.clone();
onLoading(true);
setIsLoading(true);
fetchFiles(parentId, newFilter, store.dispatch).finally(() =>
onLoading(false)
setIsLoading(false)
);
};
@ -866,7 +872,7 @@ class SectionBodyContent extends React.Component {
if (mouseButton || e.currentTarget.tagName !== "DIV" || label) { return; }
document.addEventListener("mousemove", this.onMouseMove);
this.setTooltipPosition(e);
const { selection, setDragging } = this.props;
const { selection } = this.props;
const elem = e.currentTarget.closest('.draggable');
if (!elem) {
@ -884,12 +890,13 @@ class SectionBodyContent extends React.Component {
item = selection.find(x => x.id === Number(splitValue[1]) && x.fileExst);
}
if (item) {
setDragging(true);
this.setState({isDrag: true});
}
}
onMouseUp = e => {
const { selection, dragging, setDragging, dragItem, setDragItem } = this.props;
this.state.isDrag && this.setState({isDrag: false});
const mouseButton = e.which ? e.which !== 1 : e.button ? e.button !== 0 : false;
if (mouseButton || !this.tooltipRef.current || !dragging) { return; }
document.removeEventListener("mousemove", this.onMouseMove);
@ -929,7 +936,8 @@ class SectionBodyContent extends React.Component {
}
onMouseMove = e => {
if (this.props.dragging) {
if (this.state.isDrag) {
!this.props.dragging && this.props.setDragging(true);
const tooltip = this.tooltipRef.current;
tooltip.style.display = "block";
this.setTooltipPosition(e);
@ -1081,7 +1089,7 @@ class SectionBodyContent extends React.Component {
settings,
selection,
fileAction,
onLoading,
setIsLoading,
isLoading,
currentFolderCount,
currentFolderType,
@ -1095,7 +1103,7 @@ class SectionBodyContent extends React.Component {
} = this.props;
const { editingId, showSharingPanel, showMoveToPanel, showCopyPanel } = this.state;
const operationsPanelProps = { onLoading, isLoading, loopFilesOperations };
const operationsPanelProps = { setIsLoading, isLoading, loopFilesOperations };
let items = [...folders, ...files];
@ -1215,9 +1223,7 @@ class SectionBodyContent extends React.Component {
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onLoading={onLoading}
onMediaFileClick={this.onMediaFileClick}
isLoading={isLoading}
/>
</Tile>
</DragAndDrop>
@ -1276,9 +1282,7 @@ class SectionBodyContent extends React.Component {
viewer={viewer}
culture={settings.culture}
onEditComplete={this.onEditComplete}
onLoading={onLoading}
onMediaFileClick={this.onMediaFileClick}
isLoading={isLoading}
/>
</SimpleFilesRow>
</DragAndDrop>
@ -1304,7 +1308,6 @@ class SectionBodyContent extends React.Component {
}
{showSharingPanel && (
<SharingPanel
onLoading={onLoading}
onClose={this.onClickShare}
visible={showSharingPanel}
/>
@ -1319,7 +1322,7 @@ SectionBodyContent.defaultProps = {
};
const mapStateToProps = state => {
const { selectedFolder, treeFolders, selection, dragItem, mediaViewerData, dragging } = state.files;
const { selectedFolder, treeFolders, selection, dragItem, mediaViewerData, dragging, isLoading } = state.files;
const { id, title, foldersCount, filesCount, pathParts } = selectedFolder;
const currentFolderType = getFolderType(id, treeFolders);
@ -1356,6 +1359,7 @@ const mapStateToProps = state => {
mediaViewerVisible: mediaViewerData.visible,
currentMediaFileId: mediaViewerData.id,
dragging,
isLoading
};
};
@ -1379,6 +1383,7 @@ export default connect(
setProgressBarData,
setSelection,
setSelected,
setNewTreeFilesBadge
setNewTreeFilesBadge,
setIsLoading
}
)(withRouter(withTranslation()(SectionBodyContent)));

15
products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import { fetchFiles, setViewAs } from "../../../../../store/files/actions";
import { fetchFiles, setViewAs, setIsLoading } from "../../../../../store/files/actions";
import find from "lodash/find";
import result from "lodash/result";
import { withTranslation } from "react-i18next";
@ -61,7 +61,7 @@ class SectionFilterContent extends React.Component {
}
onFilter = data => {
const { onLoading, filter, selectedFolderId } = this.props;
const { setIsLoading, filter, selectedFolderId } = this.props;
const filterType = getFilterType(data.filterValues) || null;
const search = data.inputValue || null;
@ -90,9 +90,9 @@ class SectionFilterContent extends React.Component {
newFilter.withSubfolders = withSubfolders;
newFilter.selectedItem = selectedFilterItem;
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter, store.dispatch)
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
};
onChangeViewAs = (view) => {
@ -214,7 +214,7 @@ class SectionFilterContent extends React.Component {
{ key: "tile", label: t("ViewTiles"), isSetting: true, default: true }
];
//TODO: Need use mobile detect for better result
return window.innerWidth < 460 ? [...commonOptions,...viewSettings] : commonOptions;
return window.innerWidth < 460 ? [...commonOptions, ...viewSettings] : commonOptions;
};
getSelectedFilterData = () => {
@ -310,8 +310,9 @@ function mapStateToProps(state) {
export default connect(
mapStateToProps,
{
{
fetchFiles,
setViewAs
setViewAs,
setIsLoading
}
)(withRouter(withTranslation()(SectionFilterContent)));

27
products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -13,7 +13,7 @@ import {
toastr,
utils
} from "asc-web-components";
import { fetchFiles, setAction, getProgress, setProgressBarData, clearProgressData } from "../../../../../store/files/actions";
import { fetchFiles, setAction, getProgress, setProgressBarData, clearProgressData, setIsLoading } from "../../../../../store/files/actions";
import { default as filesStore } from "../../../../../store/store";
import { EmptyTrashDialog, DeleteDialog, DownloadDialog } from "../../../../dialogs";
import { SharingPanel, OperationsPanel } from "../../../../panels";
@ -166,7 +166,7 @@ class SectionHeaderContent extends React.Component {
};
createLinkForPortalUsers = () => {
const {currentFolderId} = this.props;
const { currentFolderId } = this.props;
const { t } = this.props;
copy(`${window.location.origin}/products/files/filter?folder=${currentFolderId}`);
@ -181,7 +181,7 @@ class SectionHeaderContent extends React.Component {
loop = url => {
this.props.getProgress().then(res => {
if (!url) {
this.props.setProgressBarData({visible: true, percent: res[0].progress, label: this.props.t("ArchivingData")});
this.props.setProgressBarData({ visible: true, percent: res[0].progress, label: this.props.t("ArchivingData") });
setTimeout(() => this.loop(res[0].url), 1000);
} else {
setTimeout(() => clearProgressData(filesStore.dispatch), 5000);
@ -209,7 +209,7 @@ class SectionHeaderContent extends React.Component {
}
}
setProgressBarData({ visible: true, percent: 0, label: t("ArchivingData")});
setProgressBarData({ visible: true, percent: 0, label: t("ArchivingData") });
api.files
.downloadFiles(fileIds, folderIds)
@ -285,10 +285,10 @@ class SectionHeaderContent extends React.Component {
};
onBackToParentFolder = () => {
const { onLoading, parentId, filter } = this.props;
onLoading(true);
const { setIsLoading, parentId, filter } = this.props;
setIsLoading(true);
fetchFiles(parentId, filter, filesStore.dispatch).finally(() =>
onLoading(false)
setIsLoading(false)
);
};
@ -314,7 +314,7 @@ class SectionHeaderContent extends React.Component {
onCheck,
title,
currentFolderId,
onLoading,
setIsLoading,
isLoading,
getProgress,
loopFilesOperations,
@ -441,7 +441,7 @@ class SectionHeaderContent extends React.Component {
}
const operationsPanelProps = {
onLoading,
setIsLoading,
isLoading,
loopFilesOperations
};
@ -546,7 +546,6 @@ class SectionHeaderContent extends React.Component {
{showSharingPanel && (
<SharingPanel
onLoading={onLoading}
onClose={this.onOpenSharingPanel}
visible={showSharingPanel}
/>
@ -587,7 +586,8 @@ const mapStateToProps = state => {
selectedFolder,
selection,
treeFolders,
filter
filter,
isLoading
} = state.files;
const { parentId, title, id } = selectedFolder;
const { user } = state.auth;
@ -604,10 +604,11 @@ const mapStateToProps = state => {
title,
filter,
deleteDialogVisible: isCanBeDeleted(selectedFolder, user),
currentFolderId: id
currentFolderId: id,
isLoading
};
};
export default connect(mapStateToProps, { setAction, getProgress, setProgressBarData })(
export default connect(mapStateToProps, { setAction, getProgress, setProgressBarData, setIsLoading })(
withTranslation()(withRouter(SectionHeaderContent))
);

30
products/ASC.Files/Client/src/components/pages/Home/Section/Paging/index.js
View File

@ -1,13 +1,13 @@
import React, { useCallback, useMemo } from "react";
import { connect } from "react-redux";
import { fetchFiles } from "../../../../../store/files/actions";
import { fetchFiles, setIsLoading } from "../../../../../store/files/actions";
import { Paging } from "asc-web-components";
import { useTranslation } from 'react-i18next';
import store from "../../../../../store/store";
const SectionPagingContent = ({
filter,
onLoading,
setIsLoading,
selectedCount,
selectedFolderId
}) => {
@ -23,11 +23,11 @@ const SectionPagingContent = ({
const newFilter = filter.clone();
newFilter.page++;
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter, store.dispatch)
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
},
[filter, selectedFolderId, onLoading]
[filter, selectedFolderId, setIsLoading]
);
const onPrevClick = useCallback(
@ -42,11 +42,11 @@ const SectionPagingContent = ({
const newFilter = filter.clone();
newFilter.page--;
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter, store.dispatch)
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
},
[filter, selectedFolderId, onLoading]
[filter, selectedFolderId, setIsLoading]
);
const onChangePageSize = useCallback(
@ -57,11 +57,11 @@ const SectionPagingContent = ({
newFilter.page = 0;
newFilter.pageCount = pageItem.key;
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter, store.dispatch)
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
},
[filter, selectedFolderId, onLoading]
[filter, selectedFolderId, setIsLoading]
);
const onChangePage = useCallback(
@ -71,11 +71,11 @@ const SectionPagingContent = ({
const newFilter = filter.clone();
newFilter.page = pageItem.key;
onLoading(true);
setIsLoading(true);
fetchFiles(selectedFolderId, newFilter, store.dispatch)
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
},
[filter, selectedFolderId, onLoading]
[filter, selectedFolderId, setIsLoading]
);
const countItems = useMemo(
@ -152,5 +152,5 @@ function mapStateToProps(state) {
export default connect(
mapStateToProps,
{ fetchFiles }
{ fetchFiles, setIsLoading }
)(SectionPagingContent);

21
products/ASC.Files/Client/src/components/pages/Home/index.js
View File

@ -29,8 +29,7 @@ import {
setNewTreeFilesBadge,
setProgressBarData,
setSelected,
setTreeFolders,
setIsLoading
setTreeFolders
} from "../../../store/files/actions";
import {
loopTreeFolders,
@ -318,8 +317,7 @@ class PureHome extends React.Component {
progressData,
viewAs,
isLoading,
convertDialogVisible,
setIsLoading
convertDialogVisible
} = this.props;
// const progressBarContent = (
@ -378,13 +376,11 @@ class PureHome extends React.Component {
</PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent onLoading={setIsLoading} />
<ArticleMainButtonContent />
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>
<ArticleBodyContent
onLoading={setIsLoading}
isLoading={isLoading}
onTreeDrop={this.onDrop}
/>
</PageLayout.ArticleBody>
@ -396,21 +392,17 @@ class PureHome extends React.Component {
onCheck={this.onSectionHeaderContentCheck}
onSelect={this.onSectionHeaderContentSelect}
onClose={this.onClose}
onLoading={setIsLoading}
isLoading={isLoading}
loopFilesOperations={this.loopFilesOperations}
/>
</PageLayout.SectionHeader>
<PageLayout.SectionFilter>
<SectionFilterContent onLoading={setIsLoading} />
<SectionFilterContent />
</PageLayout.SectionFilter>
<PageLayout.SectionBody>
<SectionBodyContent
selected={selected}
isLoading={isLoading}
onLoading={setIsLoading}
onChange={this.onRowChange}
loopFilesOperations={this.loopFilesOperations}
onDropZoneUpload={this.onDrop}
@ -418,7 +410,7 @@ class PureHome extends React.Component {
</PageLayout.SectionBody>
<PageLayout.SectionPaging>
<SectionPagingContent onLoading={setIsLoading} />
<SectionPagingContent />
</PageLayout.SectionPaging>
</PageLayout>
</>
@ -494,7 +486,6 @@ export default connect(
setProgressBarData,
setSelected,
setTreeFolders,
startUpload,
setIsLoading
startUpload
}
)(withRouter(Home));

18
products/ASC.Files/Client/src/components/pages/Settings/Section/Header/index.js
View File

@ -1,21 +1,13 @@
import React from 'react';
import styled from "styled-components";
import { Headline } from 'asc-web-common';
import { utils } from "asc-web-components";
const { tablet, desktop } = utils.device;
const StyledContainer = styled.div`
`;
const SectionHeaderContent = ({title}) => {
const SectionHeaderContent = ({ title }) => {
return (
<Headline
className='headline-header'
type="content"
<Headline
className='headline-header'
type="content"
truncate={true}>
{title}
{title}
</Headline>
);
}

15
products/ASC.Files/Client/src/components/pages/Settings/index.js
View File

@ -40,7 +40,6 @@ const PureSettings = props => {
match,
t,
isLoading,
setIsLoading,
enableThirdParty,
isAdmin
} = props;
@ -67,7 +66,7 @@ const PureSettings = props => {
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>
<ArticleBodyContent onLoading={setIsLoading} isLoading={isLoading} />
<ArticleBodyContent />
</PageLayout.ArticleBody>
<PageLayout.SectionHeader>
@ -83,12 +82,12 @@ const PureSettings = props => {
return (!enableThirdParty && setting === "thirdParty") ||
(!isAdmin && setting === "admin") ? (
<Error403 />
) : errorLoading ? (
<Error520 />
) : (
settings
);
<Error403 />
) : errorLoading ? (
<Error520 />
) : (
settings
);
};
const SettingsContainer = withTranslation()(PureSettings);

18
products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Body/VersionRow.js
View File

@ -15,7 +15,7 @@ import { withTranslation } from "react-i18next";
import { withRouter } from "react-router";
import { connect } from "react-redux";
import { api } from "asc-web-common";
import { fetchFiles } from "../../../../../store/files/actions";
import { fetchFiles, setIsLoading } from "../../../../../store/files/actions";
import store from "../../../../../store/store";
const { tablet } = utils.device;
@ -115,7 +115,7 @@ const VersionRow = props => {
culture,
selectedFolderId,
filter,
onLoading,
setIsLoading,
isVersion,
t,
getFileVersions
@ -151,7 +151,7 @@ const VersionRow = props => {
const title = `${new Date(info.created).toLocaleString(culture)} ${
info.createdBy.displayName
}`;
}`;
const linkStyles = { isHovered: true, type: "action" };
@ -175,21 +175,21 @@ const VersionRow = props => {
const onOpenFile = () => window.open(info.webUrl);
const onRestoreClick = () => {
onLoading(true);
setIsLoading(true);
api.files
.versionRestore(info.id, info.version)
.then(() => getFileVersions(info.id))
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
};
const onVersionClick = () => {
onLoading(true);
setIsLoading(true);
api.files
.markAsVersion(info.id, isVersion, info.version)
.then(() => getFileVersions(info.id))
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
};
const contextOptions = [
@ -317,5 +317,7 @@ const mapStateToProps = state => {
export default connect(
mapStateToProps,
{}
{
setIsLoading
}
)(withRouter(withTranslation()(VersionRow)));

3
products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Body/index.js
View File

@ -5,7 +5,7 @@ import { RowContainer } from "asc-web-components";
import VersionRow from "./VersionRow";
const SectionBodyContent = props => {
const { versions, culture, onLoading, getFileVersions } = props;
const { versions, culture, getFileVersions } = props;
console.log("VersionHistory SectionBodyContent render()", versions);
let itemVersion = null;
@ -28,7 +28,6 @@ const SectionBodyContent = props => {
info={info}
index={index}
culture={culture}
onLoading={onLoading}
/>
);
})}

40
products/ASC.Files/Client/src/components/pages/VersionHistory/index.js
View File

@ -10,7 +10,6 @@ import {
ArticleBodyContent,
ArticleMainButtonContent
} from "../../Article";
import { setIsLoading } from "../../../store/files/actions";
import { SectionHeaderContent, SectionBodyContent } from "./Section";
import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({
@ -73,16 +72,12 @@ class PureVersionHistory extends React.Component {
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent
onLoading={setIsLoading}
startUpload={this.startUpload}
/>
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>
<ArticleBodyContent
onLoading={setIsLoading}
isLoading={isLoading}
/>
<ArticleBodyContent />
</PageLayout.ArticleBody>
<PageLayout.SectionHeader>
@ -92,31 +87,30 @@ class PureVersionHistory extends React.Component {
<PageLayout.SectionBody>
<SectionBodyContent
getFileVersions={this.getFileVersions}
onLoading={setIsLoading}
versions={versions}
culture={settings.culture}
/>
</PageLayout.SectionBody>
</PageLayout>
) : (
<PageLayout>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
</PageLayout.ArticleHeader>
<PageLayout>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
</PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent />
</PageLayout.ArticleMainButton>
<PageLayout.ArticleMainButton>
<ArticleMainButtonContent />
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>
<ArticleBodyContent />
</PageLayout.ArticleBody>
<PageLayout.ArticleBody>
<ArticleBodyContent />
</PageLayout.ArticleBody>
<PageLayout.SectionBody>
<Loader className="pageLoader" type="rombs" size="40px" />
</PageLayout.SectionBody>
</PageLayout>
)}
<PageLayout.SectionBody>
<Loader className="pageLoader" type="rombs" size="40px" />
</PageLayout.SectionBody>
</PageLayout>
)}
</>
);
}
@ -150,5 +144,5 @@ function mapStateToProps(state) {
export default connect(
mapStateToProps,
{ setIsLoading }
{}
)(withRouter(VersionHistory));

13
products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
View File

@ -37,7 +37,8 @@ import {
setMediaViewerData,
setTreeFolders,
setNewTreeFilesBadge,
setNewRowItems
setNewRowItems,
setIsLoading
} from "../../../store/files/actions";
import store from "../../../store/store";
import { createI18N } from "../../../helpers/i18n";
@ -58,13 +59,13 @@ class NewFilesPanelComponent extends React.Component {
}
componentDidMount() {
const { folderId, onLoading } = this.props;
onLoading(true);
const { folderId, setIsLoading } = this.props;
setIsLoading(true);
api.files
.getNewFiles(folderId[folderId.length - 1])
.then(files => this.setState({ files }))
.catch(err => toastr.error(err))
.finally(() => onLoading(false));
.finally(() => setIsLoading(false));
}
getItemIcon = (item, isEdit) => {
@ -114,7 +115,7 @@ class NewFilesPanelComponent extends React.Component {
};
onNewFilesClick = item => {
const { onClose, /*onLoading,*/ folderId } = this.props;
const { onClose, /*setIsLoading,*/ folderId } = this.props;
const folderIds = [];
const fileId = [];
const isFile = item.fileExst;
@ -297,5 +298,5 @@ const mapStateToProps = state => {
export default connect(
mapStateToProps,
{ setMediaViewerData, setTreeFolders, setNewTreeFilesBadge, setNewRowItems }
{ setMediaViewerData, setTreeFolders, setNewTreeFilesBadge, setNewRowItems, setIsLoading }
)(withRouter(NewFilesPanel));

4
products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
View File

@ -107,8 +107,6 @@ class OperationsPanelComponent extends React.Component {
//console.log("Operations panel render");
const {
t,
onLoading,
isLoading,
filter,
treeFolders,
isCopy,
@ -136,8 +134,6 @@ class OperationsPanelComponent extends React.Component {
expandedKeys={expandedKeys}
data={data}
filter={filter}
onLoading={onLoading}
isLoading={isLoading}
onSelect={this.onSelect}
needUpdate={false}
/>

12
products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
View File

@ -18,7 +18,7 @@ import { connect } from "react-redux";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import { utils as commonUtils, constants } from "asc-web-common";
import { getShareUsers, setShareFiles } from "../../../store/files/actions";
import { getShareUsers, setShareFiles, setIsLoading } from "../../../store/files/actions";
import { getAccessOption } from "../../../store/files/selectors";
import {
StyledAsidePanel,
@ -391,7 +391,7 @@ class SharingPanelComponent extends React.Component {
this.setState(
{ baseShareData, shareDataItems: arrayItems, accessOptions },
() => this.props.onLoading(false)
() => this.props.setIsLoading(false)
);
};
@ -434,7 +434,7 @@ class SharingPanelComponent extends React.Component {
this.getShareDataItems(res);
})
.catch(err => {
this.props.onLoading(false);
this.props.setIsLoading(false);
error = err;
toastr.error(err);
})
@ -461,7 +461,7 @@ class SharingPanelComponent extends React.Component {
onClose = () => this.setState({ showPanel: false });
componentDidMount() {
this.props.onLoading(true);
this.props.setIsLoading(true);
this.getShareData();
document.addEventListener("keyup", this.onKeyPress);
@ -576,7 +576,7 @@ class SharingPanelComponent extends React.Component {
className="panel_combo-box"
scaled={false}
directionX="right"
//isDisabled={isDisabled}
//isDisabled={isDisabled}
>
{React.createElement(Icons[accessRight.icon], {
size: "medium"
@ -739,4 +739,4 @@ const mapStateToProps = state => {
};
};
export default connect(mapStateToProps)(withRouter(SharingPanel));
export default connect(mapStateToProps, { setIsLoading })(withRouter(SharingPanel));

2
products/ASC.Files/Core/Configuration/FilesSpaceUsageStatManager.cs
View File

@ -106,7 +106,7 @@ namespace ASC.Web.Files
{
item.Name = FilesUCResource.CorporateFiles;
item.ImgUrl = PathProvider.GetImagePath("corporatefiles_big.png");
item.Url = PathProvider.GetFolderUrl(GlobalFolderHelper.FolderCommon);
item.Url = PathProvider.GetFolderUrlById(GlobalFolderHelper.FolderCommon);
}
else
{

2
products/ASC.Files/Core/Helpers/PathProvider.cs
View File

@ -131,7 +131,7 @@ namespace ASC.Web.Files.Classes
}
}
public string GetFolderUrl<T>(T folderId)
public string GetFolderUrlById<T>(T folderId)
{
var folder = DaoFactory.GetFolderDao<T>().GetFolder(folderId);

4
products/ASC.Files/Core/HttpHandlers/FileHandler.ashx.cs
View File

@ -1019,7 +1019,7 @@ namespace ASC.Web.Files
context.Response.Redirect(
(context.Request.Query["openfolder"].FirstOrDefault() ?? "").Equals("true")
? PathProvider.GetFolderUrl(file.FolderID)
? PathProvider.GetFolderUrlById(file.FolderID)
: (FilesLinkUtility.GetFileWebEditorUrl(file.ID) + "#message/" + HttpUtility.UrlEncode(string.Format(FilesCommonResource.MessageFileCreated, folder.Title))));
}
@ -1117,7 +1117,7 @@ namespace ASC.Web.Files
{
try
{
urlRedirect = PathProvider.GetFolderUrl(folderId);
urlRedirect = PathProvider.GetFolderUrlById(folderId);
}
catch (ArgumentNullException e)
{

2
products/ASC.Files/Core/Services/DocumentService/Configuration.cs
View File

@ -646,7 +646,7 @@ namespace ASC.Web.Files.Services.DocumentService
{
return new GobackConfig
{
Url = PathProvider.GetFolderUrl(GlobalFolderHelper.FolderShare),
Url = PathProvider.GetFolderUrlById(GlobalFolderHelper.FolderShare),
};
}
return null;

25
products/ASC.Files/Core/Services/NotifyService/NotifyClient.cs
View File

@ -31,13 +31,12 @@ using System.Globalization;
using ASC.Common;
using ASC.Core;
using ASC.Core.Common;
using ASC.Files.Core;
using ASC.Files.Core.Data;
using ASC.Files.Core.Resources;
using ASC.Files.Core.Security;
using ASC.Notify.Patterns;
using ASC.Web.Core.Files;
using ASC.Web.Files.Classes;
using ASC.Web.Files.Classes;
using Microsoft.Extensions.DependencyInjection;
@ -50,8 +49,8 @@ namespace ASC.Files.Core.Services.NotifyService
public NotifyClient(IServiceProvider serviceProvider)
{
ServiceProvider = serviceProvider;
}
}
public void SendDocuSignComplete<T>(File<T> file, string sourceTitle)
{
using var scope = ServiceProvider.CreateScope();
@ -114,7 +113,7 @@ namespace ASC.Files.Core.Services.NotifyService
using var scope = ServiceProvider.CreateScope();
var scopeClass = scope.ServiceProvider.GetService<NotifyClientScope>();
var (notifySource, _, filesLinkUtility, fileUtility, baseCommonLinkUtility, daoFactory, pathProvider, userManager, tenantManager) = scopeClass;
var (notifySource, _, filesLinkUtility, fileUtility, baseCommonLinkUtility, daoFactory, pathProvider, userManager, tenantManager) = scopeClass;
var client = WorkContext.NotifyContext.NotifyService.RegisterClient(notifySource, scope);
var folderDao = daoFactory.GetFolderDao<T>();
@ -122,7 +121,7 @@ namespace ASC.Files.Core.Services.NotifyService
var url = fileEntry.FileEntryType == FileEntryType.File
? filesLinkUtility.GetFileWebPreviewUrl(fileUtility, fileEntry.Title, fileEntry.ID)
: pathProvider.GetFolderUrl(((Folder<T>)fileEntry));
: pathProvider.GetFolderUrl((Folder<T>)fileEntry);
var recipientsProvider = notifySource.GetRecipientsProvider();
@ -156,7 +155,7 @@ namespace ASC.Files.Core.Services.NotifyService
using var scope = ServiceProvider.CreateScope();
var scopeClass = scope.ServiceProvider.GetService<NotifyClientScope>();
var (notifySource, _, _, _, baseCommonLinkUtility, _, _, userManager, _) = scopeClass;
var (notifySource, _, _, _, baseCommonLinkUtility, _, _, userManager, _) = scopeClass;
var client = WorkContext.NotifyContext.NotifyService.RegisterClient(notifySource, scope);
var recipientsProvider = notifySource.GetRecipientsProvider();
@ -232,15 +231,15 @@ namespace ASC.Files.Core.Services.NotifyService
TenantManager = tenantManager;
}
public void Deconstruct(out NotifySource notifySource,
public void Deconstruct(out NotifySource notifySource,
out SecurityContext securityContext,
out FilesLinkUtility filesLinkUtility,
out FileUtility fileUtility,
out FilesLinkUtility filesLinkUtility,
out FileUtility fileUtility,
out BaseCommonLinkUtility baseCommonLinkUtility,
out IDaoFactory daoFactory,
out PathProvider pathProvider,
out UserManager userManager,
out TenantManager tenantManager )
out PathProvider pathProvider,
out UserManager userManager,
out TenantManager tenantManager)
{
notifySource = NotifySource;
securityContext = SecurityContext;

21
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -209,9 +209,7 @@ class UpdateUserForm extends React.Component {
}
onCancel() {
const { profile, history, settings } = this.props;
!profile ? history.push(settings.homepage) : history.push(`/products/people/view/${profile.userName}`);
//this.props.history.goBack();
this.props.history.goBack();
}
onContactsItemAdd(item) {
@ -273,6 +271,7 @@ class UpdateUserForm extends React.Component {
}
onLoadFileAvatar(file, callback) {
this.setState({ isLoading: true });
let data = new FormData();
let _this = this;
data.append("file", file);
@ -289,14 +288,19 @@ class UpdateUserForm extends React.Component {
defaultHeight: img.height
}
_this.setState(stateCopy);
_this.setState({ isLoading: false });
if (typeof callback === 'function') callback();
};
img.src = response.data;
})
.catch((error) => toastr.error(error));
.catch((error) => {
toastr.error(error);
this.setState({ isLoading: false });
});
}
onSaveAvatar(isUpdate, result) {
this.setState({ isLoading: true })
if (isUpdate) {
createThumbnailsAvatar(this.state.profile.id, {
x: Math.round(result.x * this.state.avatar.defaultWidth - result.width / 2),
@ -311,9 +315,13 @@ class UpdateUserForm extends React.Component {
stateCopy.avatar.tmpFile = '';
stateCopy.profile.avatarMax = response.max + '?_=' + Math.floor(Math.random() * Math.floor(10000));
toastr.success(this.props.t("ChangesSavedSuccessfully"));
this.setState({ isLoading: false });
this.setState(stateCopy);
})
.catch(error => toastr.error(error))
.catch(error => {
toastr.error(error);
this.setState({ isLoading: false });
})
.then(() => this.props.updateProfile(this.props.profile))
.then(() => this.props.fetchProfile(this.state.profile.id))
} else {
@ -476,7 +484,8 @@ class UpdateUserForm extends React.Component {
unknownTypeError={t("ErrorUnknownFileImageType")}
maxSizeFileError={t("maxSizeFileError")}
unknownError={t("Error")}
saveButtonLabel={t('SaveButton')}
saveButtonLabel={this.state.isLoading ? t("UpdatingProcess") : t('SaveButton')}
saveButtonLoading={this.state.isLoading}
/>
</AvatarContainer>
<MainFieldsContainer ref={this.mainFieldsContainerRef}>

5
products/ASC.People/Client/src/components/pages/ProfileAction/locales/en/translation.json
View File

@ -9,6 +9,7 @@
"Location": "Location",
"Comments": "Comments",
"SaveButton": "Save",
"UpdatingProcess": "Updating...",
"CancelButton": "Cancel",
"CopyEmailAndPassword": "Copy e-mail & password",
"UserType": "Type",
@ -52,7 +53,7 @@
"Phone": "Phone",
"ChangesSavedSuccessfully": "Changes saved successfully",
"SearchDepartments": "Search departments",
"chooseFileLabel": "Drop file here, or click to select file",
"chooseFileLabel": "Drop file here, or click to select file",
"chooseMobileFileLabel": "Click to select files",
"maxSizeFileError": "Maximum file size exceeded",
"editAvatar": "Edit",
@ -60,4 +61,4 @@
"Calendar": "Calendar",
"ViewAccess": "View",
"ProfileAction": "Profile action"
}
}

7
products/ASC.People/Client/src/components/pages/ProfileAction/locales/ru/translation.json
View File

@ -9,6 +9,7 @@
"Location": "Местоположение",
"Comments": "Комментарии",
"SaveButton": "Сохранить",
"UpdatingProcess": "Обновление...",
"CancelButton": "Отмена",
"CopyEmailAndPassword": "Копировать email и пароль",
"UserType": "Тип",
@ -40,7 +41,7 @@
"ErrorPasswordNoUpperCase": "заглавные буквы",
"ErrorPasswordNoSpecialSymbols": "специальные символы",
"ErrorPasswordLength": "от {{from}} до {{to}} символов",
"CustomCreation": "{{user}} (создание)",
"ActivationLink": "Ссылка для активации",
@ -51,7 +52,7 @@
"Phone": "Телефон",
"ChangesSavedSuccessfully": "Изменения успешно сохранены",
"SearchDepartments": "Поиск группы",
"chooseFileLabel": "Перетащите файл сюда или нажмите, чтобы выбрать файл",
"chooseFileLabel": "Перетащите файл сюда или нажмите, чтобы выбрать файл",
"chooseMobileFileLabel": "Нажмите сюда, чтобы выбрать файл",
"maxSizeFileError": "Превышен максимальный размер файла",
"editAvatar": "Изменить",
@ -59,4 +60,4 @@
"Calendar": "Календарь",
"ViewAccess": "Просмотр",
"ProfileAction": "Работа с профилем"
}
}

4
web/ASC.Web.Common/src/pages/login/index.js
View File

@ -51,8 +51,8 @@ const LoginContainer = styled.div`
}
.auth-form-container {
margin: 32px 22.5% 0 22.5%;
width: 32.4%;
margin: 32px 213px 0 213px;
width: 311px;
@media (max-width: 768px) {
margin: 32px 0 0 0;

2
web/ASC.Web.Components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-components",
"version": "1.0.431",
"version": "1.0.435",
"description": "Ascensio System SIA component library",
"license": "AGPL-3.0",
"main": "dist/asc-web-components.js",

45
web/ASC.Web.Components/src/components/avatar-editor/README.md
View File

@ -29,25 +29,26 @@ import { AvatarEditor } from "asc-web-components";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | :-------------: | :------: | :----------------------: | :---------------------------: | ---------------------------------------- |
| `visible` | `bool` | - | - | `false` | Display avatar editor |
| `image` | `string`,`file` | - | - | - | The URL of the image to use, or a File |
| `accept` | `array` | - | - | `['image/png', 'image/jpeg']` | Accepted file types |
| `displayType` | `oneOf` | - | `auto`, `modal`, `aside` | `auto` | Display type |
| `chooseFileLabel` | `string` | - | - | `Drop files here, or click to select files` | Translation string for file selection |
| `chooseMobileFileLabel` | `string` | - | - | `Click to select files` | Translation string for file selection on mobile devices |
| `headerLabel` | `string` | - | - | `Edit Photo` | Translation string for title |
| `saveButtonLabel` | `string` | - | - | `Save` | Translation string for save button |
| `maxSizeFileError` | `string` | - | - | `Maximum file size exceeded` | Translation string for size warning |
| `unknownTypeError` | `string` | - | - | `Unknown image file type` | Translation string for file type warning |
| `unknownError` | `string` | - | - | `Error` | Translation string for warning |
| `maxSize` | `number` | - | - | `1` | Max size of image |
| `onSave` | `function` | - | - | - | Save event |
| `onClose` | `function` | - | - | - | Closing event |
| `onDeleteImage` | `function` | - | - | - | Image deletion event |
| `onLoadFile` | `function` | - | - | - | Image upload event |
| `onImageChange` | `function` | - | - | - | Image change event |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| Props | Type | Required | Values | Default | Description |
| ----------------------- | :-------------: | :------: | :----------------------: | :-----------------------------------------: | ------------------------------------------------------- |
| `visible` | `bool` | - | - | `false` | Display avatar editor |
| `image` | `string`,`file` | - | - | - | The URL of the image to use, or a File |
| `accept` | `array` | - | - | `['image/png', 'image/jpeg']` | Accepted file types |
| `displayType` | `oneOf` | - | `auto`, `modal`, `aside` | `auto` | Display type |
| `chooseFileLabel` | `string` | - | - | `Drop files here, or click to select files` | Translation string for file selection |
| `chooseMobileFileLabel` | `string` | - | - | `Click to select files` | Translation string for file selection on mobile devices |
| `headerLabel` | `string` | - | - | `Edit Photo` | Translation string for title |
| `saveButtonLabel` | `string` | - | - | `Save` | Translation string for save button |
| `saveButtonLoading` | `bool` | - | - | - | Tells when the button should show loader icon |
| `maxSizeFileError` | `string` | - | - | `Maximum file size exceeded` | Translation string for size warning |
| `unknownTypeError` | `string` | - | - | `Unknown image file type` | Translation string for file type warning |
| `unknownError` | `string` | - | - | `Error` | Translation string for warning |
| `maxSize` | `number` | - | - | `1` | Max size of image |
| `onSave` | `function` | - | - | - | Save event |
| `onClose` | `function` | - | - | - | Closing event |
| `onDeleteImage` | `function` | - | - | - | Image deletion event |
| `onLoadFile` | `function` | - | - | - | Image upload event |
| `onImageChange` | `function` | - | - | - | Image change event |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |

52
web/ASC.Web.Components/src/components/avatar-editor/avatar-editor.stories.js
View File

@ -7,9 +7,10 @@ import Readme from './README.md';
import AvatarEditor from '.';
import Avatar from '../avatar';
import Section from '../../../.storybook/decorators/section';
import { boolean } from '@storybook/addon-knobs';
const displayType = ['auto', 'modal', 'aside'];
class AvatarEditorStory extends React.Component {
class AvatarEditorStory extends React.Component {
constructor(props) {
super(props);
@ -25,46 +26,46 @@ class AvatarEditorStory extends React.Component {
this.onImageChange = this.onImageChange.bind(this)
this.onDeleteImage = this.onDeleteImage.bind(this)
this.onLoadFile = this.onLoadFile.bind(this)
}
onDeleteImage(){
onDeleteImage() {
action('onDeleteImage');
}
onImageChange(img){
onImageChange(img) {
action('onLoadFile');
this.setState({
userImage: img
})
}
onLoadFile(file){
onLoadFile(file) {
action('onLoadFile')(file);
}
onSave(isUpdate, data){
onSave(isUpdate, data) {
action('onSave')(isUpdate, data);
this.setState({
isOpen: false
})
}
openEditor(){
openEditor() {
this.setState({
isOpen: true
})
}
onClose(){
onClose() {
action('onClose');
this.setState({
isOpen: false
})
}
render(){
return(
render() {
return (
<div>
<Avatar
size='max'
role='user'
source={this.state.userImage }
editing={true}
editAction={this.openEditor}
size='max'
role='user'
source={this.state.userImage}
editing={true}
editAction={this.openEditor}
/>
<AvatarEditor
visible={this.state.isOpen}
@ -73,15 +74,16 @@ class AvatarEditorStory extends React.Component {
onDeleteImage={this.onDeleteImage}
onImageChange={this.onImageChange}
onLoadFile={this.onLoadFile}
headerLabel ={text('headerLabel', 'Edit Photo')}
chooseFileLabel ={text('chooseFileLabel', 'Drop files here, or click to select files')}
headerLabel={text('headerLabel', 'Edit Photo')}
chooseFileLabel={text('chooseFileLabel', 'Drop files here, or click to select files')}
chooseMobileFileLabel={text('chooseMobileFileLabel', 'Click to select files')}
saveButtonLabel ={text('saveButtonLabel', 'Save')}
maxSizeFileError ={text('maxSizeFileError', 'Maximum file size exceeded')}
unknownTypeError ={text('unknownTypeError', 'Unknown image file type')}
unknownError ={text('unknownError', 'Error')}
displayType ={select('displayType', displayType, 'auto')}
/>
saveButtonLabel={text('saveButtonLabel', 'Save')}
saveButtonLoading={boolean('saveButtonLoading', false)}
maxSizeFileError={text('maxSizeFileError', 'Maximum file size exceeded')}
unknownTypeError={text('unknownTypeError', 'Unknown image file type')}
unknownError={text('unknownError', 'Error')}
displayType={select('displayType', displayType, 'auto')}
/>
</div>
)
}
@ -91,10 +93,10 @@ storiesOf('Components|AvatarEditor', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => {
return (
<Section>
<AvatarEditorStory />
</Section>
</Section>
);
});

20
web/ASC.Web.Components/src/components/avatar-editor/index.js
View File

@ -66,15 +66,15 @@ class AvatarEditor extends React.Component {
saveAvatar = () => {
this.state.isContainsFile
? this.props.onSave(
this.state.isContainsFile,
{
x: this.state.x,
y: this.state.y,
width: this.state.width,
height: this.state.height
},
this.state.croppedImage
)
this.state.isContainsFile,
{
x: this.state.x,
y: this.state.y,
width: this.state.width,
height: this.state.height
},
this.state.croppedImage
)
: this.props.onSave(this.state.isContainsFile);
};
onClickRotateLeft = e => {
@ -130,6 +130,7 @@ class AvatarEditor extends React.Component {
<Button
key="SaveBtn"
label={this.props.saveButtonLabel}
isLoading={this.props.saveButtonLoading}
primary={true}
size="medium"
onClick={this.onSaveButtonClick}
@ -156,6 +157,7 @@ AvatarEditor.propTypes = {
chooseFileLabel: PropTypes.string,
chooseMobileFileLabel: PropTypes.string,
saveButtonLabel: PropTypes.string,
saveButtonLoading: PropTypes.bool,
maxSizeFileError: PropTypes.string,
image: PropTypes.string,
maxSize: PropTypes.number,

1
web/ASC.Web.Components/src/components/drop-down-item/index.js
View File

@ -88,6 +88,7 @@ const StyledDropdownItem = styled.div`
`;
const IconWrapper = styled.div`
display:flex;
width: 16px;
margin-right: 8px;
line-height: 14px;

2
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -105,7 +105,7 @@ class DropDown extends React.PureComponent {
const rects = this.dropDownRef.current.getBoundingClientRect();
const container = { width: window.innerWidth, height: window.innerHeight };
const left = rects.left < 0 && rects.width < container.width;
const right = rects.left < 250 && rects.left > rects.width && rects.width < container.width;
const right = rects.width && rects.left < 250 && rects.left > rects.width && rects.width < container.width;
const top = rects.bottom > container.height && rects.top > rects.height;
const bottom = rects.top < 0;
const x = left ? 'left' : right ? 'right' : this.state.directionX;

10
web/ASC.Web.Components/src/components/icons/icons.stories.js
View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { withKnobs, select, color, boolean } from '@storybook/addon-knobs/react';
import Readme from './README.md';
import {Icons} from '.';
import { Icons } from '.';
const IconList = styled.div`
display: grid;
@ -35,16 +35,16 @@ storiesOf('Components|Icons', module)
const sizeValue = select('size', ['small', 'medium', 'big', 'scale'], 'big');
let isFill = boolean('isfill', false);
let iconColor = isFill ? {color: `${color('color', "dimgray")}`} : {};
let iconColor = isFill ? { color: `${color('color', "dimgray")}` } : {};
let isStroke = boolean('isStroke', false);
let iconStroke = isStroke ? {stroke: `${color('stroke', "dimgray")}`} : {};
let iconStroke = isStroke ? { stroke: `${color('stroke', "dimgray")}` } : {};
const containerWidth =
sizeValue === 'scale'
? {
width: `${select('container width', ['100', '200', '300', '400'], '100')}px`,
}
width: `${select('container width', ['100', '200', '300', '400'], '100')}px`,
}
: {};
return (
<IconItem key={index}>

3
web/ASC.Web.Components/src/components/icons/svg/departments.group.react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 4.05692C11 6.06254 9.68753 8 8.00003 8C6.31247 8 5 6.06254 5 4.05692V3.42859C5 1.42297 6.31247 0 8.00003 0C9.68753 0 11 1.42305 11 3.42859V4.05692ZM3.99684 6.89387C3.99684 7.97353 2.89941 8.49386 2.49839 8.49386C2.11871 8.49386 1 7.97353 1 6.89387V6.09385C1 5.01414 1.81506 4.4938 2.49839 4.4938C3.20518 4.4938 3.99684 5.01414 3.99684 6.09385V6.89387ZM12.9783 10.538C12.9778 10.533 12.9768 10.5281 12.9759 10.5233L12.9759 10.5232C12.9749 10.5184 12.9739 10.5136 12.9734 10.5087C12.9588 10.3888 12.9363 10.2715 12.9051 10.1567C12.9051 10.1556 12.9051 10.1547 12.9041 10.1537C12.8386 9.90959 12.7282 9.67443 12.5633 9.44275V9.44176C12.2927 9.06046 11.8846 8.67156 11.2215 8.29233L11.1924 8.27572C10.8622 8.08679 10.7105 8 10.4998 8C10.1551 8 9.85434 8.27292 9.34759 8.74673H9.34655L8.88562 9.17822C8.88396 9.17982 8.87753 9.18836 8.86692 9.20245L8.86689 9.20249C8.77104 9.3298 8.33489 9.90909 7.99994 9.90909C7.66516 9.90909 7.22925 9.33036 7.13307 9.20268C7.12235 9.18845 7.11585 9.17982 7.11419 9.17822L6.65326 8.74673H6.65228C6.14554 8.27292 5.84475 8 5.50003 8C5.28326 8 5.08981 8.09187 4.7784 8.29233C4.13547 8.70555 3.70702 9.05997 3.43759 9.44069L3.43654 9.44119C3.43605 9.44169 3.4358 9.44233 3.43557 9.44296C3.43533 9.44358 3.4351 9.44418 3.43465 9.4446C3.27151 9.67436 3.16215 9.90802 3.09678 10.1507C3.09587 10.1526 3.09475 10.1551 3.09399 10.1575C3.06361 10.2715 3.04112 10.3872 3.02652 10.5061C3.02602 10.5117 3.02502 10.5171 3.02401 10.5226L3.02401 10.5226C3.02304 10.5278 3.02208 10.5331 3.02156 10.5384C3.00788 10.6647 3.00012 10.7935 3.00012 10.9272L3.00012 10.9643C3.00009 11.2949 2.99986 13.7152 3.00012 13.7273C3.00012 14.6321 3.33507 15 4.25008 15H11.7499C12.6728 15 12.9999 14.6519 12.9999 13.7273C13.0002 13.7153 12.9999 11.3331 12.9998 10.9726L12.9998 10.9272C12.9998 10.7936 12.9919 10.6648 12.9783 10.538ZM14.9969 6.89387C14.9969 7.97353 13.8994 8.49386 13.4984 8.49386C13.1187 8.49386 12 7.97353 12 6.89387V6.09385C12 5.01414 12.8151 4.4938 13.4984 4.4938C14.2053 4.4938 14.9969 5.01414 14.9969 6.09385V6.89387ZM0.758501 9.11697C0.138217 9.77624 0.000231735 10.8273 0.000231735 11.5109L0.000222208 11.5363C0.000153736 11.7128 -0.000247212 12.7465 0.000231735 12.7554C0.000231735 13.6587 0.162723 14 0.666809 14H2V10.2662L1.66671 9.64398C1.31409 9.0635 1.01682 8.8428 0.758501 9.11697ZM15.2415 9.11697C15.8617 9.77615 15.9998 10.8272 15.9998 11.5108L15.9998 11.5364C15.9998 11.7134 16.0002 12.7465 15.9998 12.7554C15.9998 13.6587 15.8373 14 15.3332 14H14V10.2663L14.3333 9.64404C14.6859 9.0635 14.9832 8.8428 15.2415 9.11697Z" fill="#657077"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

7
web/ASC.Web.Components/src/components/icons/svg/index.js
View File

@ -175,6 +175,8 @@ import OrigLockIcon from './lock.react.svg';
import OrigDownloadAsIcon from './download-as.react.svg';
import OrigRenameIcon from './rename.react.svg';
import OrigDepartmentsGroup from './departments.group.react.svg';
export const AZSortingIcon = createStyledIcon(
OrigAZSortingIcon,
'AZSortingIcon'
@ -851,4 +853,9 @@ export const DownloadAsIcon = createStyledIcon(
export const RenameIcon = createStyledIcon(
OrigRenameIcon,
'RenameIcon'
);
export const DepartmentsGroupIcon = createStyledIcon(
OrigDepartmentsGroup,
'DepartmentsGroupIcon'
);

8
web/ASC.Web.Components/src/components/link-with-dropdown/index.js
View File

@ -104,8 +104,12 @@ const StyledText = styled(SimpleText)`
const StyledSpan = styled.span`
position: relative;
.drop-down-item{
display:block;
}
.fixed-max-width {
max-width: 260px;
max-width: 300px;
}
`;
class LinkWithDropdown extends React.Component {
@ -208,11 +212,11 @@ class LinkWithDropdown extends React.Component {
open={this.state.isOpen}
withArrow={false}
clickOutsideAction={this.onClose}
maxHeight={200}
{...rest}
>
{data.map(item => (
<DropDownItem
className="drop-down-item"
key={item.key}
{...item}
onClick={this.onClickDropDownItem.bind(this.props, item)}