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

Merge branch 'master' into feature/components-custom-styling

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 11:32:43 +03:00
commit d7b3262e1e
8 changed files with 131 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
products/ASC.People/Client/src/components/dialogs/Invite/index.js
View File

@ -93,11 +93,8 @@ class PureInviteDialog extends React.Component {
});
};
componentDidUpdate(prevProps) {
console.log("invitelink did UPDATE");
if (this.props.visible && !prevProps.visible) {
componentDidMount() {
this.onCopyLinkToClipboard();
}
}
onClickToCloseButton = () =>

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

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

7
web/ASC.Web.Components/src/components/error-container/index.js
View File

@ -1,8 +1,13 @@
import React from 'react';
import { Container } from 'reactstrap';
import PropTypes from "prop-types";
import styled from 'styled-components';
const Container = styled.div`
width: 100%;
padding: 0 15px;
margin: 0 auto;
`;
const ErrorFrame = styled(Container)`
background: #DFDFDF url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwMDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgDrgABAwERAAIRAQMRAf/EAaIAAAAHAQEBAQEAAAAAAAAAAAQFAwIGAQAHCAkKCwEAAgIDAQEBAQEAAAAAAAAAAQACAwQFBgcICQoLEAACAQMDAgQCBgcDBAIGAnMBAgMRBAAFIRIxQVEGE2EicYEUMpGhBxWxQiPBUtHhMxZi8CRygvElQzRTkqKyY3PCNUQnk6OzNhdUZHTD0uIIJoMJChgZhJRFRqS0VtNVKBry4/PE1OT0ZXWFlaW1xdXl9WZ2hpamtsbW5vY3R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+Ck5SVlpeYmZqbnJ2en5KjpKWmp6ipqqusra6voRAAICAQIDBQUEBQYECAMDbQEAAhEDBCESMUEFURNhIgZxgZEyobHwFMHR4SNCFVJicvEzJDRDghaSUyWiY7LCB3PSNeJEgxdUkwgJChgZJjZFGidkdFU38qOzwygp0+PzhJSktMTU5PRldYWVpbXF1eX1RlZmdoaWprbG1ub2R1dnd4eXp7fH1+f3OEhYaHiImKi4yNjo+DlJWWl5iZmpucnZ6fkqOkpaanqKmqq6ytrq+v/aAAwDAQACEQMRAD8A+vFM3zz1LqYFXYpbwJX0wIpdhSupgSuwKvoMCW6YrS6h8MKV+RVdTFK7Aq+mKV2BK6mKV9MC0voMUrsCV9BgtV1MU0voMbVdgTS+gwJXUOKqlMC03Q4pX4ErqHFK/Aq6hxSvyKV9MVXYpXUwJX4FXUxTa/FV9BgS3gWm6HwxSqYq3Q4Er8Ct4sqX4ELsKV1MCV1MC03Q4pX0wKuwpb4++C1XYFbxTTdD4YqvyKXYVbxSupii3cvbAlbirsVdiqnirsVW8jiq3FWuQxVZirqjxxVTxV2KqeKuqPHFVPFXYqp1PjiqzkcVaxVbyOKrajxxVTxVrkMVWYqsqcVW1GKrMVW8vbFVuKrKnFVtRiqzFVvL2xVbUeOKqeKrKnFWsVU8VaqMVWYqt5e2KrcVU8VW8jiq3FVlT44q1iqnirsVU8VdUeOKqeKrORxVrFVvL2xVSq/8v44q/wD/2Q==") 0 0 repeat-x;
cursor: default;

106
web/ASC.Web.Components/src/components/filter-input/hide-filter.js
View File

@ -1,21 +1,17 @@
import React from "react";
import styled from 'styled-components';
import { Icons } from '../icons';
import { Popover, PopoverBody } from 'reactstrap';
import styled from "styled-components";
import { Icons } from "../icons";
import DropDown from "../drop-down";
import { handleAnyClick } from "../../utils/event";
const Caret = styled.div`
width: 7px;
position: absolute;
right: 6px;
transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0)'};
top: ${props => props.isOpen ? '2px' : '0'};
`;
const StyledPopover = styled(Popover)`
.popover{
border: none;
max-width: 320px;
}
transform: ${props => (props.isOpen ? "rotate(180deg)" : "rotate(0)")};
top: ${props => (props.isOpen ? "2px" : "0")};
`;
const StyledHideFilterButton = styled.div`
display: flex;
position: relative;
@ -23,68 +19,104 @@ const StyledHideFilterButton = styled.div`
font-weight: 600;
font-size: 16px;
height: 100%;
border: 1px solid #ECEEF1;
border: 1px solid #eceef1;
border-radius: 3px;
background-color: #F8F9F9;
background-color: #f8f9f9;
padding: 0 20px 0 9px;
margin-right: 2px;
cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
cursor: ${props => (props.isDisabled ? "default" : "pointer")};
font-family: Open Sans;
font-style: normal;
:hover{
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
:hover {
border-color: ${props => (props.isDisabled ? "#ECEEF1" : "#A3A9AE")};
}
:active{
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#ECEEF1'};
:active {
background-color: ${props => (props.isDisabled ? "#F8F9F9" : "#ECEEF1")};
}
`;
const StyledHideFilter = styled.div`
display: inline-block;
height: 100%;
`;
const StyledPopoverBody = styled(PopoverBody)`
border-radius: 6px;
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.13);
const DropDownStyle = styled.div`
.drop-down {
padding: 8px;
}
position: relative;
`;
class HideFilter extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.ref = React.createRef();
this.dropDownRef = React.createRef();
this.state = {
popoverOpen: false
};
}
toggle() {
onClick = (state, e) => {
if (!state && e && this.dropDownRef.current.contains(e.target)) {
return;
}
if (!this.props.isDisabled) {
this.setState({
popoverOpen: !this.state.popoverOpen
popoverOpen: state
});
}
};
handleClick = e => {
this.state.popoverOpen &&
!this.ref.current.contains(e.target) &&
this.onClick(false);
};
componentWillUnmount() {
handleAnyClick(false, this.handleClick);
}
componentDidUpdate(prevState) {
if (this.state.popoverOpen !== prevState.popoverOpen) {
handleAnyClick(this.state.popoverOpen, this.handleClick);
}
}
render() {
//console.log("HideFilter render");
return (
<StyledHideFilter>
<StyledHideFilterButton id="PopoverLegacy" isDisabled={this.props.isDisabled} >{this.props.count} <Caret isOpen={this.state.popoverOpen}><Icons.ExpanderDownIcon size='scale' isfill={true} color="#A3A9AE" /></Caret></StyledHideFilterButton>
<StyledPopover
isOpen={this.state.popoverOpen}
trigger="legacy"
placement="bottom-start"
target="PopoverLegacy"
hideArrow={true}
toggle={this.toggle}>
<StyledPopoverBody>{this.props.children}</StyledPopoverBody>
</StyledPopover>
<StyledHideFilter
onClick={this.onClick.bind(this, !this.state.popoverOpen)}
ref={this.ref}
>
<StyledHideFilterButton
id="PopoverLegacy"
isDisabled={this.props.isDisabled}
>
{this.props.count}
<Caret isOpen={this.state.popoverOpen}>
<Icons.ExpanderDownIcon
size="scale"
isfill={true}
color="#A3A9AE"
/>
</Caret>
</StyledHideFilterButton>
<DropDownStyle ref={this.dropDownRef}>
<DropDown
className="drop-down"
manualY="8px"
opened={this.state.popoverOpen}
>
{this.props.children}
</DropDown>
</DropDownStyle>
</StyledHideFilter>
);
}
}
export default HideFilter
export default HideFilter;

46
web/ASC.Web.Components/src/components/link/index.js
View File

@ -3,23 +3,6 @@ import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import { Text } from "../text";
// eslint-disable-next-line no-unused-vars
const SimpleLink = ({ rel, isBold, fontSize, isTextOverflow, isHovered, isSemitransparent, type, color, title, containerWidth, ...props }) => <a {...props} />;
SimpleLink.propTypes = {
color: PropTypes.string,
fontSize: PropTypes.number,
isBold: PropTypes.bool,
isHovered: PropTypes.bool,
isSemitransparent: PropTypes.bool,
isTextOverflow: PropTypes.bool,
rel: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(["action", "page"]),
containerWidth: PropTypes.string
};
const colorCss = css`
color: ${props => props.color};
`;
@ -29,7 +12,7 @@ const hoveredCss = css`
text-decoration: ${props => (props.type === 'page' ? 'underline' : 'underline dashed')};
`;
const StyledLink = styled(SimpleLink)`
const StyledLink = styled(Text.Body)`
text-decoration: none;
user-select: none;
cursor: pointer;
@ -46,30 +29,17 @@ const StyledLink = styled(SimpleLink)`
`;
// eslint-disable-next-line react/display-name
const Link = memo(props => {
const {
isBold,
title,
fontSize,
color,
isTextOverflow
} = props;
//console.log("Link render", props);
const Link = memo(({isTextOverflow, children, ...rest}) => {
// console.log("Link render", rest);
return (
<StyledLink {...props}>
<Text.Body
as="span"
color={color}
fontSize={fontSize}
isBold={isBold}
title={title}
<StyledLink
tag="a"
truncate={isTextOverflow}
{...rest}
>
{props.children}
</Text.Body>
</StyledLink>
{children}
</StyledLink>
);
});

2
web/ASC.Web.Components/src/components/link/link.stories.js
View File

@ -11,6 +11,7 @@ const type = ['action', 'page'];
const target = ['_blank', '_self', '_parent', '_top'];
function clickActionLink(e) {
console.log("clickActionLink", e);
action('actionClick')(e);
}
@ -39,6 +40,7 @@ storiesOf('Components|Link', module)
isTextOverflow={isTextOverflow}
isHovered={boolean('isHovered', false)}
isSemitransparent={boolean('isSemitransparent', false)}
data-value="1111"
{...actionProps}
>
{label}

86
web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js
View File

@ -1,58 +1,58 @@
import React from "react";
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
export default function createStyledBodyText() {
const style = css`
font-family: 'Open Sans',sans-serif,Arial;
const styleCss = css`
font-family: 'Open Sans', sans-serif, Arial;
font-size: ${props => props.fontSize}px;
font-weight: ${props => props.fontWeight
? props.fontWeight
: props.isBold == true ? 700 : 500};
${props => props.isItalic == true && 'font-style: italic'};
${props => props.isItalic == true && css`font-style: italic;`}
color: ${props => props.color};
${props => props.backgroundColor && 'background-color: ' + props.backgroundColor + ";"}
${props => props.isInline == true
? 'display: inline-block;'
: props.display && 'display:' + props.display + ';'}
${props => props.backgroundColor && css`background-color: ${props => props.backgroundColor};`}
${props => props.isInline
? css`display: inline-block;`
: props.display && css`display: ${props => props.display};`}
text-align: left;
${props => (props.truncate === true && 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;')}
${props => (props.truncate === true && css`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`)}
margin: 0;
`
const TextBody = styled.p`
${style}
`;
const Text = props => {
//console.log("Text render");
return (<TextBody {...props} title={props.title}></TextBody>);
};
const StyledText = styled.p`
${styleCss}
`;
Text.propTypes = {
title: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.number,
fontWeight: PropTypes.number,
backgroundColor: PropTypes.string,
truncate: PropTypes.bool,
isBold: PropTypes.bool,
isInline: PropTypes.bool,
isItalic: PropTypes.bool,
display: PropTypes.string
};
const TextBody = ({ title, tag, as, ...rest }) => {
//console.log("TextBody render", rest)
return (
<StyledText as={!as && tag ? tag : as} title={title} {...rest} />
);
};
Text.defaultProps = {
title: '',
color: '#333333',
fontSize: 13,
truncate: false,
isBold: false,
isInline: false,
isItalic: false,
};
TextBody.propTypes = {
as: PropTypes.string,
tag: PropTypes.string,
title: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.number,
fontWeight: PropTypes.number,
backgroundColor: PropTypes.string,
truncate: PropTypes.bool,
isBold: PropTypes.bool,
isInline: PropTypes.bool,
isItalic: PropTypes.bool,
display: PropTypes.string
};
return Text;
}
TextBody.defaultProps = {
title: '',
color: '#333333',
fontSize: 13,
truncate: false,
isBold: false,
isInline: false,
isItalic: false,
};
export default TextBody;

3
web/ASC.Web.Components/src/components/text/sub-text/index.js
View File

@ -1,8 +1,7 @@
import createStyledHeadline from './create-styled-headline';
import createStyledBody from './create-styled-body-text';
import createStyledHeader from './create-styled-header';
export const Headline = createStyledHeadline();
export const Body = createStyledBody();
export { default as Body } from "./create-styled-body-text";
export const MenuHeader = createStyledHeader('MenuHeader');
export const ContentHeader = createStyledHeader('ContentHeader');