From 26b0c26f2ba72c955c438338990f886b19857267 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Mon, 2 Dec 2019 16:26:17 +0300 Subject: [PATCH 1/7] web: Components: Re-written Text.Body from function to component --- .../text/sub-text/create-styled-body-text.js | 86 +++++++++---------- .../src/components/text/sub-text/index.js | 3 +- 2 files changed, 44 insertions(+), 45 deletions(-) diff --git a/web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js b/web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js index b9d6192cc0..ddaf42077f 100644 --- a/web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js +++ b/web/ASC.Web.Components/src/components/text/sub-text/create-styled-body-text.js @@ -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 (); - }; +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 ( + + ); +}; - 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; -} \ No newline at end of file +TextBody.defaultProps = { + title: '', + color: '#333333', + fontSize: 13, + truncate: false, + isBold: false, + isInline: false, + isItalic: false, +}; + +export default TextBody; \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/text/sub-text/index.js b/web/ASC.Web.Components/src/components/text/sub-text/index.js index 08fed30e28..5f5f1bcc49 100644 --- a/web/ASC.Web.Components/src/components/text/sub-text/index.js +++ b/web/ASC.Web.Components/src/components/text/sub-text/index.js @@ -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'); \ No newline at end of file From 7a67dabcd738123243c45e6fdbda822378d22936 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Mon, 2 Dec 2019 16:29:06 +0300 Subject: [PATCH 2/7] web: Components: Simplified Link: one tag instead of two now. --- .../src/components/link/index.js | 46 ++++--------------- .../src/components/link/link.stories.js | 2 + 2 files changed, 10 insertions(+), 38 deletions(-) diff --git a/web/ASC.Web.Components/src/components/link/index.js b/web/ASC.Web.Components/src/components/link/index.js index 061e2dd0b6..a7feb95dcb 100644 --- a/web/ASC.Web.Components/src/components/link/index.js +++ b/web/ASC.Web.Components/src/components/link/index.js @@ -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 }) => ; - -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 ( - - - {props.children} - - + {children} + ); }); diff --git a/web/ASC.Web.Components/src/components/link/link.stories.js b/web/ASC.Web.Components/src/components/link/link.stories.js index bf33e46a13..a7212e7352 100644 --- a/web/ASC.Web.Components/src/components/link/link.stories.js +++ b/web/ASC.Web.Components/src/components/link/link.stories.js @@ -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} From e923de0ee671bbe47d79d461b000b3962b97de0a Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Mon, 2 Dec 2019 16:33:01 +0300 Subject: [PATCH 3/7] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 9d9a3dec1f..01eaa92b07 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.199", + "version": "1.0.200", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From ece2a1276388cd49190318887988906d38dc60c2 Mon Sep 17 00:00:00 2001 From: Daniil Senkiv Date: Mon, 2 Dec 2019 16:55:16 +0300 Subject: [PATCH 4/7] People.Client: Article: MainButton: fixed after (1ccb08b70d5c0eaf1b122aa31ef56a7af0dfdddd), fixed copying after displaying dialog --- .../ASC.People/Client/src/components/dialogs/Invite/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/products/ASC.People/Client/src/components/dialogs/Invite/index.js b/products/ASC.People/Client/src/components/dialogs/Invite/index.js index 97ce373f19..8579103635 100644 --- a/products/ASC.People/Client/src/components/dialogs/Invite/index.js +++ b/products/ASC.People/Client/src/components/dialogs/Invite/index.js @@ -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 = () => From c1a4fd65cff1f1d205c7d9f59064a1ef35dd461d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 3 Dec 2019 11:00:43 +0300 Subject: [PATCH 5/7] Web: Components: removed reactstrap from error-container --- .../src/components/error-container/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/src/components/error-container/index.js b/web/ASC.Web.Components/src/components/error-container/index.js index b1f5fb3478..c84a61d833 100644 --- a/web/ASC.Web.Components/src/components/error-container/index.js +++ b/web/ASC.Web.Components/src/components/error-container/index.js @@ -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; From 1eca151e8aa7f76ae3172562be88ca089c488828 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 3 Dec 2019 11:03:04 +0300 Subject: [PATCH 6/7] Web: Components: removed reactstrap from hide-filter --- .../components/filter-input/hide-filter.js | 106 ++++++++++++------ 1 file changed, 69 insertions(+), 37 deletions(-) diff --git a/web/ASC.Web.Components/src/components/filter-input/hide-filter.js b/web/ASC.Web.Components/src/components/filter-input/hide-filter.js index a198b8a015..36bd262a5a 100644 --- a/web/ASC.Web.Components/src/components/filter-input/hide-filter.js +++ b/web/ASC.Web.Components/src/components/filter-input/hide-filter.js @@ -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 ( - - {this.props.count} - - - {this.props.children} - + + + {this.props.count} + + + + + + + {this.props.children} + + ); } } -export default HideFilter \ No newline at end of file +export default HideFilter; From f07ff5d823705f5c167911d66123836e6434640c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 3 Dec 2019 11:03:54 +0300 Subject: [PATCH 7/7] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 01eaa92b07..438b7356f2 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.200", + "version": "1.0.201", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js",