@dhis2-ui/layer 8.2.0 → 8.2.1
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/build/cjs/features/click_behavior/index.js +2 -1
- package/build/cjs/layer-context.js +1 -1
- package/build/cjs/layer.js +25 -22
- package/build/cjs/layer.stories.e2e.js +1 -1
- package/build/cjs/layer.stories.js +3 -14
- package/build/es/features/click_behavior/index.js +2 -1
- package/build/es/layer.js +25 -22
- package/build/es/layer.stories.js +2 -13
- package/package.json +3 -3
|
@@ -15,7 +15,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
|
|
|
15
15
|
cy.get('[data-test="dhis2-uicore-layer"]').click();
|
|
16
16
|
});
|
|
17
17
|
(0, _steps.When)('the user clicks on the button coordinates', () => {
|
|
18
|
-
cy.getPositionsBySelectors('button').then(
|
|
18
|
+
cy.getPositionsBySelectors('button').then(_ref => {
|
|
19
|
+
let [rect] = _ref;
|
|
19
20
|
// Get button center coordinates
|
|
20
21
|
const buttonCenterX = rect.left + rect.width / 2;
|
|
21
22
|
const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
|
package/build/cjs/layer.js
CHANGED
|
@@ -24,29 +24,32 @@ const createClickHandler = onClick => event => {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
const Layer =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}) => /*#__PURE__*/_react.default.createElement(_portal.Portal, {
|
|
37
|
-
disable: disablePortal
|
|
38
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
"data-test": dataTest,
|
|
40
|
-
onClick: createClickHandler(onClick),
|
|
41
|
-
className: "jsx-2944291715 " + _style.default.dynamic([["2635812695", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, {
|
|
27
|
+
const Layer = _ref => {
|
|
28
|
+
let {
|
|
29
|
+
children,
|
|
30
|
+
className,
|
|
31
|
+
dataTest,
|
|
32
|
+
disablePortal,
|
|
33
|
+
level,
|
|
34
|
+
onClick,
|
|
35
|
+
position,
|
|
42
36
|
translucent
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
37
|
+
} = _ref;
|
|
38
|
+
return /*#__PURE__*/_react.default.createElement(_portal.Portal, {
|
|
39
|
+
disable: disablePortal
|
|
40
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
|
+
"data-test": dataTest,
|
|
42
|
+
onClick: createClickHandler(onClick),
|
|
43
|
+
className: "jsx-2944291715 " + _style.default.dynamic([["2635812695", [level]]]) + " " + ((0, _classnames.default)('layer', className, position, {
|
|
44
|
+
translucent
|
|
45
|
+
}) || "")
|
|
46
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
47
|
+
id: "2635812695",
|
|
48
|
+
dynamic: [level]
|
|
49
|
+
}, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
50
|
+
id: "2944291715"
|
|
51
|
+
}, ["div.jsx-2944291715{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-2944291715{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-2944291715{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-2944291715{background-color:rgba(33,43,54,0.4);}"])));
|
|
52
|
+
};
|
|
50
53
|
|
|
51
54
|
exports.Layer = Layer;
|
|
52
55
|
Layer.defaultProps = {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithClickHandler = exports.NestedLowerLevels = exports.NestedHigherLevels = exports.NestedHigherLevelEndsOnTop = exports.LevelsAreRespectedWhenNesting = exports.InequalSiblings = exports.EqualSiblings = exports.Default = exports.Blocking = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithClickHandler = exports.WithCenteredContentCircularLoader = exports.Translucent = exports.Default = void 0;
|
|
7
7
|
|
|
8
8
|
var _center = require("@dhis2-ui/center");
|
|
9
9
|
|
|
@@ -15,20 +15,9 @@ var _layer = require("./layer.js");
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const description =
|
|
19
|
-
Layers are used for creating different levels of stacking of interface elements.
|
|
20
|
-
See more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).
|
|
21
|
-
|
|
22
|
-
Layers are used in Modals, Popovers, and Alerts.
|
|
23
|
-
|
|
24
|
-
\`\`\`js
|
|
25
|
-
import { Layer } from '@dhis2/ui'
|
|
26
|
-
\`\`\`
|
|
27
|
-
|
|
28
|
-
_**Note:** These demos may take some time to load._
|
|
29
|
-
`;
|
|
18
|
+
const description = "\nLayers are used for creating different levels of stacking of interface elements.\nSee more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).\n\nLayers are used in Modals, Popovers, and Alerts.\n\n```js\nimport { Layer } from '@dhis2/ui'\n```\n\n_**Note:** These demos may take some time to load._\n";
|
|
30
19
|
var _default = {
|
|
31
|
-
title: '
|
|
20
|
+
title: 'Layer',
|
|
32
21
|
component: _layer.Layer,
|
|
33
22
|
|
|
34
23
|
/**
|
|
@@ -12,7 +12,8 @@ When('the user clicks on the layer', () => {
|
|
|
12
12
|
cy.get('[data-test="dhis2-uicore-layer"]').click();
|
|
13
13
|
});
|
|
14
14
|
When('the user clicks on the button coordinates', () => {
|
|
15
|
-
cy.getPositionsBySelectors('button').then(
|
|
15
|
+
cy.getPositionsBySelectors('button').then(_ref => {
|
|
16
|
+
let [rect] = _ref;
|
|
16
17
|
// Get button center coordinates
|
|
17
18
|
const buttonCenterX = rect.left + rect.width / 2;
|
|
18
19
|
const buttonCenterY = rect.top + rect.height / 2; // click body on the button center
|
package/build/es/layer.js
CHANGED
|
@@ -11,29 +11,32 @@ const createClickHandler = onClick => event => {
|
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
const Layer =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}) => /*#__PURE__*/React.createElement(Portal, {
|
|
24
|
-
disable: disablePortal
|
|
25
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
26
|
-
"data-test": dataTest,
|
|
27
|
-
onClick: createClickHandler(onClick),
|
|
28
|
-
className: "jsx-2944291715 " + _JSXStyle.dynamic([["2635812695", [level]]]) + " " + (cx('layer', className, position, {
|
|
14
|
+
const Layer = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
children,
|
|
17
|
+
className,
|
|
18
|
+
dataTest,
|
|
19
|
+
disablePortal,
|
|
20
|
+
level,
|
|
21
|
+
onClick,
|
|
22
|
+
position,
|
|
29
23
|
translucent
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/React.createElement(Portal, {
|
|
26
|
+
disable: disablePortal
|
|
27
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
"data-test": dataTest,
|
|
29
|
+
onClick: createClickHandler(onClick),
|
|
30
|
+
className: "jsx-2944291715 " + _JSXStyle.dynamic([["2635812695", [level]]]) + " " + (cx('layer', className, position, {
|
|
31
|
+
translucent
|
|
32
|
+
}) || "")
|
|
33
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
34
|
+
id: "2635812695",
|
|
35
|
+
dynamic: [level]
|
|
36
|
+
}, ["div.__jsx-style-dynamic-selector{z-index:".concat(level, ";}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
37
|
+
id: "2944291715"
|
|
38
|
+
}, ["div.jsx-2944291715{top:0;left:0;min-height:100vh;min-width:100vw;}", "div.fixed.jsx-2944291715{position:fixed;height:100vh;width:100vw;}", "div.absolute.jsx-2944291715{position:absolute;height:100%;width:100%;}", "div.translucent.jsx-2944291715{background-color:rgba(33,43,54,0.4);}"])));
|
|
39
|
+
};
|
|
37
40
|
|
|
38
41
|
Layer.defaultProps = {
|
|
39
42
|
position: 'fixed',
|
|
@@ -2,20 +2,9 @@ import { Center } from '@dhis2-ui/center';
|
|
|
2
2
|
import { CircularLoader } from '@dhis2-ui/loader';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Layer } from './layer.js';
|
|
5
|
-
const description =
|
|
6
|
-
Layers are used for creating different levels of stacking of interface elements.
|
|
7
|
-
See more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).
|
|
8
|
-
|
|
9
|
-
Layers are used in Modals, Popovers, and Alerts.
|
|
10
|
-
|
|
11
|
-
\`\`\`js
|
|
12
|
-
import { Layer } from '@dhis2/ui'
|
|
13
|
-
\`\`\`
|
|
14
|
-
|
|
15
|
-
_**Note:** These demos may take some time to load._
|
|
16
|
-
`;
|
|
5
|
+
const description = "\nLayers are used for creating different levels of stacking of interface elements.\nSee more about stacking guidelines at the [design system](https://github.com/dhis2/design-system/blob/master/principles/layout.md#stacking).\n\nLayers are used in Modals, Popovers, and Alerts.\n\n```js\nimport { Layer } from '@dhis2/ui'\n```\n\n_**Note:** These demos may take some time to load._\n";
|
|
17
6
|
export default {
|
|
18
|
-
title: '
|
|
7
|
+
title: 'Layer',
|
|
19
8
|
component: Layer,
|
|
20
9
|
|
|
21
10
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/layer",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI Layer",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/portal": "8.2.
|
|
36
|
-
"@dhis2/ui-constants": "8.2.
|
|
35
|
+
"@dhis2-ui/portal": "8.2.1",
|
|
36
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
37
37
|
"classnames": "^2.3.1",
|
|
38
38
|
"prop-types": "^15.7.2"
|
|
39
39
|
},
|