@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.
Files changed (117) hide show
  1. package/README.md +4 -0
  2. package/es/ActionButton/ActionButton.js +1 -1
  3. package/es/Attachment/Attachment.js +1 -1
  4. package/es/AttachmentViewer/AttachmentViewer.js +1 -1
  5. package/es/ChannelIcon/ChannelIcon.js +1 -1
  6. package/es/Drawer/Drawer.js +1 -1
  7. package/es/FreezeLayer/FreezeLayer.js +61 -124
  8. package/es/FreezeLayer/css/cssJSLogic.js +23 -0
  9. package/es/FreezeLayer/index.js +2 -0
  10. package/es/FreezeLayer/props/defaultProps.js +1 -0
  11. package/es/FreezeLayer/props/propTypes.js +1 -0
  12. package/es/FreezeLayer/useFreezeLayer.js +50 -0
  13. package/es/IconButton/IconButton.js +1 -1
  14. package/es/ImportantNotes/ImportantNotes.js +1 -1
  15. package/es/Message/Message.js +1 -1
  16. package/es/MessageBanner/MessageBanner.js +1 -1
  17. package/es/NewStar/NewStar.js +1 -1
  18. package/es/ToastMessage/ToastMessage.js +1 -1
  19. package/es/Upload/Upload.js +1 -1
  20. package/es/alert/AlertHeader/AlertHeader.js +1 -1
  21. package/es/avatar/AvatarClose/AvatarClose.js +1 -1
  22. package/es/avatar/AvatarCollision/AvatarCollision.js +1 -1
  23. package/es/avatar/AvatarIcon/AvatarIcon.js +1 -1
  24. package/es/avatar/AvatarThread/AvatarThread.js +1 -1
  25. package/es/avatar/AvatarUser/AvatarUser.js +1 -1
  26. package/es/deprecated/FreezeLayer/FreezeLayer.js +128 -0
  27. package/es/deprecated/FreezeLayer/props/defaultProps.js +8 -0
  28. package/es/deprecated/FreezeLayer/props/propTypes.js +17 -0
  29. package/es/deprecated/SelectDropdown/SelectDropdown.js +1 -1
  30. package/es/docs/formDocs.js +1 -16
  31. package/es/docs/generalDocs.js +1 -107
  32. package/es/docs/lookupDocs.js +1 -35
  33. package/es/docs/setupDocs.js +1 -15
  34. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +1 -1
  35. package/es/form/fields/FieldContainer/FieldContainer.js +1 -1
  36. package/es/form/fields/PhoneField/PhoneField.js +1 -1
  37. package/es/form/fields/ValidationMessage/ValidationMessage.js +1 -1
  38. package/es/index.js +0 -3
  39. package/es/layout/SetupDetailLayout/SetupDetailLayout.js +1 -1
  40. package/es/list/BluePrintStatus/BluePrintStatus.js +1 -1
  41. package/es/list/Comment/Comment.js +1 -1
  42. package/es/list/Icons/AddNewIcon.js +1 -1
  43. package/es/list/Icons/CompleteIcon.js +1 -1
  44. package/es/list/Icons/DeleteIcon.js +1 -1
  45. package/es/list/Icons/EditIcon.js +1 -1
  46. package/es/list/Icons/ReadUnreadIcon.js +1 -1
  47. package/es/list/Icons/SmartIcon.js +1 -1
  48. package/es/list/SecondaryText/ContactName.js +1 -1
  49. package/es/list/SentimentStatus/SentimentStatus.js +1 -1
  50. package/es/list/Thread/Thread.js +1 -1
  51. package/es/list/UserTime/UserTime.js +1 -1
  52. package/es/list/status/StatusDropdown/StatusDropdown.js +1 -1
  53. package/es/list/status/StatusListItem/StatusListItem.js +1 -1
  54. package/es/lookup/header/Search/Search.js +1 -1
  55. package/es/lookup/header/ViewDropDown/ViewDropDown.js +1 -1
  56. package/es/setup/header/Link/Link.js +1 -1
  57. package/es/setup/header/Search/Search.js +1 -1
  58. package/es/setup/header/Views/Views.js +1 -1
  59. package/es/version2/AlertClose/AlertClose.js +1 -1
  60. package/lib/ActionButton/ActionButton.js +3 -3
  61. package/lib/Attachment/Attachment.js +3 -3
  62. package/lib/AttachmentViewer/AttachmentViewer.js +3 -3
  63. package/lib/ChannelIcon/ChannelIcon.js +3 -3
  64. package/lib/Drawer/Drawer.js +2 -2
  65. package/lib/FreezeLayer/FreezeLayer.js +58 -153
  66. package/lib/FreezeLayer/css/FreezeLayer.module.css +42 -0
  67. package/lib/FreezeLayer/css/cssJSLogic.js +25 -0
  68. package/lib/FreezeLayer/index.js +20 -0
  69. package/lib/FreezeLayer/props/defaultProps.js +1 -0
  70. package/lib/FreezeLayer/props/propTypes.js +1 -0
  71. package/lib/FreezeLayer/useFreezeLayer.js +73 -0
  72. package/lib/IconButton/IconButton.js +2 -2
  73. package/lib/ImportantNotes/ImportantNotes.js +2 -2
  74. package/lib/Message/Message.js +3 -3
  75. package/lib/MessageBanner/MessageBanner.js +2 -2
  76. package/lib/NewStar/NewStar.js +4 -4
  77. package/lib/ToastMessage/ToastMessage.js +5 -5
  78. package/lib/Upload/Upload.js +3 -3
  79. package/lib/alert/AlertHeader/AlertHeader.js +2 -2
  80. package/lib/avatar/AvatarClose/AvatarClose.js +2 -2
  81. package/lib/avatar/AvatarCollision/AvatarCollision.js +2 -2
  82. package/lib/avatar/AvatarIcon/AvatarIcon.js +2 -2
  83. package/lib/avatar/AvatarThread/AvatarThread.js +2 -2
  84. package/lib/avatar/AvatarUser/AvatarUser.js +5 -5
  85. package/lib/deprecated/FreezeLayer/FreezeLayer.js +163 -0
  86. package/lib/deprecated/FreezeLayer/FreezeLayer.module.css +42 -0
  87. package/lib/deprecated/FreezeLayer/props/defaultProps.js +15 -0
  88. package/lib/deprecated/FreezeLayer/props/propTypes.js +25 -0
  89. package/lib/deprecated/SelectDropdown/SelectDropdown.js +2 -2
  90. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +3 -3
  91. package/lib/form/fields/FieldContainer/FieldContainer.js +3 -3
  92. package/lib/form/fields/PhoneField/PhoneField.js +2 -2
  93. package/lib/form/fields/ValidationMessage/ValidationMessage.js +2 -2
  94. package/lib/layout/SetupDetailLayout/SetupDetailLayout.js +6 -6
  95. package/lib/list/BluePrintStatus/BluePrintStatus.js +2 -2
  96. package/lib/list/Comment/Comment.js +2 -2
  97. package/lib/list/Icons/AddNewIcon.js +2 -2
  98. package/lib/list/Icons/CompleteIcon.js +2 -2
  99. package/lib/list/Icons/DeleteIcon.js +2 -2
  100. package/lib/list/Icons/EditIcon.js +2 -2
  101. package/lib/list/Icons/ReadUnreadIcon.js +2 -2
  102. package/lib/list/Icons/SmartIcon.js +2 -2
  103. package/lib/list/SecondaryText/ContactName.js +2 -2
  104. package/lib/list/SentimentStatus/SentimentStatus.js +2 -2
  105. package/lib/list/Thread/Thread.js +2 -2
  106. package/lib/list/UserTime/UserTime.js +8 -8
  107. package/lib/list/status/StatusDropdown/StatusDropdown.js +2 -2
  108. package/lib/list/status/StatusListItem/StatusListItem.js +2 -2
  109. package/lib/lookup/header/Search/Search.js +4 -4
  110. package/lib/lookup/header/ViewDropDown/ViewDropDown.js +2 -2
  111. package/lib/setup/header/Link/Link.js +2 -2
  112. package/lib/setup/header/Search/Search.js +2 -2
  113. package/lib/setup/header/Views/Views.js +3 -3
  114. package/lib/version2/AlertClose/AlertClose.js +2 -2
  115. package/package.json +3 -3
  116. /package/es/FreezeLayer/{FreezeLayer.module.css → css/FreezeLayer.module.css} +0 -0
  117. /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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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';
