@zohodesk/dot 1.0.0-beta.256 → 1.0.0-beta.258
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 +11 -0
- package/es/FreezeLayer/FreezeLayer.js +14 -2
- package/es/Hooks/Dragger/css/Dragger.module.css +3 -0
- package/es/Hooks/Dragger/useDragger.js +77 -0
- package/es/Hooks/Dragger/utils/DraggerUtil.js +66 -0
- package/es/Provider/Config.js +7 -0
- package/es/dropdown/ToggleDropDown/ToggleDropDown.js +3 -3
- package/es/form/fields/TextEditor/TextEditor.js +11 -10
- package/es/lookup/Section/Section.js +1 -0
- package/es/version2/lookup/AlertHeader/AlertHeader.js +2 -2
- package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +1 -0
- package/lib/FreezeLayer/FreezeLayer.js +17 -2
- package/lib/Hooks/Dragger/css/Dragger.module.css +3 -0
- package/lib/Hooks/Dragger/useDragger.js +83 -0
- package/lib/Hooks/Dragger/utils/DraggerUtil.js +70 -0
- package/lib/Provider/Config.js +7 -0
- package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +3 -3
- package/lib/form/fields/TextEditor/TextEditor.js +11 -10
- package/lib/lookup/Section/Section.js +1 -0
- package/lib/version2/lookup/AlertHeader/AlertHeader.js +2 -2
- package/lib/version2/lookup/AlertHeader/AlertHeaderNew.module.css +1 -0
- package/package.json +3 -2
- package/dubFinder.js +0 -96
package/README.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
In this Library, we Provide Some Basic Components to Build Your Application
|
|
4
4
|
|
|
5
|
+
# 1.0.0-beta.258
|
|
6
|
+
|
|
7
|
+
- **TextEditor** - blockquote css style tag removed.
|
|
8
|
+
|
|
9
|
+
# 1.0.0-beta.257
|
|
10
|
+
|
|
11
|
+
- **Drag Hook** - useDragger hook added
|
|
12
|
+
- **FreezeLayer** - useDragger implemented
|
|
13
|
+
- **Alert Header** - useDragger based attributes added
|
|
14
|
+
- **Section** - useDragger based attributes added
|
|
15
|
+
|
|
5
16
|
# 1.0.0-beta.256
|
|
6
17
|
|
|
7
18
|
- **Drawer** - CancelBubblingEffect reverted coz that produces many issues.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef } 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';
|
|
@@ -8,6 +8,7 @@ import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
|
|
|
8
8
|
import cssJSLogic from './css/cssJSLogic';
|
|
9
9
|
import useFreezeLayer from './useFreezeLayer';
|
|
10
10
|
import style from './css/FreezeLayer.module.css';
|
|
11
|
+
import useDragger from '../Hooks/Dragger/useDragger';
|
|
11
12
|
export default function FreezeLayer(props) {
|
|
12
13
|
let {
|
|
13
14
|
isActive: propsActive,
|
|
@@ -24,6 +25,7 @@ export default function FreezeLayer(props) {
|
|
|
24
25
|
customStyle
|
|
25
26
|
} = props;
|
|
26
27
|
const finalStyle = mergeStyle(style, customStyle);
|
|
28
|
+
const dragRef = useRef(null);
|
|
27
29
|
const {
|
|
28
30
|
freezeClass
|
|
29
31
|
} = cssJSLogic({
|
|
@@ -39,6 +41,16 @@ export default function FreezeLayer(props) {
|
|
|
39
41
|
isActive: propsActive,
|
|
40
42
|
onClick
|
|
41
43
|
});
|
|
44
|
+
let refEle = forwardRef || dragRef;
|
|
45
|
+
useDragger({
|
|
46
|
+
ParentRef: refEle,
|
|
47
|
+
boundaryLimit: {
|
|
48
|
+
top: 0,
|
|
49
|
+
left: 50,
|
|
50
|
+
right: 50,
|
|
51
|
+
bottom: 50
|
|
52
|
+
}
|
|
53
|
+
});
|
|
42
54
|
return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
43
55
|
name: animationName && animationName,
|
|
44
56
|
isActive: isActive,
|
|
@@ -49,7 +61,7 @@ export default function FreezeLayer(props) {
|
|
|
49
61
|
} : {},
|
|
50
62
|
className: freezeClass,
|
|
51
63
|
onClick: handleClick,
|
|
52
|
-
ref:
|
|
64
|
+
ref: refEle
|
|
53
65
|
}, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
|
|
54
66
|
name: childAnimationName,
|
|
55
67
|
isActive: isChildActive,
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { getDotLibraryConfig } from '../../Provider/Config';
|
|
3
|
+
import { elementFinder, DragPosCalc } from './utils/DraggerUtil';
|
|
4
|
+
import style from './css/Dragger.module.css';
|
|
5
|
+
export default function useDragger(_ref) {
|
|
6
|
+
let {
|
|
7
|
+
ParentRef,
|
|
8
|
+
boundaryLimit = getDotLibraryConfig('boundaryLimit')
|
|
9
|
+
} = _ref;
|
|
10
|
+
let draggableEle = useRef(null); //To set the Draggable Element
|
|
11
|
+
let parentEle = useRef(null); // To set the Parent Boundary Element
|
|
12
|
+
let offset = useRef({
|
|
13
|
+
x: 0,
|
|
14
|
+
y: 0
|
|
15
|
+
}); //To set the x and y Positions
|
|
16
|
+
let draggable = useRef(false); // To get track of draggable
|
|
17
|
+
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
parentEle.current = ParentRef.current || getDotLibraryConfig('draggerBoundary') || document.body;
|
|
20
|
+
}, [ParentRef.current]);
|
|
21
|
+
const elementDrag = e => {
|
|
22
|
+
e = e || window.event;
|
|
23
|
+
e.preventDefault();
|
|
24
|
+
if (draggable.current) {
|
|
25
|
+
const left = offset.current.x + e.clientX;
|
|
26
|
+
const top = offset.current.y + e.clientY;
|
|
27
|
+
if (parentEle.current) {
|
|
28
|
+
const calcValue = DragPosCalc({
|
|
29
|
+
x: left,
|
|
30
|
+
y: top,
|
|
31
|
+
dragWrapper: parentEle.current,
|
|
32
|
+
element: draggableEle.current,
|
|
33
|
+
boundaryLimit
|
|
34
|
+
});
|
|
35
|
+
draggableEle.current.style.left = calcValue.x + 'px';
|
|
36
|
+
draggableEle.current.style.top = calcValue.y + 'px';
|
|
37
|
+
} else {
|
|
38
|
+
draggableEle.current.style.left = left + 'px';
|
|
39
|
+
draggableEle.current.style.top = top + 'px';
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const closeDragElement = () => {
|
|
44
|
+
document.removeEventListener('mouseup', closeDragElement);
|
|
45
|
+
document.removeEventListener('mousemove', elementDrag);
|
|
46
|
+
};
|
|
47
|
+
const dragMouseDown = e => {
|
|
48
|
+
//Initial position
|
|
49
|
+
requestAnimationFrame(() => {
|
|
50
|
+
let draggableEleRect = draggableEle.current.getBoundingClientRect();
|
|
51
|
+
e = e || window.event;
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
draggableEle.current.style.top = draggableEleRect.top + 'px';
|
|
54
|
+
draggableEle.current.style.left = draggableEleRect.left + 'px';
|
|
55
|
+
draggableEle.current.style.width = draggableEleRect.width + 'px';
|
|
56
|
+
draggableEle.current.style.position = 'fixed';
|
|
57
|
+
offset.current.x = draggableEle.current.offsetLeft - e.clientX;
|
|
58
|
+
offset.current.y = draggableEle.current.offsetTop - e.clientY;
|
|
59
|
+
draggable.current = true;
|
|
60
|
+
document.addEventListener('mouseup', closeDragElement);
|
|
61
|
+
document.addEventListener('mousemove', elementDrag);
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
elementFinder(parentEle.current, '[data-drag-container=true]').then(draggableElement => {
|
|
66
|
+
draggableEle.current = draggableElement;
|
|
67
|
+
let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
|
|
68
|
+
// ? draggableEle.current.querySelector("[data-drag-hook=true]")
|
|
69
|
+
// : draggableEle.current;
|
|
70
|
+
dragController && dragController.addEventListener('mousedown', dragMouseDown);
|
|
71
|
+
dragController && dragController.classList.add(style.dragCursor);
|
|
72
|
+
});
|
|
73
|
+
}, [parentEle.current]);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
//data-drag-container => To Mention Draggable Element
|
|
77
|
+
//data-drag-hook =>To Mention Draggable target element
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export function DragPosCalc(_ref) {
|
|
2
|
+
let {
|
|
3
|
+
x,
|
|
4
|
+
y,
|
|
5
|
+
element,
|
|
6
|
+
dragWrapper,
|
|
7
|
+
boundaryLimit
|
|
8
|
+
} = _ref;
|
|
9
|
+
//percent = 50%
|
|
10
|
+
// const percentobj = { top: 0, left: 10, right: 2, bottom: 90 };
|
|
11
|
+
let {
|
|
12
|
+
top,
|
|
13
|
+
left,
|
|
14
|
+
right,
|
|
15
|
+
bottom
|
|
16
|
+
} = boundaryLimit;
|
|
17
|
+
const offsetWidth = element ? element.offsetWidth : 0;
|
|
18
|
+
const offsetHeight = element ? element.offsetHeight : 0;
|
|
19
|
+
const topOffset = top ? offsetHeight - top : 0;
|
|
20
|
+
const leftOffset = left ? offsetWidth - left : 0;
|
|
21
|
+
const rightOffset = right ? offsetWidth - right : 0;
|
|
22
|
+
const bottomOffset = bottom ? offsetHeight - bottom : 0;
|
|
23
|
+
if (x < -leftOffset) {
|
|
24
|
+
//LEFT
|
|
25
|
+
x = -leftOffset;
|
|
26
|
+
}
|
|
27
|
+
if (x > dragWrapper.offsetWidth - element.offsetWidth + rightOffset) {
|
|
28
|
+
//RIGHT
|
|
29
|
+
x = dragWrapper.offsetWidth - element.offsetWidth + rightOffset;
|
|
30
|
+
}
|
|
31
|
+
if (y < -topOffset) {
|
|
32
|
+
//TOP
|
|
33
|
+
y = -topOffset;
|
|
34
|
+
}
|
|
35
|
+
if (y > dragWrapper.offsetHeight - element.offsetHeight + bottomOffset) {
|
|
36
|
+
//BOTTOM
|
|
37
|
+
y = dragWrapper.offsetHeight - element.offsetHeight + bottomOffset;
|
|
38
|
+
}
|
|
39
|
+
return {
|
|
40
|
+
x,
|
|
41
|
+
y
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// export const elementFinder = async (Parent, selector) => {
|
|
46
|
+
// while (Parent && Parent.querySelector(selector) === null) {
|
|
47
|
+
// await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
48
|
+
// }
|
|
49
|
+
// return Parent && Parent.querySelector(selector);
|
|
50
|
+
// };
|
|
51
|
+
|
|
52
|
+
export const elementFinder = (Parent, selector) => {
|
|
53
|
+
return new Promise(resolve => {
|
|
54
|
+
const observer = new MutationObserver(mutations => {
|
|
55
|
+
const element = Parent.querySelector(selector);
|
|
56
|
+
if (element) {
|
|
57
|
+
observer.disconnect();
|
|
58
|
+
resolve(element);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
observer.observe(Parent, {
|
|
62
|
+
childList: true,
|
|
63
|
+
subtree: true
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
};
|
package/es/Provider/Config.js
CHANGED
|
@@ -630,7 +630,7 @@ export class ToggleDropDown extends Component {
|
|
|
630
630
|
},
|
|
631
631
|
palette: palette,
|
|
632
632
|
isResponsivePadding: true
|
|
633
|
-
}, DropBoxProps), /*#__PURE__*/React.createElement(Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
|
|
633
|
+
}, DropBoxProps), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
|
|
634
634
|
className: style.search
|
|
635
635
|
}, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
|
|
636
636
|
placeHolder: placeHolderText,
|
|
@@ -670,7 +670,7 @@ export class ToggleDropDown extends Component {
|
|
|
670
670
|
onScroll: this.handleScroll,
|
|
671
671
|
role: isSearch ? 'listbox' : undefined,
|
|
672
672
|
"aria-labelledby": isSearch ? ariaTitleId : undefined
|
|
673
|
-
}, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(Fragment, null, options.map(group => {
|
|
673
|
+
}, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map(group => {
|
|
674
674
|
const groupName = group[groupNameKey];
|
|
675
675
|
const groupOptions = group[groupOptionsKey];
|
|
676
676
|
const {
|
|
@@ -752,7 +752,7 @@ export class ToggleDropDown extends Component {
|
|
|
752
752
|
}), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
|
|
753
753
|
isCover: false,
|
|
754
754
|
align: "both"
|
|
755
|
-
}, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(Fragment, null, options.map((item, i) => {
|
|
755
|
+
}, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
|
|
756
756
|
const {
|
|
757
757
|
iconName,
|
|
758
758
|
iconSize,
|
|
@@ -188,16 +188,17 @@ export default class TextEditor extends Component {
|
|
|
188
188
|
if (!global.editor[id]) {
|
|
189
189
|
global.editor[id] = editorObj;
|
|
190
190
|
}
|
|
191
|
-
const css = 'blockquote {margin:0 0 0 4px; }',
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
style.type = 'text/css';
|
|
195
|
-
if (style.styleSheet) {
|
|
196
|
-
|
|
197
|
-
} else {
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
head.appendChild(style);
|
|
191
|
+
// const css = 'blockquote {margin:0 0 0 4px; }',
|
|
192
|
+
// head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
|
|
193
|
+
// style = document.createElement('style');
|
|
194
|
+
// style.type = 'text/css';
|
|
195
|
+
// if (style.styleSheet) {
|
|
196
|
+
// style.styleSheet.cssText = css;
|
|
197
|
+
// } else {
|
|
198
|
+
// style.appendChild(editorObj.doc.createTextNode(css));
|
|
199
|
+
// }
|
|
200
|
+
// head.appendChild(style);
|
|
201
|
+
|
|
201
202
|
editorCallback && editorCallback(editorObj);
|
|
202
203
|
const iframe = selectn('iframe.contentDocument.body', editorObj) || null;
|
|
203
204
|
const iframeHead = selectn('iframe.contentDocument.head', editorObj) || null;
|
|
@@ -12,6 +12,7 @@ export default class Section extends Component {
|
|
|
12
12
|
className
|
|
13
13
|
} = this.props;
|
|
14
14
|
return /*#__PURE__*/React.createElement(Container, {
|
|
15
|
+
"data-drag-container": "true",
|
|
15
16
|
alignBox: alignBox,
|
|
16
17
|
className: `${style.section} ${className ? className : ''}`
|
|
17
18
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -24,7 +24,8 @@ export default class AlertHeader extends Component {
|
|
|
24
24
|
alignBox: "row",
|
|
25
25
|
className: `${style.container} ${headerElement ? style.headerLayout : ''} ${style[type]}`,
|
|
26
26
|
isCover: false,
|
|
27
|
-
wrap: "wrap"
|
|
27
|
+
wrap: "wrap",
|
|
28
|
+
"data-drag-hook": "true"
|
|
28
29
|
}, needIcon ? /*#__PURE__*/React.createElement("div", {
|
|
29
30
|
className: style.iconContainer
|
|
30
31
|
}, /*#__PURE__*/React.createElement(AlertIcons, {
|
|
@@ -33,7 +34,6 @@ export default class AlertHeader extends Component {
|
|
|
33
34
|
flexible: true
|
|
34
35
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
35
36
|
alignBox: "row",
|
|
36
|
-
align: "center",
|
|
37
37
|
wrap: breakChildren ? 'wrap' : null
|
|
38
38
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
39
39
|
className: style.title,
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports["default"] = FreezeLayer;
|
|
7
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _defaultProps = require("./props/defaultProps");
|
|
9
10
|
var _propTypes = require("./props/propTypes");
|
|
10
11
|
var _Layout = require("@zohodesk/components/lib/Layout");
|
|
@@ -14,7 +15,10 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
|
|
|
14
15
|
var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
|
|
15
16
|
var _useFreezeLayer2 = _interopRequireDefault(require("./useFreezeLayer"));
|
|
16
17
|
var _FreezeLayerModule = _interopRequireDefault(require("./css/FreezeLayer.module.css"));
|
|
18
|
+
var _useDragger = _interopRequireDefault(require("../Hooks/Dragger/useDragger"));
|
|
17
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
22
|
function FreezeLayer(props) {
|
|
19
23
|
var propsActive = props.isActive,
|
|
20
24
|
children = props.children,
|
|
@@ -29,6 +33,7 @@ function FreezeLayer(props) {
|
|
|
29
33
|
needAutoZindex = props.needAutoZindex,
|
|
30
34
|
customStyle = props.customStyle;
|
|
31
35
|
var finalStyle = (0, _utils.mergeStyle)(_FreezeLayerModule["default"], customStyle);
|
|
36
|
+
var dragRef = (0, _react.useRef)(null);
|
|
32
37
|
var _cssJSLogic = (0, _cssJSLogic2["default"])({
|
|
33
38
|
props: props,
|
|
34
39
|
style: finalStyle
|
|
@@ -42,6 +47,16 @@ function FreezeLayer(props) {
|
|
|
42
47
|
isActive = _useFreezeLayer.isActive,
|
|
43
48
|
isChildActive = _useFreezeLayer.isChildActive,
|
|
44
49
|
handleClick = _useFreezeLayer.handleClick;
|
|
50
|
+
var refEle = forwardRef || dragRef;
|
|
51
|
+
(0, _useDragger["default"])({
|
|
52
|
+
ParentRef: refEle,
|
|
53
|
+
boundaryLimit: {
|
|
54
|
+
top: 0,
|
|
55
|
+
left: 50,
|
|
56
|
+
right: 50,
|
|
57
|
+
bottom: 50
|
|
58
|
+
}
|
|
59
|
+
});
|
|
45
60
|
return /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
|
|
46
61
|
name: animationName && animationName,
|
|
47
62
|
isActive: isActive,
|
|
@@ -52,7 +67,7 @@ function FreezeLayer(props) {
|
|
|
52
67
|
} : {},
|
|
53
68
|
className: freezeClass,
|
|
54
69
|
onClick: handleClick,
|
|
55
|
-
ref:
|
|
70
|
+
ref: refEle
|
|
56
71
|
}, children && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, childAnimationName ? /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
|
|
57
72
|
name: childAnimationName,
|
|
58
73
|
isActive: isChildActive,
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = useDragger;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _Config = require("../../Provider/Config");
|
|
9
|
+
var _DraggerUtil = require("./utils/DraggerUtil");
|
|
10
|
+
var _DraggerModule = _interopRequireDefault(require("./css/Dragger.module.css"));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
function useDragger(_ref) {
|
|
13
|
+
var ParentRef = _ref.ParentRef,
|
|
14
|
+
_ref$boundaryLimit = _ref.boundaryLimit,
|
|
15
|
+
boundaryLimit = _ref$boundaryLimit === void 0 ? (0, _Config.getDotLibraryConfig)('boundaryLimit') : _ref$boundaryLimit;
|
|
16
|
+
var draggableEle = (0, _react.useRef)(null); //To set the Draggable Element
|
|
17
|
+
var parentEle = (0, _react.useRef)(null); // To set the Parent Boundary Element
|
|
18
|
+
var offset = (0, _react.useRef)({
|
|
19
|
+
x: 0,
|
|
20
|
+
y: 0
|
|
21
|
+
}); //To set the x and y Positions
|
|
22
|
+
var draggable = (0, _react.useRef)(false); // To get track of draggable
|
|
23
|
+
|
|
24
|
+
(0, _react.useEffect)(function () {
|
|
25
|
+
parentEle.current = ParentRef.current || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
|
|
26
|
+
}, [ParentRef.current]);
|
|
27
|
+
var elementDrag = function elementDrag(e) {
|
|
28
|
+
e = e || window.event;
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
if (draggable.current) {
|
|
31
|
+
var left = offset.current.x + e.clientX;
|
|
32
|
+
var top = offset.current.y + e.clientY;
|
|
33
|
+
if (parentEle.current) {
|
|
34
|
+
var calcValue = (0, _DraggerUtil.DragPosCalc)({
|
|
35
|
+
x: left,
|
|
36
|
+
y: top,
|
|
37
|
+
dragWrapper: parentEle.current,
|
|
38
|
+
element: draggableEle.current,
|
|
39
|
+
boundaryLimit: boundaryLimit
|
|
40
|
+
});
|
|
41
|
+
draggableEle.current.style.left = calcValue.x + 'px';
|
|
42
|
+
draggableEle.current.style.top = calcValue.y + 'px';
|
|
43
|
+
} else {
|
|
44
|
+
draggableEle.current.style.left = left + 'px';
|
|
45
|
+
draggableEle.current.style.top = top + 'px';
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var closeDragElement = function closeDragElement() {
|
|
50
|
+
document.removeEventListener('mouseup', closeDragElement);
|
|
51
|
+
document.removeEventListener('mousemove', elementDrag);
|
|
52
|
+
};
|
|
53
|
+
var dragMouseDown = function dragMouseDown(e) {
|
|
54
|
+
//Initial position
|
|
55
|
+
requestAnimationFrame(function () {
|
|
56
|
+
var draggableEleRect = draggableEle.current.getBoundingClientRect();
|
|
57
|
+
e = e || window.event;
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
draggableEle.current.style.top = draggableEleRect.top + 'px';
|
|
60
|
+
draggableEle.current.style.left = draggableEleRect.left + 'px';
|
|
61
|
+
draggableEle.current.style.width = draggableEleRect.width + 'px';
|
|
62
|
+
draggableEle.current.style.position = 'fixed';
|
|
63
|
+
offset.current.x = draggableEle.current.offsetLeft - e.clientX;
|
|
64
|
+
offset.current.y = draggableEle.current.offsetTop - e.clientY;
|
|
65
|
+
draggable.current = true;
|
|
66
|
+
document.addEventListener('mouseup', closeDragElement);
|
|
67
|
+
document.addEventListener('mousemove', elementDrag);
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
(0, _react.useEffect)(function () {
|
|
71
|
+
(0, _DraggerUtil.elementFinder)(parentEle.current, '[data-drag-container=true]').then(function (draggableElement) {
|
|
72
|
+
draggableEle.current = draggableElement;
|
|
73
|
+
var dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
|
|
74
|
+
// ? draggableEle.current.querySelector("[data-drag-hook=true]")
|
|
75
|
+
// : draggableEle.current;
|
|
76
|
+
dragController && dragController.addEventListener('mousedown', dragMouseDown);
|
|
77
|
+
dragController && dragController.classList.add(_DraggerModule["default"].dragCursor);
|
|
78
|
+
});
|
|
79
|
+
}, [parentEle.current]);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
//data-drag-container => To Mention Draggable Element
|
|
83
|
+
//data-drag-hook =>To Mention Draggable target element
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DragPosCalc = DragPosCalc;
|
|
7
|
+
exports.elementFinder = void 0;
|
|
8
|
+
function DragPosCalc(_ref) {
|
|
9
|
+
var x = _ref.x,
|
|
10
|
+
y = _ref.y,
|
|
11
|
+
element = _ref.element,
|
|
12
|
+
dragWrapper = _ref.dragWrapper,
|
|
13
|
+
boundaryLimit = _ref.boundaryLimit;
|
|
14
|
+
//percent = 50%
|
|
15
|
+
// const percentobj = { top: 0, left: 10, right: 2, bottom: 90 };
|
|
16
|
+
var top = boundaryLimit.top,
|
|
17
|
+
left = boundaryLimit.left,
|
|
18
|
+
right = boundaryLimit.right,
|
|
19
|
+
bottom = boundaryLimit.bottom;
|
|
20
|
+
var offsetWidth = element ? element.offsetWidth : 0;
|
|
21
|
+
var offsetHeight = element ? element.offsetHeight : 0;
|
|
22
|
+
var topOffset = top ? offsetHeight - top : 0;
|
|
23
|
+
var leftOffset = left ? offsetWidth - left : 0;
|
|
24
|
+
var rightOffset = right ? offsetWidth - right : 0;
|
|
25
|
+
var bottomOffset = bottom ? offsetHeight - bottom : 0;
|
|
26
|
+
if (x < -leftOffset) {
|
|
27
|
+
//LEFT
|
|
28
|
+
x = -leftOffset;
|
|
29
|
+
}
|
|
30
|
+
if (x > dragWrapper.offsetWidth - element.offsetWidth + rightOffset) {
|
|
31
|
+
//RIGHT
|
|
32
|
+
x = dragWrapper.offsetWidth - element.offsetWidth + rightOffset;
|
|
33
|
+
}
|
|
34
|
+
if (y < -topOffset) {
|
|
35
|
+
//TOP
|
|
36
|
+
y = -topOffset;
|
|
37
|
+
}
|
|
38
|
+
if (y > dragWrapper.offsetHeight - element.offsetHeight + bottomOffset) {
|
|
39
|
+
//BOTTOM
|
|
40
|
+
y = dragWrapper.offsetHeight - element.offsetHeight + bottomOffset;
|
|
41
|
+
}
|
|
42
|
+
return {
|
|
43
|
+
x: x,
|
|
44
|
+
y: y
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// export const elementFinder = async (Parent, selector) => {
|
|
49
|
+
// while (Parent && Parent.querySelector(selector) === null) {
|
|
50
|
+
// await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
51
|
+
// }
|
|
52
|
+
// return Parent && Parent.querySelector(selector);
|
|
53
|
+
// };
|
|
54
|
+
|
|
55
|
+
var elementFinder = function elementFinder(Parent, selector) {
|
|
56
|
+
return new Promise(function (resolve) {
|
|
57
|
+
var observer = new MutationObserver(function (mutations) {
|
|
58
|
+
var element = Parent.querySelector(selector);
|
|
59
|
+
if (element) {
|
|
60
|
+
observer.disconnect();
|
|
61
|
+
resolve(element);
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
observer.observe(Parent, {
|
|
65
|
+
childList: true,
|
|
66
|
+
subtree: true
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
exports.elementFinder = elementFinder;
|
package/lib/Provider/Config.js
CHANGED
|
@@ -9,6 +9,13 @@ var config = {
|
|
|
9
9
|
freezeLayer: {
|
|
10
10
|
enable: function enable() {},
|
|
11
11
|
disable: function disable() {}
|
|
12
|
+
},
|
|
13
|
+
draggerBoundary: document.body,
|
|
14
|
+
boundaryLimit: {
|
|
15
|
+
top: 0,
|
|
16
|
+
left: 0,
|
|
17
|
+
right: 0,
|
|
18
|
+
bottom: 0
|
|
12
19
|
}
|
|
13
20
|
};
|
|
14
21
|
function getDotLibraryConfig(key) {
|
|
@@ -678,7 +678,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
|
|
|
678
678
|
},
|
|
679
679
|
palette: palette,
|
|
680
680
|
isResponsivePadding: true
|
|
681
|
-
}, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
681
|
+
}, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
682
682
|
className: _ToggleDropDownModule["default"].search
|
|
683
683
|
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
|
|
684
684
|
placeHolder: placeHolderText,
|
|
@@ -718,7 +718,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
|
|
|
718
718
|
onScroll: _this6.handleScroll,
|
|
719
719
|
role: isSearch ? 'listbox' : undefined,
|
|
720
720
|
"aria-labelledby": isSearch ? ariaTitleId : undefined
|
|
721
|
-
}, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, options.map(function (group) {
|
|
721
|
+
}, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (group) {
|
|
722
722
|
var groupName = group[groupNameKey];
|
|
723
723
|
var groupOptions = group[groupOptionsKey];
|
|
724
724
|
var needDivider = group.needDivider;
|
|
@@ -798,7 +798,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
|
|
|
798
798
|
}), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
799
799
|
isCover: false,
|
|
800
800
|
align: "both"
|
|
801
|
-
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, options.map(function (item, i) {
|
|
801
|
+
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
|
|
802
802
|
var iconName = item.iconName,
|
|
803
803
|
iconSize = item.iconSize,
|
|
804
804
|
iconClass = item.iconClass,
|
|
@@ -215,16 +215,17 @@ var TextEditor = /*#__PURE__*/function (_Component) {
|
|
|
215
215
|
if (!global.editor[id]) {
|
|
216
216
|
global.editor[id] = editorObj;
|
|
217
217
|
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
style.type = 'text/css';
|
|
222
|
-
if (style.styleSheet) {
|
|
223
|
-
|
|
224
|
-
} else {
|
|
225
|
-
|
|
226
|
-
}
|
|
227
|
-
head.appendChild(style);
|
|
218
|
+
// const css = 'blockquote {margin:0 0 0 4px; }',
|
|
219
|
+
// head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
|
|
220
|
+
// style = document.createElement('style');
|
|
221
|
+
// style.type = 'text/css';
|
|
222
|
+
// if (style.styleSheet) {
|
|
223
|
+
// style.styleSheet.cssText = css;
|
|
224
|
+
// } else {
|
|
225
|
+
// style.appendChild(editorObj.doc.createTextNode(css));
|
|
226
|
+
// }
|
|
227
|
+
// head.appendChild(style);
|
|
228
|
+
|
|
228
229
|
editorCallback && editorCallback(editorObj);
|
|
229
230
|
var iframe = (0, _selectn["default"])('iframe.contentDocument.body', editorObj) || null;
|
|
230
231
|
var iframeHead = (0, _selectn["default"])('iframe.contentDocument.head', editorObj) || null;
|
|
@@ -38,6 +38,7 @@ var Section = /*#__PURE__*/function (_Component) {
|
|
|
38
38
|
alignBox = _this$props.alignBox,
|
|
39
39
|
className = _this$props.className;
|
|
40
40
|
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
41
|
+
"data-drag-container": "true",
|
|
41
42
|
alignBox: alignBox,
|
|
42
43
|
className: "".concat(_LookupSectionModule["default"].section, " ").concat(className ? className : '')
|
|
43
44
|
}, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
@@ -53,7 +53,8 @@ var AlertHeader = /*#__PURE__*/function (_Component) {
|
|
|
53
53
|
alignBox: "row",
|
|
54
54
|
className: "".concat(_AlertHeaderNewModule["default"].container, " ").concat(headerElement ? _AlertHeaderNewModule["default"].headerLayout : '', " ").concat(_AlertHeaderNewModule["default"][type]),
|
|
55
55
|
isCover: false,
|
|
56
|
-
wrap: "wrap"
|
|
56
|
+
wrap: "wrap",
|
|
57
|
+
"data-drag-hook": "true"
|
|
57
58
|
}, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
58
59
|
className: _AlertHeaderNewModule["default"].iconContainer
|
|
59
60
|
}, /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
|
|
@@ -62,7 +63,6 @@ var AlertHeader = /*#__PURE__*/function (_Component) {
|
|
|
62
63
|
flexible: true
|
|
63
64
|
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
64
65
|
alignBox: "row",
|
|
65
|
-
align: "center",
|
|
66
66
|
wrap: breakChildren ? 'wrap' : null
|
|
67
67
|
}, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
68
68
|
className: _AlertHeaderNewModule["default"].title,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/dot",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.258",
|
|
4
4
|
"main": "lib/index",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
],
|
|
19
19
|
"scripts": {
|
|
20
20
|
"clean": "react-cli clean lib es coverage assets && mkdir assets",
|
|
21
|
-
"dubCheck": "node
|
|
21
|
+
"dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/components/lib node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
|
|
22
22
|
"build": "react-cli build:component:cmjs",
|
|
23
23
|
"buildlocal": " react-cli build:component:cmjs && npm run rtl",
|
|
24
24
|
"build:es": "react-cli build:library:es",
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {},
|
|
43
43
|
"devDependencies": {
|
|
44
|
+
"@zohodesk-private/node-plugins": "^1.0.0",
|
|
44
45
|
"velocity-react": "1.4.3",
|
|
45
46
|
"@zohodesk/variables": "1.0.0-beta.31",
|
|
46
47
|
"@zohodesk/i18n": "1.0.0-beta.7",
|
package/dubFinder.js
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
let fs = require('fs');
|
|
2
|
-
let path = require('path');
|
|
3
|
-
let result = {};
|
|
4
|
-
let filesArray = 0;
|
|
5
|
-
function listFiles(newPath) {
|
|
6
|
-
let cwd = newPath ? newPath : process.cwd();
|
|
7
|
-
try {
|
|
8
|
-
let files = fs.readdirSync(cwd, { withFileTypes: true });
|
|
9
|
-
files.map(file => {
|
|
10
|
-
let fileName = file.name,
|
|
11
|
-
filePath = file;
|
|
12
|
-
if (!file.isDirectory) {
|
|
13
|
-
filePath = fs.statSync(path.resolve(cwd, file));
|
|
14
|
-
fileName = file;
|
|
15
|
-
}
|
|
16
|
-
if (filePath.isDirectory()) {
|
|
17
|
-
if (
|
|
18
|
-
fileName != 'node_modules' &&
|
|
19
|
-
fileName != 'deskapp' &&
|
|
20
|
-
fileName != '__testUtils__' &&
|
|
21
|
-
fileName != 'efc-tutorial' &&
|
|
22
|
-
fileName != 'mockapi' &&
|
|
23
|
-
fileName != 'lib' &&
|
|
24
|
-
fileName != 'es'
|
|
25
|
-
) {
|
|
26
|
-
listFiles(path.resolve(cwd, fileName));
|
|
27
|
-
}
|
|
28
|
-
} else {
|
|
29
|
-
if (fileName.substr(fileName.lastIndexOf('.') + 1) == 'css') {
|
|
30
|
-
let lastIndex =
|
|
31
|
-
fileName.indexOf('.module.css') != -1
|
|
32
|
-
? fileName.lastIndexOf('.module.css')
|
|
33
|
-
: fileName.lastIndexOf('.css');
|
|
34
|
-
let keyName = fileName.substring(0, lastIndex).toLowerCase();
|
|
35
|
-
result[keyName] = result[keyName] ? result[keyName] : [];
|
|
36
|
-
result[keyName].push(path.resolve(cwd, fileName));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
} catch (e) {
|
|
41
|
-
console.log('The error exception : ==>', e);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
// function listFiles(newPath) {
|
|
45
|
-
// let cwd = newPath ? newPath : process.cwd();
|
|
46
|
-
// fs.readdir(cwd, { withFileTypes: true }, (err, files) => {
|
|
47
|
-
// files.map(file => {
|
|
48
|
-
|
|
49
|
-
// // if (file.isDirectory()) {
|
|
50
|
-
// // if (
|
|
51
|
-
// // file.name != 'node_modules' &&
|
|
52
|
-
// // file.name != 'deskapp' &&
|
|
53
|
-
// // file.name != '__testUtils__' &&
|
|
54
|
-
// // file.name != 'efc-tutorial' &&
|
|
55
|
-
// // file.name != 'mockapi'
|
|
56
|
-
// // ) {
|
|
57
|
-
// // listFiles(path.resolve(cwd, file.name));
|
|
58
|
-
// // }
|
|
59
|
-
// // } else {
|
|
60
|
-
// // if (file.name.substr(file.name.lastIndexOf('.') + 1) == 'css') {
|
|
61
|
-
// // result[file.name] = result[file.name] ? result[file.name] : [];
|
|
62
|
-
// // result[file.name].push(path.resolve(cwd, file.name));
|
|
63
|
-
// // }
|
|
64
|
-
// // }
|
|
65
|
-
// });
|
|
66
|
-
// });
|
|
67
|
-
// }
|
|
68
|
-
listFiles(process.cwd());
|
|
69
|
-
let [, , ...extraPaths] = process.argv;
|
|
70
|
-
extraPaths.map(pathWay => {
|
|
71
|
-
listFiles(path.resolve(process.cwd(), pathWay));
|
|
72
|
-
});
|
|
73
|
-
console.log(
|
|
74
|
-
'\x1b[33m%s\x1b[0m',
|
|
75
|
-
'!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n '
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
console.log(
|
|
79
|
-
'\x1b[5m\x1b[44m%s\x1b[0m',
|
|
80
|
-
'Finding Duplicate CSS Files Please Wait ...'
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
let print = false;
|
|
84
|
-
Object.keys(result).map(val => {
|
|
85
|
-
if (result[val].length > 1) {
|
|
86
|
-
print = true;
|
|
87
|
-
console.log('\x1b[31m', val, ' ==> ', result[val]);
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
if (!print) {
|
|
91
|
-
console.log('\x1b[31m', 'No Dublicates Found');
|
|
92
|
-
}
|
|
93
|
-
console.log(
|
|
94
|
-
'\x1b[33m%s\x1b[0m',
|
|
95
|
-
'\n \n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n'
|
|
96
|
-
);
|