Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
eb0d155ecf
@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
|
||||
import { withKnobs, boolean, text,select} from '@storybook/addon-knobs/react';
|
||||
import withReadme from 'storybook-readme/with-readme';
|
||||
import Readme from './README.md';
|
||||
import styled from '@emotion/styled';
|
||||
import { TreeMenu, TreeNode } from 'asc-web-components';
|
||||
import { Icons } from 'asc-web-components';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
@ -34,7 +33,7 @@ const TreeMenuStory = props => {
|
||||
|
||||
const onDragEnter = (info) => {
|
||||
setExpandedKeys(info.expandedKeys);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrop = (info) => {
|
||||
info.event.persist();
|
||||
@ -43,8 +42,8 @@ const TreeMenuStory = props => {
|
||||
const dropPos = info.node.props.pos.split('-');
|
||||
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
|
||||
const loop = (data, key, callback) => {
|
||||
data.forEach((item, index, arr) => {
|
||||
const loop = (treeData, key, callback) => {
|
||||
treeData.forEach((item, index, arr) => {
|
||||
if (item.key === key) {
|
||||
callback(item, index, arr);
|
||||
return;
|
||||
@ -54,16 +53,17 @@ const TreeMenuStory = props => {
|
||||
}
|
||||
});
|
||||
};
|
||||
const data = [...gData];
|
||||
|
||||
const treeData = [...gData];
|
||||
|
||||
let dragObj;
|
||||
loop(data, dragKey, (item, index, arr) => {
|
||||
loop(treeData, dragKey, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
});
|
||||
|
||||
if (!info.dropToGap) {
|
||||
loop(data, dropKey, (item) => {
|
||||
loop(treeData, dropKey, (item) => {
|
||||
item.children = item.children || [];
|
||||
item.children.push(dragObj);
|
||||
});
|
||||
@ -72,14 +72,14 @@ const TreeMenuStory = props => {
|
||||
info.node.props.expanded &&
|
||||
dropPosition === 1
|
||||
) {
|
||||
loop(data, dropKey, (item) => {
|
||||
loop(treeData, dropKey, (item) => {
|
||||
item.children = item.children || [];
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else {
|
||||
let ar;
|
||||
let i;
|
||||
loop(data, dropKey, (item, index, arr) => {
|
||||
loop(treeData, dropKey, (item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
@ -89,17 +89,17 @@ const TreeMenuStory = props => {
|
||||
ar.splice(i + 1, 0, dragObj);
|
||||
}
|
||||
}
|
||||
setGData(data);
|
||||
setGData(treeData);
|
||||
};
|
||||
const onExpand = (expandedKeys) => {
|
||||
setExpandedKeys(expandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
}
|
||||
|
||||
const loop = data => {
|
||||
return data.map((item) => {
|
||||
const getTreeNodes = tree => {
|
||||
return tree.map((item) => {
|
||||
if (item.children && item.children.length) {
|
||||
return <TreeNode title={text('title', 'Title')} key={item.key} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} >{loop(item.children)}</TreeNode>;
|
||||
return <TreeNode title={text('title', 'Title')} key={item.key} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} >{getTreeNodes(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode key={item.key} title={text('title', 'Title')} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} ></TreeNode>;
|
||||
});
|
||||
@ -147,7 +147,7 @@ const TreeMenuStory = props => {
|
||||
|
||||
onRightClick={action("rightClick")}
|
||||
>
|
||||
{loop(gData)}
|
||||
{getTreeNodes(gData)}
|
||||
</TreeMenu>
|
||||
</div>
|
||||
);
|
||||
|
@ -22,62 +22,75 @@ const StyledInput = styled(Input).attrs((props) => ({
|
||||
disabled: props.isDisabled ? 'disabled' : ''
|
||||
|
||||
}))`
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px;
|
||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || '#c7c7c7'};
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
background-color: ${props => props.isDisabled ? '#efefef' : '#fff'};
|
||||
color: ${props => props.isDisabled ? '#666562' : '#434341'};
|
||||
display: flex;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: ${props =>
|
||||
(props.size === 'base' && '12px') ||
|
||||
(props.size === 'middle' && '14px') ||
|
||||
(props.size === 'big' && '16px') ||
|
||||
(props.size === 'huge' && '18px')
|
||||
};
|
||||
flex: 1 1 0%;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: ${props =>
|
||||
(props.size === 'base' && '4px 8px') ||
|
||||
(props.size === 'middle' && '8px 12px') ||
|
||||
(props.size === 'big' && '8px 16px') ||
|
||||
(props.size === 'huge' && '8px 20px')
|
||||
};
|
||||
transition: all 0.2s ease 0s;
|
||||
width: ${props =>
|
||||
(props.scale && '100%') ||
|
||||
(props.size === 'base' && '135px') ||
|
||||
(props.size === 'middle' && '300px') ||
|
||||
(props.size === 'big' && '350px') ||
|
||||
(props.size === 'huge' && '500px')
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px;
|
||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
||||
display: flex;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
line-height: ${props =>
|
||||
(props.size === 'base' && '20px') ||
|
||||
(props.size === 'middle' && '20px') ||
|
||||
(props.size === 'big' && '20px') ||
|
||||
(props.size === 'huge' && '20px')
|
||||
};
|
||||
font-size: ${props =>
|
||||
(props.size === 'base' && '13px') ||
|
||||
(props.size === 'middle' && '14px') ||
|
||||
(props.size === 'big' && '16px') ||
|
||||
(props.size === 'huge' && '18px')
|
||||
};
|
||||
flex: 1 1 0%;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: ${props =>
|
||||
(props.size === 'base' && '5px 7px') ||
|
||||
(props.size === 'middle' && '8px 12px') ||
|
||||
(props.size === 'big' && '8px 16px') ||
|
||||
(props.size === 'huge' && '8px 20px')
|
||||
};
|
||||
transition: all 0.2s ease 0s;
|
||||
width: ${props =>
|
||||
(props.scale && '100%') ||
|
||||
(props.size === 'base' && '173px') ||
|
||||
(props.size === 'middle' && '300px') ||
|
||||
(props.size === 'big' && '350px') ||
|
||||
(props.size === 'huge' && '500px')
|
||||
};
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #b2b2b2;
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
|
||||
font-family: 'Open Sans',sans-serif
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #b2b2b2;
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
|
||||
font-family: 'Open Sans',sans-serif
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: #b2b2b2;
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
|
||||
font-family: 'Open Sans',sans-serif
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #b2b2b2;
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
|
||||
font-family: 'Open Sans',sans-serif
|
||||
}
|
||||
|
||||
:hover{
|
||||
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
|
||||
}
|
||||
:focus{
|
||||
border-color: #2DA7DB;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const TextInput = props => <StyledInput {...props} />
|
||||
|
@ -195,6 +195,9 @@ const TreeNodeMenu = styled(TreeNode)`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span.rc-tree-title:first-child{
|
||||
max-width: 100%;
|
||||
}
|
||||
.rc-tree-node-selected {
|
||||
background: #DFE2E3;
|
||||
mix-blend-mode: normal;
|
||||
|
Loading…
Reference in New Issue
Block a user