@ntbjs/react-components 2.0.14 → 2.0.15-rc.2
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/data/LiveBadge/LiveBadge.js +67 -0
- package/build/data/LiveBadge/LiveBadge.js.map +1 -0
- package/build/data/Tab/Tab.js +2 -1
- package/build/data/Tab/Tab.js.map +1 -1
- package/build/data/Tabs/Tabs.js +11 -3
- package/build/data/Tabs/Tabs.js.map +1 -1
- package/build/data/index.js +1 -0
- package/build/data/index.js.map +1 -1
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js +1 -0
- package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js.map +1 -1
- package/build/inputs/CompactStarRating/CompactStarRating.js +1 -0
- package/build/inputs/CompactStarRating/CompactStarRating.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js +1 -0
- package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js +1 -0
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
- package/build/inputs/TextArea/TextArea.js +1 -0
- package/build/inputs/TextArea/TextArea.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +6 -3
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +8 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js +5 -2
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js +1 -0
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/asset.propType.js +2 -0
- package/build/widgets/AssetGallery/asset.propType.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import Badge from '../Badge/Badge.js';
|
|
6
|
+
|
|
7
|
+
const Dot = styled.span`
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
line-height: 0;
|
|
10
|
+
|
|
11
|
+
.live-dot__ring {
|
|
12
|
+
fill: #7f1b1b;
|
|
13
|
+
}
|
|
14
|
+
.live-dot__core {
|
|
15
|
+
fill: #d83000;
|
|
16
|
+
}
|
|
17
|
+
`;
|
|
18
|
+
const LiveDot = () => React__default.createElement(Dot, null, React__default.createElement("svg", {
|
|
19
|
+
width: "12",
|
|
20
|
+
height: "12",
|
|
21
|
+
viewBox: "0 0 12 12",
|
|
22
|
+
fill: "none",
|
|
23
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
24
|
+
}, React__default.createElement("circle", {
|
|
25
|
+
className: "live-dot__ring",
|
|
26
|
+
cx: "6",
|
|
27
|
+
cy: "6",
|
|
28
|
+
r: "6"
|
|
29
|
+
}), React__default.createElement("circle", {
|
|
30
|
+
className: "live-dot__core",
|
|
31
|
+
cx: "6",
|
|
32
|
+
cy: "6",
|
|
33
|
+
r: "4"
|
|
34
|
+
})));
|
|
35
|
+
const LiveBadge = React__default.forwardRef(function LiveBadge({
|
|
36
|
+
label = 'LIVE',
|
|
37
|
+
fontSize = 12,
|
|
38
|
+
fontWeight = 500,
|
|
39
|
+
height = 20,
|
|
40
|
+
horizontalPadding = 8,
|
|
41
|
+
verticalPadding = 2,
|
|
42
|
+
...rest
|
|
43
|
+
}, forwardedRef) {
|
|
44
|
+
return React__default.createElement(Badge, _extends({
|
|
45
|
+
ref: forwardedRef,
|
|
46
|
+
badgeIcon: React__default.createElement(LiveDot, null),
|
|
47
|
+
badgeContent: label,
|
|
48
|
+
backgroundColors: ['#000000', '#000000'],
|
|
49
|
+
colors: ['#ffffff', '#ffffff'],
|
|
50
|
+
fontSize: fontSize,
|
|
51
|
+
fontWeight: fontWeight,
|
|
52
|
+
height: height,
|
|
53
|
+
horizontalPadding: horizontalPadding,
|
|
54
|
+
verticalPadding: verticalPadding
|
|
55
|
+
}, rest));
|
|
56
|
+
});
|
|
57
|
+
LiveBadge.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
58
|
+
label: PropTypes.node,
|
|
59
|
+
fontSize: PropTypes.number,
|
|
60
|
+
fontWeight: PropTypes.number,
|
|
61
|
+
height: PropTypes.number,
|
|
62
|
+
horizontalPadding: PropTypes.number,
|
|
63
|
+
verticalPadding: PropTypes.number
|
|
64
|
+
} : {};
|
|
65
|
+
|
|
66
|
+
export { LiveBadge as default };
|
|
67
|
+
//# sourceMappingURL=LiveBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LiveBadge.js","sources":["../../../src/components/data/LiveBadge/LiveBadge.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Badge from '../Badge/Badge';\n\nconst Dot = styled.span`\n display: inline-flex;\n line-height: 0;\n\n .live-dot__ring {\n fill: #7f1b1b;\n }\n .live-dot__core {\n fill: #d83000;\n }\n`;\n\nconst LiveDot = () => (\n <Dot>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"live-dot__ring\" cx=\"6\" cy=\"6\" r=\"6\" />\n <circle className=\"live-dot__core\" cx=\"6\" cy=\"6\" r=\"4\" />\n </svg>\n </Dot>\n);\n\n/**\n * A red \"live\" pill (dot + label) marking an asset that is currently a live\n * video recording. Thin wrapper around Badge with the fixed live styling.\n *\n * ### Import\n *\n * ```js\n * import { LiveBadge } from '@ntbjs/react-components/data';\n * ```\n */\nconst LiveBadge = React.forwardRef(function LiveBadge(\n {\n label = 'LIVE',\n fontSize = 12,\n fontWeight = 500,\n height = 20,\n horizontalPadding = 8,\n verticalPadding = 2,\n ...rest\n },\n forwardedRef\n) {\n return (\n <Badge\n ref={forwardedRef}\n badgeIcon={<LiveDot />}\n badgeContent={label}\n backgroundColors={['#000000', '#000000']}\n colors={['#ffffff', '#ffffff']}\n fontSize={fontSize}\n fontWeight={fontWeight}\n height={height}\n horizontalPadding={horizontalPadding}\n verticalPadding={verticalPadding}\n {...rest}\n />\n );\n});\n\nLiveBadge.propTypes = {\n /** Badge label. Defaults to \"LIVE\"; pass a localized string to override. */\n label: PropTypes.node,\n /** Font size in pixels. */\n fontSize: PropTypes.number,\n /** Font weight. */\n fontWeight: PropTypes.number,\n /** Badge height in pixels. */\n height: PropTypes.number,\n /** Left and right padding in pixels. */\n horizontalPadding: PropTypes.number,\n /** Top and bottom padding in pixels. */\n verticalPadding: PropTypes.number\n};\n\nexport default LiveBadge;\n"],"names":["Dot","styled","span","LiveDot","React","createElement","width","height","viewBox","fill","xmlns","className","cx","cy","r","LiveBadge","forwardRef","label","fontSize","fontWeight","horizontalPadding","verticalPadding","rest","forwardedRef","Badge","_extends","ref","badgeIcon","badgeContent","backgroundColors","colors","propTypes","process","env","NODE_ENV","PropTypes","node","number"],"mappings":";;;;;;AAKA,MAAMA,GAAG,GAAGC,MAAM,CAACC,IAAI,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAED,MAAMC,OAAO,GAAGA,MACdC,cAAA,CAAAC,aAAA,CAACL,GAAG,EAAA,IAAA,EACFI,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,KAAK,EAAC,IAAI;AAACC,EAAAA,MAAM,EAAC,IAAI;AAACC,EAAAA,OAAO,EAAC,WAAW;AAACC,EAAAA,IAAI,EAAC,MAAM;AAACC,EAAAA,KAAK,EAAC,4BAAA;AAA4B,CAC5FN,EAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQM,EAAAA,SAAS,EAAC,gBAAgB;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,CAAC,EAAC,GAAA;AAAG,CAAE,CAAC,EACzDV,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQM,EAAAA,SAAS,EAAC,gBAAgB;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,EAAE,EAAC,GAAG;AAACC,EAAAA,CAAC,EAAC,GAAA;AAAG,CAAE,CACrD,CACF,CACN,CAAA;AAYKC,MAAAA,SAAS,GAAGX,cAAK,CAACY,UAAU,CAAC,SAASD,SAASA,CACnD;AACEE,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,UAAU,GAAG,GAAG;AAChBZ,EAAAA,MAAM,GAAG,EAAE;AACXa,EAAAA,iBAAiB,GAAG,CAAC;AACrBC,EAAAA,eAAe,GAAG,CAAC;EACnB,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEnB,cAAA,CAAAC,aAAA,CAACmB,KAAK,EAAAC,QAAA,CAAA;AACJC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,SAAS,EAAEvB,cAAA,CAAAC,aAAA,CAACF,OAAO,MAAE,CAAE;AACvByB,IAAAA,YAAY,EAAEX,KAAM;AACpBY,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;AACzCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;AAC/BZ,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBZ,IAAAA,MAAM,EAAEA,MAAO;AACfa,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,IAAAA,eAAe,EAAEA,eAAAA;GACbC,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC,EAAC;AAEFP,SAAS,CAACgB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAEpBjB,KAAK,EAAEkB,SAAS,CAACC,IAAI;EAErBlB,QAAQ,EAAEiB,SAAS,CAACE,MAAM;EAE1BlB,UAAU,EAAEgB,SAAS,CAACE,MAAM;EAE5B9B,MAAM,EAAE4B,SAAS,CAACE,MAAM;EAExBjB,iBAAiB,EAAEe,SAAS,CAACE,MAAM;EAEnChB,eAAe,EAAEc,SAAS,CAACE,MAAAA;AAC7B,CAAC,GAAA,EAAA;;;;"}
|
package/build/data/Tab/Tab.js
CHANGED
|
@@ -15,7 +15,8 @@ const Tab = React__default.forwardRef(function Tab({
|
|
|
15
15
|
});
|
|
16
16
|
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
17
17
|
children: PropTypes.any,
|
|
18
|
-
hidden: PropTypes.bool
|
|
18
|
+
hidden: PropTypes.bool,
|
|
19
|
+
id: PropTypes.string
|
|
19
20
|
} : {};
|
|
20
21
|
Tab.defaultProps = {
|
|
21
22
|
hidden: false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tab.styled';\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef(function Tab({ children, hidden, ...props }, forwardedRef) {\n if (hidden) return null;\n\n return (\n <S.Tab ref={forwardedRef} {...props}>\n {children}\n </S.Tab>\n );\n});\n\nTab.propTypes = {\n children: PropTypes.any,\n hidden: PropTypes.bool\n};\n\nTab.defaultProps = {\n hidden: false\n};\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","any","bool","defaultProps"],"mappings":";;;;;AAOMA,MAAAA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EACtF,IAAIF,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEH,cAAA,CAAAM,aAAA,CAACC,KAAK,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAChCF,EAAAA,QACI,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFH,GAAG,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACdX,QAAQ,EAAEY,SAAS,CAACC,GAAG;EACvBZ,MAAM,EAAEW,SAAS,CAACE,
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tab.styled';\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef(function Tab({ children, hidden, ...props }, forwardedRef) {\n if (hidden) return null;\n\n return (\n <S.Tab ref={forwardedRef} {...props}>\n {children}\n </S.Tab>\n );\n});\n\nTab.propTypes = {\n children: PropTypes.any,\n hidden: PropTypes.bool,\n /**\n * Stable identifier used by `Tabs` `defaultActiveId` to select this tab.\n */\n id: PropTypes.string\n};\n\nTab.defaultProps = {\n hidden: false\n};\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","any","bool","id","string","defaultProps"],"mappings":";;;;;AAOMA,MAAAA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EACtF,IAAIF,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEH,cAAA,CAAAM,aAAA,CAACC,KAAK,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAChCF,EAAAA,QACI,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFH,GAAG,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACdX,QAAQ,EAAEY,SAAS,CAACC,GAAG;EACvBZ,MAAM,EAAEW,SAAS,CAACE,IAAI;EAItBC,EAAE,EAAEH,SAAS,CAACI,MAAAA;AAChB,CAAC,GAAA,EAAA,CAAA;AAEDnB,GAAG,CAACoB,YAAY,GAAG;AACjBhB,EAAAA,MAAM,EAAE,KAAA;AACV,CAAC;;;;"}
|
package/build/data/Tabs/Tabs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import {
|
|
2
|
+
import { isNil, isEmpty } from 'lodash';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import React__default, { useState, useRef, useMemo, Children, Fragment } from 'react';
|
|
4
|
+
import React__default, { useState, useRef, useMemo, useEffect, Children, Fragment } from 'react';
|
|
5
5
|
import Tab from '../Tab/Tab.js';
|
|
6
6
|
import { Tabs as Tabs$1, TabHeaders, TabHeader, TabHeaderBorder, TabContent } from './Tabs.styled.js';
|
|
7
7
|
|
|
@@ -10,6 +10,7 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
10
10
|
defaultMinHeight = '',
|
|
11
11
|
customPadding = 0,
|
|
12
12
|
onTabClick = () => {},
|
|
13
|
+
defaultActiveId,
|
|
13
14
|
...props
|
|
14
15
|
}, forwardedRef) {
|
|
15
16
|
const [activeTab, setActiveTab] = useState(0);
|
|
@@ -30,6 +31,7 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
30
31
|
if (child.type === Tab) {
|
|
31
32
|
tabs.push({
|
|
32
33
|
key: index,
|
|
34
|
+
id: child.props?.id,
|
|
33
35
|
trigger: child.props?.trigger,
|
|
34
36
|
content: child.props?.children
|
|
35
37
|
});
|
|
@@ -55,6 +57,11 @@ const Tabs = React__default.forwardRef(function Tabs({
|
|
|
55
57
|
});
|
|
56
58
|
}
|
|
57
59
|
};
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (isNil(defaultActiveId)) return;
|
|
62
|
+
const matchedTab = tabs.find(tab => tab.id === defaultActiveId);
|
|
63
|
+
if (matchedTab) handleTabClick(matchedTab);
|
|
64
|
+
}, []);
|
|
58
65
|
return React__default.createElement(Tabs$1, _extends({
|
|
59
66
|
ref: forwardedRef
|
|
60
67
|
}, props, {
|
|
@@ -84,7 +91,8 @@ Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
84
91
|
backgroundColor: PropTypes.string,
|
|
85
92
|
defaultMinHeight: PropTypes.string,
|
|
86
93
|
customPadding: PropTypes.string,
|
|
87
|
-
onTabClick: PropTypes.func
|
|
94
|
+
onTabClick: PropTypes.func,
|
|
95
|
+
defaultActiveId: PropTypes.string
|
|
88
96
|
} : {};
|
|
89
97
|
|
|
90
98
|
export { Tabs as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.js"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { Children, Fragment, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * </Tabs>\n * ```\n * ## Wrapping\n * Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n * ```\n * <Tab>\n * Tab content\n * </Tab>\n * ```\n * ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n * ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n * ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n * ```\n * <Tabs backgroundColor={'#bfe0d5'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n * ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n * ```\n * <Tabs>\n * <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n * ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs defaultMinHeight={'500px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n * ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs customPadding={'40px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(function Tabs(\n { children, defaultMinHeight = '', customPadding = 0, onTabClick = () => {}, ...props },\n forwardedRef\n) {\n const [activeTab, setActiveTab] = useState(0);\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const tabs = [];\n function extractChildren(children) {\n Children.forEach(children, (child, index) => {\n if (isNil(child)) {\n return null;\n }\n\n if (child.type === Fragment) {\n extractChildren(child.props?.children);\n }\n\n if (child.props?.hidden) {\n return null;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: index,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n extractChildren(children);\n\n if (!tabs.some(tab => tab?.key === activeTab)) {\n setActiveTab(tabs[0]?.key);\n }\n\n return tabs;\n }, [children]);\n\n const handleTabClick = tab => {\n setActiveTab(tab.key);\n let triggerText = '';\n\n if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n triggerText = tab.trigger.props.children;\n }\n if (onTabClick) {\n onTabClick({\n ...tab,\n triggerText: triggerText\n });\n }\n };\n\n return (\n <S.Tabs ref={forwardedRef} {...props} role=\"tablist\">\n <S.TabHeaders custompadding={customPadding}>\n {tabs.map(tab => (\n <S.TabHeader\n key={tab.key}\n hidden={tab.hidden}\n $active={tab.key === activeTab}\n onClick={() => handleTabClick(tab)}\n role=\"tab\"\n >\n {tab.trigger}\n </S.TabHeader>\n ))}\n </S.TabHeaders>\n <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n <S.TabContent>\n {tabs.map(tab => (\n <div\n ref={tab.key === activeTab?.key ? contentRef : null}\n key={tab.key}\n role=\"tabpanel\"\n hidden={tab.key !== activeTab}\n style={{\n minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n }}\n >\n {tab.content}\n </div>\n ))}\n </S.TabContent>\n </S.Tabs>\n );\n});\n\nTabs.propTypes = {\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n /**\n * Whether `Tabs` component has a background color\n */\n backgroundColor: PropTypes.string,\n /**\n * Whether `tabs` will have a predefined min-height.\n */\n defaultMinHeight: PropTypes.string,\n /**\n * Custom padding.\n */\n customPadding: PropTypes.string,\n /**\n * Callback for clicked tab\n */\n onTabClick: PropTypes.func\n};\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","onTabClick","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","trigger","content","some","tab","handleTabClick","triggerText","createElement","S","_extends","ref","role","custompadding","map","$active","onClick","style","minHeight","isEmpty","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","array","object","backgroundColor","string","func"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.js"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { Children, Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * </Tabs>\n * ```\n * ## Wrapping\n * Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n * ```\n * <Tab>\n * Tab content\n * </Tab>\n * ```\n * ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n * ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n * Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n * ```\n * <Tabs>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n * ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n * ```\n * <Tabs backgroundColor={'#bfe0d5'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n * ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n * ```\n * <Tabs>\n * <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n * <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n * <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n * ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs defaultMinHeight={'500px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n * ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n * ```\n * <Tabs customPadding={'40px'}>\n * <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n * <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(function Tabs(\n {\n children,\n defaultMinHeight = '',\n customPadding = 0,\n onTabClick = () => {},\n defaultActiveId,\n ...props\n },\n forwardedRef\n) {\n const [activeTab, setActiveTab] = useState(0);\n const contentRef = useRef(null);\n\n const tabs = useMemo(() => {\n const tabs = [];\n function extractChildren(children) {\n Children.forEach(children, (child, index) => {\n if (isNil(child)) {\n return null;\n }\n\n if (child.type === Fragment) {\n extractChildren(child.props?.children);\n }\n\n if (child.props?.hidden) {\n return null;\n }\n\n if (child.type === Tab) {\n tabs.push({\n key: index,\n id: child.props?.id,\n trigger: child.props?.trigger,\n content: child.props?.children\n });\n }\n });\n }\n\n extractChildren(children);\n\n if (!tabs.some(tab => tab?.key === activeTab)) {\n setActiveTab(tabs[0]?.key);\n }\n\n return tabs;\n }, [children]);\n\n const handleTabClick = tab => {\n setActiveTab(tab.key);\n let triggerText = '';\n\n if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n triggerText = tab.trigger.props.children;\n }\n if (onTabClick) {\n onTabClick({\n ...tab,\n triggerText: triggerText\n });\n }\n };\n\n useEffect(() => {\n if (isNil(defaultActiveId)) return;\n const matchedTab = tabs.find(tab => tab.id === defaultActiveId);\n if (matchedTab) handleTabClick(matchedTab);\n }, []); // eslint-disable-line\n\n return (\n <S.Tabs ref={forwardedRef} {...props} role=\"tablist\">\n <S.TabHeaders custompadding={customPadding}>\n {tabs.map(tab => (\n <S.TabHeader\n key={tab.key}\n hidden={tab.hidden}\n $active={tab.key === activeTab}\n onClick={() => handleTabClick(tab)}\n role=\"tab\"\n >\n {tab.trigger}\n </S.TabHeader>\n ))}\n </S.TabHeaders>\n <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n <S.TabContent>\n {tabs.map(tab => (\n <div\n ref={tab.key === activeTab?.key ? contentRef : null}\n key={tab.key}\n role=\"tabpanel\"\n hidden={tab.key !== activeTab}\n style={{\n minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n }}\n >\n {tab.content}\n </div>\n ))}\n </S.TabContent>\n </S.Tabs>\n );\n});\n\nTabs.propTypes = {\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n /**\n * Whether `Tabs` component has a background color\n */\n backgroundColor: PropTypes.string,\n /**\n * Whether `tabs` will have a predefined min-height.\n */\n defaultMinHeight: PropTypes.string,\n /**\n * Custom padding.\n */\n customPadding: PropTypes.string,\n /**\n * Callback for clicked tab\n */\n onTabClick: PropTypes.func,\n /**\n *\n * Defaults to the first tab.\n */\n /**\n *\n * Initially-selected tab, matched against each `Tab`'s `id` prop.\n */\n defaultActiveId: PropTypes.string\n};\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","onTabClick","defaultActiveId","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","id","trigger","content","some","tab","handleTabClick","triggerText","useEffect","matchedTab","find","createElement","S","_extends","ref","role","custompadding","map","$active","onClick","style","minHeight","isEmpty","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","array","object","backgroundColor","string","func"],"mappings":"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"}
|
package/build/data/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { default as Alert } from './Alert/Alert.js';
|
|
2
2
|
export { default as Badge } from './Badge/Badge.js';
|
|
3
|
+
export { default as LiveBadge } from './LiveBadge/LiveBadge.js';
|
|
3
4
|
export { default as Popover } from './Popover/Popover.js';
|
|
4
5
|
export { default as SeverityBadge } from './SeverityBadge/SeverityBadge.js';
|
|
5
6
|
export { default as Tab } from './Tab/Tab.js';
|
package/build/data/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import React__default, { useState, useMemo } from 'react';
|
|
6
6
|
import '../../data/Alert/Alert.js';
|
|
7
7
|
import '../../data/Badge/Badge.js';
|
|
8
|
+
import '../../data/LiveBadge/LiveBadge.js';
|
|
8
9
|
import '../../data/Popover/Popover.js';
|
|
9
10
|
import '../../data/SeverityBadge/SeverityBadge.js';
|
|
10
11
|
import '../../data/Tab/Tab.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompactAutocompleteSelect.js","sources":["../../../src/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js"],"sourcesContent":["import { isEmpty } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactAutocompleteSelect.styled';\n\n/**\n * Select input control with autocomplete, async and creatable support.\n *\n * This control allows users to search through a predefined set of options, asynchronously load additional options,\n * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,\n * asynchronous data fetching, and creatable option support.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n * <br /> ### Import\n *\n * ``` js\n * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'\n * ```\n *\n * <br /> ## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n * <br /> ## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n *\n * let filteredOptions;\n *\n * if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n *\n * const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n * return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n * <br />\n */\n\nconst CompactAutocompleteSelect = React.forwardRef(function CompactAutocompleteSelect(\n {\n label,\n availableOptions,\n placeholder,\n selectedOption,\n loadOptions,\n noOptionsMessageFunc,\n createNewOptionMessageFunc,\n onUpdateCallback,\n loadingMessageFunc,\n creatable,\n readOnly,\n edit,\n disabled,\n hidden,\n type,\n descriptionToolTip,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOption);\n const [focused, setFocused] = useState(false);\n const [cacheUnique, setCacheUnique] = useState(0);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n /**\n * Adds displayname to inner components\n */\n const Control = props => {\n return <S.Control className=\"select-control\" edit={edit} type={type} {...props} />;\n };\n\n const ValueContainer = useMemo(() => {\n const valueContainer = props => {\n return (\n <>\n <S.ValueContainer type={type} {...props} />\n </>\n );\n };\n valueContainer.displayName = 'ValueContainerWrapper';\n return valueContainer;\n }, [type]);\n\n const Input = useMemo(() => {\n const selectInput = props => {\n return <S.Input className=\"select-input\" {...props} />;\n };\n selectInput.displayName = 'InputWrapper';\n return selectInput;\n }, []);\n\n const Menu = useMemo(() => {\n const menu = props => {\n return <S.Menu className=\"select-menu\" {...props} />;\n };\n menu.displayName = 'MenuWrapper';\n return menu;\n }, []);\n\n const Placeholder = props => {\n return <S.Placeholder className=\"select-placeholder\" type={type} {...props} />;\n };\n\n const Option = props => {\n return !props.data.link ? (\n <S.Option className=\"menu-item\" {...props} />\n ) : (\n <S.Option {...props}>\n <a href={props.data.link}>\n {props.data.icon}\n {props.label}\n </a>\n </S.Option>\n );\n };\n\n const SingleValue = props => {\n return <S.SingleValue className=\"menu-value\" {...props} />;\n };\n\n Option.propTypes = {\n data: PropTypes.shape({\n icon: PropTypes.node,\n link: PropTypes.string\n }),\n label: PropTypes.string\n };\n\n const DropdownIndicator = props => {\n return (\n <S.DropdownIndicator className=\"dropdown-indicator\" {...props}>\n <S.DropdownIndicatorIcon />\n </S.DropdownIndicator>\n );\n };\n\n const ClearIndicator = props => {\n return (\n <S.ClearIndicator className=\"clear-indicator\" {...props}>\n <S.ClearIndicatorIcon />\n </S.ClearIndicator>\n );\n };\n\n const IndicatorSeparator = props => {\n return <S.IndicatorSeparator className=\"indicator-separator\" {...props} />;\n };\n\n /**\n * Adds classnames to inner components\n */\n const innerComponents = {\n Control,\n ValueContainer,\n DropdownIndicator,\n IndicatorSeparator,\n ClearIndicator,\n Option,\n SingleValue,\n Input,\n Placeholder,\n Menu\n };\n\n const sharedSelectProps = {\n ref: forwardedRef,\n options: loadOptions ? undefined : availableOptions,\n value: selected,\n loadOptions: loadOptions,\n loadingMessage: loadingMessageFunc,\n formatCreateLabel: createNewOptionMessageFunc,\n noOptionsMessage: input => {\n return noOptionsMessageFunc(input.inputValue);\n },\n onFocus: () => {\n setFocused(true);\n },\n onBlur: () => {\n setFocused(false);\n },\n focused: focused,\n isDisabled: disabled || readOnly,\n components: innerComponents,\n isClearable: true,\n isSearchable: true,\n placeholder: placeholder,\n id: uniqueId,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n onChange: (selected, actionMeta) => {\n switch (actionMeta.action) {\n case 'create-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n if (loadOptions) {\n setCacheUnique(cacheUnique + 1);\n }\n\n setSelected(selected);\n break;\n\n case 'select-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'remove-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'pop-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'deselect-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'clear':\n setSelected(selected);\n break;\n\n default:\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n }\n }\n };\n\n if (hidden) return null;\n\n const input = () => {\n return (\n <S.CompactAutocompleteSelect disabled={disabled}>\n <S.InputContainer>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n {loadOptions ? (\n creatable ? (\n <S.AsyncCreatableAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AsyncAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n )\n ) : creatable ? (\n <S.AutocompletCreatableSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AutocompletSelect $hasLabel={!isEmpty(label)} {...sharedSelectProps} {...props} />\n )}\n </S.InputContainer>\n </S.CompactAutocompleteSelect>\n );\n };\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactAutocompleteSelect.propTypes = {\n /**\n * The label of the input field – leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n */\n placeholder: PropTypes.string,\n /**\n * `Array` of `objects` that populate the select menu. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n *\n * **Note:**\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n */\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n /**\n * `Array` of `objects` containing the selected options.\n */\n selectedOption: PropTypes.object,\n /**\n * Function with a `Promise` returning filtered options.\n *\n * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n *\n * **Note:**\n * <br />This will override the `availableOptions` prop if both props are set.\n */\n loadOptions: PropTypes.func,\n /**\n * Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n */\n loadingMessageFunc: PropTypes.func,\n /**\n * Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n */\n createNewOptionMessageFunc: PropTypes.func,\n /**\n * If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n */\n noOptionsMessageFunc: PropTypes.func,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * There is an error present – 'error be prioritized over warnings if both are set to 'true'.\n */\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n */\n onUpdateCallback: PropTypes.func,\n /**\n * Whether the user have permission to create new options\n */\n creatable: PropTypes.bool,\n /**\n * Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n */\n disabled: PropTypes.bool,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactAutocompleteSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n readOnly: false,\n disabled: false,\n creatable: true,\n edit: false,\n error: false,\n warning: false,\n hidden: false,\n type: '',\n descriptionToolTip: ''\n};\n\nexport default CompactAutocompleteSelect;\n"],"names":["CompactAutocompleteSelect","React","forwardRef","label","availableOptions","placeholder","selectedOption","loadOptions","noOptionsMessageFunc","createNewOptionMessageFunc","onUpdateCallback","loadingMessageFunc","creatable","readOnly","edit","disabled","hidden","type","descriptionToolTip","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","cacheUnique","setCacheUnique","memoizedDescriptionToolTip","useMemo","Control","createElement","S","_extends","className","ValueContainer","valueContainer","Fragment","displayName","Input","selectInput","Menu","menu","Placeholder","Option","data","link","href","icon","SingleValue","propTypes","process","env","NODE_ENV","PropTypes","shape","node","string","DropdownIndicator","ClearIndicator","IndicatorSeparator","innerComponents","sharedSelectProps","ref","options","undefined","value","loadingMessage","formatCreateLabel","noOptionsMessage","input","inputValue","onFocus","onBlur","isDisabled","components","isClearable","isSearchable","id","cacheUniqs","onChange","actionMeta","action","htmlFor","$hasLabel","isEmpty","Tooltip","content","key","placement","trigger","zIndex","arrayOf","object","func","bool","error","oneOfType","warning","oneOf","element","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CompactAutocompleteSelect.js","sources":["../../../src/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js"],"sourcesContent":["import { isEmpty } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactAutocompleteSelect.styled';\n\n/**\n * Select input control with autocomplete, async and creatable support.\n *\n * This control allows users to search through a predefined set of options, asynchronously load additional options,\n * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,\n * asynchronous data fetching, and creatable option support.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n * <br /> ### Import\n *\n * ``` js\n * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'\n * ```\n *\n * <br /> ## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n * <br /> ## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n *\n * let filteredOptions;\n *\n * if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n *\n * const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n * return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n * <br />\n */\n\nconst CompactAutocompleteSelect = React.forwardRef(function CompactAutocompleteSelect(\n {\n label,\n availableOptions,\n placeholder,\n selectedOption,\n loadOptions,\n noOptionsMessageFunc,\n createNewOptionMessageFunc,\n onUpdateCallback,\n loadingMessageFunc,\n creatable,\n readOnly,\n edit,\n disabled,\n hidden,\n type,\n descriptionToolTip,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOption);\n const [focused, setFocused] = useState(false);\n const [cacheUnique, setCacheUnique] = useState(0);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n /**\n * Adds displayname to inner components\n */\n const Control = props => {\n return <S.Control className=\"select-control\" edit={edit} type={type} {...props} />;\n };\n\n const ValueContainer = useMemo(() => {\n const valueContainer = props => {\n return (\n <>\n <S.ValueContainer type={type} {...props} />\n </>\n );\n };\n valueContainer.displayName = 'ValueContainerWrapper';\n return valueContainer;\n }, [type]);\n\n const Input = useMemo(() => {\n const selectInput = props => {\n return <S.Input className=\"select-input\" {...props} />;\n };\n selectInput.displayName = 'InputWrapper';\n return selectInput;\n }, []);\n\n const Menu = useMemo(() => {\n const menu = props => {\n return <S.Menu className=\"select-menu\" {...props} />;\n };\n menu.displayName = 'MenuWrapper';\n return menu;\n }, []);\n\n const Placeholder = props => {\n return <S.Placeholder className=\"select-placeholder\" type={type} {...props} />;\n };\n\n const Option = props => {\n return !props.data.link ? (\n <S.Option className=\"menu-item\" {...props} />\n ) : (\n <S.Option {...props}>\n <a href={props.data.link}>\n {props.data.icon}\n {props.label}\n </a>\n </S.Option>\n );\n };\n\n const SingleValue = props => {\n return <S.SingleValue className=\"menu-value\" {...props} />;\n };\n\n Option.propTypes = {\n data: PropTypes.shape({\n icon: PropTypes.node,\n link: PropTypes.string\n }),\n label: PropTypes.string\n };\n\n const DropdownIndicator = props => {\n return (\n <S.DropdownIndicator className=\"dropdown-indicator\" {...props}>\n <S.DropdownIndicatorIcon />\n </S.DropdownIndicator>\n );\n };\n\n const ClearIndicator = props => {\n return (\n <S.ClearIndicator className=\"clear-indicator\" {...props}>\n <S.ClearIndicatorIcon />\n </S.ClearIndicator>\n );\n };\n\n const IndicatorSeparator = props => {\n return <S.IndicatorSeparator className=\"indicator-separator\" {...props} />;\n };\n\n /**\n * Adds classnames to inner components\n */\n const innerComponents = {\n Control,\n ValueContainer,\n DropdownIndicator,\n IndicatorSeparator,\n ClearIndicator,\n Option,\n SingleValue,\n Input,\n Placeholder,\n Menu\n };\n\n const sharedSelectProps = {\n ref: forwardedRef,\n options: loadOptions ? undefined : availableOptions,\n value: selected,\n loadOptions: loadOptions,\n loadingMessage: loadingMessageFunc,\n formatCreateLabel: createNewOptionMessageFunc,\n noOptionsMessage: input => {\n return noOptionsMessageFunc(input.inputValue);\n },\n onFocus: () => {\n setFocused(true);\n },\n onBlur: () => {\n setFocused(false);\n },\n focused: focused,\n isDisabled: disabled || readOnly,\n components: innerComponents,\n isClearable: true,\n isSearchable: true,\n placeholder: placeholder,\n id: uniqueId,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n onChange: (selected, actionMeta) => {\n switch (actionMeta.action) {\n case 'create-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n if (loadOptions) {\n setCacheUnique(cacheUnique + 1);\n }\n\n setSelected(selected);\n break;\n\n case 'select-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'remove-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'pop-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'deselect-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'clear':\n setSelected(selected);\n break;\n\n default:\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n }\n }\n };\n\n if (hidden) return null;\n\n const input = () => {\n return (\n <S.CompactAutocompleteSelect disabled={disabled}>\n <S.InputContainer>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n {loadOptions ? (\n creatable ? (\n <S.AsyncCreatableAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AsyncAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n )\n ) : creatable ? (\n <S.AutocompletCreatableSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AutocompletSelect $hasLabel={!isEmpty(label)} {...sharedSelectProps} {...props} />\n )}\n </S.InputContainer>\n </S.CompactAutocompleteSelect>\n );\n };\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactAutocompleteSelect.propTypes = {\n /**\n * The label of the input field – leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n */\n placeholder: PropTypes.string,\n /**\n * `Array` of `objects` that populate the select menu. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n *\n * **Note:**\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n */\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n /**\n * `Array` of `objects` containing the selected options.\n */\n selectedOption: PropTypes.object,\n /**\n * Function with a `Promise` returning filtered options.\n *\n * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n *\n * **Note:**\n * <br />This will override the `availableOptions` prop if both props are set.\n */\n loadOptions: PropTypes.func,\n /**\n * Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n */\n loadingMessageFunc: PropTypes.func,\n /**\n * Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n */\n createNewOptionMessageFunc: PropTypes.func,\n /**\n * If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n */\n noOptionsMessageFunc: PropTypes.func,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * There is an error present – 'error be prioritized over warnings if both are set to 'true'.\n */\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n */\n onUpdateCallback: PropTypes.func,\n /**\n * Whether the user have permission to create new options\n */\n creatable: PropTypes.bool,\n /**\n * Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n */\n disabled: PropTypes.bool,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactAutocompleteSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n readOnly: false,\n disabled: false,\n creatable: true,\n edit: false,\n error: false,\n warning: false,\n hidden: false,\n type: '',\n descriptionToolTip: ''\n};\n\nexport default CompactAutocompleteSelect;\n"],"names":["CompactAutocompleteSelect","React","forwardRef","label","availableOptions","placeholder","selectedOption","loadOptions","noOptionsMessageFunc","createNewOptionMessageFunc","onUpdateCallback","loadingMessageFunc","creatable","readOnly","edit","disabled","hidden","type","descriptionToolTip","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","cacheUnique","setCacheUnique","memoizedDescriptionToolTip","useMemo","Control","createElement","S","_extends","className","ValueContainer","valueContainer","Fragment","displayName","Input","selectInput","Menu","menu","Placeholder","Option","data","link","href","icon","SingleValue","propTypes","process","env","NODE_ENV","PropTypes","shape","node","string","DropdownIndicator","ClearIndicator","IndicatorSeparator","innerComponents","sharedSelectProps","ref","options","undefined","value","loadingMessage","formatCreateLabel","noOptionsMessage","input","inputValue","onFocus","onBlur","isDisabled","components","isClearable","isSearchable","id","cacheUniqs","onChange","actionMeta","action","htmlFor","$hasLabel","isEmpty","Tooltip","content","key","placement","trigger","zIndex","arrayOf","object","func","bool","error","oneOfType","warning","oneOf","element","defaultProps"],"mappings":";;;;;;;;;;;;;;;;AAmJMA,MAAAA,yBAAyB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,yBAAyBA,CACnF;EACEG,KAAK;EACLC,gBAAgB;EAChBC,WAAW;EACXC,cAAc;EACdC,WAAW;EACXC,oBAAoB;EACpBC,0BAA0B;EAC1BC,gBAAgB;EAChBC,kBAAkB;EAClBC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,kBAAkB;EAClBC,WAAW;EACXC,WAAW;EACX,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;EACrC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGH,QAAQ,CAAClB,cAAc,CAAC,CAAA;EACxD,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC,CAAA;EAC7C,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAGP,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEjD,EAAA,MAAMQ,0BAA0B,GAAGC,OAAO,CAAC,MAAM;AAC/C,IAAA,OAAOf,kBAAkB,CAAA;AAC3B,GAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC,CAAA;EAKxB,MAAMgB,SAAO,GAAGb,KAAK,IAAI;IACvB,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,OAAS,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,gBAAgB;AAACxB,MAAAA,IAAI,EAAEA,IAAK;AAACG,MAAAA,IAAI,EAAEA,IAAAA;KAAUI,EAAAA,KAAK,CAAG,CAAC,CAAA;GACnF,CAAA;AAED,EAAA,MAAMkB,gBAAc,GAAGN,OAAO,CAAC,MAAM;IACnC,MAAMO,cAAc,GAAGnB,KAAK,IAAI;AAC9B,MAAA,OACEpB,cAAA,CAAAkC,aAAA,CAAAlC,cAAA,CAAAwC,QAAA,EAAA,IAAA,EACExC,cAAA,CAAAkC,aAAA,CAACC,cAAgB,EAAAC,QAAA,CAAA;AAACpB,QAAAA,IAAI,EAAEA,IAAAA;OAAUI,EAAAA,KAAK,CAAG,CAC1C,CAAC,CAAA;KAEN,CAAA;IACDmB,cAAc,CAACE,WAAW,GAAG,uBAAuB,CAAA;AACpD,IAAA,OAAOF,cAAc,CAAA;AACvB,GAAC,EAAE,CAACvB,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAM0B,OAAK,GAAGV,OAAO,CAAC,MAAM;IAC1B,MAAMW,WAAW,GAAGvB,KAAK,IAAI;MAC3B,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,KAAO,EAAAC,QAAA,CAAA;AAACC,QAAAA,SAAS,EAAC,cAAA;OAAmBjB,EAAAA,KAAK,CAAG,CAAC,CAAA;KACvD,CAAA;IACDuB,WAAW,CAACF,WAAW,GAAG,cAAc,CAAA;AACxC,IAAA,OAAOE,WAAW,CAAA;GACnB,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMC,MAAI,GAAGZ,OAAO,CAAC,MAAM;IACzB,MAAMa,IAAI,GAAGzB,KAAK,IAAI;MACpB,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,IAAM,EAAAC,QAAA,CAAA;AAACC,QAAAA,SAAS,EAAC,aAAA;OAAkBjB,EAAAA,KAAK,CAAG,CAAC,CAAA;KACrD,CAAA;IACDyB,IAAI,CAACJ,WAAW,GAAG,aAAa,CAAA;AAChC,IAAA,OAAOI,IAAI,CAAA;GACZ,EAAE,EAAE,CAAC,CAAA;EAEN,MAAMC,aAAW,GAAG1B,KAAK,IAAI;IAC3B,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,WAAa,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,oBAAoB;AAACrB,MAAAA,IAAI,EAAEA,IAAAA;KAAUI,EAAAA,KAAK,CAAG,CAAC,CAAA;GAC/E,CAAA;EAED,MAAM2B,QAAM,GAAG3B,KAAK,IAAI;AACtB,IAAA,OAAO,CAACA,KAAK,CAAC4B,IAAI,CAACC,IAAI,GACrBjD,cAAA,CAAAkC,aAAA,CAACC,MAAQ,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,WAAA;AAAW,KAAA,EAAKjB,KAAK,CAAG,CAAC,GAE7CpB,cAAA,CAAAkC,aAAA,CAACC,MAAQ,EAAKf,KAAK,EACjBpB,cAAA,CAAAkC,aAAA,CAAA,GAAA,EAAA;AAAGgB,MAAAA,IAAI,EAAE9B,KAAK,CAAC4B,IAAI,CAACC,IAAAA;KACjB7B,EAAAA,KAAK,CAAC4B,IAAI,CAACG,IAAI,EACf/B,KAAK,CAAClB,KACN,CACK,CACX,CAAA;GACF,CAAA;EAED,MAAMkD,aAAW,GAAGhC,KAAK,IAAI;IAC3B,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,WAAa,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,YAAA;KAAiBjB,EAAAA,KAAK,CAAG,CAAC,CAAA;GAC3D,CAAA;EAED2B,QAAM,CAACM,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AACjBR,IAAAA,IAAI,EAAES,SAAS,CAACC,KAAK,CAAC;MACpBP,IAAI,EAAEM,SAAS,CAACE,IAAI;MACpBV,IAAI,EAAEQ,SAAS,CAACG,MAAAA;AAClB,KAAC,CAAC;IACF1D,KAAK,EAAEuD,SAAS,CAACG,MAAAA;GAClB,GAAA,EAAA,CAAA;EAED,MAAMC,mBAAiB,GAAGzC,KAAK,IAAI;IACjC,OACEpB,cAAA,CAAAkC,aAAA,CAACC,iBAAmB,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,oBAAA;KAAyBjB,EAAAA,KAAK,CAC3DpB,EAAAA,cAAA,CAAAkC,aAAA,CAACC,qBAAuB,EAAE,IAAA,CACP,CAAC,CAAA;GAEzB,CAAA;EAED,MAAM2B,gBAAc,GAAG1C,KAAK,IAAI;IAC9B,OACEpB,cAAA,CAAAkC,aAAA,CAACC,cAAgB,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,iBAAA;KAAsBjB,EAAAA,KAAK,CACrDpB,EAAAA,cAAA,CAAAkC,aAAA,CAACC,kBAAoB,EAAE,IAAA,CACP,CAAC,CAAA;GAEtB,CAAA;EAED,MAAM4B,oBAAkB,GAAG3C,KAAK,IAAI;IAClC,OAAOpB,cAAA,CAAAkC,aAAA,CAACC,kBAAoB,EAAAC,QAAA,CAAA;AAACC,MAAAA,SAAS,EAAC,qBAAA;KAA0BjB,EAAAA,KAAK,CAAG,CAAC,CAAA;GAC3E,CAAA;AAKD,EAAA,MAAM4C,eAAe,GAAG;aACtB/B,SAAO;oBACPK,gBAAc;uBACduB,mBAAiB;wBACjBE,oBAAkB;oBAClBD,gBAAc;YACdf,QAAM;iBACNK,aAAW;WACXV,OAAK;iBACLI,aAAW;AACXF,UAAAA,MAAAA;GACD,CAAA;AAED,EAAA,MAAMqB,iBAAiB,GAAG;AACxBC,IAAAA,GAAG,EAAE7C,YAAY;AACjB8C,IAAAA,OAAO,EAAE7D,WAAW,GAAG8D,SAAS,GAAGjE,gBAAgB;AACnDkE,IAAAA,KAAK,EAAE5C,QAAQ;AACfnB,IAAAA,WAAW,EAAEA,WAAW;AACxBgE,IAAAA,cAAc,EAAE5D,kBAAkB;AAClC6D,IAAAA,iBAAiB,EAAE/D,0BAA0B;IAC7CgE,gBAAgB,EAAEC,KAAK,IAAI;AACzB,MAAA,OAAOlE,oBAAoB,CAACkE,KAAK,CAACC,UAAU,CAAC,CAAA;KAC9C;IACDC,OAAO,EAAEA,MAAM;MACb/C,UAAU,CAAC,IAAI,CAAC,CAAA;KACjB;IACDgD,MAAM,EAAEA,MAAM;MACZhD,UAAU,CAAC,KAAK,CAAC,CAAA;KAClB;AACDD,IAAAA,OAAO,EAAEA,OAAO;IAChBkD,UAAU,EAAE/D,QAAQ,IAAIF,QAAQ;AAChCkE,IAAAA,UAAU,EAAEd,eAAe;AAC3Be,IAAAA,WAAW,EAAE,IAAI;AACjBC,IAAAA,YAAY,EAAE,IAAI;AAClB5E,IAAAA,WAAW,EAAEA,WAAW;AACxB6E,IAAAA,EAAE,EAAE3D,QAAQ;AACZ4D,IAAAA,UAAU,EAAE5E,WAAW,GAAG,CAACuB,WAAW,CAAC,GAAGuC,SAAS;AACnDe,IAAAA,QAAQ,EAAEA,CAAC1D,QAAQ,EAAE2D,UAAU,KAAK;MAClC,QAAQA,UAAU,CAACC,MAAM;AACvB,QAAA,KAAK,eAAe;AAClB,UAAA,IAAI5E,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;AAEA,UAAA,IAAI/D,WAAW,EAAE;AACfwB,YAAAA,cAAc,CAACD,WAAW,GAAG,CAAC,CAAC,CAAA;AACjC,WAAA;UAEAH,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA,KAAK,eAAe;AAClB,UAAA,IAAIhB,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;UAEA3C,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA,KAAK,cAAc;AACjB,UAAA,IAAIhB,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;UAEA3C,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA,KAAK,WAAW;AACd,UAAA,IAAIhB,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;UAEA3C,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA,KAAK,iBAAiB;AACpB,UAAA,IAAIhB,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;UAEA3C,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA,KAAK,OAAO;UACVC,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AAEF,QAAA;AACE,UAAA,IAAIhB,gBAAgB,EAAE;YACpBA,gBAAgB,CAAC2E,UAAU,CAACC,MAAM,EAAE5D,QAAQ,CAAC4C,KAAK,CAAC,CAAA;AACrD,WAAA;UAEA3C,WAAW,CAACD,QAAQ,CAAC,CAAA;AACrB,UAAA,MAAA;AACJ,OAAA;AACF,KAAA;GACD,CAAA;EAED,IAAIV,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,MAAM0D,KAAK,GAAGA,MAAM;AAClB,IAAA,OACEzE,cAAA,CAAAkC,aAAA,CAACC,2BAA2B,EAAA;AAACrB,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAC9Cd,cAAA,CAAAkC,aAAA,CAACC,cAAgB,EAAA,IAAA,EACdjC,KAAK,IACJF,cAAA,CAAAkC,aAAA,CAACC,KAAO,EAAA;AAACmD,MAAAA,OAAO,EAAEhE,QAAS;AAACR,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAC5CZ,KAAK,EACNF,cAAA,CAAAkC,aAAA,CAACC,gBAAkB,EAAA,IAAA,EAChBnB,IAAI,KAAK,SAAS,IAAIE,WAAW,EACjCF,IAAI,KAAK,SAAS,IAAIG,WACL,CACb,CACV,EACAb,WAAW,GACVK,SAAS,GACPX,cAAA,CAAAkC,aAAA,CAACC,gCAAkC,EAAAC,QAAA,CAAA;AACjCmD,MAAAA,SAAS,EAAE,CAACC,OAAO,CAACtF,KAAK,CAAA;AAAE,KAAA,EACvB+D,iBAAiB,EACjB7C,KAAK,CACV,CAAC,GAEFpB,cAAA,CAAAkC,aAAA,CAACC,uBAAyB,EAAAC,QAAA,CAAA;AACxBmD,MAAAA,SAAS,EAAE,CAACC,OAAO,CAACtF,KAAK,CAAA;AAAE,KAAA,EACvB+D,iBAAiB,EACjB7C,KAAK,CACV,CACF,GACCT,SAAS,GACXX,cAAA,CAAAkC,aAAA,CAACC,0BAA4B,EAAAC,QAAA,CAAA;AAC3BmD,MAAAA,SAAS,EAAE,CAACC,OAAO,CAACtF,KAAK,CAAA;AAAE,KAAA,EACvB+D,iBAAiB,EACjB7C,KAAK,CACV,CAAC,GAEFpB,cAAA,CAAAkC,aAAA,CAACC,iBAAmB,EAAAC,QAAA,CAAA;AAACmD,MAAAA,SAAS,EAAE,CAACC,OAAO,CAACtF,KAAK,CAAA;AAAE,KAAA,EAAK+D,iBAAiB,EAAM7C,KAAK,CAAG,CAEtE,CACS,CAAC,CAAA;GAEjC,CAAA;EAED,OACEpB,cAAA,CAAAkC,aAAA,CAAAlC,cAAA,CAAAwC,QAAA,EAAA,IAAA,EACG,CAACT,0BAA0B,IAAI0C,KAAK,EAAE,EACtC1C,0BAA0B,IACzB/B,cAAA,CAAAkC,aAAA,CAAA,KAAA,EAAA,IAAA,EACElC,cAAA,CAAAkC,aAAA,CAACuD,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAE3D,0BAA2B;AACpC4D,IAAAA,GAAG,EAAC,kBAAkB;AACtBC,IAAAA,SAAS,EAAC,YAAY;AACtBC,IAAAA,OAAO,EAAE,YAAa;AACtBC,IAAAA,MAAM,EAAE,MAAA;AAAO,GAAA,EAEdrB,KAAK,EACC,CACN,CAEP,CAAC,CAAA;AAEP,CAAC,EAAC;AAEF1E,yBAAyB,CAACsD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIpCtD,KAAK,EAAEuD,SAAS,CAACG,MAAM;EAIvBxD,WAAW,EAAEqD,SAAS,CAACG,MAAM;EAQ7BzD,gBAAgB,EAAEsD,SAAS,CAACsC,OAAO,CAACtC,SAAS,CAACuC,MAAM,CAAC;EAIrD3F,cAAc,EAAEoD,SAAS,CAACuC,MAAM;EAUhC1F,WAAW,EAAEmD,SAAS,CAACwC,IAAI;EAK3BvF,kBAAkB,EAAE+C,SAAS,CAACwC,IAAI;EAMlCzF,0BAA0B,EAAEiD,SAAS,CAACwC,IAAI;EAM1C1F,oBAAoB,EAAEkD,SAAS,CAACwC,IAAI;EAIpCrF,QAAQ,EAAE6C,SAAS,CAACyC,IAAI;EAIxBrF,IAAI,EAAE4C,SAAS,CAACyC,IAAI;EAIpBnF,MAAM,EAAE0C,SAAS,CAACyC,IAAI;AAItBC,EAAAA,KAAK,EAAE1C,SAAS,CAAC2C,SAAS,CAAC,CAAC3C,SAAS,CAACyC,IAAI,EAAEzC,SAAS,CAACG,MAAM,CAAC,CAAC;AAI9DyC,EAAAA,OAAO,EAAE5C,SAAS,CAAC2C,SAAS,CAAC,CAAC3C,SAAS,CAACyC,IAAI,EAAEzC,SAAS,CAACG,MAAM,CAAC,CAAC;EAKhEnD,gBAAgB,EAAEgD,SAAS,CAACwC,IAAI;EAIhCtF,SAAS,EAAE8C,SAAS,CAACyC,IAAI;EAKzBpF,QAAQ,EAAE2C,SAAS,CAACyC,IAAI;AAIxBlF,EAAAA,IAAI,EAAEyC,SAAS,CAAC6C,KAAK,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;EAI7FrF,kBAAkB,EAAEwC,SAAS,CAACG,MAAM;EAIpC1C,WAAW,EAAEuC,SAAS,CAAC8C,OAAO;EAI9BpF,WAAW,EAAEsC,SAAS,CAAC8C,OAAAA;AACzB,CAAC,GAAA,EAAA,CAAA;AAEDxG,yBAAyB,CAACyG,YAAY,GAAG;EACvCjG,oBAAoB,EAAEmE,UAAU,IAAI;AAClC,IAAA,IAAIA,UAAU,EAAE;MACd,OAAO,CAAA,gBAAA,EAAmBA,UAAU,CAAG,CAAA,CAAA,CAAA;AACzC,KAAC,MAAM;AACL,MAAA,OAAO,sBAAsB,CAAA;AAC/B,KAAA;GACD;AACD9D,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,QAAQ,EAAE,KAAK;AACfH,EAAAA,SAAS,EAAE,IAAI;AACfE,EAAAA,IAAI,EAAE,KAAK;AACXsF,EAAAA,KAAK,EAAE,KAAK;AACZE,EAAAA,OAAO,EAAE,KAAK;AACdtF,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,kBAAkB,EAAE,EAAA;AACtB,CAAC;;;;"}
|
|
@@ -5,6 +5,7 @@ import { ReactComponent as SvgStarFilled } from '../../icons/star-filled.svg.js'
|
|
|
5
5
|
import { ReactComponent as SvgStar } from '../../icons/star.svg.js';
|
|
6
6
|
import '../../data/Alert/Alert.js';
|
|
7
7
|
import '../../data/Badge/Badge.js';
|
|
8
|
+
import '../../data/LiveBadge/LiveBadge.js';
|
|
8
9
|
import '../../data/Popover/Popover.js';
|
|
9
10
|
import '../../data/SeverityBadge/SeverityBadge.js';
|
|
10
11
|
import '../../data/Tab/Tab.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompactStarRating.js","sources":["../../../src/components/inputs/CompactStarRating/CompactStarRating.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState, useMemo } from 'react';\nimport { ReactComponent as StarIconFill } from '../../../icons/star-filled.svg';\nimport { ReactComponent as StarIcon } from '../../../icons/star.svg';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactStarRating.styled';\n\n/**\n * A compact star rating.\n *\n * To remove a rating (i.e. show 0 stars), click the first star to give a 1-star rating, and then click the first star again.\n *\n * ### Import\n *\n * ``` js\n * import { CompactStarRating } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactStarRating from '@ntbjs/react-components/inputs/CompactStarRating'\n * ```\n * ### Values\n * Pass default value as a prop (`defaultValue`) into the component: 0 or state value.\n * ```\n */\n\nconst CompactStarRating = React.forwardRef(function CompactStarRating(\n {\n label,\n icon,\n iconFill,\n max,\n defaultValue,\n value,\n name,\n viewEmpty,\n onChange,\n onBlur,\n type,\n descriptionToolTip,\n disabled,\n readOnly,\n edit,\n hidden,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const stars = Array.from(Array(max).keys());\n const [rating, setRating] = useState('');\n const [hover, setHover] = useState(false);\n const [tempRating, setTempRating] = useState('');\n const [initialRating, setInitialRating] = useState('');\n const inputRef = useRef();\n\n useEffect(() => {\n setRating(value || defaultValue);\n setInitialRating(value || defaultValue);\n }, [value, defaultValue]);\n\n useEffect(() => {\n inputRef.current.value = String(rating);\n if (rating === initialRating) {\n return undefined;\n } else {\n setInitialRating(rating);\n onChange({ target: inputRef.current });\n }\n }, [rating]);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n const starIconRender = key => {\n if (rating > 0 && rating >= key + 1) {\n return (\n <S.StarFill\n readOnly={readOnly}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n if (key + 1 > 1) {\n return setRating(key + 1);\n } else if (key + 1 == 1) {\n setRating(current => {\n return current === 1 ? 0 : key + 1;\n });\n }\n }}\n onMouseEnter={() => {\n setTempRating(key + 1);\n setHover(true);\n }}\n onMouseLeave={() => {\n setTempRating(0);\n setHover(false);\n }}\n $hover={hover && key + 1 <= tempRating}\n type=\"button\"\n key={key}\n >\n {iconFill}\n </S.StarFill>\n );\n } else if (viewEmpty) {\n return (\n <S.Star\n readOnly={readOnly}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n setRating(key + 1);\n }}\n onMouseEnter={() => {\n setTempRating(key + 1);\n setHover(true);\n }}\n onMouseLeave={() => {\n setTempRating(0);\n setHover(false);\n }}\n $hover={hover && key + 1 <= tempRating}\n type=\"button\"\n key={key}\n >\n {icon}\n </S.Star>\n );\n }\n };\n\n const input = () => {\n return (\n <S.CompactStarRating\n ref={forwardedRef}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n onBlur={onBlur}\n {...props}\n >\n <S.labelWidth disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.labelWidth>\n <S.starsWidth $edit={edit} type={type} readOnly={readOnly}>\n {stars.map(key => {\n return (\n <div key={key}>\n <input type=\"number\" name={name} ref={inputRef} />\n {starIconRender(key, value)}\n </div>\n );\n })}\n </S.starsWidth>\n </S.CompactStarRating>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactStarRating.propTypes = {\n /**\n * Whether the star rating is read-only\n */\n readOnly: PropTypes.bool,\n /**\n * Whether the star rating is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Displays a grey background to show that the star rating is editable\n */\n edit: PropTypes.bool,\n /**\n * Rating value (0-5)\n */\n value: PropTypes.number,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n /**\n * Default rating value\n */\n defaultValue: PropTypes.number,\n /**\n * Compact star rating label\n */\n label: PropTypes.string,\n /**\n * Name of the text area (used when sending form data)\n */\n name: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<StarIcon />}`\n */\n icon: PropTypes.element,\n /**\n * Filled icon element – E.g: `icon={<StarIcon />}`\n */\n iconFill: PropTypes.element,\n /**\n * Max number of stars: 5\n */\n max: PropTypes.number,\n /**\n * View Compact Star Rating component when no values have been assigned\n */\n viewEmpty: PropTypes.bool,\n\n /**\n * Optional callback function for `onChange`\n */\n onChange: PropTypes.func,\n /**\n * Optional callback function for `onBlur`\n */\n onBlur: PropTypes.func,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element,\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string\n};\n\nCompactStarRating.defaultProps = {\n label: 'Rating',\n max: 5,\n value: 0,\n defaultValue: 0,\n viewEmpty: true,\n icon: <StarIcon />,\n iconFill: <StarIconFill />,\n hidden: false,\n type: '',\n descriptionToolTip: '',\n onChange: () => {}\n};\n\nexport default CompactStarRating;\n"],"names":["CompactStarRating","React","forwardRef","label","icon","iconFill","max","defaultValue","value","name","viewEmpty","onChange","onBlur","type","descriptionToolTip","disabled","readOnly","edit","hidden","loadingIcon","successIcon","props","forwardedRef","stars","Array","from","keys","rating","setRating","useState","hover","setHover","tempRating","setTempRating","initialRating","setInitialRating","inputRef","useRef","useEffect","current","String","undefined","target","memoizedDescriptionToolTip","useMemo","starIconRender","key","createElement","S","onClick","event","preventDefault","onMouseEnter","onMouseLeave","$hover","input","_extends","ref","$edit","map","Fragment","Tooltip","content","placement","trigger","zIndex","propTypes","process","env","NODE_ENV","PropTypes","bool","number","oneOf","string","element","func","defaultProps","StarIcon","StarIconFill"],"mappings":";;;;;;;;;;;;;;;AAyBMA,MAAAA,iBAAiB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,iBAAiBA,CACnE;EACEG,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,GAAG;EACHC,YAAY;EACZC,KAAK;EACLC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,kBAAkB;EAClBC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,WAAW;EACXC,WAAW;EACX,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAI,CAACD,KAAK,CAAClB,GAAG,CAAC,CAACoB,IAAI,EAAE,CAAC,CAAA;EAC3C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,QAAQ,CAAC,EAAE,CAAC,CAAA;EACxC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAM,CAACG,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAC,EAAE,CAAC,CAAA;EAChD,MAAM,CAACK,aAAa,EAAEC,gBAAgB,CAAC,GAAGN,QAAQ,CAAC,EAAE,CAAC,CAAA;AACtD,EAAA,MAAMO,QAAQ,GAAGC,MAAM,EAAE,CAAA;AAEzBC,EAAAA,SAAS,CAAC,MAAM;AACdV,IAAAA,SAAS,CAACpB,KAAK,IAAID,YAAY,CAAC,CAAA;AAChC4B,IAAAA,gBAAgB,CAAC3B,KAAK,IAAID,YAAY,CAAC,CAAA;AACzC,GAAC,EAAE,CAACC,KAAK,EAAED,YAAY,CAAC,CAAC,CAAA;AAEzB+B,EAAAA,SAAS,CAAC,MAAM;IACdF,QAAQ,CAACG,OAAO,CAAC/B,KAAK,GAAGgC,MAAM,CAACb,MAAM,CAAC,CAAA;IACvC,IAAIA,MAAM,KAAKO,aAAa,EAAE;AAC5B,MAAA,OAAOO,SAAS,CAAA;AAClB,KAAC,MAAM;MACLN,gBAAgB,CAACR,MAAM,CAAC,CAAA;AACxBhB,MAAAA,QAAQ,CAAC;QAAE+B,MAAM,EAAEN,QAAQ,CAACG,OAAAA;AAAQ,OAAC,CAAC,CAAA;AACxC,KAAA;AACF,GAAC,EAAE,CAACZ,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,MAAMgB,0BAA0B,GAAGC,OAAO,CAAC,MAAM;AAC/C,IAAA,OAAO9B,kBAAkB,CAAA;AAC3B,GAAC,EAAE,CAACA,kBAAkB,CAAC,CAAC,CAAA;EAExB,MAAM+B,cAAc,GAAGC,GAAG,IAAI;IAC5B,IAAInB,MAAM,GAAG,CAAC,IAAIA,MAAM,IAAImB,GAAG,GAAG,CAAC,EAAE;AACnC,MAAA,OACE7C,cAAA,CAAA8C,aAAA,CAACC,QAAU,EAAA;AACThC,QAAAA,QAAQ,EAAEA,QAAS;AACnBD,QAAAA,QAAQ,EAAEA,QAAS;QACnBkC,OAAO,EAAEC,KAAK,IAAI;UAChBA,KAAK,CAACC,cAAc,EAAE,CAAA;AACtB,UAAA,IAAIL,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE;AACf,YAAA,OAAOlB,SAAS,CAACkB,GAAG,GAAG,CAAC,CAAC,CAAA;AAC3B,WAAC,MAAM,IAAIA,GAAG,GAAG,CAAC,IAAI,CAAC,EAAE;YACvBlB,SAAS,CAACW,OAAO,IAAI;cACnB,OAAOA,OAAO,KAAK,CAAC,GAAG,CAAC,GAAGO,GAAG,GAAG,CAAC,CAAA;AACpC,aAAC,CAAC,CAAA;AACJ,WAAA;SACA;QACFM,YAAY,EAAEA,MAAM;AAClBnB,UAAAA,aAAa,CAACa,GAAG,GAAG,CAAC,CAAC,CAAA;UACtBf,QAAQ,CAAC,IAAI,CAAC,CAAA;SACd;QACFsB,YAAY,EAAEA,MAAM;UAClBpB,aAAa,CAAC,CAAC,CAAC,CAAA;UAChBF,QAAQ,CAAC,KAAK,CAAC,CAAA;SACf;AACFuB,QAAAA,MAAM,EAAExB,KAAK,IAAIgB,GAAG,GAAG,CAAC,IAAId,UAAW;AACvCnB,QAAAA,IAAI,EAAC,QAAQ;AACbiC,QAAAA,GAAG,EAAEA,GAAAA;AAAI,OAAA,EAERzC,QACS,CAAC,CAAA;KAEhB,MAAM,IAAIK,SAAS,EAAE;AACpB,MAAA,OACET,cAAA,CAAA8C,aAAA,CAACC,IAAM,EAAA;AACLhC,QAAAA,QAAQ,EAAEA,QAAS;AACnBD,QAAAA,QAAQ,EAAEA,QAAS;QACnBkC,OAAO,EAAEC,KAAK,IAAI;UAChBA,KAAK,CAACC,cAAc,EAAE,CAAA;AACtBvB,UAAAA,SAAS,CAACkB,GAAG,GAAG,CAAC,CAAC,CAAA;SAClB;QACFM,YAAY,EAAEA,MAAM;AAClBnB,UAAAA,aAAa,CAACa,GAAG,GAAG,CAAC,CAAC,CAAA;UACtBf,QAAQ,CAAC,IAAI,CAAC,CAAA;SACd;QACFsB,YAAY,EAAEA,MAAM;UAClBpB,aAAa,CAAC,CAAC,CAAC,CAAA;UAChBF,QAAQ,CAAC,KAAK,CAAC,CAAA;SACf;AACFuB,QAAAA,MAAM,EAAExB,KAAK,IAAIgB,GAAG,GAAG,CAAC,IAAId,UAAW;AACvCnB,QAAAA,IAAI,EAAC,QAAQ;AACbiC,QAAAA,GAAG,EAAEA,GAAAA;AAAI,OAAA,EAER1C,IACK,CAAC,CAAA;AAEb,KAAA;GACD,CAAA;EAED,MAAMmD,KAAK,GAAGA,MAAM;IAClB,OACEtD,cAAA,CAAA8C,aAAA,CAACC,mBAAmB,EAAAQ,QAAA,CAAA;AAClBC,MAAAA,GAAG,EAAEnC,YAAa;AAClBN,MAAAA,QAAQ,EAAEA,QAAS;AACnBD,MAAAA,QAAQ,EAAEA,QAAS;AACnBJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,MAAM,EAAEA,MAAAA;KACJS,EAAAA,KAAK,GAETpB,cAAA,CAAA8C,aAAA,CAACC,UAAY,EAAA;AAACjC,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAC9BZ,KAAK,EACNF,cAAA,CAAA8C,aAAA,CAACC,gBAAkB,EAAA,IAAA,EAChBnC,IAAI,KAAK,SAAS,IAAIM,WAAW,EACjCN,IAAI,KAAK,SAAS,IAAIO,WACL,CACR,CAAC,EACfnB,cAAA,CAAA8C,aAAA,CAACC,UAAY,EAAA;AAACU,MAAAA,KAAK,EAAEzC,IAAK;AAACJ,MAAAA,IAAI,EAAEA,IAAK;AAACG,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EACvDO,KAAK,CAACoC,GAAG,CAACb,GAAG,IAAI;MAChB,OACE7C,cAAA,CAAA8C,aAAA,CAAA,KAAA,EAAA;AAAKD,QAAAA,GAAG,EAAEA,GAAAA;OACR7C,EAAAA,cAAA,CAAA8C,aAAA,CAAA,OAAA,EAAA;AAAOlC,QAAAA,IAAI,EAAC,QAAQ;AAACJ,QAAAA,IAAI,EAAEA,IAAK;AAACgD,QAAAA,GAAG,EAAErB,QAAAA;OAAW,CAAC,EACjDS,cAAc,CAACC,GAAU,CACvB,CAAC,CAAA;KAET,CACW,CACK,CAAC,CAAA;GAEzB,CAAA;EAED,IAAI5B,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEjB,cAAA,CAAA8C,aAAA,CAAA9C,cAAA,CAAA2D,QAAA,EAAA,IAAA,EACG,CAACjB,0BAA0B,IAAIY,KAAK,EAAE,EACtCZ,0BAA0B,IACzB1C,cAAA,CAAA8C,aAAA,CAAA,KAAA,EAAA,IAAA,EACE9C,cAAA,CAAA8C,aAAA,CAACc,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAEnB,0BAA2B;AACpCG,IAAAA,GAAG,EAAC,kBAAkB;AACtBiB,IAAAA,SAAS,EAAC,YAAY;AACtBC,IAAAA,OAAO,EAAE,YAAa;AACtBC,IAAAA,MAAM,EAAE,MAAA;AAAO,GAAA,EAEdV,KAAK,EACC,CACN,CAEP,CAAC,CAAA;AAEP,CAAC,EAAC;AAEFvD,iBAAiB,CAACkE,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAI5BrD,QAAQ,EAAEsD,SAAS,CAACC,IAAI;EAIxBxD,QAAQ,EAAEuD,SAAS,CAACC,IAAI;EAIxBtD,IAAI,EAAEqD,SAAS,CAACC,IAAI;EAIpB/D,KAAK,EAAE8D,SAAS,CAACE,MAAM;AAIvB3D,EAAAA,IAAI,EAAEyD,SAAS,CAACG,KAAK,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;EAIrElE,YAAY,EAAE+D,SAAS,CAACE,MAAM;EAI9BrE,KAAK,EAAEmE,SAAS,CAACI,MAAM;EAIvBjE,IAAI,EAAE6D,SAAS,CAACI,MAAM;EAItBtE,IAAI,EAAEkE,SAAS,CAACK,OAAO;EAIvBtE,QAAQ,EAAEiE,SAAS,CAACK,OAAO;EAI3BrE,GAAG,EAAEgE,SAAS,CAACE,MAAM;EAIrB9D,SAAS,EAAE4D,SAAS,CAACC,IAAI;EAKzB5D,QAAQ,EAAE2D,SAAS,CAACM,IAAI;EAIxBhE,MAAM,EAAE0D,SAAS,CAACM,IAAI;EAItB1D,MAAM,EAAEoD,SAAS,CAACC,IAAI;EAItBpD,WAAW,EAAEmD,SAAS,CAACK,OAAO;EAI9BvD,WAAW,EAAEkD,SAAS,CAACK,OAAO;EAI9B7D,kBAAkB,EAAEwD,SAAS,CAACI,MAAAA;AAChC,CAAC,GAAA,EAAA,CAAA;AAED1E,iBAAiB,CAAC6E,YAAY,GAAG;AAC/B1E,EAAAA,KAAK,EAAE,QAAQ;AACfG,EAAAA,GAAG,EAAE,CAAC;AACNE,EAAAA,KAAK,EAAE,CAAC;AACRD,EAAAA,YAAY,EAAE,CAAC;AACfG,EAAAA,SAAS,EAAE,IAAI;AACfN,EAAAA,IAAI,EAAEH,cAAA,CAAA8C,aAAA,CAAC+B,OAAQ,MAAE,CAAC;AAClBzE,EAAAA,QAAQ,EAAEJ,cAAA,CAAA8C,aAAA,CAACgC,aAAY,MAAE,CAAC;AAC1B7D,EAAAA,MAAM,EAAE,KAAK;AACbL,EAAAA,IAAI,EAAE,EAAE;AACRC,EAAAA,kBAAkB,EAAE,EAAE;EACtBH,QAAQ,EAAEA,MAAM,EAAC;AACnB,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"CompactStarRating.js","sources":["../../../src/components/inputs/CompactStarRating/CompactStarRating.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState, useMemo } from 'react';\nimport { ReactComponent as StarIconFill } from '../../../icons/star-filled.svg';\nimport { ReactComponent as StarIcon } from '../../../icons/star.svg';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactStarRating.styled';\n\n/**\n * A compact star rating.\n *\n * To remove a rating (i.e. show 0 stars), click the first star to give a 1-star rating, and then click the first star again.\n *\n * ### Import\n *\n * ``` js\n * import { CompactStarRating } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactStarRating from '@ntbjs/react-components/inputs/CompactStarRating'\n * ```\n * ### Values\n * Pass default value as a prop (`defaultValue`) into the component: 0 or state value.\n * ```\n */\n\nconst CompactStarRating = React.forwardRef(function CompactStarRating(\n {\n label,\n icon,\n iconFill,\n max,\n defaultValue,\n value,\n name,\n viewEmpty,\n onChange,\n onBlur,\n type,\n descriptionToolTip,\n disabled,\n readOnly,\n edit,\n hidden,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const stars = Array.from(Array(max).keys());\n const [rating, setRating] = useState('');\n const [hover, setHover] = useState(false);\n const [tempRating, setTempRating] = useState('');\n const [initialRating, setInitialRating] = useState('');\n const inputRef = useRef();\n\n useEffect(() => {\n setRating(value || defaultValue);\n setInitialRating(value || defaultValue);\n }, [value, defaultValue]);\n\n useEffect(() => {\n inputRef.current.value = String(rating);\n if (rating === initialRating) {\n return undefined;\n } else {\n setInitialRating(rating);\n onChange({ target: inputRef.current });\n }\n }, [rating]);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n const starIconRender = key => {\n if (rating > 0 && rating >= key + 1) {\n return (\n <S.StarFill\n readOnly={readOnly}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n if (key + 1 > 1) {\n return setRating(key + 1);\n } else if (key + 1 == 1) {\n setRating(current => {\n return current === 1 ? 0 : key + 1;\n });\n }\n }}\n onMouseEnter={() => {\n setTempRating(key + 1);\n setHover(true);\n }}\n onMouseLeave={() => {\n setTempRating(0);\n setHover(false);\n }}\n $hover={hover && key + 1 <= tempRating}\n type=\"button\"\n key={key}\n >\n {iconFill}\n </S.StarFill>\n );\n } else if (viewEmpty) {\n return (\n <S.Star\n readOnly={readOnly}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n setRating(key + 1);\n }}\n onMouseEnter={() => {\n setTempRating(key + 1);\n setHover(true);\n }}\n onMouseLeave={() => {\n setTempRating(0);\n setHover(false);\n }}\n $hover={hover && key + 1 <= tempRating}\n type=\"button\"\n key={key}\n >\n {icon}\n </S.Star>\n );\n }\n };\n\n const input = () => {\n return (\n <S.CompactStarRating\n ref={forwardedRef}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n onBlur={onBlur}\n {...props}\n >\n <S.labelWidth disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.labelWidth>\n <S.starsWidth $edit={edit} type={type} readOnly={readOnly}>\n {stars.map(key => {\n return (\n <div key={key}>\n <input type=\"number\" name={name} ref={inputRef} />\n {starIconRender(key, value)}\n </div>\n );\n })}\n </S.starsWidth>\n </S.CompactStarRating>\n );\n };\n\n if (hidden) return null;\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactStarRating.propTypes = {\n /**\n * Whether the star rating is read-only\n */\n readOnly: PropTypes.bool,\n /**\n * Whether the star rating is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Displays a grey background to show that the star rating is editable\n */\n edit: PropTypes.bool,\n /**\n * Rating value (0-5)\n */\n value: PropTypes.number,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n /**\n * Default rating value\n */\n defaultValue: PropTypes.number,\n /**\n * Compact star rating label\n */\n label: PropTypes.string,\n /**\n * Name of the text area (used when sending form data)\n */\n name: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<StarIcon />}`\n */\n icon: PropTypes.element,\n /**\n * Filled icon element – E.g: `icon={<StarIcon />}`\n */\n iconFill: PropTypes.element,\n /**\n * Max number of stars: 5\n */\n max: PropTypes.number,\n /**\n * View Compact Star Rating component when no values have been assigned\n */\n viewEmpty: PropTypes.bool,\n\n /**\n * Optional callback function for `onChange`\n */\n onChange: PropTypes.func,\n /**\n * Optional callback function for `onBlur`\n */\n onBlur: PropTypes.func,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element,\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string\n};\n\nCompactStarRating.defaultProps = {\n label: 'Rating',\n max: 5,\n value: 0,\n defaultValue: 0,\n viewEmpty: true,\n icon: <StarIcon />,\n iconFill: <StarIconFill />,\n hidden: false,\n type: '',\n descriptionToolTip: '',\n onChange: () => {}\n};\n\nexport default CompactStarRating;\n"],"names":["CompactStarRating","React","forwardRef","label","icon","iconFill","max","defaultValue","value","name","viewEmpty","onChange","onBlur","type","descriptionToolTip","disabled","readOnly","edit","hidden","loadingIcon","successIcon","props","forwardedRef","stars","Array","from","keys","rating","setRating","useState","hover","setHover","tempRating","setTempRating","initialRating","setInitialRating","inputRef","useRef","useEffect","current","String","undefined","target","memoizedDescriptionToolTip","useMemo","starIconRender","key","createElement","S","onClick","event","preventDefault","onMouseEnter","onMouseLeave","$hover","input","_extends","ref","$edit","map","Fragment","Tooltip","content","placement","trigger","zIndex","propTypes","process","env","NODE_ENV","PropTypes","bool","number","oneOf","string","element","func","defaultProps","StarIcon","StarIconFill"],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ import { ReactComponent as SvgEditNote } from '../../icons/edit-note.svg.js';
|
|
|
7
7
|
import { ReactComponent as SvgLink } from '../../icons/link.svg.js';
|
|
8
8
|
import '../../data/Alert/Alert.js';
|
|
9
9
|
import '../../data/Badge/Badge.js';
|
|
10
|
+
import '../../data/LiveBadge/LiveBadge.js';
|
|
10
11
|
import Popover from '../../data/Popover/Popover.js';
|
|
11
12
|
import '../../data/SeverityBadge/SeverityBadge.js';
|
|
12
13
|
import '../../data/Tab/Tab.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompactTextInput.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.js"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useState, useEffect } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport { ReactComponent as LinkIcon } from '../../../icons/link.svg';\nimport { Tooltip, Popover } from '../../data';\nimport * as S from './CompactTextInput.styled';\n\n// const ConditionalWrapper = ({ condition, wrapper, children }) =>\n// condition ? wrapper(children) : children;\n\n/**\n * Compact text inputs let users enter and edit text in the UI in a compact way. They typically appear in forms or displays of metadata.\n *\n * ### Import\n *\n * ``` js\n * import { CompactTextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactTextInput from '@ntbjs/react-components/inputs/CompactTextInput'\n * ```\n */\nconst CompactTextInput = React.forwardRef(function CompactTextInput(\n {\n label,\n inputType,\n name,\n defaultValue,\n value,\n placeholder,\n link,\n linkTarget,\n linkHandler,\n activeLinkHandler,\n autoSelect,\n readOnly,\n disabled,\n edit,\n type,\n descriptionToolTip,\n bold,\n hidden,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [currentValue, setCurrentValue] = useState();\n const [autoFocus, setAutoFocus] = useState(false);\n\n const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n useTooltipAutoShow(descriptionToolTip);\n\n useEffect(() => {\n setCurrentValue(value || defaultValue);\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onChange = useCallback(\n event => {\n setCurrentValue(event.target.value);\n\n if (!autoFocus) {\n setAutoFocus(true);\n }\n if (isFunction(onChangeProp)) {\n onChangeProp(event);\n }\n },\n [onChangeProp]\n );\n\n const onFocus = useCallback(\n event => {\n if (autoSelect) {\n event.target.select();\n }\n\n if (isFunction(onFocusProp)) {\n onFocusProp(event);\n }\n },\n [autoSelect, readOnly, onFocusProp]\n );\n\n const onBlur = useCallback(\n event => {\n if (isFunction(onBlurProp)) {\n onBlurProp(event);\n }\n },\n [onBlurProp]\n );\n\n const input = () => {\n return (\n <S.Input\n ref={forwardedRef}\n id={uniqueId}\n key={uniqueId}\n autoFocus={autoFocus}\n inputtype={inputType}\n name={name}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n placeholder={placeholder}\n defaultValue={defaultValue}\n value={value ?? ''}\n $type={type}\n $bold={bold}\n $haslink={!isEmpty(link)}\n onFocus={onFocus}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n };\n\n if (hidden) return null;\n\n return (\n <S.CompactTextInput {...props}>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n <S.InputContainer $hasLabel={!isEmpty(label)}>\n {!link && (\n <div onMouseLeave={toolTipOnMouseLeave}>\n <Tooltip\n content={toolTipContent}\n key=\"tooltip1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n disabled={toolTipDisabled}\n zIndex={999999}\n visible={toolTipVisible}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n {link && !readOnly && (\n <div>\n <Popover\n arrow={false}\n content={\n <S.LinkPopoverContainer>\n {activeLinkHandler ? (\n <S.StyledLink\n href={link}\n target={linkTarget}\n onClick={e => {\n if (activeLinkHandler) {\n e.preventDefault();\n linkHandler();\n } else null;\n }}\n rel=\"noreferrer\"\n >\n <LinkIcon />\n {currentValue}\n </S.StyledLink>\n ) : (\n <S.StyledLink href={link} target={linkTarget} rel=\"noreferrer\">\n <LinkIcon />\n {currentValue}\n </S.StyledLink>\n )}\n </S.LinkPopoverContainer>\n }\n key=\"tooltip2\"\n placement=\"bottom-start\"\n trigger=\"focusin\"\n zIndex={999999}\n interactive={true}\n >\n {input()}\n </Popover>\n </div>\n )}\n {link && readOnly && (\n <S.ReadOnlyLinkContainer>\n <S.StyledLink\n href={link}\n rel=\"noreferrer\"\n style={{ display: 'inline-block' }}\n target={linkTarget}\n >\n {currentValue}\n </S.StyledLink>\n </S.ReadOnlyLinkContainer>\n )}\n {!readOnly && !disabled && (\n <>\n <S.InputIconContainer $type={type}>\n <EditNoteIcon />\n </S.InputIconContainer>\n {isEmpty(label) && (\n <S.InputSuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.InputSuccessContainer>\n )}\n </>\n )}\n </S.InputContainer>\n </S.CompactTextInput>\n );\n});\n\nCompactTextInput.propTypes = {\n /**\n * The label of the input field - leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * Displays a light green background to show that an action was successful.\n */\n success: PropTypes.bool,\n /**\n * The input type - eg. `text`, `number`\n */\n inputType: PropTypes.string,\n /**\n * The input name\n */\n name: PropTypes.string,\n /**\n * The default value of the input - creates an uncontrolled input\n */\n defaultValue: PropTypes.string,\n /**\n * The value of the input - creates a controlled input\n */\n value: PropTypes.string,\n /**\n * The placeholder of the input\n */\n placeholder: PropTypes.string,\n /**\n * A URL associated with the input value. Creates a clickable link that accepts full or relative URL\n */\n link: PropTypes.string,\n /**\n * The target for the link. Only applies when the field is in read-only mode\n */\n linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n /**\n * Whether the link has a onClick event.\n */\n linkHandler: PropTypes.func,\n /**\n * Whether the handler should preceed the link behavior.\n */\n activeLinkHandler: PropTypes.bool,\n /**\n * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n */\n autoSelect: PropTypes.bool,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Whether the value is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * There is an error present - 'error be prioritized over warnings if both are set to 'true'.\n */\n // error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Whether to bold the input content - Slightly increases the font size and font weight of the input value\n */\n bold: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Callback for `onChange`\n */\n onChange: PropTypes.func,\n /**\n * Callback for `onFocus`\n */\n onFocus: PropTypes.func,\n /**\n * Callback for `onBlur`\n */\n onBlur: PropTypes.func,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactTextInput.defaultProps = {\n inputType: 'text',\n autoSelect: true,\n linkTarget: '_self',\n bold: false,\n readOnly: false,\n descriptionToolTip: '',\n edit: false,\n hidden: false,\n type: '',\n linkHandler: () => {},\n activeLinkHandler: false,\n onChange: () => {}\n};\n\nexport default CompactTextInput;\n"],"names":["CompactTextInput","React","forwardRef","label","inputType","name","defaultValue","value","placeholder","link","linkTarget","linkHandler","activeLinkHandler","autoSelect","readOnly","disabled","edit","type","descriptionToolTip","bold","hidden","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","currentValue","setCurrentValue","autoFocus","setAutoFocus","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","useCallback","event","target","isFunction","select","input","createElement","S","ref","id","key","inputtype","$edit","$type","$bold","$haslink","isEmpty","htmlFor","$hasLabel","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible","Popover","arrow","href","onClick","e","preventDefault","rel","LinkIcon","interactive","style","display","Fragment","EditNoteIcon","propTypes","process","env","NODE_ENV","PropTypes","string","success","bool","oneOf","func","warning","oneOfType","element","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CompactTextInput.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.js"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useState, useEffect } from 'react';\nimport useTooltipAutoShow from '../../../hooks/useTooltipAutoShow';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport { ReactComponent as LinkIcon } from '../../../icons/link.svg';\nimport { Tooltip, Popover } from '../../data';\nimport * as S from './CompactTextInput.styled';\n\n// const ConditionalWrapper = ({ condition, wrapper, children }) =>\n// condition ? wrapper(children) : children;\n\n/**\n * Compact text inputs let users enter and edit text in the UI in a compact way. They typically appear in forms or displays of metadata.\n *\n * ### Import\n *\n * ``` js\n * import { CompactTextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactTextInput from '@ntbjs/react-components/inputs/CompactTextInput'\n * ```\n */\nconst CompactTextInput = React.forwardRef(function CompactTextInput(\n {\n label,\n inputType,\n name,\n defaultValue,\n value,\n placeholder,\n link,\n linkTarget,\n linkHandler,\n activeLinkHandler,\n autoSelect,\n readOnly,\n disabled,\n edit,\n type,\n descriptionToolTip,\n bold,\n hidden,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [currentValue, setCurrentValue] = useState();\n const [autoFocus, setAutoFocus] = useState(false);\n\n const { toolTipDisabled, toolTipVisible, toolTipOnMouseLeave, toolTipContent } =\n useTooltipAutoShow(descriptionToolTip);\n\n useEffect(() => {\n setCurrentValue(value || defaultValue);\n setAutoFocus(false);\n }, [value, defaultValue]);\n\n const onChange = useCallback(\n event => {\n setCurrentValue(event.target.value);\n\n if (!autoFocus) {\n setAutoFocus(true);\n }\n if (isFunction(onChangeProp)) {\n onChangeProp(event);\n }\n },\n [onChangeProp]\n );\n\n const onFocus = useCallback(\n event => {\n if (autoSelect) {\n event.target.select();\n }\n\n if (isFunction(onFocusProp)) {\n onFocusProp(event);\n }\n },\n [autoSelect, readOnly, onFocusProp]\n );\n\n const onBlur = useCallback(\n event => {\n if (isFunction(onBlurProp)) {\n onBlurProp(event);\n }\n },\n [onBlurProp]\n );\n\n const input = () => {\n return (\n <S.Input\n ref={forwardedRef}\n id={uniqueId}\n key={uniqueId}\n autoFocus={autoFocus}\n inputtype={inputType}\n name={name}\n readOnly={readOnly}\n disabled={disabled}\n $edit={edit}\n placeholder={placeholder}\n defaultValue={defaultValue}\n value={value ?? ''}\n $type={type}\n $bold={bold}\n $haslink={!isEmpty(link)}\n onFocus={onFocus}\n onChange={onChange}\n onBlur={onBlur}\n />\n );\n };\n\n if (hidden) return null;\n\n return (\n <S.CompactTextInput {...props}>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n <S.InputContainer $hasLabel={!isEmpty(label)}>\n {!link && (\n <div onMouseLeave={toolTipOnMouseLeave}>\n <Tooltip\n content={toolTipContent}\n key=\"tooltip1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n disabled={toolTipDisabled}\n zIndex={999999}\n visible={toolTipVisible}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n {link && !readOnly && (\n <div>\n <Popover\n arrow={false}\n content={\n <S.LinkPopoverContainer>\n {activeLinkHandler ? (\n <S.StyledLink\n href={link}\n target={linkTarget}\n onClick={e => {\n if (activeLinkHandler) {\n e.preventDefault();\n linkHandler();\n } else null;\n }}\n rel=\"noreferrer\"\n >\n <LinkIcon />\n {currentValue}\n </S.StyledLink>\n ) : (\n <S.StyledLink href={link} target={linkTarget} rel=\"noreferrer\">\n <LinkIcon />\n {currentValue}\n </S.StyledLink>\n )}\n </S.LinkPopoverContainer>\n }\n key=\"tooltip2\"\n placement=\"bottom-start\"\n trigger=\"focusin\"\n zIndex={999999}\n interactive={true}\n >\n {input()}\n </Popover>\n </div>\n )}\n {link && readOnly && (\n <S.ReadOnlyLinkContainer>\n <S.StyledLink\n href={link}\n rel=\"noreferrer\"\n style={{ display: 'inline-block' }}\n target={linkTarget}\n >\n {currentValue}\n </S.StyledLink>\n </S.ReadOnlyLinkContainer>\n )}\n {!readOnly && !disabled && (\n <>\n <S.InputIconContainer $type={type}>\n <EditNoteIcon />\n </S.InputIconContainer>\n {isEmpty(label) && (\n <S.InputSuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.InputSuccessContainer>\n )}\n </>\n )}\n </S.InputContainer>\n </S.CompactTextInput>\n );\n});\n\nCompactTextInput.propTypes = {\n /**\n * The label of the input field - leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * Displays a light green background to show that an action was successful.\n */\n success: PropTypes.bool,\n /**\n * The input type - eg. `text`, `number`\n */\n inputType: PropTypes.string,\n /**\n * The input name\n */\n name: PropTypes.string,\n /**\n * The default value of the input - creates an uncontrolled input\n */\n defaultValue: PropTypes.string,\n /**\n * The value of the input - creates a controlled input\n */\n value: PropTypes.string,\n /**\n * The placeholder of the input\n */\n placeholder: PropTypes.string,\n /**\n * A URL associated with the input value. Creates a clickable link that accepts full or relative URL\n */\n link: PropTypes.string,\n /**\n * The target for the link. Only applies when the field is in read-only mode\n */\n linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n /**\n * Whether the link has a onClick event.\n */\n linkHandler: PropTypes.func,\n /**\n * Whether the handler should preceed the link behavior.\n */\n activeLinkHandler: PropTypes.bool,\n /**\n * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n */\n autoSelect: PropTypes.bool,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Whether the value is disabled\n */\n disabled: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * There is an error present - 'error be prioritized over warnings if both are set to 'true'.\n */\n // error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Whether to bold the input content - Slightly increases the font size and font weight of the input value\n */\n bold: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * Callback for `onChange`\n */\n onChange: PropTypes.func,\n /**\n * Callback for `onFocus`\n */\n onFocus: PropTypes.func,\n /**\n * Callback for `onBlur`\n */\n onBlur: PropTypes.func,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactTextInput.defaultProps = {\n inputType: 'text',\n autoSelect: true,\n linkTarget: '_self',\n bold: false,\n readOnly: false,\n descriptionToolTip: '',\n edit: false,\n hidden: false,\n type: '',\n linkHandler: () => {},\n activeLinkHandler: false,\n onChange: () => {}\n};\n\nexport default CompactTextInput;\n"],"names":["CompactTextInput","React","forwardRef","label","inputType","name","defaultValue","value","placeholder","link","linkTarget","linkHandler","activeLinkHandler","autoSelect","readOnly","disabled","edit","type","descriptionToolTip","bold","hidden","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","currentValue","setCurrentValue","autoFocus","setAutoFocus","toolTipDisabled","toolTipVisible","toolTipOnMouseLeave","toolTipContent","useTooltipAutoShow","useEffect","useCallback","event","target","isFunction","select","input","createElement","S","ref","id","key","inputtype","$edit","$type","$bold","$haslink","isEmpty","htmlFor","$hasLabel","onMouseLeave","Tooltip","content","placement","trigger","zIndex","visible","Popover","arrow","href","onClick","e","preventDefault","rel","LinkIcon","interactive","style","display","Fragment","EditNoteIcon","propTypes","process","env","NODE_ENV","PropTypes","string","success","bool","oneOf","func","warning","oneOfType","element","defaultProps"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
import { MultiLevelCheckboxSelect as MultiLevelCheckboxSelect$1, PopoverContainer, PopoverHeader, SearchContainer, OptionsContainer, MultiLevelCheckboxSelectInput, Label, Placeholder, Item, ItemLabel, ItemRemoveButton } from './MultiLevelCheckboxSelect.styled.js';
|
|
5
5
|
import '../../data/Alert/Alert.js';
|
|
6
6
|
import '../../data/Badge/Badge.js';
|
|
7
|
+
import '../../data/LiveBadge/LiveBadge.js';
|
|
7
8
|
import Popover from '../../data/Popover/Popover.js';
|
|
8
9
|
import '../../data/SeverityBadge/SeverityBadge.js';
|
|
9
10
|
import '../../data/Tab/Tab.js';
|