Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files
This commit is contained in:
commit
dfb32288e8
@ -161,7 +161,7 @@ class SectionBodyContent extends React.Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
if(showMoveToPanel !== nextState.showMoveToPanel || showCopyPanel !== nextState.showCopyPanel) {
|
||||
if (showMoveToPanel !== nextState.showMoveToPanel || showCopyPanel !== nextState.showCopyPanel) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -218,7 +218,7 @@ class SectionBodyContent extends React.Component {
|
||||
|
||||
onDeleteFile = (fileId, currentFolderId) => {
|
||||
const { deleteFile, t, setProgressBarData } = this.props;
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("DeleteOperation")});
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("DeleteOperation") });
|
||||
deleteFile(fileId)
|
||||
.then(res => {
|
||||
const id = res[0] && res[0].id ? res[0].id : null;
|
||||
@ -256,7 +256,7 @@ class SectionBodyContent extends React.Component {
|
||||
toastr.error(err);
|
||||
clearProgressData(store.dispatch);
|
||||
})
|
||||
.finally(() => setTimeout(() => clearProgressData(store.dispatch), 5000));
|
||||
.finally(() => setTimeout(() => clearProgressData(store.dispatch), 5000));
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -276,7 +276,7 @@ class SectionBodyContent extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
onClickShare = () => this.setState({showSharingPanel: !this.state.showSharingPanel});
|
||||
onClickShare = () => this.setState({ showSharingPanel: !this.state.showSharingPanel });
|
||||
|
||||
onClickLinkForPortal = () => {
|
||||
const { settings, selection } = this.props;
|
||||
@ -337,12 +337,12 @@ class SectionBodyContent extends React.Component {
|
||||
onLoading(true);
|
||||
|
||||
api.files.finalizeVersion(fileId, 0, false)
|
||||
.then((data) => {
|
||||
.then((data) => {
|
||||
//console.log("api.files.finalizeVersion", data);
|
||||
return fetchFiles(selectedFolderId, filter, store.dispatch)
|
||||
.catch(err =>
|
||||
toastr.error(err)
|
||||
);
|
||||
.catch(err =>
|
||||
toastr.error(err)
|
||||
);
|
||||
})
|
||||
.finally(() => onLoading(false));
|
||||
}
|
||||
@ -357,7 +357,7 @@ class SectionBodyContent extends React.Component {
|
||||
const conflictResolveType = 0; //Skip = 0, Overwrite = 1, Duplicate = 2
|
||||
const deleteAfter = false;
|
||||
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("CopyOperation")});
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("CopyOperation") });
|
||||
this.copyTo(selectedFolderId, folderIds, fileIds, conflictResolveType, deleteAfter);
|
||||
}
|
||||
|
||||
@ -386,8 +386,8 @@ class SectionBodyContent extends React.Component {
|
||||
icon: 'HistoryFinalizedIcon',
|
||||
onClick: this.finalizeVersion,
|
||||
disabled: false,
|
||||
"data-id": item.id,
|
||||
"data-version": item.version
|
||||
"data-id": item.id,
|
||||
"data-version": item.version
|
||||
},
|
||||
{
|
||||
key: "block-unblock-version",
|
||||
@ -510,6 +510,9 @@ class SectionBodyContent extends React.Component {
|
||||
};
|
||||
|
||||
needForUpdate = (currentProps, nextProps) => {
|
||||
if (currentProps.widthProp !== nextProps.widthProp) {
|
||||
return true;
|
||||
}
|
||||
if (currentProps.checked !== nextProps.checked) {
|
||||
return true;
|
||||
}
|
||||
@ -519,7 +522,7 @@ class SectionBodyContent extends React.Component {
|
||||
if (!isEqual(currentProps.data, nextProps.data)) {
|
||||
return true;
|
||||
}
|
||||
if(currentProps.viewAs !== nextProps.viewAs){
|
||||
if (currentProps.viewAs !== nextProps.viewAs) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@ -541,7 +544,7 @@ class SectionBodyContent extends React.Component {
|
||||
|
||||
getItemIcon = (item, isEdit) => {
|
||||
const { fileAction } = this.props;
|
||||
|
||||
|
||||
const actionExtension = fileAction.extension && `.${fileAction.extension}`;
|
||||
const extension = isEdit ? actionExtension : item.fileExst;
|
||||
const icon = extension
|
||||
@ -810,7 +813,7 @@ class SectionBodyContent extends React.Component {
|
||||
this.props.setMediaViewerData(item);
|
||||
}
|
||||
onMediaFileClick = (id) => {
|
||||
const itemId = typeof(id) !== "object" ? id : this.props.selection[0].id;
|
||||
const itemId = typeof (id) !== "object" ? id : this.props.selection[0].id;
|
||||
const item = { visible: true, id: itemId };
|
||||
this.props.setMediaViewerData(item);
|
||||
}
|
||||
@ -855,7 +858,7 @@ class SectionBodyContent extends React.Component {
|
||||
}
|
||||
|
||||
onMouseDown = e => {
|
||||
if(window.innerWidth < 1025 || e.target.tagName === "rect" || e.target.tagName === "path") {
|
||||
if (window.innerWidth < 1025 || e.target.tagName === "rect" || e.target.tagName === "path") {
|
||||
return;
|
||||
}
|
||||
const mouseButton = e.which ? e.which !== 1 : e.button ? e.button !== 0 : false;
|
||||
@ -973,7 +976,7 @@ class SectionBodyContent extends React.Component {
|
||||
const conflictResolveType = 0; //Skip = 0, Overwrite = 1, Duplicate = 2
|
||||
const deleteAfter = true;
|
||||
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("MoveToOperation")});
|
||||
setProgressBarData({ visible: true, percent: 0, label: t("MoveToOperation") });
|
||||
for (let item of selection) {
|
||||
if (item.fileExst) {
|
||||
fileIds.push(item.id)
|
||||
@ -1153,17 +1156,17 @@ class SectionBodyContent extends React.Component {
|
||||
)}
|
||||
<CustomTooltip ref={this.tooltipRef}>{tooltipLabel}</CustomTooltip>
|
||||
|
||||
{viewAs === "tile"
|
||||
?
|
||||
<TileContainer
|
||||
className="tileContainer"
|
||||
draggable
|
||||
useReactWindow={false}
|
||||
headingFolders={t("Folders")}
|
||||
headingFiles={t("Files")}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isEdit =
|
||||
{viewAs === "tile"
|
||||
?
|
||||
<TileContainer
|
||||
className="tileContainer"
|
||||
draggable
|
||||
useReactWindow={false}
|
||||
headingFolders={t("Folders")}
|
||||
headingFiles={t("Files")}
|
||||
>
|
||||
{items.map((item) => {
|
||||
const isEdit =
|
||||
!!fileAction.type &&
|
||||
editingId === item.id &&
|
||||
item.fileExst === fileAction.extension;
|
||||
@ -1184,105 +1187,105 @@ class SectionBodyContent extends React.Component {
|
||||
value += draggable ? "_draggable" : "";
|
||||
const classNameProp = isFolder && item.access < 2 ? { className: " dropable" } : {};
|
||||
|
||||
return (
|
||||
<DragAndDrop
|
||||
{...classNameProp}
|
||||
onDrop={this.onDrop.bind(this, item)}
|
||||
onMouseDown={this.onMouseDown}
|
||||
dragging={dragging && isFolder && item.access < 2}
|
||||
key={`dnd-key_${item.id}`}
|
||||
{...contextOptionsProps}
|
||||
value={value}
|
||||
return (
|
||||
<DragAndDrop
|
||||
{...classNameProp}
|
||||
onDrop={this.onDrop.bind(this, item)}
|
||||
onMouseDown={this.onMouseDown}
|
||||
dragging={dragging && isFolder && item.access < 2}
|
||||
key={`dnd-key_${item.id}`}
|
||||
{...contextOptionsProps}
|
||||
value={value}
|
||||
isFolder={!item.fileExst}
|
||||
>
|
||||
<Tile
|
||||
key={item.id}
|
||||
item={item}
|
||||
isFolder={!item.fileExst}
|
||||
>
|
||||
<Tile
|
||||
key={item.id}
|
||||
item={item}
|
||||
isFolder={!item.fileExst}
|
||||
element={element}
|
||||
onSelect={this.onContentRowSelect}
|
||||
editing={editingId}
|
||||
viewAs={viewAs}
|
||||
{...checkedProps}
|
||||
{...contextOptionsProps}
|
||||
needForUpdate={this.needForUpdate}
|
||||
>
|
||||
<FilesTileContent
|
||||
item={item}
|
||||
viewer={viewer}
|
||||
culture={settings.culture}
|
||||
onEditComplete={this.onEditComplete}
|
||||
onLoading={onLoading}
|
||||
onMediaFileClick={this.onMediaFileClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Tile>
|
||||
</DragAndDrop>
|
||||
);
|
||||
})}
|
||||
</TileContainer>
|
||||
:
|
||||
<RowContainer draggable useReactWindow={false}>
|
||||
{items.map((item) => {
|
||||
const isEdit =
|
||||
!!fileAction.type &&
|
||||
editingId === item.id &&
|
||||
item.fileExst === fileAction.extension;
|
||||
const contextOptions = this.getFilesContextOptions(
|
||||
item,
|
||||
viewer
|
||||
).filter((o) => o);
|
||||
const contextOptionsProps =
|
||||
!contextOptions.length || isEdit ? {} : { contextOptions };
|
||||
const checked = isFileSelected(selection, item.id, item.parentId);
|
||||
const checkedProps = (isEdit || item.id <= 0) ? {} : { checked };
|
||||
const element = this.getItemIcon(item, (isEdit || item.id <= 0));
|
||||
|
||||
const selectedItem = selection.find(x => x.id === item.id && x.fileExst === item.fileExst);
|
||||
const isFolder = selectedItem ? false : item.fileExst ? false : true;
|
||||
const draggable = selectedItem && currentFolderType !== "Trash";
|
||||
let value = item.fileExst ? `file_${item.id}` : `folder_${item.id}`;
|
||||
value += draggable ? "_draggable" : "";
|
||||
const classNameProp = isFolder && item.access < 2 ? { className: " dropable" } : {};
|
||||
|
||||
return (
|
||||
<DragAndDrop
|
||||
{...classNameProp}
|
||||
onDrop={this.onDrop.bind(this, item)}
|
||||
onMouseDown={this.onMouseDown}
|
||||
dragging={dragging && isFolder && item.access < 2}
|
||||
key={`dnd-key_${item.id}`}
|
||||
element={element}
|
||||
onSelect={this.onContentRowSelect}
|
||||
editing={editingId}
|
||||
viewAs={viewAs}
|
||||
{...checkedProps}
|
||||
{...contextOptionsProps}
|
||||
value={value}
|
||||
needForUpdate={this.needForUpdate}
|
||||
>
|
||||
<SimpleFilesRow
|
||||
<FilesTileContent
|
||||
item={item}
|
||||
viewer={viewer}
|
||||
culture={settings.culture}
|
||||
onEditComplete={this.onEditComplete}
|
||||
onLoading={onLoading}
|
||||
onMediaFileClick={this.onMediaFileClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Tile>
|
||||
</DragAndDrop>
|
||||
);
|
||||
})}
|
||||
</TileContainer>
|
||||
:
|
||||
<RowContainer draggable useReactWindow={false}>
|
||||
{items.map((item) => {
|
||||
const isEdit =
|
||||
!!fileAction.type &&
|
||||
editingId === item.id &&
|
||||
item.fileExst === fileAction.extension;
|
||||
const contextOptions = this.getFilesContextOptions(
|
||||
item,
|
||||
viewer
|
||||
).filter((o) => o);
|
||||
const contextOptionsProps =
|
||||
!contextOptions.length || isEdit ? {} : { contextOptions };
|
||||
const checked = isFileSelected(selection, item.id, item.parentId);
|
||||
const checkedProps = (isEdit || item.id <= 0) ? {} : { checked };
|
||||
const element = this.getItemIcon(item, (isEdit || item.id <= 0));
|
||||
|
||||
const selectedItem = selection.find(x => x.id === item.id && x.fileExst === item.fileExst);
|
||||
const isFolder = selectedItem ? false : item.fileExst ? false : true;
|
||||
const draggable = selectedItem && currentFolderType !== "Trash";
|
||||
let value = item.fileExst ? `file_${item.id}` : `folder_${item.id}`;
|
||||
value += draggable ? "_draggable" : "";
|
||||
const classNameProp = isFolder && item.access < 2 ? { className: " dropable" } : {};
|
||||
|
||||
return (
|
||||
<DragAndDrop
|
||||
{...classNameProp}
|
||||
onDrop={this.onDrop.bind(this, item)}
|
||||
onMouseDown={this.onMouseDown}
|
||||
dragging={dragging && isFolder && item.access < 2}
|
||||
key={`dnd-key_${item.id}`}
|
||||
{...contextOptionsProps}
|
||||
value={value}
|
||||
>
|
||||
<SimpleFilesRow
|
||||
widthProp={widthProp}
|
||||
key={item.id}
|
||||
data={item}
|
||||
element={element}
|
||||
onSelect={this.onContentRowSelect}
|
||||
editing={editingId}
|
||||
{...checkedProps}
|
||||
{...contextOptionsProps}
|
||||
needForUpdate={this.needForUpdate}
|
||||
selectItem={this.onSelectItem.bind(this, item)}
|
||||
>
|
||||
<FilesRowContent
|
||||
widthProp={widthProp}
|
||||
key={item.id}
|
||||
data={item}
|
||||
element={element}
|
||||
onSelect={this.onContentRowSelect}
|
||||
editing={editingId}
|
||||
{...checkedProps}
|
||||
{...contextOptionsProps}
|
||||
needForUpdate={this.needForUpdate}
|
||||
selectItem={this.onSelectItem.bind(this, item)}
|
||||
>
|
||||
<FilesRowContent
|
||||
widthProp={widthProp}
|
||||
item={item}
|
||||
viewer={viewer}
|
||||
culture={settings.culture}
|
||||
onEditComplete={this.onEditComplete}
|
||||
onLoading={onLoading}
|
||||
onMediaFileClick={this.onMediaFileClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</SimpleFilesRow>
|
||||
</DragAndDrop>
|
||||
);
|
||||
})}
|
||||
</RowContainer>
|
||||
}
|
||||
item={item}
|
||||
viewer={viewer}
|
||||
culture={settings.culture}
|
||||
onEditComplete={this.onEditComplete}
|
||||
onLoading={onLoading}
|
||||
onMediaFileClick={this.onMediaFileClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</SimpleFilesRow>
|
||||
</DragAndDrop>
|
||||
);
|
||||
})}
|
||||
</RowContainer>
|
||||
}
|
||||
{playlist.length > 0 && mediaViewerVisible &&
|
||||
<MediaViewer
|
||||
currentFileId={currentMediaFileId}
|
||||
|
@ -13,10 +13,9 @@ if ("function" === typeof importScripts) {
|
||||
// to force update an exiting service worker.
|
||||
// Since we're using `injectManifest` to build SW,
|
||||
// manually overriding the skipWaiting();
|
||||
// self.addEventListener("install", event => {
|
||||
// self.skipWaiting();
|
||||
// window.location.reload();
|
||||
// });
|
||||
self.addEventListener("install", event => {
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
/* injection point for manifest files. */
|
||||
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
|
||||
@ -87,6 +86,20 @@ if ("function" === typeof importScripts) {
|
||||
cacheName: "translation-cache"
|
||||
})
|
||||
);
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
// Cache API Request
|
||||
new RegExp("/api/2.0/(modules|people/@self|(.*)/info(.json|$))"),
|
||||
workbox.strategies.staleWhileRevalidate({
|
||||
cacheName: "api-cache",
|
||||
plugins: [
|
||||
new workbox.expiration.Plugin({
|
||||
maxEntries: 100,
|
||||
maxAgeSeconds: 30 * 60 // 30 Minutes
|
||||
})
|
||||
]
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.log("Workbox could not be loaded. No Offline support");
|
||||
}
|
||||
|
@ -385,8 +385,10 @@ class SectionBodyContent extends React.PureComponent {
|
||||
{...checkedProps}
|
||||
{...contextOptionsProps}
|
||||
needForUpdate={this.needForUpdate}
|
||||
widthProp={widthProp}
|
||||
>
|
||||
<UserContent
|
||||
widthProp={widthProp}
|
||||
user={user}
|
||||
history={history}
|
||||
settings={settings}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { RowContent, Link, LinkWithDropdown, Icons, Text } from "asc-web-components";
|
||||
import { RowContent, Link, LinkWithDropdown, Icons, Text, Box } from "asc-web-components";
|
||||
import { connect } from "react-redux";
|
||||
import { getUserStatus } from "../../../../../store/people/selectors";
|
||||
|
||||
@ -53,7 +53,7 @@ const getFormatedGroups = (user, status, selectGroup) => {
|
||||
}
|
||||
};
|
||||
|
||||
const UserContent = ({ user, history, settings, selectGroup }) => {
|
||||
const UserContent = ({ user, history, settings, selectGroup, widthProp }) => {
|
||||
const { userName, displayName, title, mobilePhone, email } = user;
|
||||
const status = getUserStatus(user);
|
||||
const groups = getFormatedGroups(user, status, selectGroup);
|
||||
@ -79,12 +79,9 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
|
||||
const nameColor = "#333";
|
||||
const sideInfoColor = "#333";
|
||||
|
||||
const headDepartmentStyle = {
|
||||
width: '28%'
|
||||
}
|
||||
|
||||
return (
|
||||
<RowContent
|
||||
widthProp={widthProp}
|
||||
sideColor={sideInfoColor}
|
||||
>
|
||||
<Link
|
||||
@ -109,7 +106,6 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
|
||||
<Text
|
||||
containerMinWidth='120px'
|
||||
containerWidth='20%'
|
||||
//style={headDepartmentStyle}
|
||||
as="div"
|
||||
color={sideInfoColor}
|
||||
fontSize='12px'
|
||||
@ -119,11 +115,10 @@ const UserContent = ({ user, history, settings, selectGroup }) => {
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
: <div
|
||||
: <Box
|
||||
containerMinWidth='120px'
|
||||
containerWidth='20%'
|
||||
//style={headDepartmentStyle}
|
||||
></div>
|
||||
></Box>
|
||||
}
|
||||
{groups}
|
||||
<Link
|
||||
|
@ -13,10 +13,9 @@ if ("function" === typeof importScripts) {
|
||||
// to force update an exiting service worker.
|
||||
// Since we're using `injectManifest` to build SW,
|
||||
// manually overriding the skipWaiting();
|
||||
// self.addEventListener("install", event => {
|
||||
// self.skipWaiting();
|
||||
// window.location.reload();
|
||||
// });
|
||||
self.addEventListener("install", event => {
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
/* injection point for manifest files. */
|
||||
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
|
||||
@ -87,6 +86,20 @@ if ("function" === typeof importScripts) {
|
||||
cacheName: "translation-cache"
|
||||
})
|
||||
);
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
// Cache API Request
|
||||
new RegExp("/api/2.0/(modules|people/@self|(.*)/info(.json|$))"),
|
||||
workbox.strategies.staleWhileRevalidate({
|
||||
cacheName: "api-cache",
|
||||
plugins: [
|
||||
new workbox.expiration.Plugin({
|
||||
maxEntries: 100,
|
||||
maxAgeSeconds: 30 * 60 // 30 Minutes
|
||||
})
|
||||
]
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.log("Workbox could not be loaded. No Offline support");
|
||||
}
|
||||
|
@ -13,10 +13,9 @@ if ("function" === typeof importScripts) {
|
||||
// to force update an exiting service worker.
|
||||
// Since we're using `injectManifest` to build SW,
|
||||
// manually overriding the skipWaiting();
|
||||
// self.addEventListener("install", event => {
|
||||
// self.skipWaiting();
|
||||
// window.location.reload();
|
||||
// });
|
||||
self.addEventListener("install", event => {
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
/* injection point for manifest files. */
|
||||
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
|
||||
@ -87,6 +86,20 @@ if ("function" === typeof importScripts) {
|
||||
cacheName: "translation-cache"
|
||||
})
|
||||
);
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
// Cache API Request
|
||||
new RegExp("/api/2.0/(modules|people/@self|(.*)/info(.json|$))"),
|
||||
workbox.strategies.staleWhileRevalidate({
|
||||
cacheName: "api-cache",
|
||||
plugins: [
|
||||
new workbox.expiration.Plugin({
|
||||
maxEntries: 100,
|
||||
maxAgeSeconds: 30 * 60 // 30 Minutes
|
||||
})
|
||||
]
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.log("Workbox could not be loaded. No Offline support");
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-common",
|
||||
"version": "1.0.211",
|
||||
"version": "1.0.213",
|
||||
"description": "Ascensio System SIA common components and solutions library",
|
||||
"license": "AGPL-3.0",
|
||||
"files": [
|
||||
|
@ -274,7 +274,11 @@ class PageLayoutComponent extends React.Component {
|
||||
</Article>
|
||||
)}
|
||||
{isSectionAvailable && (
|
||||
<ReactResizeDetector onResize={this.onResize} skipOnMount>
|
||||
<ReactResizeDetector
|
||||
onResize={this.onResize}
|
||||
refreshRate={200}
|
||||
refreshMode='debounce'
|
||||
>
|
||||
{({ width }) => (
|
||||
<Section widthProp={width}>
|
||||
{isSectionHeaderAvailable && (
|
||||
|
@ -17,10 +17,10 @@ module.exports = {
|
||||
'<rootDir>/test/transform-file.js'
|
||||
},
|
||||
coverageReporters: [
|
||||
"json",
|
||||
"lcov",
|
||||
"text",
|
||||
"clover",
|
||||
"cobertura"
|
||||
"json",
|
||||
"lcov",
|
||||
"text",
|
||||
"clover",
|
||||
"cobertura"
|
||||
]
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.424",
|
||||
"version": "1.0.426",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.js",
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable react/no-unescaped-entities */
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { BooleanValue, StringValue } from "react-values";
|
||||
@ -14,7 +15,7 @@ import InputBlock from "../input-block";
|
||||
import RadioButtonGroup from "../radio-button-group";
|
||||
import TextInput from "../text-input";
|
||||
import Textarea from "../textarea";
|
||||
import ContextMenuButton from "../context-menu-button";
|
||||
//import ContextMenuButton from "../context-menu-button";
|
||||
import DatePicker from "../date-picker";
|
||||
import FieldContainer from "../field-container";
|
||||
import Heading from "../heading";
|
||||
|
@ -6,7 +6,6 @@ import PropTypes from 'prop-types'
|
||||
import { default as ASCAvatar } from '../../avatar/index'
|
||||
import accepts from 'attr-accept'
|
||||
import Text from '../../text'
|
||||
import IconButton from '../../icon-button'
|
||||
import { tablet } from '../../../utils/device';
|
||||
import resizeImage from 'resize-image'
|
||||
const StyledErrorContainer = styled.div`
|
||||
|
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import Loader from '../loader';
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
const activeCss = css`
|
||||
background-color: ${props => (props.primary ? '#1F97CA' : '#ECEEF1')};
|
||||
@ -29,7 +28,7 @@ const hoverCss = css`
|
||||
`}
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
// eslint-disable-next-line no-unused-vars, react/prop-types
|
||||
const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled, isLoading, label, innerRef, minWidth, ...props}) => <button ref={innerRef} type="button" {...props}></button>;
|
||||
|
||||
ButtonWrapper.propTypes = {
|
||||
|
@ -3,7 +3,6 @@ import { storiesOf } from "@storybook/react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import {
|
||||
withKnobs,
|
||||
boolean,
|
||||
color,
|
||||
select,
|
||||
date
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import styled from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import DropDownItem from '../drop-down-item'
|
||||
import DropDown from '../drop-down'
|
||||
@ -7,7 +7,6 @@ import IconButton from '../icon-button'
|
||||
import Backdrop from '../backdrop'
|
||||
import Aside from '../aside'
|
||||
import Heading from '../heading'
|
||||
import Text from '../text'
|
||||
import Link from '../link'
|
||||
import { desktop } from '../../utils/device'
|
||||
import throttle from "lodash/throttle";
|
||||
@ -123,7 +122,7 @@ class ContextMenuButton extends React.Component {
|
||||
this.setState({
|
||||
data: this.props.getData(),
|
||||
isOpen: !this.state.isOpen
|
||||
}, () => !this.props.isDisabled && this.state.isOpen && this.props.onClick && this.props.onClick());
|
||||
}, () => !this.props.isDisabled && this.state.isOpen && this.props.onClick && this.props.onClick()); // eslint-disable-line react/prop-types
|
||||
}
|
||||
|
||||
clickOutsideAction = (e) => {
|
||||
@ -167,8 +166,8 @@ class ContextMenuButton extends React.Component {
|
||||
onMouseOver,
|
||||
size,
|
||||
style,
|
||||
isFill,
|
||||
asideHeader
|
||||
isFill, // eslint-disable-line react/prop-types
|
||||
asideHeader // eslint-disable-line react/prop-types
|
||||
} = this.props;
|
||||
|
||||
const { isOpen, displayType } = this.state;
|
||||
|
@ -2,7 +2,6 @@ import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icons } from '../icons'
|
||||
import Text from '../text'
|
||||
import { tablet } from '../../utils/device'
|
||||
|
||||
const itemTruncate = css`
|
||||
|
@ -43,6 +43,7 @@ const StyledDropdown = styled.div`
|
||||
// eslint-disable-next-line react/display-name, react/prop-types
|
||||
const Row = memo(({ data, index, style }) => {
|
||||
const option = data[index];
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const separator = option.props.isSeparator ? { width: `calc(100% - 32px)`, height: `1px` } : {}
|
||||
const newStyle = {...style, ...separator};
|
||||
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-useless-escape */
|
||||
import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import EmailInput from '.';
|
||||
|
@ -13,6 +13,7 @@ const TextInputWrapper = ({
|
||||
onValidateInput,
|
||||
isValidEmail,
|
||||
emailSettings,
|
||||
customValidate,
|
||||
...props
|
||||
}) => <TextInput {...props}></TextInput>;
|
||||
/* eslint-enable react/prop-types */
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { text, boolean, withKnobs, select, number } from '@storybook/addon-knobs/react';
|
||||
import { text, boolean, withKnobs, select } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import FileInput from '.';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
import IconButton from '../icon-button';
|
||||
@ -113,7 +113,7 @@ class FileInput extends Component {
|
||||
}
|
||||
|
||||
onInputFile = () => {
|
||||
const { onInput, isDisabled } = this.props;
|
||||
const { onInput } = this.props;
|
||||
|
||||
if ( this.inputRef.current.files.length > 0 ) {
|
||||
this.setState({
|
||||
@ -123,7 +123,7 @@ class FileInput extends Component {
|
||||
if(onInput) {
|
||||
this.inputRef.current.value = '';
|
||||
onInput(this.state.file);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
@ -140,7 +140,7 @@ class FileInput extends Component {
|
||||
hasError,
|
||||
hasWarning,
|
||||
accept,
|
||||
onInput,
|
||||
onInput, // eslint-disable-line no-unused-vars
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
|
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import renderer from 'react-test-renderer'
|
||||
import 'jest-styled-components'
|
||||
import Grid from '.';
|
||||
|
||||
|
@ -16,7 +16,7 @@ const StyledGroupButtonsMenu = styled.div`
|
||||
height: 57px;
|
||||
list-style: none;
|
||||
padding: 0 18px 19px 0;
|
||||
width: ${props => props.width ? props.width + 'px' : '100%'};;
|
||||
width: ${props => props.containerWidth ? props.containerWidth + 'px' : '100%'};;
|
||||
white-space: nowrap;
|
||||
display: ${props => props.visible ? 'block' : 'none'};
|
||||
z-index: 195;
|
||||
@ -179,7 +179,7 @@ class GroupButtonsMenu extends React.PureComponent {
|
||||
const { priorityItems, moreItems, visible, width } = this.state;
|
||||
|
||||
return (
|
||||
<StyledGroupButtonsMenu id="groupMenuOuter" visible={visible} width={width} >
|
||||
<StyledGroupButtonsMenu id="groupMenuOuter" visible={visible} containerWidth={width} >
|
||||
<GroupMenuWrapper id="groupMenu">
|
||||
{priorityItems.map((item, i) =>
|
||||
<GroupButton
|
||||
|
@ -7,6 +7,7 @@ function addNameSpace( data ) {
|
||||
}
|
||||
function encodeSVG( data ) {
|
||||
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
var symbols = /[\r\n%#()<>?\[\\\]^`{|}]/g;
|
||||
|
||||
data = data.replace( /"/g, '\'' );
|
||||
|
@ -26,15 +26,16 @@ const StyledChildrenBlock = styled.div`
|
||||
padding: 2px 0px 2px 2px;
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line react/prop-types, no-unused-vars
|
||||
/* eslint-disable react/prop-types, no-unused-vars */
|
||||
const CustomInputGroup = ({
|
||||
isIconFill,
|
||||
isIconFill,
|
||||
hasError,
|
||||
hasWarning,
|
||||
isDisabled,
|
||||
scale,
|
||||
scale,
|
||||
...props
|
||||
}) => <div {...props}></div>;
|
||||
/* eslint-enable react/prop-types, no-unused-vars */
|
||||
const StyledInputGroup = styled(CustomInputGroup)`
|
||||
display: flex;
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withKnobs, text, number, select, color } from '@storybook/addon-knobs/react';
|
||||
import { withKnobs, text, select, color } from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import Loader from '.';
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export const DualRing = ({ size, color, label }) => (
|
||||
<svg
|
||||
width={size}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export const Oval = ({ size, color, label }) => (
|
||||
<svg
|
||||
width={size}
|
||||
|
@ -76,6 +76,7 @@ Romb.protoTypes = {
|
||||
height: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Rombs = ({ size }) => (
|
||||
<>
|
||||
<Romb color="blue" size={size} />
|
||||
|
@ -62,9 +62,10 @@ class Link extends React.Component {
|
||||
}
|
||||
|
||||
Link.propTypes = {
|
||||
color: PropTypes.string,
|
||||
children: PropTypes.any,
|
||||
isOpen: PropTypes.bool
|
||||
color: PropTypes.string,
|
||||
isOpen: PropTypes.bool,
|
||||
showIcon: PropTypes.bool
|
||||
};
|
||||
|
||||
Link.displayName = "Link";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { tablet } from '../../utils/device';
|
||||
import { tablet, size } from '../../utils/device';
|
||||
|
||||
const truncateCss = css`
|
||||
white-space: nowrap;
|
||||
@ -17,16 +17,46 @@ const commonCss = css`
|
||||
font-weight: 600;
|
||||
`;
|
||||
|
||||
const containerTabletStyle = css`
|
||||
display: block;
|
||||
height: 56px;
|
||||
`;
|
||||
|
||||
const mainWrapperTabletStyle = css`
|
||||
min-width: 140px;
|
||||
margin-right: 8px;
|
||||
margin-top: 8px;
|
||||
width: 95%;
|
||||
`;
|
||||
|
||||
const mainContainerTabletStyle = css`
|
||||
${truncateCss};
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
const sideInfoTabletStyle = css`
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
margin: 0 8px;
|
||||
${commonCss};
|
||||
color: ${props => props.color && props.color};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
`;
|
||||
|
||||
const StyledRowContent = styled.div`
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
|
||||
${props => !props.disableSideInfo && `
|
||||
@media ${tablet} {
|
||||
display: block;
|
||||
height: 56px;
|
||||
}
|
||||
`};
|
||||
${props => !props.disableSideInfo
|
||||
&& (props.widthProp && (props.widthProp < size.tablet))
|
||||
? `${containerTabletStyle}`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
${containerTabletStyle}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const MainContainerWrapper = styled.div`
|
||||
@ -38,16 +68,15 @@ const MainContainerWrapper = styled.div`
|
||||
|
||||
width: ${props => props.mainContainerWidth ? props.mainContainerWidth : '140px'};
|
||||
min-width: 140px;
|
||||
|
||||
|
||||
${props => !props.disableSideInfo && `
|
||||
@media ${tablet} {
|
||||
min-width: 140px;
|
||||
margin-right: 8px;
|
||||
margin-top: 8px;
|
||||
width: 95%;
|
||||
}
|
||||
`};
|
||||
${props => !props.disableSideInfo
|
||||
&& (props.widthProp && (props.widthProp < size.tablet))
|
||||
? `${mainWrapperTabletStyle}`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
${mainWrapperTabletStyle}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const MainContainer = styled.div`
|
||||
@ -55,11 +84,13 @@ const MainContainer = styled.div`
|
||||
margin-right: 8px;
|
||||
max-width: 86%;
|
||||
|
||||
@media ${tablet} {
|
||||
${truncateCss};
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
${props => props.widthProp && (props.widthProp < size.tablet)
|
||||
? `${mainContainerTabletStyle}`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
${mainContainerTabletStyle}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const MainIcons = styled.div`
|
||||
@ -70,9 +101,13 @@ const MainIcons = styled.div`
|
||||
const SideContainerWrapper = styled.div`
|
||||
${commonCss};
|
||||
|
||||
@media ${tablet} {
|
||||
${truncateCss};
|
||||
}
|
||||
${props => props.widthProp && (props.widthProp < size.tablet)
|
||||
? `${truncateCss}`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
${truncateCss}
|
||||
}
|
||||
`}
|
||||
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
@ -85,25 +120,26 @@ const SideContainerWrapper = styled.div`
|
||||
min-width: ${props => props.containerMinWidth ? props.containerMinWidth : '40px'};
|
||||
color: ${props => props.color && props.color};
|
||||
|
||||
${props => !props.disableSideInfo && `
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
}
|
||||
`};
|
||||
${props => !props.disableSideInfo
|
||||
&& (props.widthProp && (props.widthProp < size.tablet))
|
||||
? `display: none;`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const TabletSideInfo = styled.div`
|
||||
display: none;
|
||||
|
||||
@media ${tablet} {
|
||||
display: block;
|
||||
min-width: 160px;
|
||||
margin: 0 8px;
|
||||
color: ${props => props.color && props.color};
|
||||
|
||||
${commonCss};
|
||||
${truncateCss};
|
||||
}
|
||||
${props => props.widthProp && (props.widthProp < size.tablet)
|
||||
? `${sideInfoTabletStyle}`
|
||||
: `
|
||||
@media ${tablet} {
|
||||
${sideInfoTabletStyle}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const getSideInfo = content => {
|
||||
@ -124,24 +160,34 @@ const getSideInfo = content => {
|
||||
|
||||
const RowContent = props => {
|
||||
//console.log("RowContent render");
|
||||
const { children, disableSideInfo, id, className, style, sideColor, onClick } = props;
|
||||
const { children, disableSideInfo, id, className, style, sideColor, onClick, widthProp } = props;
|
||||
|
||||
const sideInfo = getSideInfo(children);
|
||||
const mainContainerWidth = children[0].props && children[0].props.containerWidth;
|
||||
|
||||
return (
|
||||
<StyledRowContent
|
||||
className={className}
|
||||
disableSideInfo={disableSideInfo}
|
||||
id={id}
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
style={style}
|
||||
onClick={onClick}>
|
||||
widthProp={widthProp}
|
||||
>
|
||||
<MainContainerWrapper
|
||||
disableSideInfo={disableSideInfo}
|
||||
mainContainerWidth={children[0].props && children[0].props.containerWidth}>
|
||||
<MainContainer className="rowMainContainer">
|
||||
mainContainerWidth={mainContainerWidth}
|
||||
widthProp={widthProp}
|
||||
>
|
||||
<MainContainer
|
||||
className="rowMainContainer"
|
||||
widthProp={widthProp}
|
||||
>
|
||||
{children[0]}
|
||||
</MainContainer>
|
||||
<MainIcons className="mainIcons">
|
||||
<MainIcons
|
||||
className="mainIcons"
|
||||
>
|
||||
{children[1]}
|
||||
</MainIcons>
|
||||
</MainContainerWrapper>
|
||||
@ -152,14 +198,19 @@ const RowContent = props => {
|
||||
disableSideInfo={disableSideInfo}
|
||||
key={'side-' + index}
|
||||
containerWidth={element.props && element.props.containerWidth}
|
||||
containerMinWidth={element.props && element.props.containerMinWidth} >
|
||||
containerMinWidth={element.props && element.props.containerMinWidth}
|
||||
widthProp={widthProp}
|
||||
>
|
||||
{element}
|
||||
</SideContainerWrapper>
|
||||
);
|
||||
}
|
||||
})}
|
||||
{!disableSideInfo &&
|
||||
<TabletSideInfo color={sideColor}>
|
||||
<TabletSideInfo
|
||||
color={sideColor}
|
||||
widthProp={widthProp}
|
||||
>
|
||||
{sideInfo}
|
||||
</TabletSideInfo>
|
||||
}
|
||||
@ -174,7 +225,8 @@ RowContent.propTypes = {
|
||||
id: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
sideColor: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
widthProp: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
};
|
||||
|
||||
RowContent.defaultProps = {
|
||||
|
@ -59,8 +59,12 @@ const StyledOptionButton = styled.div`
|
||||
`;
|
||||
|
||||
class Row extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.rowRef = React.createRef();
|
||||
}
|
||||
|
||||
rowRef = React.createRef();
|
||||
shouldComponentUpdate(nextProps) {
|
||||
if (this.props.needForUpdate) {
|
||||
return this.props.needForUpdate(this.props, nextProps);
|
||||
@ -146,6 +150,7 @@ Row.propTypes = {
|
||||
indeterminate: PropTypes.bool,
|
||||
needForUpdate: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
selectItem: PropTypes.func,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
};
|
||||
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from "react";
|
||||
import Scrollbar from "../scrollbar";
|
||||
|
||||
|
@ -3,6 +3,7 @@ import { toast } from 'react-toastify'
|
||||
import styled from 'styled-components'
|
||||
import { Icons } from '../icons'
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Icon = ({ type }) => (
|
||||
type === "success"
|
||||
? <Icons.CheckIcon color="#ffffff" isfill={true} />
|
||||
|
@ -14,6 +14,7 @@ var checkboxIcon,
|
||||
checkboxCheckedHoverIcon,
|
||||
checkboxIndeterminateDisabledIcon,
|
||||
checkboxIndeterminateHoverIcon,
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
treeIcon;
|
||||
|
||||
(function(){
|
||||
|
@ -1,11 +1,11 @@
|
||||
const size = {
|
||||
mobile: "375px",
|
||||
tablet: "1024px",
|
||||
desktop: "1025px"
|
||||
export const size = {
|
||||
mobile: 375,
|
||||
tablet: 1024,
|
||||
desktop: 1025
|
||||
};
|
||||
|
||||
export const mobile = `(max-width: ${size.mobile})`;
|
||||
export const mobile = `(max-width: ${size.mobile}px)`;
|
||||
|
||||
export const tablet = `(max-width: ${size.tablet})`;
|
||||
export const tablet = `(max-width: ${size.tablet}px)`;
|
||||
|
||||
export const desktop = `(min-width: ${size.desktop})`;
|
||||
export const desktop = `(min-width: ${size.desktop}px)`;
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-useless-escape, no-control-regex */
|
||||
import emailAddresses from "email-addresses";
|
||||
import punycode from "punycode";
|
||||
import { parseErrorTypes, errorKeys } from "./../constants";
|
||||
|
Loading…
Reference in New Issue
Block a user