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

Merge branch 'master' into feature/ef

Browse Source
This commit is contained in:
pavelbannov 2019-12-18 16:36:36 +03:00
commit 84c159c73d
34 changed files with 342 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js
View File

@ -33,8 +33,11 @@ class SectionHeaderContent extends React.Component {
return (
<div style={wrapperStyle}>
<IconButton
iconName={"ArrowPathIcon"}
iconName="ArrowPathIcon"
size="16"
color="#A3A9AE"
hoverColor="#657077"
isFill={true}
onClick={this.onBackClick}
/>
<Headline type="content" style={textStyle}>{headerText}</Headline>

15
products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -42,8 +42,12 @@ const StyledContainer = styled.div`
align-items: center;
max-width: calc(100vw - 32px);
.add-group-button {
margin-left: 8px;
.action-button {
margin-left: 16px;
@media (max-width: 1024px) {
margin-left: auto;
}
}
}
`;
@ -213,6 +217,7 @@ const SectionHeaderContent = props => {
<Headline type="content" truncate={true}>{group.name}</Headline>
{isAdmin && (
<ContextMenuButton
className="action-button"
directionX="right"
title={t("Actions")}
iconName="VerticalDotsIcon"
@ -228,10 +233,12 @@ const SectionHeaderContent = props => {
<Headline type="content">Departments</Headline>
{isAdmin && (
<IconButton
className="add-group-button"
className="action-button"
size={16}
iconName="PlusIcon"
isFill={false}
color="#A3A9AE"
hoverColor="#657077"
isFill={true}
onClick={onAddDepartmentsClick}
/>
)}

4
products/ASC.People/Client/src/components/pages/Import/Section/Header/index.js
View File

@ -23,9 +23,11 @@ const SectionHeaderContent = props => {
<div style={wrapperStyle}>
<div style={{ width: "16px" }}>
<IconButton
iconName={"ArrowPathIcon"}
iconName="ArrowPathIcon"
color="#A3A9AE"
size="16"
hoverColor="#657077"
isFill={true}
onClick={() => history.push(settings.homepage)}
/>
</div>

33
products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js
View File

@ -39,20 +39,30 @@ const {
} = api.people;
const { EmployeeStatus } = constants;
const wrapperStyle = {
display: "flex",
alignItems: "center"
};
const HeaderContainer = styled(Headline)`
margin-left: 16px;
margin-right: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {
max-width: calc(100vw - 96px);
}
`;
const StyledContainer = styled.div`
position: relative;
display: flex;
align-items: center;
.action-button {
margin-left: 16px;
@media (max-width: 1024px) {
margin-left: auto;
}
}
`;
class SectionHeaderContent extends React.PureComponent {
constructor(props) {
super(props);
@ -553,21 +563,22 @@ class SectionHeaderContent extends React.PureComponent {
const contextOptions = () => this.getUserContextOptions(profile, viewer);
return (
<div style={wrapperStyle}>
<div style={{ width: "16px" }}>
<StyledContainer>
<IconButton
iconName={"ArrowPathIcon"}
iconName="ArrowPathIcon"
color="#A3A9AE"
size="16"
hoverColor="#657077"
isFill={true}
onClick={this.goBack}
/>
</div>
<HeaderContainer type='content' truncate={true}>
{profile.displayName}
{profile.isLDAP && ` (${t("LDAPLbl")})`}
</HeaderContainer>
{((isAdmin && !profile.isOwner) || isMe(viewer, profile.userName)) && (
<ContextMenuButton
className="action-button"
directionX="right"
title={t("Actions")}
iconName="VerticalDotsIcon"
@ -596,7 +607,7 @@ class SectionHeaderContent extends React.PureComponent {
maxSizeFileError={t("maxSizeFileError")}
unknownError={t("unknownError")}
/>
</div>
</StyledContainer>
);
}
}

17
products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js
View File

@ -15,6 +15,7 @@ const Wrapper = styled.div`
const HeaderContainer = styled(Headline)`
margin-left: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {
max-width: calc(100vw - 64px);
}
@ -39,8 +40,20 @@ const SectionHeaderContent = (props) => {
return (
<Wrapper>
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick} />
<HeaderContainer type='content' truncate={true}>{headerText}</HeaderContainer>
<IconButton
iconName='ArrowPathIcon'
color="#A3A9AE"
size="16"
hoverColor="#657077"
isFill={true}
onClick={onClick}
/>
<HeaderContainer
type='content'
truncate={true}
>
{headerText}
</HeaderContainer>
</Wrapper>
);
};

2
products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js
View File

@ -26,6 +26,8 @@ const SectionHeaderContent = props => {
iconName={"ArrowPathIcon"}
color="#A3A9AE"
size="16"
hoverColor="#657077"
isFill={true}
onClick={() => history.push(settings.homepage)}
/>
</div>

24
public/service-worker.js
View File

@ -36,20 +36,24 @@ self.addEventListener('activate', (e) => {
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then((cachesResponse) => {
if(cachesResponse){
return cachesResponse;
}
return fetch(e.request)
fetch(e.request)
.then((fetchResponse) => {
return fetchResponse;
})
.catch(() => useFallback());
})
);
e.waitUntil(
update(e.request).then(refresh)
);
return fetchResponse;
})
.catch((err) => {
return caches.match(e.request)
.then((cachesResponse) =>{
if(cachesResponse){
return cachesResponse;
}else{
return useFallback();
}
})
})
);
});
function update(request) {

2
web/ASC.Web.Client/src/App.js
View File

@ -2,9 +2,9 @@ import React, { Suspense, lazy } from "react";
import { Router, Route, Switch } from "react-router-dom";
import { Loader } from "asc-web-components";
import { history, PrivateRoute, PublicRoute, Login, Error404, StudioLayout, Offline} from "asc-web-common";
import About from "./components/pages/About";
const Home = lazy(() => import("./components/pages/Home"));
const About = lazy(() => import("./components/pages/About"));
const Confirm = lazy(() => import("./components/pages/Confirm"));
const Settings = lazy(() => import("./components/pages/Settings"));

4
web/ASC.Web.Client/src/components/pages/About/index.js
View File

@ -87,7 +87,7 @@ const Body = ({ language }) => {
const address =
"20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050";
const licenseContent = (
<Text className="text_style" fontSize="12px">
<Text as="div" className="text_style" fontSize="12px">
<Trans i18nKey="LicensedUnder" i18n={i18n}>
"This software is licensed under:"
<Link
@ -123,7 +123,7 @@ const Body = ({ language }) => {
{t("AboutCompanyLicensor")}
</Text>
<Text className="text_style" fontSize="16px" isBold={true}>
<Text as="div" className="text_style" fontSize="16px" isBold={true}>
<Trans i18nKey="AllRightsReservedCustomMode" i18n={i18n}>
Ascensio System SIA
<p className="hidden-text">All rights reserved.</p>

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

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

2
web/ASC.Web.Components/src/components/advanced-selector/index.js
View File

@ -564,7 +564,7 @@ class AdvancedSelector extends React.Component {
return (
<StyledContainer>
{displayType === "dropdown" ? (
<DropDown opened={isOpen} className="dropdown-container">
<DropDown open={isOpen} className="dropdown-container">
{this.renderBody()}
</DropDown>
) : (

3
web/ASC.Web.Components/src/components/combobox/index.js
View File

@ -18,6 +18,7 @@ const StyledComboBox = styled.div`
};
position: relative;
outline: 0;
`;
class ComboBox extends React.Component {
@ -146,7 +147,7 @@ class ComboBox extends React.Component {
directionX={directionX}
directionY={directionY}
manualY='102%'
isOpen={isOpen}
open={isOpen}
{...dropDownMaxHeightProp}
{...dropDownManualWidthProp}
>

2
web/ASC.Web.Components/src/components/context-menu-button/index.js
View File

@ -116,7 +116,7 @@ class ContextMenuButton extends React.Component {
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
/>
<DropDown directionX={directionX} isOpen={isOpen}>
<DropDown directionX={directionX} open={isOpen}>
{
this.state.data.map((item, index) =>
(item && (item.label || item.icon)) && <DropDownItem {...item} key={item.key || index} onClick={this.onDropDownItemClick.bind(this, item)}

2
web/ASC.Web.Components/src/components/context-menu/index.js
View File

@ -107,7 +107,7 @@ class ContextMenu extends React.PureComponent {
const { options, id, className, style } = this.props;
return (visible && options || null) && (
<DropDown id={id} className={className} style={style} opened={true}>
<DropDown id={id} className={className} style={style} open={true}>
{options.map((item) => {
if (item && item.key !== undefined) {
return <DropDownItem key={item.key} {...item} />

2
web/ASC.Web.Components/src/components/date-picker/index.js
View File

@ -371,7 +371,7 @@ class DatePicker extends Component {
{isOpen ? (
displayType === "dropdown" ? (
<DropDownStyle>
<DropDown className="drop-down" opened={isOpen}>
<DropDown className="drop-down" open={isOpen}>
{this.renderBody()}
</DropDown>
</DropDownStyle>

2
web/ASC.Web.Components/src/components/drop-down-item/drop-down-item.stories.js
View File

@ -21,7 +21,7 @@ storiesOf('Components | DropDown', module)
<DropDown
directionX={direction}
manualY='1%'
opened={true}>
open={true}>
<DropDownItem
isHeader={isHeader}
label={isHeader ? 'Category' : ''}

5
web/ASC.Web.Components/src/components/drop-down-item/index.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import { Icons } from '../icons'
import { tablet } from '../../utils/device'
const itemTruncate = css`
white-space: nowrap;
@ -84,6 +85,10 @@ const StyledDropdownItem = styled.div`
`
}
@media ${ tablet } {
line-height: 40px;
}
${props => props.disabled && disabledAndHeaderStyle }
`;

2
web/ASC.Web.Components/src/components/drop-down-profile-item/drop-down-profile-item.stories.js
View File

@ -18,7 +18,7 @@ storiesOf('Components | DropDown', module)
withArrow={true}
directionX='right'
manualY='1%'
opened={true}>
open={true}>
<DropDownProfileItem
avatarRole='admin'
avatarSource='https://static-www.onlyoffice.com/images/team/developers_photos/personal_44_2x.jpg'

6
web/ASC.Web.Components/src/components/drop-down/README.md
View File

@ -21,8 +21,9 @@ When using component, it should be noted that parent must have CSS property _pos
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :------------: | :------: | :-------------: | :------: | -------------------------------------------------------------------------------------- |
| -------------------- | :------------: | :------: | :-------------: | :------: | -------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `clickOutsideAction` | `func` | - | - | - | Required for determining a click outside DropDown with the withBackdrop parameter |
| `directionX` | `oneOf` | - | `left`, `right` | `left` | Sets the opening direction relative to the parent |
| `directionY` | `oneOf` | - | `top`, `bottom` | `bottom` | Sets the opening direction relative to the parent |
| `id` | `string` | - | - | - | Accepts id |
@ -30,6 +31,7 @@ When using component, it should be noted that parent must have CSS property _pos
| `manualX` | `string` | - | - | - | Required if you need to specify the exact distance from the parent component |
| `manualY` | `string` | - | - | - | Required if you need to specify the exact distance from the parent component |
| `maxHeight` | `number` | - | - | - | Required if the scrollbar is displayed |
| `opened` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
| `open` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `withArrow` | `bool` | - | - | `false` | It is used if it is necessary to display blue protruding angle as when viewing profile |
| `withBackdrop` | `bool` | - | - | `false` | Used to display backdrop |

2
web/ASC.Web.Components/src/components/drop-down/drop-down.stories.js
View File

@ -19,7 +19,7 @@ storiesOf("Components| DropDown", module)
<div style={{ position: "relative" }}>
<div>Only dropdown</div>
<div style={{ marginTop: 8 }}>Without active button</div>
<DropDown opened={true}>
<DropDown open={true}>
<DropDownItem isHeader label="Category 1" />
<DropDownItem
label="Button 1"

13
web/ASC.Web.Components/src/components/drop-down/drop-down.test.js
View File

@ -3,7 +3,7 @@ import { mount, shallow } from 'enzyme';
import DropDown from '.';
const baseProps = {
opened: false,
open: false,
isOpen: false,
directionX: 'left',
directionY: 'bottom',
@ -23,10 +23,9 @@ describe('<DropDown />', () => {
});
it('opened/isOpen', () => {
const wrapper = mount(<DropDown {...baseProps} opened isOpen />);
const wrapper = mount(<DropDown {...baseProps} open />);
expect(wrapper.prop('opened')).toEqual(true);
expect(wrapper.prop('isOpen')).toEqual(true);
expect(wrapper.prop('open')).toEqual(true);
});
it('directionX right', () => {
@ -103,7 +102,7 @@ describe('<DropDown />', () => {
const wrapper = shallow(<DropDown {...baseProps} />);
const instance = wrapper.instance();
wrapper.setState({ isOpen: true });
wrapper.setState({ opened: true });
instance.componentDidUpdate(wrapper.props(), wrapper.state());
@ -114,7 +113,7 @@ describe('<DropDown />', () => {
const wrapper = shallow(<DropDown {...baseProps} />);
const instance = wrapper.instance();
instance.componentDidUpdate({ opened: true }, wrapper.state());
instance.componentDidUpdate({ open: true }, wrapper.state());
expect(wrapper.props()).toBe(wrapper.props());
});
@ -137,7 +136,7 @@ describe('<DropDown />', () => {
it('accepts style', () => {
const wrapper = mount(
<DropDown {...baseProps} isOpen style={{ color: 'red' }} />
<DropDown {...baseProps} open style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');

49
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import CustomScrollbarsVirtualList from '../scrollbar/custom-scrollbars-virtual-list'
import DropDownItem from '../drop-down-item'
import Backdrop from '../backdrop'
import { FixedSizeList } from "react-window"
const StyledDropdown = styled.div`
@ -25,7 +26,7 @@ const StyledDropdown = styled.div`
z-index: 150;
margin-top: ${props => (props.isUserPreview ? '6px' : '0px')};
margin-right: ${props => (props.isUserPreview ? '6px' : '0px')};
display: ${props => (props.isOpen || props.opened ? 'block' : 'none')};
display: ${props => (props.open ? 'block' : 'none')};
background: #FFFFFF;
border-radius: 6px;
-moz-border-radius: 6px;
@ -80,14 +81,19 @@ class DropDown extends React.PureComponent {
this.checkPosition();
}
componentDidUpdate(prevProps) {
if (this.props.opened !== prevProps.opened || this.props.isOpen !== prevProps.isOpen) {
componentDidUpdate(prevProps, prevState) {
if (this.props.open !== prevProps.open) {
this.checkPosition();
}
}
toggleDropDown = () => {
this.props.clickOutsideAction && this.props.clickOutsideAction(!this.props.open);
}
checkPosition = () => {
if (this.dropDownRef.current){
if (!this.dropDownRef.current) return;
const rects = this.dropDownRef.current.getBoundingClientRect();
const container = { width: window.innerWidth, height: window.innerHeight };
@ -103,16 +109,19 @@ class DropDown extends React.PureComponent {
width: rects.width
});
}
}
render() {
const {maxHeight, withArrow, children} = this.props;
const { maxHeight, withArrow, withBackdrop, children, open } = this.props;
const { directionX, directionY } = this.state;
const fullHeight = children && children.length * 36;
const isTablet = window.innerWidth <= 1024; //TODO: Make some better
const itemHeight = isTablet ? 40 : 36;
const fullHeight = children && children.length * itemHeight;
const calculatedHeight = ((fullHeight > 0) && (fullHeight < maxHeight)) ? fullHeight : maxHeight;
const dropDownMaxHeightProp = maxHeight ? { height: calculatedHeight + 'px' } : {};
//console.log("DropDown render");
return (
<>
{(withBackdrop && open && isTablet) && <Backdrop visible zIndex={149} onClick={this.toggleDropDown} />}
<StyledDropdown
ref={this.dropDownRef}
{...this.props}
@ -120,12 +129,13 @@ class DropDown extends React.PureComponent {
directionY={directionY}
{...dropDownMaxHeightProp}
>
{withArrow && <Arrow directionX={directionX} />}
{maxHeight
? <FixedSizeList
height={calculatedHeight}
width={this.state.width}
itemSize={36}
itemSize={itemHeight}
itemCount={children.length}
itemData={children}
outerElementType={CustomScrollbarsVirtualList}
@ -134,30 +144,33 @@ class DropDown extends React.PureComponent {
</FixedSizeList>
: children}
</StyledDropdown>
</>
);
}
}
DropDown.propTypes = {
opened: PropTypes.bool,
isOpen: PropTypes.bool,
children: PropTypes.any,
className: PropTypes.string,
directionX: PropTypes.oneOf(['left', 'right']),
directionY: PropTypes.oneOf(['bottom', 'top']),
withArrow: PropTypes.bool,
manualWidth: PropTypes.string,
manualY: PropTypes.string,
manualX: PropTypes.string,
maxHeight: PropTypes.number,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
open: PropTypes.bool,
manualWidth: PropTypes.string,
manualX: PropTypes.string,
manualY: PropTypes.string,
maxHeight: PropTypes.number,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
withArrow: PropTypes.bool,
withBackdrop: PropTypes.bool,
clickOutsideAction: PropTypes.func
};
DropDown.defaultProps = {
directionX: 'left',
directionY: 'bottom',
withArrow: false
withArrow: false,
withBackdrop: false
};
export default DropDown

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

@ -110,7 +110,7 @@ class HideFilter extends React.Component {
<DropDown
className="drop-down"
manualY="8px"
opened={this.state.popoverOpen}
open={this.state.popoverOpen}
>
{this.props.children}
</DropDown>

19
web/ASC.Web.Components/src/components/group-button/index.js
View File

@ -6,6 +6,7 @@ import DropDown from "../drop-down";
import DropDownItem from "../drop-down-item";
import Checkbox from "../checkbox";
import { handleAnyClick } from '../../utils/event';
import { tablet } from '../../utils/device'
const textColor = "#333333",
disabledTextColor = "#A3A9AE";
@ -32,6 +33,7 @@ const StyledDropdownToggle = styled.div`
line-height: 19px;
cursor: default;
outline: 0;
color: ${props => (props.disabled ? disabledTextColor : textColor)};
@ -84,15 +86,19 @@ const Caret = styled.div`
const Separator = styled.div`
vertical-align: middle;
border: 0.5px solid #eceef1;
width: 1px;
border: 0.5px solid #ECEEF1;
width: 0px;
height: 24px;
margin: 16px 16px 0 16px;
margin: 16px 11px 0 11px;
`;
const StyledCheckbox = styled.div`
display: inline-block;
margin: auto 0 auto 24px;
@media ${ tablet } {
margin: auto 0 auto 16px;
}
& > * {
margin: 0px;
@ -158,6 +164,7 @@ class GroupButton extends React.PureComponent {
const color = disabled ? disabledTextColor : textColor;
const itemLabel = !isSelect ? label : this.state.selected;
const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } : {};
const offsetSelectDropDown = isSelect ? { manualX : (window.innerWidth <= 1024) ? '16px' : '24px'} : {};
return (
<StyledGroupButton ref={this.ref} id={id} className={className} style={style}>
@ -187,7 +194,11 @@ class GroupButton extends React.PureComponent {
</StyledDropdownToggle>
<DropDown
{...dropDownMaxHeightProp}
isOpen={this.state.isOpen}
{...offsetSelectDropDown}
manualY='72px'
open={this.state.isOpen}
clickOutsideAction={this.dropDownToggleClick}
withBackdrop={true}
>
{React.Children.map(children, (child) =>
<DropDownItem

20
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -5,14 +5,15 @@ import GroupButton from '../group-button';
import DropDownItem from '../drop-down-item';
import throttle from 'lodash/throttle';
import { isArrayEqual } from '../../utils/array';
import { tablet } from '../../utils/device'
const StyledGroupButtonsMenu = styled.div`
box-sizing: border-box;
position: sticky;
top: 0;
background: #FFFFFF;
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.100306);
height: 56px;
box-shadow: 0px 10px 18px -8px rgba(0, 0, 0, 0.100306);
height: 57px;
list-style: none;
padding: 0 18px 19px 0;
width: 100%;
@ -23,10 +24,15 @@ const StyledGroupButtonsMenu = styled.div`
const CloseButton = styled.div`
position: absolute;
right: 20px;
top: 20px;
right: 12px;
top: 10px;
width: 20px;
height: 20px;
padding: 8px;
@media ${ tablet } {
right: 4px;
}
&:hover{
cursor: pointer;
@ -38,7 +44,11 @@ const CloseButton = styled.div`
content: ' ';
height: 20px;
width: 1px;
background-color: #D8D8D8;
background-color: #D0D5DA;
:hover{
background-color: #555F65;
}
}
&:before {

10
web/ASC.Web.Components/src/components/help-button/help-button.test.js
View File

@ -59,4 +59,14 @@ describe("<HelpButton />", () => {
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
it("", () => {
const wrapper = mount(<HelpButton tooltipContent={tooltipContent} />).instance();
wrapper.componentDidUpdate(wrapper.props);
wrapper.componentDidUpdate({displayType: "auto"});
wrapper.componentDidUpdate({displayType: "aside"});
expect(wrapper.props).toBe(wrapper.props);
});
});

2
web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js
View File

@ -89,7 +89,7 @@ class ProfileActions extends React.PureComponent {
isUserPreview
withArrow
directionX="right"
isOpen={this.state.opened}
open={this.state.opened}
>
<DropDownProfileItem
avatarRole={this.getUserRole(this.state.user)}

3
web/ASC.Web.Components/src/components/link-with-dropdown/index.js
View File

@ -176,6 +176,7 @@ class LinkWithDropdown extends React.Component {
data,
id,
style,
isOpen,
...rest
} = this.props;
return (
@ -215,7 +216,7 @@ class LinkWithDropdown extends React.Component {
</span>
<DropDown
isOpen={this.state.isOpen}
open={this.state.isOpen}
withArrow={false}
{...rest}
>

8
web/ASC.Web.Components/src/components/main-button/index.js
View File

@ -28,7 +28,7 @@ const arrowDropdown = css`
height: 0;
margin-top: -1px;
position: absolute;
right: 8px;
right: 10px;
top: 50%;
width: 0;
`;
@ -166,13 +166,15 @@ class MainButton extends React.PureComponent {
return (
<GroupMainButton {...this.props} ref={this.ref}>
<StyledMainButton {...this.props} onClick={this.onMainButtonClick}>
<Text fontSize='16px' isBold color="#fff">
<Text fontSize='16px' fontWeight={600} color="#fff">
{this.props.text}
</Text>
</StyledMainButton>
{this.props.isDropdown ? (
<StyledDropDown
isOpen={this.state.isOpen}
open={this.state.isOpen}
withBackdrop
clickOutsideAction={this.handleClick}
{...this.props}
onClick={this.onDropDownClick}
/>

2
web/ASC.Web.Components/src/components/password-input/index.js
View File

@ -478,7 +478,7 @@ PasswordInput.defaultProps = {
export default PasswordInput;
/*
{displayTooltip &&
<DropDown directionY='top' manualY='150%' isOpen={true}>
<DropDown directionY='top' manualY='150%' open={true}>
{tooltipContent}
</DropDown>
}

74
web/ASC.Web.Components/src/components/tabs-container/tabs-container.test.js
View File

@ -8,19 +8,10 @@ const array_items = [
title: "Title1",
content: (
<div>
<div>
<button>BUTTON</button> <button>BUTTON</button>
<button>BUTTON</button>
</div>
<div>
<button>BUTTON</button> <button>BUTTON</button>
<button>BUTTON</button>
</div>
<div>
<button>BUTTON</button> <button>BUTTON</button>
<button>BUTTON</button>
</div>
</div>
)
},
{
@ -28,15 +19,9 @@ const array_items = [
title: "Title2",
content: (
<div>
<div>
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>
</div>
<div>
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>
</div>
<div>
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>
</div>
<label>LABEL</label>
<label>LABEL</label>
<label>LABEL</label>
</div>
)
},
@ -45,15 +30,9 @@ const array_items = [
title: "Title3",
content: (
<div>
<div>
<input></input> <input></input> <input></input>
</div>
<div>
<input></input> <input></input> <input></input>
</div>
<div>
<input></input> <input></input> <input></input>
</div>
<input></input>
<input></input>
<input></input>
</div>
)
},
@ -62,21 +41,9 @@ const array_items = [
title: "Title4",
content: (
<div>
<div>
{" "}
<button>BUTTON</button> <button>BUTTON</button>{" "}
<button>BUTTON</button>{" "}
</div>
<div>
{" "}
<button>BUTTON</button> <button>BUTTON</button>{" "}
<button>BUTTON</button>{" "}
</div>
<div>
{" "}
<button>BUTTON</button> <button>BUTTON</button>{" "}
<button>BUTTON</button>{" "}
</div>
<button>BUTTON</button>
<button>BUTTON</button>
<button>BUTTON</button>
</div>
)
},
@ -85,18 +52,9 @@ const array_items = [
title: "Title5",
content: (
<div>
<div>
{" "}
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>{" "}
</div>
<div>
{" "}
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>{" "}
</div>
<div>
{" "}
<label>LABEL</label> <label>LABEL</label> <label>LABEL</label>{" "}
</div>
<label>LABEL</label>
<label>LABEL</label>
<label>LABEL</label>
</div>
)
}
@ -140,4 +98,12 @@ describe("<TabContainer />", () => {
);
expect(shouldUpdate).toBe(false);
});
it("TabsContainer not re-render test", () => {
const wrapper = mount(
<TabContainer>{array_items}</TabContainer>
).instance();
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props, {...wrapper.state, activeTab: 3});
expect(shouldUpdate).toBe(true);
});
});

52
web/ASC.Web.Components/src/components/textarea/index.js
View File

@ -4,7 +4,6 @@ import Scrollbar from '../scrollbar/index';
import PropTypes from 'prop-types';
import commonInputStyle from '../text-input/common-input-styles';
import TextareaAutosize from 'react-autosize-textarea';
import { tablet } from "../../utils/device";
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearScrollbar = ({ isDisabled, ...props }) => <Scrollbar {...props} />
@ -20,10 +19,6 @@ const StyledScrollbar = styled(ClearScrollbar)`
height: 91px !important;
background-color: ${props => props.isDisabled && '#F8F9F9'};
@media ${tablet} {
height: 190px !important;
}
`;
// eslint-disable-next-line react/prop-types, no-unused-vars
@ -54,24 +49,37 @@ const StyledTextarea = styled(ClearTextareaAutosize)`
class Textarea extends React.PureComponent {
render() {
// console.log('Textarea render');
const {
className,
id,
isDisabled,
isReadOnly,
maxLength,
name,
onChange,
placeholder,
style,
tabIndex,
value
} = this.props;
return (
<StyledScrollbar
className={this.props.className}
style={this.props.style}
className={className}
style={style}
stype='preMediumBlack'
isDisabled={this.props.isDisabled}
isDisabled={isDisabled}
>
<StyledTextarea
id={this.props.id}
placeholder={this.props.placeholder}
onChange={(e) => this.props.onChange && this.props.onChange(e)}
maxLength={this.props.maxLength}
name={this.props.name}
tabIndex={this.props.tabIndex}
isDisabled={this.props.isDisabled}
disabled={this.props.isDisabled}
readOnly={this.props.isReadOnly}
value={this.props.value}
id={id}
placeholder={placeholder}
onChange={(e) => onChange && onChange(e)}
maxLength={maxLength}
name={name}
tabIndex={tabIndex}
isDisabled={isDisabled}
disabled={isDisabled}
readOnly={isReadOnly}
value={value}
/>
</StyledScrollbar>
)
@ -79,6 +87,7 @@ class Textarea extends React.PureComponent {
}
Textarea.propTypes = {
className: PropTypes.string,
id: PropTypes.string,
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
@ -86,19 +95,18 @@ Textarea.propTypes = {
name: PropTypes.string,
onChange: PropTypes.func,
placeholder: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
tabIndex: PropTypes.number,
value: PropTypes.string,
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
Textarea.defaultProps = {
className: '',
isDisabled: false,
isReadOnly: false,
placeholder: '',
value: '',
tabIndex: -1,
className: ''
value: '',
}
export default Textarea;

1
web/ASC.Web.Components/src/components/toast/README.md
View File

@ -10,7 +10,6 @@ Toast allow you to add notification to your page with ease.
```js
import { Toast, toastr } from "asc-web-components";
import "react-toastify/dist/ReactToastify.min.css"; // You can place it here, but recommended place this file in main file, which contains all css`s
```
```jsx

48
web/ASC.Web.Components/src/components/toast/index.js
View File

@ -8,6 +8,21 @@ const Fade = cssTransition({
exit: 'fadeOut'
});
const toastColors = {
active: {
success: '#cae796',
error: '#ffbfaa',
info: '#f1da92',
warning: '#f1ca92'
},
hover: {
success: '#bcdf7e',
error: '#ffa98d',
info: '#eed27b',
warning: '#eeb97b'
}
};
const StyledToastContainer = styled(ToastContainer)`
width: 365px !important;
z-index: 9999;
@ -19,6 +34,7 @@ const StyledToastContainer = styled(ToastContainer)`
color: #fff;
top: 1em;
right: 1em;
margin-top: 40px;
@media only screen and (max-width: 480px) {
width: 100vw;
@ -65,34 +81,34 @@ const StyledToastContainer = styled(ToastContainer)`
}
.Toastify__toast--success{
background-color: #cae796;
background-color: ${toastColors.active.success};
&:hover {
background-color: #bcdf7e;
background-color: ${toastColors.hover.success};
}
}
.Toastify__toast--error{
background-color: #ffbfaa;
background-color: ${toastColors.active.error};
&:hover {
background-color: #ffa98d;
background-color: ${toastColors.hover.error};
}
}
.Toastify__toast--info{
background-color: #f1da92;
background-color: ${toastColors.active.info};
&:hover {
background-color: #eed27b;
background-color: ${toastColors.hover.info};
}
}
.Toastify__toast--warning{
background-color: #f1ca92;
background-color: ${toastColors.active.warning};
&:hover {
background-color: #eeb97b;
background-color: ${toastColors.hover.warning};
}
}
@ -189,14 +205,14 @@ const Toast = props => {
//console.log("Toast render");
return (
<StyledToastContainer
className={props.className}
draggable={false}
hideProgressBar={true}
id={props.id}
newestOnTop={true}
pauseOnFocusLoss={false}
transition={Fade}
className={props.className}
id={props.id}
style={props.style}
transition={Fade}
/>
);
};
@ -204,18 +220,18 @@ const Toast = props => {
Toast.propTypes = {
autoClosed: PropTypes.bool,
text: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(['success', 'error', 'warning', 'info']).isRequired,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
text: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(['success', 'error', 'warning', 'info']).isRequired
};
Toast.defaultProps = {
autoClosed: true,
text: 'Demo text for example',
title: 'Demo title',
autoClosed: true,
type: 'success',
}