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

Web:Editor: add support dark-theme

Browse Source
This commit is contained in:
Timofey 2022-01-24 22:32:05 +08:00
parent ab32a8ca66
commit ff370ebe1d
43 changed files with 678 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/asc-web-components/aside/aside.js
View File

@ -7,6 +7,7 @@ import StyledAside from "./styled-aside";
const Aside = React.memo((props) => {
//console.log("Aside render");
const {
theme,
visible,
children,
scale,
@ -18,6 +19,7 @@ const Aside = React.memo((props) => {
return (
<StyledAside
theme={theme}
visible={visible}
scale={scale}
zIndex={zIndex}
@ -27,7 +29,9 @@ const Aside = React.memo((props) => {
{withoutBodyScroll ? (
children
) : (
<Scrollbar stype="mediumBlack">{children}</Scrollbar>
<Scrollbar theme={theme} stype="mediumBlack">
{children}
</Scrollbar>
)}
</StyledAside>
);

7
packages/asc-web-components/avatar/index.js
View File

@ -54,7 +54,7 @@ Initials.propTypes = {
// eslint-disable-next-line react/display-name
const Avatar = (props) => {
//console.log("Avatar render");
const { size, source, userName, role, editing, editAction } = props;
const { size, source, userName, role, editing, editAction, theme } = props;
const avatarContent = source ? (
<StyledImage src={source} />
@ -68,12 +68,13 @@ const Avatar = (props) => {
return (
<StyledAvatar {...props}>
<AvatarWrapper source={source} userName={userName}>
<AvatarWrapper theme={theme} source={source} userName={userName}>
{avatarContent}
</AvatarWrapper>
{editing && size === "max" && (
<EditContainer>
<EditContainer theme={theme}>
<IconButton
theme={theme}
className="edit_icon"
iconName="/static/images/pencil.react.svg"
onClick={editAction}

3
packages/asc-web-components/backdrop/index.js
View File

@ -81,12 +81,13 @@ class Backdrop extends React.Component {
render() {
const { needBackdrop, needBackground } = this.state;
const { isAside, visible } = this.props;
const { isAside, visible, theme } = this.props;
const modifiedClassName = this.modifyClassName();
return visible && (needBackdrop || isAside) ? (
<StyledBackdrop
theme={theme}
{...this.props}
ref={this.backdropRef}
className={modifiedClassName}

3
packages/asc-web-components/badge/index.js
View File

@ -24,11 +24,13 @@ const Badge = (props) => {
padding,
maxWidth,
lineHeight,
theme,
} = props;
return (
<StyledBadge {...props} onClick={onClick}>
<StyledInner
theme={theme}
backgroundColor={backgroundColor}
borderRadius={borderRadius}
padding={padding}
@ -36,6 +38,7 @@ const Badge = (props) => {
lineHeight={lineHeight}
>
<Text
theme={theme}
textAlign="center"
fontWeight={fontWeight}
color={color}

8
packages/asc-web-components/button/index.js
View File

@ -6,7 +6,7 @@ import Base from "../themes/base";
// eslint-disable-next-line no-unused-vars, react/prop-types
const Icon = ({ size, primary, icon, isHovered }) => (
const Icon = ({ size, primary, icon, isHovered, theme }) => (
<div className="btnIcon">
{icon &&
React.cloneElement(icon, {
@ -17,6 +17,7 @@ const Icon = ({ size, primary, icon, isHovered }) => (
? icon.props.hoveredcolor
: icon.props.color
: "",
theme: theme,
})}
</div>
);
@ -32,14 +33,15 @@ Icon.defaultProps = {
};
const Button = React.forwardRef((props, ref) => {
const { primary, size, isLoading, icon, label, isHovered } = props;
const iconProps = { primary, size, icon, isHovered };
const { primary, size, isLoading, icon, label, isHovered, theme } = props;
const iconProps = { primary, size, icon, isHovered, theme };
return (
<StyledButton innerRef={ref} {...props}>
{isLoading || icon ? (
isLoading ? (
<Loader
theme={theme}
type="oval"
size={size === "large" ? "18px" : size === "big" ? "16px" : "14px"}
className="loader"

20
packages/asc-web-components/checkbox/index.js
View File

@ -8,7 +8,7 @@ import CheckboxCheckedIcon from "./svg/checkbox.checked.react.svg";
import CheckboxIcon from "./svg/checkbox.react.svg";
// eslint-disable-next-line react/prop-types
const RenderCheckboxIcon = ({ isChecked, isIndeterminate }) => {
const RenderCheckboxIcon = ({ isChecked, isIndeterminate, theme }) => {
// let newProps = {
// size: "medium",
// className: "checkbox",
@ -19,11 +19,17 @@ const RenderCheckboxIcon = ({ isChecked, isIndeterminate }) => {
return (
<>
{isIndeterminate ? (
<CheckboxIndeterminateIcon className="checkbox not-selectable" />
<CheckboxIndeterminateIcon
theme={theme}
className="checkbox not-selectable"
/>
) : isChecked ? (
<CheckboxCheckedIcon className="checkbox not-selectable" />
<CheckboxCheckedIcon
theme={theme}
className="checkbox not-selectable"
/>
) : (
<CheckboxIcon className="checkbox not-selectable" />
<CheckboxIcon theme={theme} className="checkbox not-selectable" />
)}
</>
);
@ -73,10 +79,12 @@ class Checkbox extends React.Component {
value,
title,
truncate,
theme,
} = this.props;
return (
<StyledLabel
theme={theme}
id={id}
style={style}
isDisabled={isDisabled}
@ -85,6 +93,7 @@ class Checkbox extends React.Component {
title={title}
>
<HiddenInput
theme={theme}
type="checkbox"
checked={this.state.checked}
isDisabled={isDisabled}
@ -92,9 +101,10 @@ class Checkbox extends React.Component {
value={value}
onChange={this.onInputChange}
/>
<RenderCheckboxIcon {...this.props} />
<RenderCheckboxIcon theme={theme} {...this.props} />
{this.props.label && (
<Text
theme={theme}
as="span"
title={title}
isDisabled={isDisabled}

4
packages/asc-web-components/combobox/index.js
View File

@ -92,6 +92,7 @@ class ComboBox extends React.Component {
comboIcon,
manualY,
manualX,
theme,
} = this.props;
const { isOpen, selectedOption } = this.state;
@ -124,6 +125,7 @@ class ComboBox extends React.Component {
{...this.props}
>
<ComboButton
theme={theme}
noBorder={noBorder}
isDisabled={isDisabled}
selectedOption={selectedOption}
@ -139,6 +141,7 @@ class ComboBox extends React.Component {
/>
{displayType !== "toggle" && (
<DropDown
theme={theme}
className="dropdown-container not-selectable"
directionX={directionX}
directionY={directionY}
@ -154,6 +157,7 @@ class ComboBox extends React.Component {
? advancedOptions
: options.map((option) => (
<DropDownItem
theme={theme}
{...option}
textOverflow={textOverflow}
key={option.key}

3
packages/asc-web-components/drop-down-item/index.js
View File

@ -14,6 +14,7 @@ const DropDownItem = (props) => {
disabled,
onClick,
className,
theme,
} = props;
const onClickAction = (e) => {
@ -28,7 +29,7 @@ const DropDownItem = (props) => {
disabled={disabled}
>
{icon && (
<IconWrapper>
<IconWrapper theme={theme}>
<ReactSVG src={icon} className="drop-down-item_icon" />
</IconWrapper>
)}

3
packages/asc-web-components/drop-down/index.js
View File

@ -124,7 +124,7 @@ class DropDown extends React.PureComponent {
};
render() {
const { maxHeight, children, showDisabledItems } = this.props;
const { maxHeight, children, showDisabledItems, theme } = this.props;
const { directionX, directionY, width } = this.state;
let cleanChildren;
@ -144,6 +144,7 @@ class DropDown extends React.PureComponent {
return (
<StyledDropdown
theme={theme}
ref={this.dropDownRef}
{...this.props}
directionX={directionX}

2
packages/asc-web-components/icon-button/index.js
View File

@ -137,11 +137,13 @@ class IconButton extends React.PureComponent {
style,
dataTip,
title,
theme,
...rest
} = this.props;
return (
<StyledOuter
theme={theme}
className={className}
size={size}
title={title}

2
packages/asc-web-components/label/index.js
View File

@ -15,11 +15,13 @@ const Label = (props) => {
className,
id,
style,
theme,
} = props;
const errorProp = error ? { color: "#c30" } : {};
return (
<Text
theme={theme}
as="label"
id={id}
style={style}

4
packages/asc-web-components/loader/index.js
View File

@ -7,7 +7,7 @@ import { Rombs } from "./types/rombs";
import Text from "../text";
const Loader = (props) => {
const { type, color, size, label, className, style, id } = props;
const { type, color, size, label, className, style, id, theme } = props;
const svgRenderer = (type) => {
switch (type) {
@ -20,7 +20,7 @@ const Loader = (props) => {
default:
return (
<span style={{ ...style }}>
<Text color={color} fontSize={size}>
<Text theme={theme} color={color} fontSize={size}>
{label}
</Text>
</span>

6
packages/asc-web-components/loader/types/base.js
View File

@ -8,12 +8,12 @@ import {
} from "../styled-loader";
const LoadingDots = (props) => {
const { label } = props;
const { label, theme } = props;
return (
<LoadingWrapper {...props}>
<LoadingLabel>{label}</LoadingLabel>
<DotWrapper>
<LoadingLabel theme={theme}>{label}</LoadingLabel>
<DotWrapper theme={theme}>
<Dot {...props} delay="0s" />
<Dot {...props} delay=".2s" />
<Dot {...props} delay=".4s" />

3
packages/asc-web-components/loader/types/dual-ring.js
View File

@ -1,8 +1,9 @@
import React from "react";
import { StyledDualRing } from "../styled-loader";
// eslint-disable-next-line react/prop-types
export const DualRing = ({ size, color, label }) => (
export const DualRing = ({ size, color, label, theme }) => (
<StyledDualRing
theme={theme}
width={size}
height={size}
viewBox="0 0 100 100"

3
packages/asc-web-components/loader/types/oval.js
View File

@ -3,8 +3,9 @@ import React from "react";
import { StyledOval } from "../styled-loader";
// eslint-disable-next-line react/prop-types
export const Oval = ({ size, color, label }) => (
export const Oval = ({ size, color, label, theme }) => (
<StyledOval
theme={theme}
size={size}
color={color}
viewBox="0 0 38 38"

46
packages/asc-web-components/modal-dialog/index.js
View File

@ -112,6 +112,7 @@ class ModalDialog extends React.Component {
contentPaddingBottom,
removeScroll,
modalLoaderBodyHeight,
theme,
} = this.props;
let header = null;
@ -140,49 +141,64 @@ class ModalDialog extends React.Component {
const renderModal = () => {
return this.state.displayType === "modal" ? (
<Backdrop
theme={theme}
visible={visible}
zIndex={zIndex}
withBackground={true}
isModalDialog
>
<Dialog
theme={theme}
className={`${className} not-selectable`}
id={id}
style={style}
>
<Content
theme={theme}
contentHeight={contentHeight}
contentWidth={contentWidth}
displayType={this.state.displayType}
>
{isLoading ? (
<Loaders.DialogLoader bodyHeight={modalLoaderBodyHeight} />
<Loaders.DialogLoader
theme={theme}
bodyHeight={modalLoaderBodyHeight}
/>
) : (
<>
<StyledHeader>
<Heading className="heading" size="medium" truncate={true}>
<Heading
theme={theme}
className="heading"
size="medium"
truncate={true}
>
{header ? header.props.children : null}
</Heading>
<CloseButton onClick={onClose}></CloseButton>
<CloseButton theme={theme} onClick={onClose}></CloseButton>
</StyledHeader>
<BodyBox paddingProp={modalBodyPadding}>
<BodyBox theme={theme} paddingProp={modalBodyPadding}>
{body ? body.props.children : null}
</BodyBox>
<Box>{footer ? footer.props.children : null}</Box>
<Box theme={theme}>
{footer ? footer.props.children : null}
</Box>
</>
)}
</Content>
</Dialog>
</Backdrop>
) : (
<Box className={className} id={id} style={style}>
<Box theme={theme} className={className} id={id} style={style}>
<Backdrop
theme={theme}
visible={visible}
onClick={onClose}
zIndex={zIndex}
isAside={true}
/>
<Aside
theme={theme}
visible={visible}
scale={scale}
zIndex={zIndex}
@ -191,29 +207,39 @@ class ModalDialog extends React.Component {
withoutBodyScroll={removeScroll}
>
<Content
theme={theme}
contentHeight={contentHeight}
contentWidth={contentWidth}
removeScroll={removeScroll}
displayType={this.state.displayType}
>
{isLoading ? (
<Loaders.DialogAsideLoader withoutAside />
<Loaders.DialogAsideLoader theme={theme} withoutAside />
) : (
<>
<StyledHeader className="modal-dialog-aside-header">
<Heading className="heading" size="medium" truncate={true}>
<StyledHeader
theme={theme}
className="modal-dialog-aside-header"
>
<Heading
theme={theme}
className="heading"
size="medium"
truncate={true}
>
{header ? header.props.children : null}
</Heading>
{scale ? <CloseButton onClick={onClose}></CloseButton> : ""}
</StyledHeader>
<BodyBox
theme={theme}
className="modal-dialog-aside-body"
paddingProp={asideBodyPadding}
removeScroll={removeScroll}
>
{body ? body.props.children : null}
</BodyBox>
<Box className="modal-dialog-aside-footer">
<Box theme={theme} className="modal-dialog-aside-footer">
{footer ? footer.props.children : null}
</Box>
</>

3
packages/asc-web-components/radio-button-group/index.js
View File

@ -26,8 +26,10 @@ class RadioButtonGroup extends React.Component {
render() {
const options = this.props.options;
const theme = this.props.theme;
return (
<StyledDiv
theme={theme}
id={this.props.id}
className={this.props.className}
style={this.props.style}
@ -37,6 +39,7 @@ class RadioButtonGroup extends React.Component {
{options.map((option) => {
return (
<RadioButton
theme={theme}
key={option.value}
name={this.props.name}
value={option.value}

6
packages/asc-web-components/radio-button/index.js
View File

@ -6,10 +6,11 @@ import Text from "../text";
import { Label, Input } from "./styled-radio-button";
// eslint-disable-next-line react/prop-types
const RadiobuttonIcon = ({ isChecked }) => {
const RadiobuttonIcon = ({ isChecked, theme }) => {
let newProps = {
size: "medium",
className: "radio-button",
theme: theme,
};
return (
@ -41,6 +42,7 @@ class RadioButton extends React.Component {
render() {
return (
<Label
theme={this.props.theme}
orientation={this.props.orientation}
spacing={this.props.spacing}
isDisabled={this.props.isDisabled}
@ -49,6 +51,7 @@ class RadioButton extends React.Component {
style={this.props.style}
>
<Input
theme={this.props.theme}
type="radio"
name={this.props.name}
value={this.props.value}
@ -65,6 +68,7 @@ class RadioButton extends React.Component {
/>
<RadiobuttonIcon {...this.props} />
<Text
theme={this.props.theme}
as="span"
className="radio-button_text"
fontSize={this.props.fontSize}

3
packages/asc-web-components/textarea/index.js
View File

@ -24,10 +24,12 @@ class Textarea extends React.PureComponent {
fontSize,
heightTextArea,
color,
theme,
} = this.props;
return (
<StyledScrollbar
theme={theme}
className={className}
style={style}
stype="preMediumBlack"
@ -37,6 +39,7 @@ class Textarea extends React.PureComponent {
heighttextarea={heightTextArea}
>
<StyledTextarea
theme={theme}
id={id}
placeholder={placeholder}
onChange={(e) => onChange && onChange(e)}

5
packages/asc-web-components/themes/base.js
View File

@ -2418,6 +2418,11 @@ const Base = {
errorContainer: {
background: white,
},
editor: {
color: "#555f65",
background: white,
},
};
export default Base;

5
packages/asc-web-components/themes/dark.js
View File

@ -2427,6 +2427,11 @@ const Dark = {
errorContainer: {
background: black,
},
editor: {
color: "#858585",
background: black,
},
};
export default Dark;

1
packages/asc-web-components/toast/index.js
View File

@ -21,6 +21,7 @@ const Toast = (props) => {
return (
<StyledToastContainer
theme={props.theme}
className={props.className}
draggable={true}
position="top-right"

28
packages/asc-web-components/toast/toastr.js
View File

@ -24,15 +24,21 @@ const StyledInfoToastIcon = styled(InfoToastIcon)`
`;
// eslint-disable-next-line react/prop-types
const Icon = ({ type }) =>
const Icon = ({ type, theme }) =>
type === "success" ? (
<StyledCheckToastIcon className="toastr_icon toastr_success" />
<StyledCheckToastIcon
theme={theme}
className="toastr_icon toastr_success"
/>
) : type === "error" ? (
<StyledDangerToastIcon className="toastr_icon toastr_error" />
<StyledDangerToastIcon theme={theme} className="toastr_icon toastr_error" />
) : type === "warning" ? (
<StyledDangerToastIcon className="toastr_icon toastr_warning" />
<StyledDangerToastIcon
theme={theme}
className="toastr_icon toastr_warning"
/>
) : (
<StyledInfoToastIcon className="toastr_icon toastr_info" />
<StyledInfoToastIcon theme={theme} className="toastr_icon toastr_info" />
);
const toastr = {
@ -43,9 +49,10 @@ const toastr = {
warning: warning,
};
const CloseButton = ({ closeToast }) => (
const CloseButton = ({ closeToast, theme }) => (
<StyledCloseWrapper>
<StyledIconButton
theme={theme}
className="closeButton"
onClick={closeToast}
iconName="/static/images/cross.react.svg"
@ -60,14 +67,15 @@ const notify = (
title,
timeout = 5000,
withCross = false,
centerPosition = false
centerPosition = false,
theme
) => {
return toast(
<>
<IconWrapper>
<Icon size="medium" type={type} />
<IconWrapper theme={theme}>
<Icon theme={theme} size="medium" type={type} />
</IconWrapper>
<StyledDiv type={type}>
<StyledDiv theme={theme} type={type}>
{typeof data === "string" ? (
<>
{title && <Text className="toast-title">{title}</Text>}

3
packages/asc-web-components/tree-menu/index.js
View File

@ -192,6 +192,7 @@ const TreeMenu = React.forwardRef((props, ref) => {
gapBetweenNodes,
gapBetweenNodesTablet,
isEmptyRootNode,
theme,
} = props;
const expandedKeysProp = expandedKeys ? { expandedKeys: expandedKeys } : {};
@ -210,6 +211,7 @@ const TreeMenu = React.forwardRef((props, ref) => {
<>
{child.props.icon}
<Badge
theme={theme}
data-id={child.props.id}
className="newItem"
key={child.props.id + "-badge"}
@ -237,6 +239,7 @@ const TreeMenu = React.forwardRef((props, ref) => {
return (
<>
<StyledTreeMenu
theme={theme}
id={id}
style={style}
className={`${className} not-selectable`}

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

@ -205,7 +205,7 @@ class TreeFolders extends React.Component {
};
getItems = (data) => {
const { withoutProvider } = this.props;
const { withoutProvider, theme } = this.props;
return data.map((item) => {
const dragging = this.props.dragging ? this.showDragItems(item) : false;
@ -223,6 +223,7 @@ class TreeFolders extends React.Component {
if ((item.folders && item.folders.length > 0) || serviceFolder) {
return (
<TreeNode
theme={theme}
id={item.id}
key={item.id}
className={`tree-drag ${item.folderClassName}`}
@ -249,6 +250,7 @@ class TreeFolders extends React.Component {
}
return (
<TreeNode
theme={theme}
id={item.id}
key={item.id}
className={`tree-drag ${item.folderClassName}`}
@ -281,9 +283,9 @@ class TreeFolders extends React.Component {
return null;
}
if (obj.expanded) {
return <StyledExpanderDownIcon size="scale" />;
return <StyledExpanderDownIcon theme={this.props.theme} size="scale" />;
} else {
return <StyledExpanderRightIcon size="scale" />;
return <StyledExpanderRightIcon theme={this.props.theme} size="scale" />;
}
};
@ -432,10 +434,12 @@ class TreeFolders extends React.Component {
expandedPanelKeys,
treeFolders,
data,
theme,
} = this.props;
return (
<StyledTreeMenu
theme={theme}
className="files-tree-menu"
checkable={false}
draggable={dragging}

65
products/ASC.Files/Client/src/components/FolderTreeBody/index.js
View File

@ -1,11 +1,11 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import Loader from "@appserver/components/loader";
import Text from "@appserver/components/text";
import Scrollbar from "@appserver/components/scrollbar";
import TreeFolders from "../Article/Body/TreeFolders";
import { StyledSelectFolderPanel } from "../panels/StyledPanels";
import React from 'react';
import { inject, observer } from 'mobx-react';
import { useTranslation } from 'react-i18next';
import Loader from '@appserver/components/loader';
import Text from '@appserver/components/text';
import Scrollbar from '@appserver/components/scrollbar';
import TreeFolders from '../Article/Body/TreeFolders';
import { StyledSelectFolderPanel } from '../panels/StyledPanels';
const FolderTreeBody = ({
isLoadingData,
expandedKeys,
@ -19,20 +19,22 @@ const FolderTreeBody = ({
heightContent,
displayType,
isHeaderChildren,
theme,
}) => {
const { t } = useTranslation(["SelectFolder", "Common"]);
const { t } = useTranslation(['SelectFolder', 'Common']);
return (
<>
{!isLoadingData ? (
isAvailable ? (
<StyledSelectFolderPanel
theme={theme}
heightContent={heightContent}
displayType={displayType}
isHeaderChildren={isHeaderChildren}
>
isHeaderChildren={isHeaderChildren}>
<div className="select-folder-dialog_tree-folder">
<Scrollbar id="folder-tree-scroll-bar">
<Scrollbar theme={theme} id="folder-tree-scroll-bar">
<TreeFolders
theme={theme}
expandedPanelKeys={expandedKeys}
data={folderList}
filter={filter}
@ -47,28 +49,29 @@ const FolderTreeBody = ({
</StyledSelectFolderPanel>
) : (
<StyledSelectFolderPanel
theme={theme}
heightContent={heightContent}
isHeaderChildren={isHeaderChildren}
>
isHeaderChildren={isHeaderChildren}>
<div className="tree-folder-empty-list select-folder-dialog_tree-folder">
<Text as="span">{t("NotAvailableFolder")}</Text>
<Text as="span">{t('NotAvailableFolder')}</Text>
</div>
</StyledSelectFolderPanel>
)
) : (
<StyledSelectFolderPanel heightContent={heightContent}>
<StyledSelectFolderPanel theme={theme} heightContent={heightContent}>
<div className="tree-folder-Loader" key="loader">
<Loader
theme={theme}
type="oval"
size="16px"
style={{
display: "inline",
marginRight: "10px",
marginTop: "16px",
display: 'inline',
marginRight: '10px',
marginTop: '16px',
}}
/>
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
"Common:LoadingDescription"
<Text theme={theme} as="span">{`${t('Common:LoadingProcessing')} ${t(
'Common:LoadingDescription',
)}`}</Text>
</div>
</StyledSelectFolderPanel>
@ -82,14 +85,12 @@ FolderTreeBody.defaultProps = {
isLoadingData: false,
};
export default inject(
({ filesStore, treeFoldersStore, selectedFolderStore }) => {
const { filter, isLoading } = filesStore;
const { expandedPanelKeys } = treeFoldersStore;
return {
expandedKeys: expandedPanelKeys ? expandedPanelKeys : null,
filter,
isLoading,
};
}
)(observer(FolderTreeBody));
export default inject(({ filesStore, treeFoldersStore, selectedFolderStore }) => {
const { filter, isLoading } = filesStore;
const { expandedPanelKeys } = treeFoldersStore;
return {
expandedKeys: expandedPanelKeys ? expandedPanelKeys : null,
filter,
isLoading,
};
})(observer(FolderTreeBody));

47
products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
View File

@ -62,30 +62,53 @@ const EmbeddingBody = ({ embeddingLink, t, theme }) => {
return (
<div className="embedding-panel_body">
<Text className="embedding-panel_text">{t('Common:Size')}:</Text>
<Text theme={theme} className="embedding-panel_text">
{t('Common:Size')}:
</Text>
<div className="embedding-panel_links-container">
<Link isHovered type="action" className="embedding-panel_link" onClick={onSelectSizeMiddle}>
<Link
theme={theme}
isHovered
type="action"
className="embedding-panel_link"
onClick={onSelectSizeMiddle}>
600 x 800 px
</Link>
<Link isHovered type="action" className="embedding-panel_link" onClick={onSelectSizeSmall}>
<Link
theme={theme}
isHovered
type="action"
className="embedding-panel_link"
onClick={onSelectSizeSmall}>
400 x 600 px
</Link>
<Link isHovered type="action" className="embedding-panel_link" onClick={onSelectSizeAuto}>
<Link
theme={theme}
isHovered
type="action"
className="embedding-panel_link"
onClick={onSelectSizeAuto}>
{t('Auto')}
</Link>
</div>
<div className="embedding-panel_inputs-container">
<div>
<Text className="embedding-panel_text">{t('Width')}:</Text>
<Text theme={theme} className="embedding-panel_text">
{t('Width')}:
</Text>
<TextInput
theme={theme}
className="embedding-panel_input"
value={widthValue}
onChange={onChangeWidth}
/>
</div>
<div>
<Text className="embedding-panel_text">{t('Height')}:</Text>
<Text theme={theme} className="embedding-panel_text">
{t('Height')}:
</Text>
<TextInput
theme={theme}
className="embedding-panel_input"
value={heightValue}
onChange={onChangeHeight}
@ -93,15 +116,23 @@ const EmbeddingBody = ({ embeddingLink, t, theme }) => {
</div>
</div>
<div className="embedding-panel_code-container">
<Text className="embedding-panel_text">{t('EmbedCode')}:</Text>
<Text theme={theme} className="embedding-panel_text">
{t('EmbedCode')}:
</Text>
<IconButton
theme={theme}
className="embedding-panel_copy-icon"
size="16"
iconName="/static/images/copy.react.svg"
// color={theme.filesPanels.embedding.iconColor}
onClick={onCopyLink}
/>
<Textarea color={theme.filesPanels.embedding.textAreaColor} isReadOnly value={link} />
<Textarea
theme={theme}
color={theme.filesPanels.embedding.textAreaColor}
isReadOnly
value={link}
/>
</div>
</div>
);

21
products/ASC.Files/Client/src/components/panels/EmbeddingPanel/index.js
View File

@ -30,22 +30,29 @@ class EmbeddingPanelComponent extends React.Component {
//console.log("EmbeddingPanel render");
return (
<StyledEmbeddingPanel visible={visible}>
<Backdrop onClick={this.onClosePanels} visible={visible} zIndex={zIndex} isAside={true} />
<Aside className="header_aside-panel">
<StyledContent>
<StyledHeaderContent>
<StyledEmbeddingPanel theme={theme} visible={visible}>
<Backdrop
theme={theme}
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
isAside={true}
/>
<Aside theme={theme} className="header_aside-panel">
<StyledContent theme={theme}>
<StyledHeaderContent theme={theme}>
<IconButton
theme={theme}
size="16"
iconName="/static/images/arrow.path.react.svg"
onClick={this.onArrowClick}
// color={theme.filesPanels.embedding.color}
/>
<Heading className="header_aside-panel-header" size="medium" truncate>
<Heading theme={theme} className="header_aside-panel-header" size="medium" truncate>
{t('EmbeddingDocument')}
</Heading>
</StyledHeaderContent>
<StyledBody>
<StyledBody theme={theme}>
<EmbeddingBody theme={theme} />
</StyledBody>
</StyledContent>

60
products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
View File

@ -1,15 +1,16 @@
import React, { useState } from "react";
import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
import Text from "@appserver/components/text";
import SelectFolderInput from "../SelectFolderInput";
import FilesListBody from "./FilesListBody";
import Button from "@appserver/components/button";
import Loaders from "@appserver/common/components/Loaders";
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
import ModalDialog from "@appserver/components/modal-dialog";
const DISPLAY_TYPE = "aside";
import React, { useState } from 'react';
import { StyledAsidePanel, StyledSelectFilePanel } from '../StyledPanels';
import Text from '@appserver/components/text';
import SelectFolderInput from '../SelectFolderInput';
import FilesListBody from './FilesListBody';
import Button from '@appserver/components/button';
import Loaders from '@appserver/common/components/Loaders';
import EmptyContainer from '../../EmptyContainer/EmptyContainer';
import ModalDialog from '@appserver/components/modal-dialog';
const DISPLAY_TYPE = 'aside';
const SelectFileDialogAsideView = ({
t,
theme,
isPanelVisible,
zIndex,
onClose,
@ -45,27 +46,28 @@ const SelectFileDialogAsideView = ({
const isHeaderChildren = !!titleFilesList;
return (
<StyledAsidePanel visible={isPanelVisible}>
<StyledAsidePanel theme={theme} visible={isPanelVisible}>
<ModalDialog
theme={theme}
visible={isPanelVisible}
zIndex={zIndex}
onClose={onClose}
contentHeight="100%"
displayType={DISPLAY_TYPE}
removeScroll
>
<ModalDialog.Header>
{headerName ? headerName : t("SelectFile")}
removeScroll>
<ModalDialog.Header theme={theme}>
{headerName ? headerName : t('SelectFile')}
</ModalDialog.Header>
<ModalDialog.Body className="select-file_body-modal-dialog">
<ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
<StyledSelectFilePanel
theme={theme}
isHeaderChildren={isHeaderChildren}
displayType={DISPLAY_TYPE}
>
displayType={DISPLAY_TYPE}>
<div className="select-file-dialog_aside-body_wrapper">
<div className="select-file-dialog_aside-children"></div>
<div className="select-file-dialog_aside_body">
<SelectFolderInput
theme={theme}
onClickInput={onClickInput}
onClose={onCloseSelectFolderDialog}
onSelectFolder={onSelectFolder}
@ -85,13 +87,14 @@ const SelectFileDialogAsideView = ({
selectionButtonPrimary
/>
{titleFilesList && (
<Text className="modal-dialog-filter-title">
<Text theme={theme} className="modal-dialog-filter-title">
{titleFilesList}
</Text>
)}
<div className="select-file-dialog_aside_body-files_list">
{selectedFolder && !isLoadingData ? (
<FilesListBody
theme={theme}
filesList={filesList}
onSelectFile={onSelectFile}
hasNextPage={hasNextPage}
@ -105,9 +108,10 @@ const SelectFileDialogAsideView = ({
) : isAvailableFolderList ? (
<div key="loader" className="panel-loader-wrapper">
<Loaders.Rows
theme={theme}
style={{
marginBottom: "24px",
marginTop: "20px",
marginBottom: '24px',
marginTop: '20px',
}}
count={12}
/>
@ -115,7 +119,8 @@ const SelectFileDialogAsideView = ({
) : (
<div className="select-file-dialog_empty-container">
<EmptyContainer
headerText={t("Home:EmptyFolderHeader")}
theme={theme}
headerText={t('Home:EmptyFolderHeader')}
imageSrc="/static/images/empty_screen.png"
/>
</div>
@ -125,10 +130,11 @@ const SelectFileDialogAsideView = ({
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
<ModalDialog.Footer>
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
<ModalDialog.Footer theme={theme}>
<StyledSelectFilePanel theme={theme} isHeaderChildren={isHeaderChildren}>
<div className="select-file-dialog-aside_buttons">
<Button
theme={theme}
className="select-file-dialog-buttons-save"
primary
size="big"
@ -136,11 +142,7 @@ const SelectFileDialogAsideView = ({
onClick={onClickSave}
isDisabled={selectedFile.length === 0}
/>
<Button
size="big"
label={t("Common:CancelButton")}
onClick={onClose}
/>
<Button theme={theme} size="big" label={t('Common:CancelButton')} onClick={onClose} />
</div>
</StyledSelectFilePanel>
</ModalDialog.Footer>

93
products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js
View File

@ -1,17 +1,17 @@
import React, { useCallback, useEffect, useRef } from "react";
import Loader from "@appserver/components/loader";
import Text from "@appserver/components/text";
import { useTranslation, withTranslation } from "react-i18next";
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
import InfiniteLoader from "react-window-infinite-loader";
import AutoSizer from "react-virtualized-auto-sizer";
import { FixedSizeList as List } from "react-window";
import { inject, observer } from "mobx-react";
import FilesListRow from "./FilesListRow";
import EmptyContainer from "../../EmptyContainer/EmptyContainer";
import i18n from "./i18n";
import Loaders from "@appserver/common/components/Loaders";
import { I18nextProvider } from "react-i18next";
import React, { useCallback, useEffect, useRef } from 'react';
import Loader from '@appserver/components/loader';
import Text from '@appserver/components/text';
import { useTranslation, withTranslation } from 'react-i18next';
import CustomScrollbarsVirtualList from '@appserver/components/scrollbar/custom-scrollbars-virtual-list';
import InfiniteLoader from 'react-window-infinite-loader';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList as List } from 'react-window';
import { inject, observer } from 'mobx-react';
import FilesListRow from './FilesListRow';
import EmptyContainer from '../../EmptyContainer/EmptyContainer';
import i18n from './i18n';
import Loaders from '@appserver/common/components/Loaders';
import { I18nextProvider } from 'react-i18next';
let countLoad;
const FilesListBody = ({
filesList,
@ -27,8 +27,9 @@ const FilesListBody = ({
selectedFolder,
isMultiSelect,
selectedFile,
theme,
}) => {
const { t } = useTranslation(["SelectFile", "Common"]);
const { t } = useTranslation(['SelectFile', 'Common']);
const filesListRef = useRef(null);
useEffect(() => {
@ -42,7 +43,7 @@ const FilesListBody = ({
(index) => {
return !hasNextPage || index < filesList.length;
},
[filesList, hasNextPage]
[filesList, hasNextPage],
);
// If there are more items to be loaded then add an extra row to hold a loading indicator.
const itemCount = hasNextPage ? filesList.length + 1 : filesList.length;
@ -57,45 +58,42 @@ const FilesListBody = ({
(style) => {
return (
<div style={style}>
<div
key="loader"
className="panel-loader-wrapper loader-wrapper_margin"
>
<Loader type="oval" size="16px" className="panel-loader" />
<Text as="span">{loadingText}</Text>
<div key="loader" className="panel-loader-wrapper loader-wrapper_margin">
<Loader theme={theme} type="oval" size="16px" className="panel-loader" />
<Text theme={theme} as="span">
{loadingText}
</Text>
</div>
</div>
);
},
[loadingText]
[loadingText],
);
const renderFirstLoader = useCallback(
(style) => {
return (
<div style={style}>
<div
key="loader"
className="panel-loader-wrapper loader-wrapper_margin"
>
<div key="loader" className="panel-loader-wrapper loader-wrapper_margin">
<Loaders.Rows
theme={theme}
style={{
marginBottom: displayType === "aside" ? "24px" : "26px",
marginTop: displayType === "aside" ? "8px" : "10px",
marginBottom: displayType === 'aside' ? '24px' : '26px',
marginTop: displayType === 'aside' ? '8px' : '10px',
}}
count={displayType === "aside" ? 12 : 5}
count={displayType === 'aside' ? 12 : 5}
/>
</div>
</div>
);
},
[loadingText]
[loadingText],
);
const isFileChecked = useCallback(
(file) => {
const checked = selectedFile ? file.id === selectedFile.id : false;
return checked;
},
[selectedFile]
[selectedFile],
);
const Item = useCallback(
@ -110,21 +108,18 @@ const FilesListBody = ({
const file = filesList[index];
const fileName = file.title;
const fileExst = file.fileExst;
const modifyFileName = fileName.substring(
0,
fileName.indexOf(`${fileExst}`)
);
const modifyFileName = fileName.substring(0, fileName.indexOf(`${fileExst}`));
const fileOwner =
file.createdBy &&
((viewer.id === file.createdBy.id && t("Common:MeLabel")) ||
file.createdBy.displayName);
((viewer.id === file.createdBy.id && t('Common:MeLabel')) || file.createdBy.displayName);
const isChecked = isFileChecked(file);
return (
<div style={style}>
<FilesListRow
theme={theme}
displayType={displayType}
needRowSelection={needRowSelection}
index={index}
@ -132,8 +127,7 @@ const FilesListBody = ({
fileName={modifyFileName}
fileExst={fileExst}
isMultiSelect={isMultiSelect}
isChecked={isChecked}
>
isChecked={isChecked}>
<Text data-index={index} className="files-list_file-owner">
{fileOwner}
</Text>
@ -141,28 +135,28 @@ const FilesListBody = ({
</div>
);
},
[filesList, selectedFile, displayType, renderFirstLoader, renderPageLoader]
[filesList, selectedFile, displayType, renderFirstLoader, renderPageLoader],
);
return (
<div className="files-list-body">
<AutoSizer>
{({ width, height }) => (
<InfiniteLoader
theme={theme}
ref={filesListRef}
isItemLoaded={isItemLoaded}
itemCount={itemCount}
loadMoreItems={loadMoreItems}
>
loadMoreItems={loadMoreItems}>
{({ onItemsRendered, ref }) => (
<List
height={displayType === "aside" ? height : listHeight}
theme={theme}
height={displayType === 'aside' ? height : listHeight}
itemCount={itemCount}
itemSize={displayType === "aside" ? 56 : 50}
itemSize={displayType === 'aside' ? 56 : 50}
onItemsRendered={onItemsRendered}
ref={ref}
width={width + 8}
outerElementType={CustomScrollbarsVirtualList}
>
outerElementType={CustomScrollbarsVirtualList}>
{Item}
</List>
)}
@ -173,7 +167,8 @@ const FilesListBody = ({
{!hasNextPage && itemCount === 0 && (
<div className="select-file-dialog_empty-container">
<EmptyContainer
headerText={t("Home:EmptyFolderHeader")}
theme={theme}
headerText={t('Home:EmptyFolderHeader')}
imageSrc="/static/images/empty_screen.png"
/>
</div>
@ -190,7 +185,7 @@ const FilesListBodyWrapper = inject(({ auth }) => {
return {
viewer: user,
};
})(observer(withTranslation(["Common", "Home"])(FilesListBody)));
})(observer(withTranslation(['Common', 'Home'])(FilesListBody)));
class FilesList extends React.Component {
render() {

31
products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListRow.js
View File

@ -1,10 +1,10 @@
import React from "react";
import { StyledFilesList } from "../StyledPanels";
import { ReactSVG } from "react-svg";
import { inject, observer } from "mobx-react";
import Text from "@appserver/components/text";
import Checkbox from "@appserver/components/checkbox";
import RadioButton from "@appserver/components/radio-button";
import React from 'react';
import { StyledFilesList } from '../StyledPanels';
import { ReactSVG } from 'react-svg';
import { inject, observer } from 'mobx-react';
import Text from '@appserver/components/text';
import Checkbox from '@appserver/components/checkbox';
import RadioButton from '@appserver/components/radio-button';
const FilesListRow = ({
displayType,
needRowSelection,
@ -16,26 +16,25 @@ const FilesListRow = ({
iconSrc,
isMultiSelect, // it will be needed
isChecked,
theme,
}) => {
return (
<StyledFilesList
displayType={displayType}
theme={theme}
needRowSelection={needRowSelection}
isChecked={isChecked}
>
<div
data-index={index}
className="modal-dialog_file-name"
onClick={onSelectFile}
>
isChecked={isChecked}>
<div data-index={index} className="modal-dialog_file-name" onClick={onSelectFile}>
{isMultiSelect ? ( // it will be needed
<Checkbox
theme={theme}
label=""
isChecked={isChecked}
className="select-file-dialog_checked"
/>
) : (
<RadioButton
theme={theme}
fontSize="13px"
fontWeight="400"
name={`${index}`}
@ -48,9 +47,9 @@ const FilesListRow = ({
)}
<ReactSVG src={iconSrc} className="select-file-dialog_icon" />
<div data-index={index} className="files-list_full-name">
<Text data-index={index} className="entry-title">
<Text theme={theme} data-index={index} className="entry-title">
{fileName}
<Text data-index={index} className="file-exst" as="span">
<Text theme={theme} data-index={index} className="file-exst" as="span">
{fileExst}
</Text>
</Text>

102
products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
View File

@ -1,17 +1,17 @@
import React from "react";
import { StyledAsidePanel, StyledSelectFilePanel } from "../StyledPanels";
import ModalDialog from "@appserver/components/modal-dialog";
import SelectFolderDialog from "../SelectFolderDialog";
import FolderTreeBody from "../../FolderTreeBody";
import FilesListBody from "./FilesListBody";
import Button from "@appserver/components/button";
import Text from "@appserver/components/text";
import { isArrayEqual } from "@appserver/components/utils/array";
import { getFoldersTree } from "@appserver/common/api/files";
import React from 'react';
import { StyledAsidePanel, StyledSelectFilePanel } from '../StyledPanels';
import ModalDialog from '@appserver/components/modal-dialog';
import SelectFolderDialog from '../SelectFolderDialog';
import FolderTreeBody from '../../FolderTreeBody';
import FilesListBody from './FilesListBody';
import Button from '@appserver/components/button';
import Text from '@appserver/components/text';
import { isArrayEqual } from '@appserver/components/utils/array';
import { getFoldersTree } from '@appserver/common/api/files';
import {
exceptSortedByTagsFolders,
exceptPrivacyTrashFolders,
} from "../SelectFolderDialog/ExceptionFoldersConstants";
} from '../SelectFolderDialog/ExceptionFoldersConstants';
class SelectFileDialogModalView extends React.Component {
constructor(props) {
@ -20,7 +20,7 @@ class SelectFileDialogModalView extends React.Component {
isLoading: true,
isAvailable: true,
};
this.folderList = "";
this.folderList = '';
this.noTreeSwitcher = false;
}
@ -33,22 +33,14 @@ class SelectFileDialogModalView extends React.Component {
});
}
trySwitch = async () => {
const {
foldersType,
onSelectFolder,
selectedFolder,
passedId,
} = this.props;
const { foldersType, onSelectFolder, selectedFolder, passedId } = this.props;
switch (foldersType) {
case "exceptSortedByTags":
case 'exceptSortedByTags':
try {
const foldersTree = await getFoldersTree();
[
this.folderList,
this.noTreeSwitcher,
] = SelectFolderDialog.convertFolders(
[this.folderList, this.noTreeSwitcher] = SelectFolderDialog.convertFolders(
foldersTree,
exceptSortedByTagsFolders
exceptSortedByTagsFolders,
);
this.onSetSelectedFolder();
} catch (err) {
@ -57,15 +49,12 @@ class SelectFileDialogModalView extends React.Component {
this.loadersCompletes();
break;
case "exceptPrivacyTrashFolders":
case 'exceptPrivacyTrashFolders':
try {
const foldersTree = await getFoldersTree();
[
this.folderList,
this.noTreeSwitcher,
] = SelectFolderDialog.convertFolders(
[this.folderList, this.noTreeSwitcher] = SelectFolderDialog.convertFolders(
foldersTree,
exceptPrivacyTrashFolders
exceptPrivacyTrashFolders,
);
this.onSetSelectedFolder();
} catch (err) {
@ -73,20 +62,14 @@ class SelectFileDialogModalView extends React.Component {
}
this.loadersCompletes();
break;
case "common":
case 'common':
try {
this.folderList = await SelectFolderDialog.getCommonFolders();
!selectedFolder &&
onSelectFolder &&
onSelectFolder(
`${
selectedFolder
? selectedFolder
: passedId
? passedId
: this.folderList[0].id
}`
`${selectedFolder ? selectedFolder : passedId ? passedId : this.folderList[0].id}`,
);
} catch (err) {
console.error(err);
@ -94,7 +77,7 @@ class SelectFileDialogModalView extends React.Component {
this.loadersCompletes();
break;
case "third-party":
case 'third-party':
try {
this.folderList = await SelectFolderDialog.getCommonThirdPartyList();
this.folderList.length !== 0
@ -123,13 +106,7 @@ class SelectFileDialogModalView extends React.Component {
onSelectFolder &&
onSelectFolder(
`${
selectedFolder
? selectedFolder
: passedId
? passedId
: this.folderList[0].id
}`
`${selectedFolder ? selectedFolder : passedId ? passedId : this.folderList[0].id}`,
);
};
onSelect = (folder) => {
@ -162,6 +139,7 @@ class SelectFileDialogModalView extends React.Component {
onClickSave,
headerName,
primaryButtonName,
theme,
} = this.props;
const { isLoading, isAvailable } = this.state;
@ -169,30 +147,31 @@ class SelectFileDialogModalView extends React.Component {
const isHeaderChildren = !!titleFilesList;
return (
<StyledAsidePanel visible={isPanelVisible}>
<StyledAsidePanel theme={theme} visible={isPanelVisible}>
<ModalDialog
theme={theme}
visible={isPanelVisible}
zIndex={zIndex}
onClose={onClose}
className="select-file-modal-dialog"
style={{ maxWidth: "725px" }}
style={{ maxWidth: '725px' }}
displayType="modal"
modalBodyPadding="0px"
isLoading={isLoading}
modalLoaderBodyHeight="277px"
>
<ModalDialog.Header>
{headerName ? headerName : t("SelectFile")}
modalLoaderBodyHeight="277px">
<ModalDialog.Header theme={theme}>
{headerName ? headerName : t('SelectFile')}
</ModalDialog.Header>
<ModalDialog.Body className="select-file_body-modal-dialog">
<ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
<StyledSelectFilePanel
isHeaderChildren={isHeaderChildren}
theme={theme}
displayType="modal"
noTreeSwitcher={this.noTreeSwitcher}
>
noTreeSwitcher={this.noTreeSwitcher}>
<div className="modal-dialog_body">
<div className="modal-dialog_tree-body">
<FolderTreeBody
theme={theme}
expandedKeys={expandedKeys}
folderList={this.folderList}
onSelect={this.onSelect}
@ -208,12 +187,13 @@ class SelectFileDialogModalView extends React.Component {
<div className="modal-dialog_files-body">
<>
{titleFilesList && (
<Text className="modal-dialog-filter-title">
<Text theme={theme} className="modal-dialog-filter-title">
{titleFilesList}
</Text>
)}
{selectedFolder && (
<FilesListBody
theme={theme}
filesList={filesList}
onSelectFile={onSelectFile}
hasNextPage={hasNextPage}
@ -224,7 +204,7 @@ class SelectFileDialogModalView extends React.Component {
selectedFile={selectedFile}
listHeight={isHeaderChildren ? 260 : 303}
onSetLoadingData={this.onSetLoadingData}
displayType={"modal"}
displayType={'modal'}
/>
)}
</>
@ -232,10 +212,11 @@ class SelectFileDialogModalView extends React.Component {
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
<ModalDialog.Footer>
<StyledSelectFilePanel isHeaderChildren={isHeaderChildren}>
<ModalDialog.Footer theme={theme}>
<StyledSelectFilePanel theme={theme} isHeaderChildren={isHeaderChildren}>
<div className="select-file-dialog-modal_buttons">
<Button
theme={theme}
className="select-file-modal-dialog-buttons-save"
primary
size="medium"
@ -244,9 +225,10 @@ class SelectFileDialogModalView extends React.Component {
isDisabled={selectedFile.length === 0}
/>
<Button
theme={theme}
className="modal-dialog-button"
size="medium"
label={t("Common:CancelButton")}
label={t('Common:CancelButton')}
onClick={onClose}
/>
</div>

105
products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js
View File

@ -1,48 +1,39 @@
import React from "react";
import { inject, observer, Provider as MobxProvider } from "mobx-react";
import { I18nextProvider } from "react-i18next";
import { withTranslation } from "react-i18next";
import PropTypes from "prop-types";
import throttle from "lodash/throttle";
import React from 'react';
import { inject, observer, Provider as MobxProvider } from 'mobx-react';
import { I18nextProvider } from 'react-i18next';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import throttle from 'lodash/throttle';
import stores from "../../../store/index";
import i18n from "./i18n";
import SelectFileDialogModalView from "./ModalView";
import SelectFileDialogAsideView from "./AsideView";
import stores from '../../../store/index';
import i18n from './i18n';
import SelectFileDialogModalView from './ModalView';
import SelectFileDialogAsideView from './AsideView';
import utils from "@appserver/components/utils";
import utils from '@appserver/components/utils';
//import SelectFolderDialog from "../SelectFolderDialog";
import { getFolder } from "@appserver/common/api/files";
import { FilterType } from "@appserver/common/constants";
import { getFolder } from '@appserver/common/api/files';
import { FilterType } from '@appserver/common/constants';
const { desktop } = utils.device;
import store from "studio/store";
import store from 'studio/store';
const { auth: authStore } = store;
class SelectFileDialogBody extends React.Component {
constructor(props) {
super(props);
const {
folderId,
storeFolderId,
fileInfo,
filter,
creationButtonPrimary,
t,
} = props;
const { folderId, storeFolderId, fileInfo, filter, creationButtonPrimary, t } = props;
this.buttonName = creationButtonPrimary
? t("Common:Create")
: t("Common:SaveButton");
this.buttonName = creationButtonPrimary ? t('Common:Create') : t('Common:SaveButton');
this.state = {
isVisible: false,
selectedFolder: storeFolderId || "",
selectedFolder: storeFolderId || '',
passedId: folderId,
selectedFile: fileInfo || "",
fileName: (fileInfo && fileInfo.title) || "",
selectedFile: fileInfo || '',
fileName: (fileInfo && fileInfo.title) || '',
filesList: [],
hasNextPage: true,
isNextPageLoading: false,
@ -64,7 +55,7 @@ class SelectFileDialogBody extends React.Component {
isPresentationOnly,
isTablesOnly,
isMediaOnly,
searchParam = "",
searchParam = '',
ByExtension,
} = this.props;
@ -97,7 +88,7 @@ class SelectFileDialogBody extends React.Component {
return { filterType: FilterType.ByExtension, filterValue: searchParam };
}
return { filterType: FilterType.FilesOnly, filterValue: "" };
return { filterType: FilterType.FilesOnly, filterValue: '' };
};
setFilter = () => {
@ -112,7 +103,7 @@ class SelectFileDialogBody extends React.Component {
componentDidMount() {
authStore.init(true); // it will work if authStore is not initialized
window.addEventListener("resize", this.throttledResize);
window.addEventListener('resize', this.throttledResize);
this.setFilter();
}
componentWillUnmount() {
@ -125,7 +116,7 @@ class SelectFileDialogBody extends React.Component {
setFile,
} = this.props;
this.throttledResize && this.throttledResize.cancel();
window.removeEventListener("resize", this.throttledResize);
window.removeEventListener('resize', this.throttledResize);
if (resetTreeFolders) {
setExpandedPanelKeys(null);
@ -137,8 +128,7 @@ class SelectFileDialogBody extends React.Component {
}
getDisplayType = () => {
const displayType =
window.innerWidth < desktop.match(/\d+/)[0] ? "aside" : "modal";
const displayType = window.innerWidth < desktop.match(/\d+/)[0] ? 'aside' : 'modal';
return displayType;
};
@ -220,9 +210,7 @@ class SelectFileDialogBody extends React.Component {
this.setState({ isNextPageLoading: true }, () => {
getFolder(selectedFolder, this.newFilter)
.then((data) => {
let newFilesList = page
? this.state.filesList.concat(data.files)
: data.files;
let newFilesList = page ? this.state.filesList.concat(data.files) : data.files;
//TODO: it will need if passed the folder id - need to come up with a different solution.
@ -265,6 +253,7 @@ class SelectFileDialogBody extends React.Component {
onSetFileName,
tReady,
headerName,
theme,
} = this.props;
const {
isVisible,
@ -281,10 +270,11 @@ class SelectFileDialogBody extends React.Component {
const loadingText = loadingLabel
? loadingLabel
: `${t("Common:LoadingProcessing")} ${t("Common:LoadingDescription")}`;
: `${t('Common:LoadingProcessing')} ${t('Common:LoadingDescription')}`;
return displayType === "aside" ? (
return displayType === 'aside' ? (
<SelectFileDialogAsideView
theme={theme}
t={t}
isPanelVisible={isPanelVisible}
zIndex={zIndex}
@ -317,6 +307,7 @@ class SelectFileDialogBody extends React.Component {
/>
) : (
<SelectFileDialogModalView
theme={theme}
t={t}
isPanelVisible={isPanelVisible}
onClose={onClose}
@ -346,10 +337,10 @@ SelectFileDialogBody.propTypes = {
isPanelVisible: PropTypes.bool.isRequired,
onSelectFile: PropTypes.func.isRequired,
foldersType: PropTypes.oneOf([
"common",
"third-party",
"exceptSortedByTags",
"exceptPrivacyTrashFolders",
'common',
'third-party',
'exceptSortedByTags',
'exceptPrivacyTrashFolders',
]),
folderId: PropTypes.string,
withoutProvider: PropTypes.bool,
@ -360,26 +351,16 @@ SelectFileDialogBody.propTypes = {
};
SelectFileDialogBody.defaultProps = {
folderId: "",
titleFilesList: "",
folderId: '',
titleFilesList: '',
withoutProvider: false,
zIndex: 310,
creationButtonPrimary: false,
};
const SelectFileDialogWrapper = inject(
({
filesStore,
selectedFilesStore,
treeFoldersStore,
selectedFolderStore,
}) => {
const {
folderId: storeFolderId,
fileInfo,
setFolderId,
setFile,
} = selectedFilesStore;
({ filesStore, selectedFilesStore, treeFoldersStore, selectedFolderStore }) => {
const { folderId: storeFolderId, fileInfo, setFolderId, setFile } = selectedFilesStore;
const { setSelectedNode, setExpandedPanelKeys } = treeFoldersStore;
const { filter } = filesStore;
@ -394,14 +375,8 @@ const SelectFileDialogWrapper = inject(
filter,
setExpandedPanelKeys,
};
}
)(
observer(
withTranslation(["SelectFile", "Common", "Translations"])(
SelectFileDialogBody
)
)
);
},
)(observer(withTranslation(['SelectFile', 'Common', 'Translations'])(SelectFileDialogBody)));
class SelectFileDialog extends React.Component {
render() {
return (

18
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/AsideView.js
View File

@ -33,8 +33,9 @@ const SelectFolderDialogAsideView = ({
noTreeSwitcher,
}) => {
return (
<StyledAsidePanel visible={isPanelVisible}>
<StyledAsidePanel theme={theme} visible={isPanelVisible}>
<ModalDialog
theme={theme}
visible={isPanelVisible}
zIndex={zIndex}
contentHeight="100%"
@ -42,11 +43,12 @@ const SelectFolderDialogAsideView = ({
onClose={onClose}
removeScroll
displayType="aside">
<ModalDialog.Header>
<StyledSelectFolderPanel>
<ModalDialog.Header theme={theme}>
<StyledSelectFolderPanel theme={theme}>
<div className="select-folder-dialog_header">
{isNeedArrowIcon && (
<IconButton
theme={theme}
className="select-folder-dialog_header-icon"
size="16"
iconName="/static/images/arrow.path.react.svg"
@ -58,8 +60,9 @@ const SelectFolderDialogAsideView = ({
</div>
</StyledSelectFolderPanel>
</ModalDialog.Header>
<ModalDialog.Body>
<ModalDialog.Body theme={theme}>
<StyledSelectFolderPanel
theme={theme}
displayType={DISPLAY_TYPE}
showButtons={showButtons}
isFooter={!!footer}
@ -68,6 +71,7 @@ const SelectFolderDialogAsideView = ({
<div>{header} </div>
<FolderTreeBody
theme={theme}
isLoadingData={isLoadingData}
folderList={folderList}
onSelect={onSelect}
@ -81,12 +85,13 @@ const SelectFolderDialogAsideView = ({
</div>
</StyledSelectFolderPanel>
</ModalDialog.Body>
<ModalDialog.Footer>
<StyledSelectFolderPanel>
<ModalDialog.Footer theme={theme}>
<StyledSelectFolderPanel theme={theme}>
{footer}
{showButtons && (
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="big"
@ -95,6 +100,7 @@ const SelectFolderDialogAsideView = ({
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
theme={theme}
size="big"
label={t('Common:CancelButton')}
onClick={onClose}

16
products/ASC.Files/Client/src/components/panels/SelectFolderDialog/ModalView.js
View File

@ -7,6 +7,7 @@ import Button from '@appserver/components/button';
const SelectFolderDialogModalView = ({
t,
theme,
isPanelVisible,
zIndex,
onClose,
@ -30,23 +31,26 @@ const SelectFolderDialogModalView = ({
noTreeSwitcher,
}) => {
return (
<StyledAsidePanel visible={isPanelVisible}>
<StyledAsidePanel theme={theme} visible={isPanelVisible}>
<ModalDialog
theme={theme}
visible={isPanelVisible}
zIndex={zIndex}
onClose={onClose}
displayType="modal"
{...(!header && !footer && !showButtons && { contentHeight: '416px' })}>
<ModalDialog.Header>
<ModalDialog.Header theme={theme}>
{headerName ? headerName : t('Translations:FolderSelection')}
</ModalDialog.Header>
<ModalDialog.Body>
<ModalDialog.Body theme={theme}>
<StyledSelectFolderPanel
theme={theme}
isNeedArrowIcon={isNeedArrowIcon}
noTreeSwitcher={noTreeSwitcher}>
<div className="select-folder-modal-dialog-header">{header} </div>
<FolderTreeBody
theme={theme}
isLoadingData={isLoadingData}
folderList={folderList}
onSelect={onSelect}
@ -58,12 +62,13 @@ const SelectFolderDialogModalView = ({
/>
</StyledSelectFolderPanel>
</ModalDialog.Body>
<ModalDialog.Footer>
<StyledSelectFolderPanel>
<ModalDialog.Footer theme={theme}>
<StyledSelectFolderPanel theme={theme}>
{footer}
{showButtons && (
<div className="select-folder-dialog-modal_buttons">
<Button
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="medium"
@ -72,6 +77,7 @@ const SelectFolderDialogModalView = ({
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
theme={theme}
size="medium"
label={t('Common:CancelButton')}
onClick={onClose}

38
products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js
View File

@ -1,14 +1,14 @@
import React from "react";
import { Provider as MobxProvider } from "mobx-react";
import React from 'react';
import { Provider as MobxProvider } from 'mobx-react';
import PropTypes from "prop-types";
import PropTypes from 'prop-types';
import stores from "../../../store/index";
import SelectFolderDialog from "../SelectFolderDialog/index";
import StyledComponent from "./StyledSelectFolderInput";
import SimpleFileInput from "../../SimpleFileInput";
import stores from '../../../store/index';
import SelectFolderDialog from '../SelectFolderDialog/index';
import StyledComponent from './StyledSelectFolderInput';
import SimpleFileInput from '../../SimpleFileInput';
let path = "";
let path = '';
class SelectFolderInputBody extends React.PureComponent {
constructor(props) {
@ -16,9 +16,9 @@ class SelectFolderInputBody extends React.PureComponent {
this.state = {
isLoading: false,
baseFolderPath: "",
fullFolderPath: "",
fullFolderPathDefault: "",
baseFolderPath: '',
fullFolderPath: '',
fullFolderPathDefault: '',
};
}
componentDidMount() {
@ -35,10 +35,7 @@ class SelectFolderInputBody extends React.PureComponent {
componentDidUpdate(prevProps) {
const { isSetDefaultFolderPath, folderPath } = this.props;
if (
isSetDefaultFolderPath &&
isSetDefaultFolderPath !== prevProps.isSetDefaultFolderPath
) {
if (isSetDefaultFolderPath && isSetDefaultFolderPath !== prevProps.isSetDefaultFolderPath) {
this.setState({
fullFolderPath: this.state.fullFolderPathDefault,
});
@ -96,12 +93,14 @@ class SelectFolderInputBody extends React.PureComponent {
headerName,
footer,
selectionButtonPrimary,
theme,
} = this.props;
const { isLoading, baseFolderPath, fullFolderPath } = this.state;
return (
<StyledComponent>
<StyledComponent theme={theme}>
<SimpleFileInput
theme={theme}
name={name}
className="input-with-folder-path"
textField={fullFolderPath || baseFolderPath}
@ -111,6 +110,7 @@ class SelectFolderInputBody extends React.PureComponent {
/>
<SelectFolderDialog
theme={theme}
zIndex={zIndex}
isPanelVisible={isPanelVisible}
onClose={onClose}
@ -157,17 +157,17 @@ SelectFolderInputBody.defaultProps = {
withoutProvider: false,
isDisabled: false,
isError: false,
folderPath: "",
folderPath: '',
};
class SelectFolderInput extends React.Component {
static setFullFolderPath = (foldersArray) => {
path = "";
path = '';
if (foldersArray.length > 1) {
for (let item of foldersArray) {
if (!path) {
path = path + `${item.title}`;
} else path = path + " " + "/" + " " + `${item.title}`;
} else path = path + ' ' + '/' + ' ' + `${item.title}`;
}
} else {
for (let item of foldersArray) {

18
products/ASC.Files/Client/src/components/panels/SharingDialog/index.js
View File

@ -1,10 +1,10 @@
import React, { useEffect } from "react";
import { Provider as MobxProvider, inject, observer } from "mobx-react";
import { getShareFiles } from "@appserver/common/api/files";
import SharingPanel from "../SharingPanel";
import React, { useEffect } from 'react';
import { Provider as MobxProvider, inject, observer } from 'mobx-react';
import { getShareFiles } from '@appserver/common/api/files';
import SharingPanel from '../SharingPanel';
import stores from "../../../store/index";
import store from "studio/store";
import stores from '../../../store/index';
import store from 'studio/store';
const { auth: authStore } = store;
@ -15,6 +15,7 @@ const SharingDialog = ({
setSharingPanelVisible,
onCancel,
setSelection,
theme,
}) => {
useEffect(() => {
setSharingPanelVisible(isVisible);
@ -32,6 +33,7 @@ const SharingDialog = ({
uploadPanelVisible={false}
onSuccess={onSuccess}
onCancel={onCancel}
theme={theme}
/>
)}
</>
@ -50,9 +52,7 @@ const SharingDialogWrapper = inject(({ dialogsStore, filesStore }) => {
class SharingModal extends React.Component {
static getSharingSettings = (fileId) => {
return getShareFiles([+fileId], []).then((users) =>
SharingPanel.convertSharingUsers(users)
);
return getShareFiles([+fileId], []).then((users) => SharingPanel.convertSharingUsers(users));
};
componentDidMount() {

56
products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js
View File

@ -1,9 +1,9 @@
import React from "react";
import ComboBox from "@appserver/components/combobox";
import { ShareAccessRights } from "@appserver/common/constants";
import DropDownItem from "@appserver/components/drop-down-item";
import { getAccessIcon } from "../../../helpers/files-helpers";
import { ReactSVG } from "react-svg";
import React from 'react';
import ComboBox from '@appserver/components/combobox';
import { ShareAccessRights } from '@appserver/common/constants';
import DropDownItem from '@appserver/components/drop-down-item';
import { getAccessIcon } from '../../../helpers/files-helpers';
import { ReactSVG } from 'react-svg';
const AccessComboBox = (props) => {
const {
@ -14,6 +14,7 @@ const AccessComboBox = (props) => {
itemId,
onAccessChange,
t,
theme,
arrowIconColor,
disableLink,
} = props;
@ -29,9 +30,10 @@ const AccessComboBox = (props) => {
const advancedOptions = (
<>
{accessOptions.includes("FullAccess") && (
{accessOptions.includes('FullAccess') && (
<DropDownItem
label={t("Common:FullAccess")}
theme={theme}
label={t('Common:FullAccess')}
icon="/static/images/access.edit.react.svg"
data-id={itemId}
data-access={FullAccess}
@ -39,9 +41,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("FilterEditing") && (
{accessOptions.includes('FilterEditing') && (
<DropDownItem
label={t("CustomFilter")}
theme={theme}
label={t('CustomFilter')}
icon="/static/images/custom.filter.react.svg"
data-id={itemId}
data-access={CustomFilter}
@ -49,9 +52,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("Review") && (
{accessOptions.includes('Review') && (
<DropDownItem
label={t("Common:Review")}
theme={theme}
label={t('Common:Review')}
icon="/static/images/access.review.react.svg"
data-id={itemId}
data-access={Review}
@ -59,9 +63,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("FormFilling") && (
{accessOptions.includes('FormFilling') && (
<DropDownItem
label={t("FormFilling")}
theme={theme}
label={t('FormFilling')}
icon="/static/images/access.form.react.svg"
data-id={itemId}
data-access={FormFilling}
@ -69,9 +74,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("Comment") && (
{accessOptions.includes('Comment') && (
<DropDownItem
label={t("Comment")}
theme={theme}
label={t('Comment')}
icon="/static/images/access.comment.react.svg"
data-id={itemId}
data-access={Comment}
@ -79,9 +85,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("ReadOnly") && (
{accessOptions.includes('ReadOnly') && (
<DropDownItem
label={t("ReadOnly")}
theme={theme}
label={t('ReadOnly')}
icon="/static/images/eye.react.svg"
data-id={itemId}
data-access={ReadOnly}
@ -89,9 +96,10 @@ const AccessComboBox = (props) => {
/>
)}
{accessOptions.includes("DenyAccess") && (
{accessOptions.includes('DenyAccess') && (
<DropDownItem
label={t("DenyAccess")}
theme={theme}
label={t('DenyAccess')}
icon="/static/images/access.none.react.svg"
data-id={itemId}
data-access={DenyAccess}
@ -103,12 +111,11 @@ const AccessComboBox = (props) => {
const accessRights = disableLink ? ReadOnly : access;
const accessIconUrl = getAccessIcon(accessRights);
const selectedOption = arrowIconColor
? { key: 0, arrowIconColor }
: { key: 0 };
const selectedOption = arrowIconColor ? { key: 0, arrowIconColor } : { key: 0 };
return (
<ComboBox
theme={theme}
advancedOptions={advancedOptions}
options={[]}
selectedOption={selectedOption}
@ -117,8 +124,7 @@ const AccessComboBox = (props) => {
scaled={false}
directionX={directionX}
disableIconClick={false}
isDisabled={isDisabled}
>
isDisabled={isDisabled}>
<ReactSVG src={accessIconUrl} className="sharing-access-combo-box-icon" />
</ComboBox>
);

9
products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js
View File

@ -179,6 +179,7 @@ class SharingRow extends React.Component {
{!shareLink && (
<Row
theme={theme}
className="sharing-row"
key={`internal-link-key_${id}`}
element={
@ -207,6 +208,7 @@ class SharingRow extends React.Component {
) : (
<AccessComboBox
t={t}
theme={theme}
access={access}
directionX="left"
onAccessChange={onChangeItemAccess}
@ -220,23 +222,25 @@ class SharingRow extends React.Component {
<>
{!shareLink &&
(isOwner && canShareOwnerChange ? (
<Link isHovered type="action" {...onShowChangeOwnerPanelProp}>
<Link theme={theme} isHovered type="action" {...onShowChangeOwnerPanelProp}>
{label ? label : userName ? userName : displayName}
</Link>
) : (
<Text truncate className="sharing_panel-text">
<Text theme={theme} truncate className="sharing_panel-text">
{label ? label : userName ? userName : displayName}
</Text>
))}
{isOwner ? (
<Text
className="sharing_panel-remove-icon"
theme={theme}
color={theme.filesPanels.sharing.color}>
{t('Common:Owner')}
</Text>
) : id === isMyId ? (
<Text
className="sharing_panel-remove-icon"
theme={theme}
//color="#A3A9AE"
>
{t('Common:FullAccess')}
@ -246,6 +250,7 @@ class SharingRow extends React.Component {
!isLocked && (
<IconButton
iconName="/static/images/remove.react.svg"
theme={theme}
id={id}
{...onRemoveUserProp}
className="sharing_panel-remove-icon"

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

@ -475,10 +475,15 @@ class SharingPanelComponent extends React.Component {
const internalLink = selection.length === 1 && !isEncrypted && this.getInternalLink();
return isPersonal && !isMobileOnly ? (
<ModalDialog isLoading={!tReady} visible={visible} displayType="modal" onClose={this.onClose}>
<ModalDialog.Header>{t('SharingSettingsTitle')}</ModalDialog.Header>
<ModalDialog.Body>
<StyledModalRowContainer>
<ModalDialog
theme={theme}
isLoading={!tReady}
visible={visible}
displayType="modal"
onClose={this.onClose}>
<ModalDialog.Header theme={theme}>{t('SharingSettingsTitle')}</ModalDialog.Header>
<ModalDialog.Body theme={theme}>
<StyledModalRowContainer theme={theme}>
{!isLoading ? (
shareDataItems.map((item, index) => (
<SharingRow
@ -505,6 +510,7 @@ class SharingPanelComponent extends React.Component {
))
) : (
<Loaders.Rectangle
theme={theme}
height="47px"
animate={0}
foregroundColor={theme.filesPanels.sharing.loader.foregroundColor}
@ -516,8 +522,9 @@ class SharingPanelComponent extends React.Component {
{showEmbeddingContent && <EmbeddingBody embeddingLink={shareLink} />}
</StyledModalRowContainer>
</ModalDialog.Body>
<ModalDialog.Footer>
<ModalDialog.Footer theme={theme}>
<Button
theme={theme}
className="sharing_panel-button"
label={t('Common:SaveButton')}
size="big"
@ -528,26 +535,34 @@ class SharingPanelComponent extends React.Component {
</ModalDialog.Footer>
</ModalDialog>
) : (
<StyledAsidePanel visible={visible}>
<Backdrop onClick={this.onClose} visible={visible} zIndex={zIndex} isAside={true} />
<Aside className="header_aside-panel" visible={visible}>
<StyledContent isDisabled={isLoading}>
<StyledHeaderContent className="sharing_panel-header-container">
<StyledAsidePanel theme={theme} visible={visible}>
<Backdrop
theme={theme}
onClick={this.onClose}
visible={visible}
zIndex={zIndex}
isAside={true}
/>
<Aside theme={theme} className="header_aside-panel" visible={visible}>
<StyledContent theme={theme} isDisabled={isLoading}>
<StyledHeaderContent theme={theme} className="sharing_panel-header-container">
{uploadPanelVisible && (
<IconButton
theme={theme}
size="16"
iconName="/static/images/arrow.path.react.svg"
onClick={this.onClose}
// color={theme.filesPanels.sharing.color}
/>
)}
<Heading className="sharing_panel-header" size="medium" truncate>
<Heading theme={theme} className="sharing_panel-header" size="medium" truncate>
{t('SharingSettingsTitle')}
</Heading>
{!isPersonal && (
<div className="sharing_panel-icons-container">
<div ref={this.ref} className="sharing_panel-drop-down-wrapper">
<IconButton
theme={theme}
size="17"
iconName="/static/images/actions.header.touch.react.svg"
className="sharing_panel-plus-icon"
@ -557,6 +572,7 @@ class SharingPanelComponent extends React.Component {
/>
<DropDown
theme={theme}
directionX="right"
className="sharing_panel-drop-down"
open={showActionPanel}
@ -580,7 +596,11 @@ class SharingPanelComponent extends React.Component {
</div>
)}
</StyledHeaderContent>
<StyledSharingBody ref={this.scrollRef} stype="mediumBlack" style={SharingBodyStyle}>
<StyledSharingBody
theme={theme}
ref={this.scrollRef}
stype="mediumBlack"
style={SharingBodyStyle}>
{!isLoading ? (
shareDataItems.map((item, index) => (
<SharingRow
@ -607,8 +627,8 @@ class SharingPanelComponent extends React.Component {
))
) : (
<div key="loader" className="panel-loader-wrapper">
<Loader type="oval" size="16px" className="panel-loader" />
<Text as="span">{`${t('Common:LoadingProcessing')} ${t(
<Loader theme={theme} type="oval" size="16px" className="panel-loader" />
<Text theme={theme} as="span">{`${t('Common:LoadingProcessing')} ${t(
'Common:LoadingDescription',
)}`}</Text>
</div>
@ -616,6 +636,7 @@ class SharingPanelComponent extends React.Component {
{isNotifyUsers && (
<div className="sharing_panel-text-area">
<Textarea
theme={theme}
placeholder={t('AddShareMessage')}
onChange={this.onChangeMessage}
value={message}
@ -627,6 +648,7 @@ class SharingPanelComponent extends React.Component {
<StyledFooter>
{!isPersonal && (
<Checkbox
theme={theme}
isChecked={isNotifyUsers}
label={t('Notify users')}
onChange={this.onNotifyUsersChange}
@ -635,6 +657,7 @@ class SharingPanelComponent extends React.Component {
/>
)}
<Button
theme={theme}
className="sharing_panel-button"
label={t('Common:SaveButton')}
size={isMobile ? 'big' : 'medium'}
@ -649,6 +672,7 @@ class SharingPanelComponent extends React.Component {
{showAddUsersPanel && (
<AddUsersPanel
theme={theme}
onSharingPanelClose={this.onClose}
onClose={this.onShowUsersPanel}
visible={showAddUsersPanel}
@ -663,6 +687,7 @@ class SharingPanelComponent extends React.Component {
{showAddGroupsPanel && (
<AddGroupsPanel
theme={theme}
onSharingPanelClose={this.onClose}
onClose={this.onShowGroupsPanel}
visible={showAddGroupsPanel}
@ -675,6 +700,7 @@ class SharingPanelComponent extends React.Component {
{showChangeOwnerPanel && (
<AddUsersPanel
theme={theme}
onSharingPanelClose={this.onClose}
onClose={this.onShowChangeOwnerPanel}
visible={showChangeOwnerPanel}
@ -685,6 +711,7 @@ class SharingPanelComponent extends React.Component {
{showEmbeddingPanel && (
<EmbeddingPanel
theme={theme}
visible={showEmbeddingPanel}
onSharingPanelClose={this.onClose}
onClose={this.onShowEmbeddingPanel}

13
products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js
View File

@ -19,6 +19,7 @@ const StyledAccessEditIcon = styled(AccessEditIcon)`
`;
StyledAccessEditIcon.defaultProps = { theme: Base };
const StyledCopyIcon = styled(CopyIcon)`
${commonIconsStyles}
@ -60,15 +61,18 @@ class LinkRow extends React.Component {
return (
<StyledLinkRow
theme={theme}
withToggle={withToggle}
isDisabled={isDisabled}
className="link-row__container">
<Row
theme={theme}
className="link-row"
key={`${linkText.replace(' ', '-')}-key_${index}`}
element={
withToggle ? (
<AccessComboBox
theme={theme}
t={t}
access={item.access}
directionX="left"
@ -79,13 +83,18 @@ class LinkRow extends React.Component {
disableLink={disableLink}
/>
) : (
<StyledAccessEditIcon size="medium" className="sharing_panel-owner-icon" />
<StyledAccessEditIcon
theme={theme}
size="medium"
className="sharing_panel-owner-icon"
/>
)
}
contextButtonSpacerWidth="0px">
<>
<div className="sharing_panel-link-container">
<LinkWithDropdown
theme={theme}
className="sharing_panel-link"
color={theme.filesPanels.sharing.dropdownColor}
dropdownType="alwaysDashed"
@ -97,6 +106,7 @@ class LinkRow extends React.Component {
</LinkWithDropdown>
{onCopyLink && (
<StyledCopyIcon
theme={theme}
isDisabled={isDisabled}
size="medium"
onClick={onCopyLink}
@ -107,6 +117,7 @@ class LinkRow extends React.Component {
{withToggle && (
<div>
<ToggleButton
theme={theme}
isChecked={isChecked}
onChange={this.onToggleButtonChange}
isDisabled={isLoading}

292
web/ASC.Web.Editor/src/Editor.jsx
View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState } from 'react';
import Toast from "@appserver/components/toast";
import toastr from "studio/toastr";
import { toast } from "react-toastify";
import { Trans } from "react-i18next";
import Box from "@appserver/components/box";
import { regDesktop } from "@appserver/common/desktop";
import Toast from '@appserver/components/toast';
import toastr from 'studio/toastr';
import { toast } from 'react-toastify';
import { Trans } from 'react-i18next';
import Box from '@appserver/components/box';
import { regDesktop } from '@appserver/common/desktop';
import {
combineUrl,
getObjectByLocation,
@ -13,7 +13,7 @@ import {
isRetina,
getCookie,
setCookie,
} from "@appserver/common/utils";
} from '@appserver/common/utils';
import {
getDocServiceUrl,
openEdit,
@ -29,36 +29,37 @@ import {
getEditHistory,
getEditDiff,
restoreDocumentsVersion,
} from "@appserver/common/api/files";
import FilesFilter from "@appserver/common/api/files/filter";
} from '@appserver/common/api/files';
import FilesFilter from '@appserver/common/api/files/filter';
import throttle from "lodash/throttle";
import { isIOS, deviceType } from "react-device-detect";
import { homepage } from "../package.json";
import throttle from 'lodash/throttle';
import { isIOS, deviceType } from 'react-device-detect';
import { homepage } from '../package.json';
import { AppServerConfig } from "@appserver/common/constants";
import SharingDialog from "files/SharingDialog";
import { getDefaultFileName, SaveAs, canConvert } from "files/utils";
import SelectFileDialog from "files/SelectFileDialog";
import SelectFolderDialog from "files/SelectFolderDialog";
import { StyledSelectFolder } from "./StyledEditor";
import i18n from "./i18n";
import Text from "@appserver/components/text";
import TextInput from "@appserver/components/text-input";
import Checkbox from "@appserver/components/checkbox";
import { isMobile } from "react-device-detect";
import store from "studio/store";
import { AppServerConfig } from '@appserver/common/constants';
import SharingDialog from 'files/SharingDialog';
import { getDefaultFileName, SaveAs, canConvert } from 'files/utils';
import SelectFileDialog from 'files/SelectFileDialog';
import SelectFolderDialog from 'files/SelectFolderDialog';
import { StyledSelectFolder } from './StyledEditor';
import i18n from './i18n';
import Text from '@appserver/components/text';
import TextInput from '@appserver/components/text-input';
import Checkbox from '@appserver/components/checkbox';
import { isMobile } from 'react-device-detect';
import store from 'studio/store';
const { auth: authStore } = store;
const theme = store.auth.settingsStore.theme;
let documentIsReady = false;
const text = "text";
const spreadSheet = "spreadsheet";
const presentation = "presentation";
const insertImageAction = "imageFileType";
const mailMergeAction = "mailMergeFileType";
const compareFilesAction = "documentsFileType";
const text = 'text';
const spreadSheet = 'spreadsheet';
const presentation = 'presentation';
const insertImageAction = 'imageFileType';
const mailMergeAction = 'mailMergeFileType';
const compareFilesAction = 'documentsFileType';
let docTitle = null;
let actionLink;
@ -71,35 +72,32 @@ let user = null;
let personal;
let url = window.location.href;
let config;
const filesUrl = url.substring(0, url.indexOf("/doceditor"));
const doc = url.indexOf("doc=") !== -1 ? url.split("doc=")[1] : null;
const filesUrl = url.substring(0, url.indexOf('/doceditor'));
const doc = url.indexOf('doc=') !== -1 ? url.split('doc=')[1] : null;
toast.configure();
const Editor = () => {
const urlParams = getObjectByLocation(window.location);
const decodedId = urlParams
? urlParams.fileId || urlParams.fileid || null
: null;
const fileId =
typeof decodedId === "string" ? encodeURIComponent(decodedId) : decodedId;
const decodedId = urlParams ? urlParams.fileId || urlParams.fileid || null : null;
const fileId = typeof decodedId === 'string' ? encodeURIComponent(decodedId) : decodedId;
const version = urlParams ? urlParams.version || null : null;
const doc = urlParams ? urlParams.doc || null : null;
const isDesktop = window["AscDesktopEditor"] !== undefined;
const view = url.indexOf("action=view") !== -1;
const isDesktop = window['AscDesktopEditor'] !== undefined;
const view = url.indexOf('action=view') !== -1;
const [isLoading, setIsLoading] = useState(true);
const [isAuthenticated, setIsAuthenticated] = useState(true);
const [titleSelectorFolder, setTitleSelectorFolder] = useState("");
const [titleSelectorFolder, setTitleSelectorFolder] = useState('');
const [extension, setExtension] = useState();
const [urlSelectorFolder, setUrlSelectorFolder] = useState("");
const [urlSelectorFolder, setUrlSelectorFolder] = useState('');
const [openNewTab, setNewOpenTab] = useState(false);
const [typeInsertImageAction, setTypeInsertImageAction] = useState();
const throttledChangeTitle = throttle(() => changeTitle(), 500);
useEffect(() => {
if (isRetina() && getCookie("is_retina") == null) {
setCookie("is_retina", true, { path: "/" });
if (isRetina() && getCookie('is_retina') == null) {
setCookie('is_retina', true, { path: '/' });
}
init();
@ -169,15 +167,10 @@ const Editor = () => {
})
.catch((error) => {
console.log(error);
toastr.error(
typeof error === "string" ? error : error.message,
null,
0,
true
);
toastr.error(typeof error === 'string' ? error : error.message, null, 0, true);
});
},
i18n.t
i18n.t,
);
};
@ -190,13 +183,11 @@ const Editor = () => {
try {
if (!fileId) return;
console.log(
`Editor componentDidMount fileId=${fileId}, version=${version}, doc=${doc}`
);
console.log(`Editor componentDidMount fileId=${fileId}, version=${version}, doc=${doc}`);
if (isIPad()) {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
//showLoader();
@ -212,16 +203,13 @@ const Editor = () => {
}
if (!doc && !successAuth) {
localStorage.setItem("redirectPath", window.location.href);
localStorage.setItem('redirectPath', window.location.href);
window.open(
combineUrl(
AppServerConfig.proxyURL,
personal ? "/sign-in" : "/login"
),
"_self",
"",
true
combineUrl(AppServerConfig.proxyURL, personal ? '/sign-in' : '/login'),
'_self',
'',
true,
);
return;
}
@ -229,7 +217,7 @@ const Editor = () => {
try {
fileInfo = await getFileInfo(fileId);
if (url.indexOf("#message/") > -1) {
if (url.indexOf('#message/') > -1) {
if (canConvert(fileInfo.fileExst)) {
const url = await convertDocumentUrl();
history.pushState({}, null, url);
@ -269,40 +257,35 @@ const Editor = () => {
isSharingAccess = fileInfo && fileInfo.canShare;
if (view) {
config.editorConfig.mode = "view";
config.editorConfig.mode = 'view';
}
setIsLoading(false);
loadScript(docApiUrl, "scripDocServiceAddress", () => onLoad());
loadScript(docApiUrl, 'scripDocServiceAddress', () => onLoad());
} catch (error) {
console.log(error);
toastr.error(
typeof error === "string" ? error : error.message,
null,
0,
true
);
toastr.error(typeof error === 'string' ? error : error.message, null, 0, true);
}
};
const isIPad = () => {
return isIOS && deviceType === "tablet";
return isIOS && deviceType === 'tablet';
};
const setFavicon = (documentType) => {
const favicon = document.getElementById("favicon");
const favicon = document.getElementById('favicon');
if (!favicon) return;
let icon = null;
switch (documentType) {
case "text":
icon = "text.ico";
case 'text':
icon = 'text.ico';
break;
case "presentation":
icon = "presentation.ico";
case 'presentation':
icon = 'presentation.ico';
break;
case "spreadsheet":
icon = "spreadsheet.ico";
case 'spreadsheet':
icon = 'spreadsheet.ico';
break;
default:
break;
@ -318,18 +301,18 @@ const Editor = () => {
const setDocumentTitle = (subTitle = null) => {
//const { isAuthenticated, settingsStore, product: currentModule } = auth;
//const { organizationName } = settingsStore;
const organizationName = "ONLYOFFICE"; //TODO: Replace to API variant
const moduleTitle = "Documents"; //TODO: Replace to API variant
const organizationName = 'ONLYOFFICE'; //TODO: Replace to API variant
const moduleTitle = 'Documents'; //TODO: Replace to API variant
let title;
if (subTitle) {
if (isAuthenticated && moduleTitle) {
title = subTitle + " - " + moduleTitle;
title = subTitle + ' - ' + moduleTitle;
} else {
title = subTitle + " - " + organizationName;
title = subTitle + ' - ' + organizationName;
}
} else if (moduleTitle && organizationName) {
title = moduleTitle + " - " + organizationName;
title = moduleTitle + ' - ' + organizationName;
} else {
title = organizationName;
}
@ -339,9 +322,9 @@ const Editor = () => {
const onLoad = () => {
try {
if (!window.DocsAPI) throw new Error("DocsAPI is not defined");
if (!window.DocsAPI) throw new Error('DocsAPI is not defined');
console.log("Editor config: ", config);
console.log('Editor config: ', config);
docTitle = config.document.title;
@ -349,7 +332,7 @@ const Editor = () => {
setDocumentTitle(docTitle);
if (isMobile) {
config.type = "mobile";
config.type = 'mobile';
}
let goBack;
@ -362,7 +345,7 @@ const Editor = () => {
goBack = {
blank: true,
requestClose: false,
text: i18n.t("FileLocation"),
text: i18n.t('FileLocation'),
url: `${combineUrl(filesUrl, `/filter?${urlFilter}`)}`,
};
}
@ -377,8 +360,8 @@ const Editor = () => {
config.document.info.favorite = null;
}
if (url.indexOf("anchor") !== -1) {
const splitUrl = url.split("anchor=");
if (url.indexOf('anchor') !== -1) {
const splitUrl = url.split('anchor=');
const decodeURI = decodeURIComponent(splitUrl[1]);
const obj = JSON.parse(decodeURI);
@ -390,11 +373,7 @@ const Editor = () => {
if (successAuth) {
const documentType = config.documentType;
const fileExt =
documentType === text
? "docx"
: documentType === presentation
? "pptx"
: "xlsx";
documentType === text ? 'docx' : documentType === presentation ? 'pptx' : 'xlsx';
const defaultFileName = getDefaultFileName(fileExt);
@ -402,10 +381,10 @@ const Editor = () => {
config.editorConfig.createUrl = combineUrl(
window.location.origin,
AppServerConfig.proxyURL,
"products/files/",
'products/files/',
`/httphandlers/filehandler.ashx?action=create&doctype=text&title=${encodeURIComponent(
defaultFileName
)}`
defaultFileName,
)}`,
);
}
let onRequestSharingSettings,
@ -460,7 +439,7 @@ const Editor = () => {
const newConfig = Object.assign(config, events);
docEditor = window.DocsAPI.DocEditor("editor", newConfig);
docEditor = window.DocsAPI.DocEditor('editor', newConfig);
} catch (error) {
console.log(error);
toastr.error(error.message, null, 0, true);
@ -514,9 +493,7 @@ const Editor = () => {
let obj = {
...(changes.length !== 0 && { changes }),
created: `${new Date(fileHistory[i].created).toLocaleString(
config.editorConfig.lang
)}`,
created: `${new Date(fileHistory[i].created).toLocaleString(config.editorConfig.lang)}`,
...(serverVersion && { serverVersion }),
key: fileHistory[i].key,
user: {
@ -532,8 +509,8 @@ const Editor = () => {
return result;
};
const getCurrentDocumentVersion = (fileHistory, historyLength) => {
return url.indexOf("&version=") !== -1
? +url.split("&version=")[1]
return url.indexOf('&version=') !== -1
? +url.split('&version=')[1]
: fileHistory[historyLength - 1].version;
};
const onSDKRequestHistory = async () => {
@ -555,17 +532,10 @@ const Editor = () => {
const onSDKRequestRestore = async (event) => {
const restoreVersion = event.data.version;
try {
const updateVersions = await restoreDocumentsVersion(
fileId,
restoreVersion,
doc
);
const updateVersions = await restoreDocumentsVersion(fileId, restoreVersion, doc);
const historyLength = updateVersions.length;
docEditor.refreshHistory({
currentVersion: getCurrentDocumentVersion(
updateVersions,
historyLength
),
currentVersion: getCurrentDocumentVersion(updateVersions, historyLength),
history: getDocumentHistory(updateVersions, historyLength),
});
} catch (e) {
@ -576,31 +546,29 @@ const Editor = () => {
};
const onSDKAppReady = () => {
console.log("ONLYOFFICE Document Editor is ready");
console.log('ONLYOFFICE Document Editor is ready');
const index = url.indexOf("#message/");
const index = url.indexOf('#message/');
if (index > -1) {
const splitUrl = url.split("#message/");
const message = decodeURIComponent(splitUrl[1]).replaceAll("+", " ");
const splitUrl = url.split('#message/');
const message = decodeURIComponent(splitUrl[1]).replaceAll('+', ' ');
history.pushState({}, null, url.substring(0, index));
docEditor.showMessage(message);
}
const tempElm = document.getElementById("loader");
const tempElm = document.getElementById('loader');
if (tempElm) {
tempElm.outerHTML = "";
tempElm.outerHTML = '';
}
};
const onSDKInfo = (event) => {
console.log(
"ONLYOFFICE Document Editor is opened in mode " + event.data.mode
);
console.log('ONLYOFFICE Document Editor is opened in mode ' + event.data.mode);
};
const onSDKRequestEditRights = async () => {
console.log("ONLYOFFICE Document Editor requests editing rights");
const index = url.indexOf("&action=view");
console.log('ONLYOFFICE Document Editor requests editing rights');
const index = url.indexOf('&action=view');
if (index) {
let convertUrl = url.substring(0, index);
@ -617,7 +585,7 @@ const Editor = () => {
const [isVisible, setIsVisible] = useState(false);
const [isFileDialogVisible, setIsFileDialogVisible] = useState(false);
const [isFolderDialogVisible, setIsFolderDialogVisible] = useState(false);
const [filesType, setFilesType] = useState("");
const [filesType, setFilesType] = useState('');
const onSDKRequestSharingSettings = () => {
setIsVisible(true);
@ -633,7 +601,7 @@ const Editor = () => {
const link = generateLink(ACTION_DATA);
const urlFormation = !actionLink ? url : url.split("&anchor=")[0];
const urlFormation = !actionLink ? url : url.split('&anchor=')[0];
const linkFormation = `${urlFormation}&anchor=${link}`;
@ -650,19 +618,19 @@ const Editor = () => {
const onSDKWarning = (event) => {
console.log(
"ONLYOFFICE Document Editor reports a warning: code " +
'ONLYOFFICE Document Editor reports a warning: code ' +
event.data.warningCode +
", description " +
event.data.warningDescription
', description ' +
event.data.warningDescription,
);
};
const onSDKError = (event) => {
console.log(
"ONLYOFFICE Document Editor reports an error: code " +
'ONLYOFFICE Document Editor reports an error: code ' +
event.data.errorCode +
", description " +
event.data.errorDescription
', description ' +
event.data.errorDescription,
);
};
@ -691,7 +659,7 @@ const Editor = () => {
}
if (!newTitle) {
const onlyNumbers = new RegExp("^[0-9]+$");
const onlyNumbers = new RegExp('^[0-9]+$');
const isFileWithoutProvider = onlyNumbers.test(fileId);
const convertFileId = isFileWithoutProvider ? +fileId : fileId;
@ -699,10 +667,10 @@ const Editor = () => {
favorite
? markAsFavorite([convertFileId])
.then(() => updateFavorite(favorite))
.catch((error) => console.log("error", error))
.catch((error) => console.log('error', error))
: removeFromFavorite([convertFileId])
.then(() => updateFavorite(favorite))
.catch((error) => console.log("error", error));
.catch((error) => console.log('error', error));
}
};
@ -740,7 +708,7 @@ const Editor = () => {
const onSDKRequestSaveAs = (event) => {
setTitleSelectorFolder(event.data.title);
setUrlSelectorFolder(event.data.url);
setExtension(event.data.title.split(".").pop());
setExtension(event.data.title.split('.').pop());
setIsFolderDialogVisible(true);
};
@ -751,25 +719,18 @@ const Editor = () => {
};
const getSavingInfo = async (title, folderId) => {
const savingInfo = await SaveAs(
title,
urlSelectorFolder,
folderId,
openNewTab
);
const savingInfo = await SaveAs(title, urlSelectorFolder, folderId, openNewTab);
if (savingInfo) {
const convertedInfo = savingInfo.split(": ").pop();
const convertedInfo = savingInfo.split(': ').pop();
docEditor.showMessage(convertedInfo);
}
};
const onClickSaveSelectFolder = (e, folderId) => {
const currentExst = titleSelectorFolder.split(".").pop();
const currentExst = titleSelectorFolder.split('.').pop();
const title =
currentExst !== extension
? titleSelectorFolder.concat(`.${extension}`)
: titleSelectorFolder;
currentExst !== extension ? titleSelectorFolder.concat(`.${extension}`) : titleSelectorFolder;
if (openNewTab) {
SaveAs(title, urlSelectorFolder, folderId, openNewTab);
@ -789,11 +750,11 @@ const Editor = () => {
const getFileTypeTranslation = () => {
switch (filesType) {
case mailMergeAction:
return i18n.t("MailMergeFileType");
return i18n.t('MailMergeFileType');
case insertImageAction:
return i18n.t("ImageFileType");
return i18n.t('ImageFileType');
case compareFilesAction:
return i18n.t("DocumentsFileType");
return i18n.t('DocumentsFileType');
}
};
const selectFilesListTitle = () => {
@ -816,7 +777,7 @@ const Editor = () => {
const mailMergeActionProps = {
isTablesOnly: true,
searchParam: ".xlsx",
searchParam: '.xlsx',
};
const compareFilesActionProps = {
isDocumentsOnly: true,
@ -836,20 +797,21 @@ const Editor = () => {
return (
<Box
theme={theme}
widthProp="100vw"
heightProp={isIPad() ? "calc(var(--vh, 1vh) * 100)" : "100vh"}
>
<Toast />
heightProp={isIPad() ? 'calc(var(--vh, 1vh) * 100)' : '100vh'}>
<Toast theme={theme} />
{!isLoading ? (
<>
<div id="editor"></div>
{isSharingAccess && (
{!isSharingAccess && (
<SharingDialog
isVisible={isVisible}
sharingObject={fileInfo}
onCancel={onCancel}
onSuccess={loadUsersRightsList}
theme={theme}
/>
)}
@ -862,7 +824,8 @@ const Editor = () => {
foldersType="exceptPrivacyTrashFolders"
{...fileTypeDetection()}
titleFilesList={selectFilesListTitle()}
headerName={i18n.t("SelectFileTitle")}
headerName={i18n.t('SelectFileTitle')}
theme={theme}
/>
)}
@ -878,26 +841,29 @@ const Editor = () => {
onSave={onClickSaveSelectFolder}
header={
<StyledSelectFolder>
<Text className="editor-select-folder_text">
{i18n.t("FileName")}
<Text className="editor-select-folder_text" theme={theme}>
{i18n.t('FileName')}
</Text>
<TextInput
className="editor-select-folder_text-input"
scale
onChange={onChangeInput}
theme={theme}
value={titleSelectorFolder}
/>
</StyledSelectFolder>
}
headerName={i18n.t("FolderForSave")}
{...(extension !== "fb2" && {
theme={theme}
headerName={i18n.t('FolderForSave')}
{...(extension !== 'fb2' && {
footer: (
<StyledSelectFolder>
<StyledSelectFolder theme={theme}>
<Checkbox
className="editor-select-folder_checkbox"
label={i18n.t("OpenSavedDocument")}
label={i18n.t('OpenSavedDocument')}
onChange={onClickCheckbox}
isChecked={openNewTab}
theme={theme}
/>
</StyledSelectFolder>
),

11
web/ASC.Web.Editor/src/StyledEditor.js
View File

@ -1,21 +1,26 @@
import styled from "styled-components";
import styled from 'styled-components';
import Base from '@appserver/components/themes/base';
const StyledSelectFolder = styled.div`
.editor-select-folder_text {
color: #555f65;
color: ${(props) => props.theme.editor.color};
}
.editor-select-folder_text-input {
margin-top: 8px;
}
.editor-select-folder_checkbox {
background-color: white;
background-color: ${(props) => props.theme.editor.background};
word-break: break-word;
}
`;
StyledSelectFolder.defaultProps = { theme: Base };
const StyledSelectFile = styled.div`
.editor-select-file_text {
word-break: break-word;
}
`;
export { StyledSelectFolder, StyledSelectFile };