@dhis2-ui/tab 10.16.3-alpha.1 → 10.16.4
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/tab/tab.js +10 -12
- package/build/cjs/tab-bar/animated-side-scroll.js +13 -16
- package/build/cjs/tab-bar/scroll-bar.js +1 -2
- package/build/cjs/tab-bar/scroll-button.js +14 -17
- package/build/cjs/tab-bar/tab-bar.js +7 -8
- package/build/cjs/tab-bar/tab-bar.prod.stories.js +4 -7
- package/build/cjs/tab-bar/tabs.js +6 -8
- package/build/es/tab/tab.js +9 -10
- package/build/es/tab-bar/animated-side-scroll.js +13 -16
- package/build/es/tab-bar/scroll-button.js +14 -17
- package/build/es/tab-bar/tab-bar.js +7 -8
- package/build/es/tab-bar/tab-bar.prod.stories.js +4 -7
- package/build/es/tab-bar/tabs.js +5 -6
- package/package.json +4 -4
package/build/cjs/tab/tab.js
CHANGED
|
@@ -10,19 +10,17 @@ var _tooltip = require("@dhis2-ui/tooltip");
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
function
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
-
const Tab = exports.Tab = /*#__PURE__*/_react.default.forwardRef((
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
15
|
+
const Tab = exports.Tab = /*#__PURE__*/_react.default.forwardRef(({
|
|
16
|
+
icon,
|
|
17
|
+
onClick,
|
|
18
|
+
selected,
|
|
19
|
+
disabled,
|
|
20
|
+
children,
|
|
21
|
+
className,
|
|
22
|
+
dataTest = 'dhis2-uicore-tab'
|
|
23
|
+
}, ref) => {
|
|
26
24
|
let tabRef = (0, _react.useRef)(null);
|
|
27
25
|
if (ref) {
|
|
28
26
|
tabRef = ref;
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.animatedSideScroll = animatedSideScroll;
|
|
7
7
|
const DURATION = 250;
|
|
8
8
|
const SCROLL_STEP = 0.5;
|
|
9
|
-
function animatedSideScroll(scrollBox, callback) {
|
|
10
|
-
let goBackwards = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
9
|
+
function animatedSideScroll(scrollBox, callback, goBackwards = false) {
|
|
11
10
|
const startValue = scrollBox.scrollLeft;
|
|
12
11
|
const endValue = getEndValue(scrollBox, startValue, goBackwards);
|
|
13
12
|
const change = endValue - startValue;
|
|
@@ -25,14 +24,13 @@ function getEndValue(scrollBox, startValue, goBackwards) {
|
|
|
25
24
|
const inverter = goBackwards ? -1 : 1;
|
|
26
25
|
return Math.floor(startValue + scrollDistance * inverter);
|
|
27
26
|
}
|
|
28
|
-
function createFrameStepper(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
} = _ref;
|
|
27
|
+
function createFrameStepper({
|
|
28
|
+
scrollBox,
|
|
29
|
+
callback,
|
|
30
|
+
startValue,
|
|
31
|
+
endValue,
|
|
32
|
+
change
|
|
33
|
+
}) {
|
|
36
34
|
let startTimestamp, elapsedTime, scrollValue;
|
|
37
35
|
return function step(timestamp) {
|
|
38
36
|
if (!startTimestamp) {
|
|
@@ -56,11 +54,10 @@ function createFrameStepper(_ref) {
|
|
|
56
54
|
}
|
|
57
55
|
};
|
|
58
56
|
}
|
|
59
|
-
function easeInOutQuad(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
} = _ref2;
|
|
57
|
+
function easeInOutQuad({
|
|
58
|
+
currentTime,
|
|
59
|
+
startValue,
|
|
60
|
+
change
|
|
61
|
+
}) {
|
|
65
62
|
return (currentTime /= DURATION / 2) < 1 ? change / 2 * currentTime * currentTime + startValue : -change / 2 * (--currentTime * (currentTime - 2) - 1) + startValue;
|
|
66
63
|
}
|
|
@@ -12,8 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var _animatedSideScroll = require("./animated-side-scroll.js");
|
|
13
13
|
var _detectHorizontalScrollbarHeight = require("./detect-horizontal-scrollbar-height.js");
|
|
14
14
|
var _scrollButton = require("./scroll-button.js");
|
|
15
|
-
function
|
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
17
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
19
18
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
@@ -10,24 +10,21 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
const ScrollButton =
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const ScrollButton = ({
|
|
14
|
+
children,
|
|
15
|
+
disabled,
|
|
16
|
+
hidden,
|
|
17
|
+
onClick
|
|
18
|
+
}) => /*#__PURE__*/_react.default.createElement("button", {
|
|
19
|
+
onClick: disabled ? undefined : onClick,
|
|
20
|
+
className: _style.default.dynamic([["2701682090", [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)('scroll-button', {
|
|
16
21
|
disabled,
|
|
17
|
-
hidden
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
disabled,
|
|
24
|
-
hidden
|
|
25
|
-
}) || "")
|
|
26
|
-
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
27
|
-
id: "2701682090",
|
|
28
|
-
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]
|
|
29
|
-
}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${_uiConstants.colors.white};border:none;border-bottom:1px solid ${_uiConstants.colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${_uiConstants.colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${_uiConstants.colors.grey500};}`]));
|
|
30
|
-
};
|
|
22
|
+
hidden
|
|
23
|
+
}) || "")
|
|
24
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
25
|
+
id: "2701682090",
|
|
26
|
+
dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]
|
|
27
|
+
}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${_uiConstants.colors.white};border:none;border-bottom:1px solid ${_uiConstants.colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${_uiConstants.colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${_uiConstants.colors.grey500};}`]));
|
|
31
28
|
exports.ScrollButton = ScrollButton;
|
|
32
29
|
ScrollButton.displayName = 'ScrollButton';
|
|
33
30
|
ScrollButton.propTypes = {
|
|
@@ -9,14 +9,13 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _scrollBar = require("./scroll-bar.js");
|
|
10
10
|
var _tabs = require("./tabs.js");
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
const TabBar =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
12
|
+
const TabBar = ({
|
|
13
|
+
fixed,
|
|
14
|
+
children,
|
|
15
|
+
className,
|
|
16
|
+
scrollable,
|
|
17
|
+
dataTest = 'dhis2-uicore-tabbar'
|
|
18
|
+
}) => {
|
|
20
19
|
if (scrollable) {
|
|
21
20
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
22
21
|
className: className,
|
|
@@ -10,10 +10,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _index = require("../tab/index.js");
|
|
11
11
|
var _index2 = require("./index.js");
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
-
function AttachFile(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
13
|
+
function AttachFile({
|
|
14
|
+
className
|
|
15
|
+
}) {
|
|
17
16
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
18
17
|
xmlns: "http://www.w3.org/2000/svg",
|
|
19
18
|
viewBox: "0 0 48 48",
|
|
@@ -60,9 +59,7 @@ window.onClick = (payload, event) => {
|
|
|
60
59
|
console.log('onClick payload', payload);
|
|
61
60
|
console.log('onClick event', event);
|
|
62
61
|
};
|
|
63
|
-
const onClick =
|
|
64
|
-
return window.onClick(...arguments);
|
|
65
|
-
};
|
|
62
|
+
const onClick = (...args) => window.onClick(...args);
|
|
66
63
|
var _default = exports.default = {
|
|
67
64
|
title: 'Tab Bar',
|
|
68
65
|
component: _index2.TabBar,
|
|
@@ -9,15 +9,13 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
function
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
const Tabs =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
14
|
+
const Tabs = ({
|
|
15
|
+
children,
|
|
16
|
+
fixed,
|
|
17
|
+
dataTest
|
|
18
|
+
}) => {
|
|
21
19
|
const tabContainer = (0, _react.useRef)(null);
|
|
22
20
|
const childrenRefs = (0, _react.useMemo)(() => _react.default.Children.map(children, () => /*#__PURE__*/_react.default.createRef()), [children]);
|
|
23
21
|
const handleKeyDown = event => {
|
package/build/es/tab/tab.js
CHANGED
|
@@ -4,16 +4,15 @@ import { Tooltip } from '@dhis2-ui/tooltip';
|
|
|
4
4
|
import cx from 'classnames';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React, { useState, useEffect, useRef } from 'react';
|
|
7
|
-
export const Tab = /*#__PURE__*/React.forwardRef((
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
7
|
+
export const Tab = /*#__PURE__*/React.forwardRef(({
|
|
8
|
+
icon,
|
|
9
|
+
onClick,
|
|
10
|
+
selected,
|
|
11
|
+
disabled,
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
dataTest = 'dhis2-uicore-tab'
|
|
15
|
+
}, ref) => {
|
|
17
16
|
let tabRef = useRef(null);
|
|
18
17
|
if (ref) {
|
|
19
18
|
tabRef = ref;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
const DURATION = 250;
|
|
2
2
|
const SCROLL_STEP = 0.5;
|
|
3
|
-
export function animatedSideScroll(scrollBox, callback) {
|
|
4
|
-
let goBackwards = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
3
|
+
export function animatedSideScroll(scrollBox, callback, goBackwards = false) {
|
|
5
4
|
const startValue = scrollBox.scrollLeft;
|
|
6
5
|
const endValue = getEndValue(scrollBox, startValue, goBackwards);
|
|
7
6
|
const change = endValue - startValue;
|
|
@@ -19,14 +18,13 @@ function getEndValue(scrollBox, startValue, goBackwards) {
|
|
|
19
18
|
const inverter = goBackwards ? -1 : 1;
|
|
20
19
|
return Math.floor(startValue + scrollDistance * inverter);
|
|
21
20
|
}
|
|
22
|
-
function createFrameStepper(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} = _ref;
|
|
21
|
+
function createFrameStepper({
|
|
22
|
+
scrollBox,
|
|
23
|
+
callback,
|
|
24
|
+
startValue,
|
|
25
|
+
endValue,
|
|
26
|
+
change
|
|
27
|
+
}) {
|
|
30
28
|
let startTimestamp, elapsedTime, scrollValue;
|
|
31
29
|
return function step(timestamp) {
|
|
32
30
|
if (!startTimestamp) {
|
|
@@ -50,11 +48,10 @@ function createFrameStepper(_ref) {
|
|
|
50
48
|
}
|
|
51
49
|
};
|
|
52
50
|
}
|
|
53
|
-
function easeInOutQuad(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
} = _ref2;
|
|
51
|
+
function easeInOutQuad({
|
|
52
|
+
currentTime,
|
|
53
|
+
startValue,
|
|
54
|
+
change
|
|
55
|
+
}) {
|
|
59
56
|
return (currentTime /= DURATION / 2) < 1 ? change / 2 * currentTime * currentTime + startValue : -change / 2 * (--currentTime * (currentTime - 2) - 1) + startValue;
|
|
60
57
|
}
|
|
@@ -3,24 +3,21 @@ import { colors } from '@dhis2/ui-constants';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
6
|
-
export const ScrollButton =
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
export const ScrollButton = ({
|
|
7
|
+
children,
|
|
8
|
+
disabled,
|
|
9
|
+
hidden,
|
|
10
|
+
onClick
|
|
11
|
+
}) => /*#__PURE__*/React.createElement("button", {
|
|
12
|
+
onClick: disabled ? undefined : onClick,
|
|
13
|
+
className: _JSXStyle.dynamic([["2701682090", [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]]]) + " " + (cx('scroll-button', {
|
|
9
14
|
disabled,
|
|
10
|
-
hidden
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
disabled,
|
|
17
|
-
hidden
|
|
18
|
-
}) || "")
|
|
19
|
-
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
20
|
-
id: "2701682090",
|
|
21
|
-
dynamic: [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]
|
|
22
|
-
}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${colors.white};border:none;border-bottom:1px solid ${colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${colors.grey500};}`]));
|
|
23
|
-
};
|
|
15
|
+
hidden
|
|
16
|
+
}) || "")
|
|
17
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
18
|
+
id: "2701682090",
|
|
19
|
+
dynamic: [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]
|
|
20
|
+
}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${colors.white};border:none;border-bottom:1px solid ${colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${colors.grey500};}`]));
|
|
24
21
|
ScrollButton.displayName = 'ScrollButton';
|
|
25
22
|
ScrollButton.propTypes = {
|
|
26
23
|
children: PropTypes.any.isRequired,
|
|
@@ -2,14 +2,13 @@ import PropTypes from 'prop-types';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ScrollBar } from './scroll-bar.js';
|
|
4
4
|
import { Tabs } from './tabs.js';
|
|
5
|
-
const TabBar =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
} = _ref;
|
|
5
|
+
const TabBar = ({
|
|
6
|
+
fixed,
|
|
7
|
+
children,
|
|
8
|
+
className,
|
|
9
|
+
scrollable,
|
|
10
|
+
dataTest = 'dhis2-uicore-tabbar'
|
|
11
|
+
}) => {
|
|
13
12
|
if (scrollable) {
|
|
14
13
|
return /*#__PURE__*/React.createElement("div", {
|
|
15
14
|
className: className,
|
|
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Tab } from '../tab/index.js';
|
|
5
5
|
import { TabBar } from './index.js';
|
|
6
|
-
function AttachFile(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} = _ref;
|
|
6
|
+
function AttachFile({
|
|
7
|
+
className
|
|
8
|
+
}) {
|
|
10
9
|
return /*#__PURE__*/React.createElement("svg", {
|
|
11
10
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12
11
|
viewBox: "0 0 48 48",
|
|
@@ -53,9 +52,7 @@ window.onClick = (payload, event) => {
|
|
|
53
52
|
console.log('onClick payload', payload);
|
|
54
53
|
console.log('onClick event', event);
|
|
55
54
|
};
|
|
56
|
-
const onClick =
|
|
57
|
-
return window.onClick(...arguments);
|
|
58
|
-
};
|
|
55
|
+
const onClick = (...args) => window.onClick(...args);
|
|
59
56
|
export default {
|
|
60
57
|
title: 'Tab Bar',
|
|
61
58
|
component: TabBar,
|
package/build/es/tab-bar/tabs.js
CHANGED
|
@@ -3,12 +3,11 @@ import { colors } from '@dhis2/ui-constants';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React, { useRef, useMemo } from 'react';
|
|
6
|
-
const Tabs =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
} = _ref;
|
|
6
|
+
const Tabs = ({
|
|
7
|
+
children,
|
|
8
|
+
fixed,
|
|
9
|
+
dataTest
|
|
10
|
+
}) => {
|
|
12
11
|
const tabContainer = useRef(null);
|
|
13
12
|
const childrenRefs = useMemo(() => React.Children.map(children, () => /*#__PURE__*/React.createRef()), [children]);
|
|
14
13
|
const handleKeyDown = event => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/tab",
|
|
3
|
-
"version": "10.16.
|
|
3
|
+
"version": "10.16.4",
|
|
4
4
|
"description": "UI Tabs",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"styled-jsx": "^4"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@dhis2-ui/tooltip": "10.16.
|
|
35
|
+
"@dhis2-ui/tooltip": "10.16.4",
|
|
36
36
|
"@dhis2/prop-types": "^3.1.2",
|
|
37
|
-
"@dhis2/ui-constants": "10.16.
|
|
38
|
-
"@dhis2/ui-icons": "10.16.
|
|
37
|
+
"@dhis2/ui-constants": "10.16.4",
|
|
38
|
+
"@dhis2/ui-icons": "10.16.4",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|