@zohodesk/dot 1.0.0-beta.249 → 1.0.0-beta.250
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/es/ActionButton/ActionButton.js +1 -1
- package/es/Attachment/Attachment.js +1 -1
- package/es/AttachmentViewer/AttachmentViewer.js +1 -1
- package/es/ChannelIcon/ChannelIcon.js +1 -1
- package/es/Drawer/Drawer.js +1 -1
- package/es/FreezeLayer/FreezeLayer.js +61 -124
- package/es/FreezeLayer/css/cssJSLogic.js +23 -0
- package/es/FreezeLayer/index.js +2 -0
- package/es/FreezeLayer/props/defaultProps.js +1 -0
- package/es/FreezeLayer/props/propTypes.js +1 -0
- package/es/FreezeLayer/useFreezeLayer.js +50 -0
- package/es/IconButton/IconButton.js +1 -1
- package/es/ImportantNotes/ImportantNotes.js +1 -1
- package/es/Message/Message.js +1 -1
- package/es/MessageBanner/MessageBanner.js +1 -1
- package/es/NewStar/NewStar.js +1 -1
- package/es/ToastMessage/ToastMessage.js +1 -1
- package/es/Upload/Upload.js +1 -1
- package/es/alert/AlertHeader/AlertHeader.js +1 -1
- package/es/avatar/AvatarClose/AvatarClose.js +1 -1
- package/es/avatar/AvatarCollision/AvatarCollision.js +1 -1
- package/es/avatar/AvatarIcon/AvatarIcon.js +1 -1
- package/es/avatar/AvatarThread/AvatarThread.js +1 -1
- package/es/avatar/AvatarUser/AvatarUser.js +1 -1
- package/es/deprecated/FreezeLayer/FreezeLayer.js +128 -0
- package/es/deprecated/FreezeLayer/props/defaultProps.js +8 -0
- package/es/deprecated/FreezeLayer/props/propTypes.js +17 -0
- package/es/deprecated/SelectDropdown/SelectDropdown.js +1 -1
- package/es/docs/formDocs.js +1 -16
- package/es/docs/generalDocs.js +1 -107
- package/es/docs/lookupDocs.js +1 -35
- package/es/docs/setupDocs.js +1 -15
- package/es/dropdown/ToggleDropDown/ToggleDropDown.js +1 -1
- package/es/form/fields/FieldContainer/FieldContainer.js +1 -1
- package/es/form/fields/PhoneField/PhoneField.js +1 -1
- package/es/form/fields/ValidationMessage/ValidationMessage.js +1 -1
- package/es/index.js +0 -3
- package/es/layout/SetupDetailLayout/SetupDetailLayout.js +1 -1
- package/es/list/BluePrintStatus/BluePrintStatus.js +1 -1
- package/es/list/Comment/Comment.js +1 -1
- package/es/list/Icons/AddNewIcon.js +1 -1
- package/es/list/Icons/CompleteIcon.js +1 -1
- package/es/list/Icons/DeleteIcon.js +1 -1
- package/es/list/Icons/EditIcon.js +1 -1
- package/es/list/Icons/ReadUnreadIcon.js +1 -1
- package/es/list/Icons/SmartIcon.js +1 -1
- package/es/list/SecondaryText/ContactName.js +1 -1
- package/es/list/SentimentStatus/SentimentStatus.js +1 -1
- package/es/list/Thread/Thread.js +1 -1
- package/es/list/UserTime/UserTime.js +1 -1
- package/es/list/status/StatusDropdown/StatusDropdown.js +1 -1
- package/es/list/status/StatusListItem/StatusListItem.js +1 -1
- package/es/lookup/header/Search/Search.js +1 -1
- package/es/lookup/header/ViewDropDown/ViewDropDown.js +1 -1
- package/es/setup/header/Link/Link.js +1 -1
- package/es/setup/header/Search/Search.js +1 -1
- package/es/setup/header/Views/Views.js +1 -1
- package/es/version2/AlertClose/AlertClose.js +1 -1
- package/lib/ActionButton/ActionButton.js +3 -3
- package/lib/Attachment/Attachment.js +3 -3
- package/lib/AttachmentViewer/AttachmentViewer.js +3 -3
- package/lib/ChannelIcon/ChannelIcon.js +3 -3
- package/lib/Drawer/Drawer.js +2 -2
- package/lib/FreezeLayer/FreezeLayer.js +58 -153
- package/lib/FreezeLayer/css/FreezeLayer.module.css +42 -0
- package/lib/FreezeLayer/css/cssJSLogic.js +25 -0
- package/lib/FreezeLayer/index.js +20 -0
- package/lib/FreezeLayer/props/defaultProps.js +1 -0
- package/lib/FreezeLayer/props/propTypes.js +1 -0
- package/lib/FreezeLayer/useFreezeLayer.js +73 -0
- package/lib/IconButton/IconButton.js +2 -2
- package/lib/ImportantNotes/ImportantNotes.js +2 -2
- package/lib/Message/Message.js +3 -3
- package/lib/MessageBanner/MessageBanner.js +2 -2
- package/lib/NewStar/NewStar.js +4 -4
- package/lib/ToastMessage/ToastMessage.js +5 -5
- package/lib/Upload/Upload.js +3 -3
- package/lib/alert/AlertHeader/AlertHeader.js +2 -2
- package/lib/avatar/AvatarClose/AvatarClose.js +2 -2
- package/lib/avatar/AvatarCollision/AvatarCollision.js +2 -2
- package/lib/avatar/AvatarIcon/AvatarIcon.js +2 -2
- package/lib/avatar/AvatarThread/AvatarThread.js +2 -2
- package/lib/avatar/AvatarUser/AvatarUser.js +5 -5
- package/lib/deprecated/FreezeLayer/FreezeLayer.js +163 -0
- package/lib/deprecated/FreezeLayer/FreezeLayer.module.css +42 -0
- package/lib/deprecated/FreezeLayer/props/defaultProps.js +15 -0
- package/lib/deprecated/FreezeLayer/props/propTypes.js +25 -0
- package/lib/deprecated/SelectDropdown/SelectDropdown.js +2 -2
- package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +3 -3
- package/lib/form/fields/FieldContainer/FieldContainer.js +3 -3
- package/lib/form/fields/PhoneField/PhoneField.js +2 -2
- package/lib/form/fields/ValidationMessage/ValidationMessage.js +2 -2
- package/lib/layout/SetupDetailLayout/SetupDetailLayout.js +6 -6
- package/lib/list/BluePrintStatus/BluePrintStatus.js +2 -2
- package/lib/list/Comment/Comment.js +2 -2
- package/lib/list/Icons/AddNewIcon.js +2 -2
- package/lib/list/Icons/CompleteIcon.js +2 -2
- package/lib/list/Icons/DeleteIcon.js +2 -2
- package/lib/list/Icons/EditIcon.js +2 -2
- package/lib/list/Icons/ReadUnreadIcon.js +2 -2
- package/lib/list/Icons/SmartIcon.js +2 -2
- package/lib/list/SecondaryText/ContactName.js +2 -2
- package/lib/list/SentimentStatus/SentimentStatus.js +2 -2
- package/lib/list/Thread/Thread.js +2 -2
- package/lib/list/UserTime/UserTime.js +8 -8
- package/lib/list/status/StatusDropdown/StatusDropdown.js +2 -2
- package/lib/list/status/StatusListItem/StatusListItem.js +2 -2
- package/lib/lookup/header/Search/Search.js +4 -4
- package/lib/lookup/header/ViewDropDown/ViewDropDown.js +2 -2
- package/lib/setup/header/Link/Link.js +2 -2
- package/lib/setup/header/Search/Search.js +2 -2
- package/lib/setup/header/Views/Views.js +3 -3
- package/lib/version2/AlertClose/AlertClose.js +2 -2
- package/package.json +3 -3
- /package/es/FreezeLayer/{FreezeLayer.module.css → css/FreezeLayer.module.css} +0 -0
- /package/{lib → es/deprecated}/FreezeLayer/FreezeLayer.module.css +0 -0
package/README.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
In this Library, we Provide Some Basic Components to Build Your Application
|
|
4
4
|
|
|
5
|
+
# 1.0.0-beta.250
|
|
6
|
+
|
|
7
|
+
- - **FreezeLayer** - converted to functional component
|
|
8
|
+
|
|
5
9
|
# 1.0.0-beta.249
|
|
6
10
|
|
|
7
11
|
- **FreezeLayer** - Issue fix: While click on the freezelayer, drawer/any dialog box won't close if any text highlighted in the product.
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
4
|
import Popup from '@zohodesk/components/lib/Popup/Popup';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import Button from '@zohodesk/components/lib/Button/Button';
|
|
7
7
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
8
8
|
import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
|
-
import Icon from '@zohodesk/icons
|
|
4
|
+
import { Icon } from '@zohodesk/icons';
|
|
5
5
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
6
6
|
import Link from '../Link/Link';
|
|
7
7
|
import style from './Attachment.module.css';
|
|
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
|
|
2
2
|
import { AttachmentViewer_defaultProps } from './props/defaultProps';
|
|
3
3
|
import { AttachmentViewer_propTypes } from './props/propTypes';
|
|
4
4
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
7
7
|
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
|
|
8
8
|
import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
|
-
import Icon from '@zohodesk/icons
|
|
4
|
+
import { Icon } from '@zohodesk/icons';
|
|
5
5
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
6
6
|
import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
|
|
7
7
|
import { getChannelMappingObj } from '../utils/ChannelIconMapping';
|
package/es/Drawer/Drawer.js
CHANGED
|
@@ -9,7 +9,7 @@ import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/V
|
|
|
9
9
|
import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
|
|
10
10
|
import Heading from '@zohodesk/components/lib/Heading/Heading';
|
|
11
11
|
import IconButton from '../IconButton/IconButton';
|
|
12
|
-
import Icon from '@zohodesk/icons
|
|
12
|
+
import { Icon } from '@zohodesk/icons';
|
|
13
13
|
import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
|
|
14
14
|
import style from './Drawer.module.css';
|
|
15
15
|
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
|
|
@@ -1,131 +1,68 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
4
|
import { Container } from '@zohodesk/components/lib/Layout';
|
|
5
|
+
import { mergeStyle } from '@zohodesk/components/es/utils/';
|
|
5
6
|
import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import style from './FreezeLayer.module.css';
|
|
10
|
-
export default
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
isChildActive: true
|
|
66
|
-
});
|
|
67
|
-
});
|
|
68
|
-
} else {
|
|
69
|
-
this.disableFreeze();
|
|
70
|
-
this.setState({
|
|
71
|
-
isChildActive: false
|
|
72
|
-
}, () => {
|
|
73
|
-
this.setState({
|
|
74
|
-
isActive: false
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
componentWillUnmount() {
|
|
81
|
-
this.disableFreeze();
|
|
82
|
-
}
|
|
83
|
-
render() {
|
|
84
|
-
let {
|
|
85
|
-
children,
|
|
86
|
-
align,
|
|
87
|
-
childAnimationName,
|
|
88
|
-
palette,
|
|
89
|
-
onClick,
|
|
90
|
-
animationName,
|
|
91
|
-
zIndex,
|
|
92
|
-
runOnMount,
|
|
93
|
-
forwardRef,
|
|
94
|
-
isSvgMask,
|
|
95
|
-
customClass,
|
|
96
|
-
needAutoZindex
|
|
97
|
-
} = this.props;
|
|
98
|
-
let {
|
|
99
|
-
isActive,
|
|
100
|
-
isChildActive
|
|
101
|
-
} = this.state;
|
|
102
|
-
return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
103
|
-
name: animationName && animationName,
|
|
104
|
-
isActive: isActive,
|
|
105
|
-
runOnMount: runOnMount
|
|
106
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
107
|
-
style: isActive && needAutoZindex ? {
|
|
108
|
-
zIndex: `${this.getNextIndex()}`
|
|
109
|
-
} : {},
|
|
110
|
-
className: `
|
|
111
|
-
${style.container} ${customClass} ${style[`index${zIndex}`]} ${!isSvgMask ? style[palette] : ''}
|
|
112
|
-
`,
|
|
113
|
-
onClick: this.handleClick,
|
|
114
|
-
ref: forwardRef
|
|
115
|
-
}, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
116
|
-
name: childAnimationName,
|
|
117
|
-
isActive: isChildActive,
|
|
118
|
-
enterDelay: palette === 'plain' ? 0 : 300,
|
|
119
|
-
component: Container,
|
|
120
|
-
alignBox: "row",
|
|
121
|
-
align: align,
|
|
122
|
-
dataId: "reactFreezeLayer"
|
|
123
|
-
}, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
|
|
124
|
-
alignBox: "row",
|
|
125
|
-
align: align,
|
|
126
|
-
dataId: "reactFreezeLayer"
|
|
127
|
-
}, children))));
|
|
128
|
-
}
|
|
7
|
+
import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
|
|
8
|
+
import cssJSLogic from './css/cssJSLogic';
|
|
9
|
+
import useFreezeLayer from './useFreezeLayer';
|
|
10
|
+
import style from './css/FreezeLayer.module.css';
|
|
11
|
+
export default function FreezeLayer(props) {
|
|
12
|
+
let {
|
|
13
|
+
isActive: propsActive,
|
|
14
|
+
children,
|
|
15
|
+
align,
|
|
16
|
+
childAnimationName,
|
|
17
|
+
palette,
|
|
18
|
+
onClick,
|
|
19
|
+
animationName,
|
|
20
|
+
runOnMount,
|
|
21
|
+
forwardRef,
|
|
22
|
+
isSvgMask,
|
|
23
|
+
needAutoZindex,
|
|
24
|
+
customStyle
|
|
25
|
+
} = props;
|
|
26
|
+
const finalStyle = mergeStyle(style, customStyle);
|
|
27
|
+
const {
|
|
28
|
+
freezeClass
|
|
29
|
+
} = cssJSLogic({
|
|
30
|
+
props,
|
|
31
|
+
style: finalStyle
|
|
32
|
+
});
|
|
33
|
+
const getNextIndex = useZIndex();
|
|
34
|
+
const {
|
|
35
|
+
isActive,
|
|
36
|
+
isChildActive,
|
|
37
|
+
handleClick
|
|
38
|
+
} = useFreezeLayer({
|
|
39
|
+
isActive: propsActive,
|
|
40
|
+
onClick
|
|
41
|
+
});
|
|
42
|
+
return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
43
|
+
name: animationName && animationName,
|
|
44
|
+
isActive: isActive,
|
|
45
|
+
runOnMount: runOnMount
|
|
46
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
47
|
+
style: isActive && needAutoZindex ? {
|
|
48
|
+
zIndex: `${getNextIndex()}`
|
|
49
|
+
} : {},
|
|
50
|
+
className: freezeClass,
|
|
51
|
+
onClick: handleClick,
|
|
52
|
+
ref: forwardRef
|
|
53
|
+
}, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
54
|
+
name: childAnimationName,
|
|
55
|
+
isActive: isChildActive,
|
|
56
|
+
enterDelay: palette === 'plain' ? 0 : 300,
|
|
57
|
+
component: Container,
|
|
58
|
+
alignBox: "row",
|
|
59
|
+
align: align,
|
|
60
|
+
dataId: "reactFreezeLayer"
|
|
61
|
+
}, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
|
|
62
|
+
alignBox: "row",
|
|
63
|
+
align: align,
|
|
64
|
+
dataId: "reactFreezeLayer"
|
|
65
|
+
}, children))));
|
|
129
66
|
}
|
|
130
67
|
FreezeLayer.propTypes = propTypes;
|
|
131
68
|
FreezeLayer.defaultProps = defaultProps;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { compileClassNames } from '@zohodesk/components/es/utils';
|
|
2
|
+
export default function cssJSLogic(_ref) {
|
|
3
|
+
let {
|
|
4
|
+
props,
|
|
5
|
+
style
|
|
6
|
+
} = _ref;
|
|
7
|
+
let {
|
|
8
|
+
zIndex,
|
|
9
|
+
palette,
|
|
10
|
+
isSvgMask,
|
|
11
|
+
customClass
|
|
12
|
+
} = props;
|
|
13
|
+
let zIndexClass = `index${zIndex}`;
|
|
14
|
+
let freezeClass = compileClassNames({
|
|
15
|
+
[style.container]: true,
|
|
16
|
+
[customClass]: !!customClass,
|
|
17
|
+
[style[zIndexClass]]: !!zIndex,
|
|
18
|
+
[style[palette]]: !isSvgMask && !!palette
|
|
19
|
+
});
|
|
20
|
+
return {
|
|
21
|
+
freezeClass
|
|
22
|
+
};
|
|
23
|
+
}
|
|
@@ -13,5 +13,6 @@ export const propTypes = {
|
|
|
13
13
|
onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
|
|
14
14
|
palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
|
|
15
15
|
runOnMount: PropTypes.bool,
|
|
16
|
+
customStyle: PropTypes.object,
|
|
16
17
|
zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
|
|
17
18
|
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { isTextSelected } from '@zohodesk/components/es/utils/Common';
|
|
3
|
+
import { getDotLibraryConfig } from '../Provider/Config';
|
|
4
|
+
export default function useFreezeLayer(_ref) {
|
|
5
|
+
let {
|
|
6
|
+
isActive: propsActive,
|
|
7
|
+
onClick
|
|
8
|
+
} = _ref;
|
|
9
|
+
const [isActive, setActive] = useState(propsActive);
|
|
10
|
+
const [isChildActive, setChildActive] = useState(false);
|
|
11
|
+
let isFreezeLayerEnabled = useRef(false);
|
|
12
|
+
function handleClick() {
|
|
13
|
+
if (onClick && !isTextSelected()) {
|
|
14
|
+
onClick();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
function enableFreeze() {
|
|
18
|
+
if (!isFreezeLayerEnabled.current) {
|
|
19
|
+
isFreezeLayerEnabled.current = true;
|
|
20
|
+
const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
|
|
21
|
+
freezeLayerEnable && freezeLayerEnable();
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
function disableFreeze() {
|
|
25
|
+
if (isFreezeLayerEnabled.current) {
|
|
26
|
+
isFreezeLayerEnabled.current = false;
|
|
27
|
+
const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
|
|
28
|
+
freezeLayerDisable && freezeLayerDisable();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (propsActive) {
|
|
33
|
+
enableFreeze();
|
|
34
|
+
setActive(true);
|
|
35
|
+
setTimeout(() => setChildActive(true));
|
|
36
|
+
} else {
|
|
37
|
+
disableFreeze();
|
|
38
|
+
setChildActive(false);
|
|
39
|
+
setTimeout(() => setActive(false));
|
|
40
|
+
}
|
|
41
|
+
return () => {
|
|
42
|
+
disableFreeze();
|
|
43
|
+
};
|
|
44
|
+
}, [propsActive]);
|
|
45
|
+
return {
|
|
46
|
+
isActive,
|
|
47
|
+
isChildActive,
|
|
48
|
+
handleClick
|
|
49
|
+
};
|
|
50
|
+
}
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import { Container } from '@zohodesk/components/lib/Layout';
|
|
7
7
|
import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
|
|
8
8
|
import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
4
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import style from './ImportantNotes.module.css';
|
|
7
7
|
export default class ImportantNotes extends React.Component {
|
|
8
8
|
constructor(props) {
|
package/es/Message/Message.js
CHANGED
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import AutoClose from '../actions/AutoClose';
|
|
7
7
|
import style from './Message.module.css';
|
|
8
8
|
export default class Message extends React.Component {
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
4
|
import Link from '../Link/Link';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
7
7
|
import style from './MessageBanner.module.css';
|
|
8
8
|
export default class MessageBanner extends React.Component {
|
package/es/NewStar/NewStar.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
|
-
import Icon from '@zohodesk/icons
|
|
4
|
+
import { Icon } from '@zohodesk/icons';
|
|
5
5
|
import { Container } from '@zohodesk/components/lib/Layout';
|
|
6
6
|
import style from './NewStar.module.css';
|
|
7
7
|
export default class NewStar extends React.Component {
|
|
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
|
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
5
|
//components
|
|
6
|
-
import Icon from '@zohodesk/icons
|
|
6
|
+
import { Icon } from '@zohodesk/icons';
|
|
7
7
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
8
8
|
import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
|
|
9
9
|
import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
|
package/es/Upload/Upload.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { defaultProps } from './props/defaultProps';
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
|
-
import Icon from '@zohodesk/icons
|
|
4
|
+
import { Icon } from '@zohodesk/icons';
|
|
5
5
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
6
6
|
import Image from '../Image/Image';
|
|
7
7
|
import style from './Upload.module.css';
|
|
@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
|
|
|
3
3
|
import { propTypes } from './props/propTypes';
|
|
4
4
|
import Title from '../../lookup/header/Title/Title';
|
|
5
5
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
6
|
-
import Icon from '@zohodesk/icons
|
|
6
|
+
import { Icon } from '@zohodesk/icons';
|
|
7
7
|
import Close from '../../lookup/header/Close/Close';
|
|
8
8
|
import style from './AlertHeader.module.css';
|
|
9
9
|
export default class AlertHeader extends Component {
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
5
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
6
|
-
import Icon from '@zohodesk/icons
|
|
6
|
+
import { Icon } from '@zohodesk/icons';
|
|
7
7
|
import style from './AvatarClose.module.css';
|
|
8
8
|
export default class AvatarClose extends React.Component {
|
|
9
9
|
constructor(props) {
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
5
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
6
|
-
import Icon from '@zohodesk/icons
|
|
6
|
+
import { Icon } from '@zohodesk/icons';
|
|
7
7
|
import style from './AvatarCollision.module.css';
|
|
8
8
|
export default class AvatarCollision extends React.Component {
|
|
9
9
|
constructor(props) {
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
|
-
import Icon from '@zohodesk/icons
|
|
5
|
+
import { Icon } from '@zohodesk/icons';
|
|
6
6
|
import { Container } from '@zohodesk/components/lib/Layout';
|
|
7
7
|
import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
|
|
8
8
|
import style from './AvatarIcon.module.css';
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { defaultProps } from './props/defaultProps';
|
|
4
4
|
import { propTypes } from './props/propTypes';
|
|
5
5
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
6
|
-
import Icon from '@zohodesk/icons
|
|
6
|
+
import { Icon } from '@zohodesk/icons';
|
|
7
7
|
import style from './AvatarThread.module.css';
|
|
8
8
|
export default class AvatarThread extends React.Component {
|
|
9
9
|
render() {
|
|
@@ -6,7 +6,7 @@ import { propTypes } from './props/propTypes';
|
|
|
6
6
|
/**** Components ****/
|
|
7
7
|
import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
|
|
8
8
|
import AvatarIcon from '../AvatarIcon/AvatarIcon';
|
|
9
|
-
import Icon from '@zohodesk/icons
|
|
9
|
+
import { Icon } from '@zohodesk/icons';
|
|
10
10
|
import style from './AvatarUser.module.css';
|
|
11
11
|
/**** Methods ****/
|
|
12
12
|
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import React, { Component } from 'react';
|
|
2
|
+
import { defaultProps } from './props/defaultProps';
|
|
3
|
+
import { propTypes } from './props/propTypes';
|
|
4
|
+
import { Container } from '@zohodesk/components/lib/Layout';
|
|
5
|
+
import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
|
|
6
|
+
import style from './FreezeLayer.module.css';
|
|
7
|
+
import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
|
|
8
|
+
import { getDotLibraryConfig } from '../Provider/Config';
|
|
9
|
+
export default class FreezeLayer extends Component {
|
|
10
|
+
constructor(props) {
|
|
11
|
+
super(props);
|
|
12
|
+
this.state = {
|
|
13
|
+
isActive: props.isActive,
|
|
14
|
+
isChildActive: false
|
|
15
|
+
};
|
|
16
|
+
this.getNextIndex = getZIndex(this);
|
|
17
|
+
this.isFreezeLayerEnabled = false;
|
|
18
|
+
}
|
|
19
|
+
enableFreeze() {
|
|
20
|
+
if (!this.isFreezeLayerEnabled) {
|
|
21
|
+
this.isFreezeLayerEnabled = true;
|
|
22
|
+
const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
|
|
23
|
+
freezeLayerEnable && freezeLayerEnable();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
disableFreeze() {
|
|
27
|
+
if (this.isFreezeLayerEnabled) {
|
|
28
|
+
this.isFreezeLayerEnabled = false;
|
|
29
|
+
const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
|
|
30
|
+
freezeLayerDisable && freezeLayerDisable();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
componentDidMount() {
|
|
34
|
+
let {
|
|
35
|
+
isActive
|
|
36
|
+
} = this.props;
|
|
37
|
+
if (isActive) {
|
|
38
|
+
this.setState({
|
|
39
|
+
isChildActive: true
|
|
40
|
+
});
|
|
41
|
+
this.enableFreeze();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
componentDidUpdate(prevProps) {
|
|
45
|
+
let {
|
|
46
|
+
isActive
|
|
47
|
+
} = this.props;
|
|
48
|
+
if (isActive != prevProps.isActive) {
|
|
49
|
+
if (isActive) {
|
|
50
|
+
this.enableFreeze();
|
|
51
|
+
this.setState({
|
|
52
|
+
isActive: true
|
|
53
|
+
}, () => {
|
|
54
|
+
this.setState({
|
|
55
|
+
isChildActive: true
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
} else {
|
|
59
|
+
this.disableFreeze();
|
|
60
|
+
this.setState({
|
|
61
|
+
isChildActive: false
|
|
62
|
+
}, () => {
|
|
63
|
+
this.setState({
|
|
64
|
+
isActive: false
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
componentWillUnmount() {
|
|
71
|
+
this.disableFreeze();
|
|
72
|
+
}
|
|
73
|
+
render() {
|
|
74
|
+
let {
|
|
75
|
+
children,
|
|
76
|
+
align,
|
|
77
|
+
childAnimationName,
|
|
78
|
+
palette,
|
|
79
|
+
onClick,
|
|
80
|
+
animationName,
|
|
81
|
+
zIndex,
|
|
82
|
+
runOnMount,
|
|
83
|
+
forwardRef,
|
|
84
|
+
isSvgMask,
|
|
85
|
+
customClass,
|
|
86
|
+
needAutoZindex
|
|
87
|
+
} = this.props;
|
|
88
|
+
let {
|
|
89
|
+
isActive,
|
|
90
|
+
isChildActive
|
|
91
|
+
} = this.state;
|
|
92
|
+
return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
93
|
+
name: animationName && animationName,
|
|
94
|
+
isActive: isActive,
|
|
95
|
+
runOnMount: runOnMount
|
|
96
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
style: isActive && needAutoZindex ? {
|
|
98
|
+
zIndex: `${this.getNextIndex()}`
|
|
99
|
+
} : {},
|
|
100
|
+
className: `
|
|
101
|
+
${style.container} ${customClass} ${style[`index${zIndex}`]} ${!isSvgMask ? style[palette] : ''}
|
|
102
|
+
`,
|
|
103
|
+
onClick: onClick ? onClick : null,
|
|
104
|
+
ref: forwardRef
|
|
105
|
+
}, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
106
|
+
name: childAnimationName,
|
|
107
|
+
isActive: isChildActive,
|
|
108
|
+
enterDelay: palette === 'plain' ? 0 : 300,
|
|
109
|
+
component: Container,
|
|
110
|
+
alignBox: "row",
|
|
111
|
+
align: align,
|
|
112
|
+
dataId: "reactFreezeLayer"
|
|
113
|
+
}, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
|
|
114
|
+
alignBox: "row",
|
|
115
|
+
align: align,
|
|
116
|
+
dataId: "reactFreezeLayer"
|
|
117
|
+
}, children))));
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
FreezeLayer.propTypes = propTypes;
|
|
121
|
+
FreezeLayer.defaultProps = defaultProps;
|
|
122
|
+
|
|
123
|
+
// if (__DOCS__) {
|
|
124
|
+
// FreezeLayer.docs = {
|
|
125
|
+
// componentGroup: 'Atom',
|
|
126
|
+
// folderName: 'General'
|
|
127
|
+
// };
|
|
128
|
+
// }
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
let animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
|
|
3
|
+
export const propTypes = {
|
|
4
|
+
align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
|
|
5
|
+
animationName: PropTypes.oneOf(animationValues),
|
|
6
|
+
childAnimationName: PropTypes.oneOf(animationValues),
|
|
7
|
+
children: PropTypes.node,
|
|
8
|
+
customClass: PropTypes.string,
|
|
9
|
+
forwardRef: PropTypes.object,
|
|
10
|
+
isActive: PropTypes.bool,
|
|
11
|
+
isSvgMask: PropTypes.bool,
|
|
12
|
+
needAutoZindex: PropTypes.bool,
|
|
13
|
+
onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
|
|
14
|
+
palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
|
|
15
|
+
runOnMount: PropTypes.bool,
|
|
16
|
+
zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
|
|
17
|
+
};
|
|
@@ -4,7 +4,7 @@ import Popup from '@zohodesk/components/lib/Popup/Popup';
|
|
|
4
4
|
import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
|
|
5
5
|
import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
|
|
6
6
|
import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
|
|
7
|
-
import Icon from '@zohodesk/icons
|
|
7
|
+
import { Icon } from '@zohodesk/icons';
|
|
8
8
|
import { Container, Box } from '@zohodesk/components/lib/Layout';
|
|
9
9
|
import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
|
|
10
10
|
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
|