@@ -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/lib/Icon';
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, { Component } from '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 { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
7
- import { getDotLibraryConfig } from '../Provider/Config';
8
- import { isTextSelected } from '@zohodesk/components/es/utils/Common';
9
- import style from './FreezeLayer.module.css';
10
- export default class FreezeLayer extends Component {
11
- constructor(props) {
12
- super(props);
13
- this.state = {
14
- isActive: props.isActive,
15
- isChildActive: false
16
- };
17
- this.getNextIndex = getZIndex(this);
18
- this.isFreezeLayerEnabled = false;
19
- this.handleClick = this.handleClick.bind(this);
20
- }
21
- handleClick() {
22
- const {
23
- onClick
24
- } = this.props;
25
- if (onClick && !isTextSelected()) {
26
- onClick();
27
- }
28
- }
29
- enableFreeze() {
30
- if (!this.isFreezeLayerEnabled) {
31
- this.isFreezeLayerEnabled = true;
32
- const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
33
- freezeLayerEnable && freezeLayerEnable();
34
- }
35
- }
36
- disableFreeze() {
37
- if (this.isFreezeLayerEnabled) {
38
- this.isFreezeLayerEnabled = false;
39
- const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
40
- freezeLayerDisable && freezeLayerDisable();
41
- }
42
- }
43
- componentDidMount() {
44
- let {
45
- isActive
46
- } = this.props;
47
- if (isActive) {
48
- this.setState({
49
- isChildActive: true
50
- });
51
- this.enableFreeze();
52
- }
53
- }
54
- componentDidUpdate(prevProps) {
55
- let {
56
- isActive
57
- } = this.props;
58
- if (isActive != prevProps.isActive) {
59
- if (isActive) {
60
- this.enableFreeze();
61
- this.setState({
62
- isActive: true
63
- }, () => {
64
- this.setState({
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
+ }
@@ -0,0 +1,2 @@
1
+ export { default as FreezeLayer } from './FreezeLayer';
2
+ export { default as FreezeLayerPropTypes } from './props/propTypes';
@@ -4,5 +4,6 @@ export const defaultProps = {
4
4
  zIndex: '5',
5
5
  isSvgMask: false,
6
6
  customClass: '',
7
+ customStyle: {},
7
8
  needAutoZindex: true
8
9
  };
@@ -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/lib/Icon';
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/lib/Icon';
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) {
@@ -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/lib/Icon';
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/lib/Icon';
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 {
@@ -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/lib/Icon';
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/lib/Icon';
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';
@@ -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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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/lib/Icon';
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,8 @@
1
+ export const defaultProps = {
2
+ isActive: false,
3
+ palette: 'default',
4
+ zIndex: '5',
5
+ isSvgMask: false,
6
+ customClass: '',
7
+ needAutoZindex: true
8
+ };
@@ -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/lib/Icon';
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';