Merge branch 'master' into feature/ef
This commit is contained in:
commit
84c159c73d
@ -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>
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
@ -93,7 +103,7 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
|
||||
openAvatarEditor = () => {
|
||||
getUserPhoto(this.state.profile.id).then(userPhotoData => {
|
||||
if(userPhotoData.original){
|
||||
if (userPhotoData.original) {
|
||||
let avatarDefaultSizes = /_(\d*)-(\d*)./g.exec(userPhotoData.original);
|
||||
if (avatarDefaultSizes !== null && avatarDefaultSizes.length > 2) {
|
||||
this.setState({
|
||||
@ -105,7 +115,7 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
},
|
||||
visibleAvatarEditor: true
|
||||
});
|
||||
}else{
|
||||
} else {
|
||||
this.setState({
|
||||
avatar: {
|
||||
tmpFile: this.state.avatar.tmpFile,
|
||||
@ -128,7 +138,7 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
loadAvatar(this.state.profile.id, data)
|
||||
.then(response => {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
img.onload = function () {
|
||||
var stateCopy = Object.assign({}, _this.state);
|
||||
stateCopy.avatar = {
|
||||
tmpFile: response.data,
|
||||
@ -464,15 +474,15 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
? viewer.isOwner
|
||||
? {}
|
||||
: {
|
||||
key: "delete-profile",
|
||||
label: t("DeleteSelfProfile"),
|
||||
onClick: this.onDeleteSelfProfileClick.bind(this, user.email)
|
||||
}
|
||||
: {
|
||||
key: "disable",
|
||||
label: t("DisableUserButton"),
|
||||
onClick: this.onDisableClick
|
||||
key: "delete-profile",
|
||||
label: t("DeleteSelfProfile"),
|
||||
onClick: this.onDeleteSelfProfileClick.bind(this, user.email)
|
||||
}
|
||||
: {
|
||||
key: "disable",
|
||||
label: t("DisableUserButton"),
|
||||
onClick: this.onDisableClick
|
||||
}
|
||||
];
|
||||
case "disabled":
|
||||
return [
|
||||
@ -520,17 +530,17 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
onClick: this.openAvatarEditor
|
||||
},
|
||||
!isMe(user, viewer.userName) &&
|
||||
(user.status === EmployeeStatus.Active
|
||||
? {
|
||||
key: "disable",
|
||||
label: t("DisableUserButton"),
|
||||
onClick: this.onDisableClick
|
||||
}
|
||||
: {
|
||||
key: "enable",
|
||||
label: t("EnableUserButton"),
|
||||
onClick: this.onEnableClick
|
||||
}),
|
||||
(user.status === EmployeeStatus.Active
|
||||
? {
|
||||
key: "disable",
|
||||
label: t("DisableUserButton"),
|
||||
onClick: this.onDisableClick
|
||||
}
|
||||
: {
|
||||
key: "enable",
|
||||
label: t("EnableUserButton"),
|
||||
onClick: this.onEnableClick
|
||||
}),
|
||||
isMe(user, viewer.userName) && {
|
||||
key: "delete-profile",
|
||||
label: t("DeleteSelfProfile"),
|
||||
@ -553,21 +563,22 @@ class SectionHeaderContent extends React.PureComponent {
|
||||
const contextOptions = () => this.getUserContextOptions(profile, viewer);
|
||||
|
||||
return (
|
||||
<div style={wrapperStyle}>
|
||||
<div style={{ width: "16px" }}>
|
||||
<IconButton
|
||||
iconName={"ArrowPathIcon"}
|
||||
color="#A3A9AE"
|
||||
size="16"
|
||||
onClick={this.goBack}
|
||||
/>
|
||||
</div>
|
||||
<StyledContainer>
|
||||
<IconButton
|
||||
iconName="ArrowPathIcon"
|
||||
color="#A3A9AE"
|
||||
size="16"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={this.goBack}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -26,6 +26,8 @@ const SectionHeaderContent = props => {
|
||||
iconName={"ArrowPathIcon"}
|
||||
color="#A3A9AE"
|
||||
size="16"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={() => history.push(settings.homepage)}
|
||||
/>
|
||||
</div>
|
||||
|
@ -36,19 +36,23 @@ self.addEventListener('activate', (e) => {
|
||||
|
||||
self.addEventListener('fetch', (e) => {
|
||||
e.respondWith(
|
||||
caches.match(e.request).then((cachesResponse) => {
|
||||
if(cachesResponse){
|
||||
return cachesResponse;
|
||||
}
|
||||
return fetch(e.request)
|
||||
.then((fetchResponse) => {
|
||||
return fetchResponse;
|
||||
})
|
||||
.catch(() => useFallback());
|
||||
fetch(e.request)
|
||||
.then((fetchResponse) => {
|
||||
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();
|
||||
}
|
||||
})
|
||||
})
|
||||
);
|
||||
e.waitUntil(
|
||||
update(e.request).then(refresh)
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -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"));
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
) : (
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -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)}
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
|
@ -21,7 +21,7 @@ storiesOf('Components | DropDown', module)
|
||||
<DropDown
|
||||
directionX={direction}
|
||||
manualY='1%'
|
||||
opened={true}>
|
||||
open={true}>
|
||||
<DropDownItem
|
||||
isHeader={isHeader}
|
||||
label={isHeader ? 'Category' : ''}
|
||||
|
@ -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;
|
||||
@ -83,6 +84,10 @@ const StyledDropdownItem = styled.div`
|
||||
text-transform: uppercase;
|
||||
`
|
||||
}
|
||||
|
||||
@media ${ tablet } {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
${props => props.disabled && disabledAndHeaderStyle }
|
||||
`;
|
||||
|
@ -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'
|
||||
|
@ -20,16 +20,18 @@ 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 |
|
||||
| `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 |
|
||||
| `manualWidth` | `string` | - | - | - | Required if you need to specify the exact width of the component, for example 100% |
|
||||
| `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 |
|
||||
| `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 |
|
||||
| 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 |
|
||||
| `manualWidth` | `string` | - | - | - | Required if you need to specify the exact width of the component, for example 100% |
|
||||
| `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 |
|
||||
| `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 |
|
||||
|
@ -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"
|
||||
|
@ -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');
|
||||
|
@ -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;
|
||||
@ -72,92 +73,104 @@ class DropDown extends React.PureComponent {
|
||||
directionX: props.directionX,
|
||||
directionY: props.directionY
|
||||
};
|
||||
|
||||
|
||||
this.dropDownRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
componentDidMount() {
|
||||
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){
|
||||
const rects = this.dropDownRef.current.getBoundingClientRect();
|
||||
const container = {width: window.innerWidth, height: window.innerHeight};
|
||||
|
||||
const left = rects.left < 0;
|
||||
const right = rects.right > container.width;
|
||||
if (!this.dropDownRef.current) return;
|
||||
|
||||
let newDirection = {};
|
||||
|
||||
newDirection.directionX = left ? 'left' : right ? 'right' : this.props.directionX;
|
||||
const rects = this.dropDownRef.current.getBoundingClientRect();
|
||||
const container = { width: window.innerWidth, height: window.innerHeight };
|
||||
|
||||
this.setState({
|
||||
directionX: newDirection.directionX,
|
||||
width: rects.width
|
||||
});
|
||||
}
|
||||
const left = rects.left < 0;
|
||||
const right = rects.right > container.width;
|
||||
|
||||
let newDirection = {};
|
||||
|
||||
newDirection.directionX = left ? 'left' : right ? 'right' : this.props.directionX;
|
||||
|
||||
this.setState({
|
||||
directionX: newDirection.directionX,
|
||||
width: rects.width
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {maxHeight, withArrow, children} = this.props;
|
||||
const {directionX, directionY} = this.state;
|
||||
const fullHeight = children && children.length * 36;
|
||||
const { maxHeight, withArrow, withBackdrop, children, open } = this.props;
|
||||
const { directionX, directionY } = this.state;
|
||||
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 (
|
||||
<StyledDropdown
|
||||
ref={this.dropDownRef}
|
||||
{...this.props}
|
||||
directionX={directionX}
|
||||
directionY={directionY}
|
||||
{...dropDownMaxHeightProp}
|
||||
>
|
||||
{withArrow && <Arrow directionX={directionX} />}
|
||||
{maxHeight
|
||||
? <FixedSizeList
|
||||
height={calculatedHeight}
|
||||
width={this.state.width}
|
||||
itemSize={36}
|
||||
itemCount={children.length}
|
||||
itemData={children}
|
||||
outerElementType={CustomScrollbarsVirtualList}
|
||||
>
|
||||
{Row}
|
||||
</FixedSizeList>
|
||||
: children}
|
||||
</StyledDropdown>
|
||||
<>
|
||||
{(withBackdrop && open && isTablet) && <Backdrop visible zIndex={149} onClick={this.toggleDropDown} />}
|
||||
<StyledDropdown
|
||||
ref={this.dropDownRef}
|
||||
{...this.props}
|
||||
directionX={directionX}
|
||||
directionY={directionY}
|
||||
{...dropDownMaxHeightProp}
|
||||
>
|
||||
|
||||
{withArrow && <Arrow directionX={directionX} />}
|
||||
{maxHeight
|
||||
? <FixedSizeList
|
||||
height={calculatedHeight}
|
||||
width={this.state.width}
|
||||
itemSize={itemHeight}
|
||||
itemCount={children.length}
|
||||
itemData={children}
|
||||
outerElementType={CustomScrollbarsVirtualList}
|
||||
>
|
||||
{Row}
|
||||
</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
|
@ -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>
|
||||
|
@ -6,7 +6,8 @@ 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 16px;
|
||||
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
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -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)}
|
||||
|
@ -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}
|
||||
>
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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>
|
||||
}
|
||||
|
@ -8,18 +8,9 @@ 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>
|
||||
<button>BUTTON</button>
|
||||
<button>BUTTON</button>
|
||||
<button>BUTTON</button>
|
||||
</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);
|
||||
});
|
||||
});
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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',
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user