genesys-react-components 0.1.0-alpha.4 → 0.1.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -8
- package/build/dxaccordion/DxAccordion.d.ts +3 -8
- package/build/dxaccordion/DxAccordionGroup.d.ts +1 -0
- package/build/dxitemgroup/DxCheckbox.d.ts +17 -0
- package/build/dxitemgroup/DxItemGroup.d.ts +2 -13
- package/build/dxtabbedcontent/DxTabPanel.d.ts +3 -7
- package/build/dxtabbedcontent/DxTabbedContent.d.ts +3 -7
- package/build/index.d.ts +39 -1
- package/build/index.js +88 -43
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,16 +1,54 @@
|
|
|
1
1
|
# Genesys React Components
|
|
2
2
|
|
|
3
|
-
A React component library containing standardized form elements.
|
|
4
|
-
|
|
3
|
+
A React component library containing standardized form elements. Check out the live demo and full documenation at https://purecloudlabs.github.io/genesys-react-components/
|
|
5
4
|
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
+
```sh
|
|
8
|
+
npm i genesys-react-components
|
|
9
|
+
# install peer dependencies if necessary
|
|
10
|
+
npm i genesys-dev-icons uuid
|
|
7
11
|
|
|
12
|
+
# or
|
|
8
13
|
|
|
14
|
+
yarn add genesys-react-components
|
|
15
|
+
# install peer dependencies if necessary
|
|
16
|
+
yarn add genesys-dev-icons uuid
|
|
17
|
+
```
|
|
9
18
|
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import React, { useRef } from 'react';
|
|
23
|
+
import { DxTextbox } from 'genesys-react-components';
|
|
24
|
+
import { GenesysDevIcons } from 'genesys-dev-icons';
|
|
25
|
+
|
|
26
|
+
export default function App() {
|
|
27
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
|
28
|
+
return (
|
|
29
|
+
<div className='app'>
|
|
30
|
+
<DxTextbox
|
|
31
|
+
label='1000ms debounce (default 300), removes focus on value change via onChange callback'
|
|
32
|
+
placeholder='Focus will clear 1 second after you stop typing'
|
|
33
|
+
icon={GenesysDevIcons.AppZoomZoomRight}
|
|
34
|
+
clearButton={true}
|
|
35
|
+
onChange={(value: string) => {
|
|
36
|
+
console.log('1000ms debouncer triggered, clearing focus', value);
|
|
37
|
+
inputRef.current?.blur();
|
|
38
|
+
}}
|
|
39
|
+
changeDebounceMs={1000}
|
|
40
|
+
inputRef={inputRef}
|
|
41
|
+
onFocus={() => console.log('focus')}
|
|
42
|
+
onBlur={() => console.log('blur')}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
10
48
|
|
|
11
|
-
|
|
49
|
+
## Building Locally
|
|
12
50
|
|
|
13
|
-
|
|
51
|
+
### `genesys-react-components` package
|
|
14
52
|
|
|
15
53
|
In the root of the repo, run:
|
|
16
54
|
|
|
@@ -19,11 +57,11 @@ npm i
|
|
|
19
57
|
npm run build
|
|
20
58
|
```
|
|
21
59
|
|
|
22
|
-
This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
|
|
60
|
+
This clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.
|
|
23
61
|
|
|
24
62
|
When validating the package locally, run `npm link` in the root of this repo to create a local symlink in npm for `genesys-react-components` that points to the locally built package. Take note of the _Error: Invalid hook call_ notice in the troubleshooting section below.
|
|
25
63
|
|
|
26
|
-
|
|
64
|
+
### Demo app
|
|
27
65
|
|
|
28
66
|
To build and serve the demo app locally, run:
|
|
29
67
|
|
|
@@ -44,9 +82,19 @@ yarn start
|
|
|
44
82
|
|
|
45
83
|
Run `yarn unlinklib` to revert to using the latest published version of the package.
|
|
46
84
|
|
|
47
|
-
|
|
85
|
+
#### Publishing the demo app
|
|
86
|
+
|
|
87
|
+
Run the following command to publish the demo app to the GitHub Pages site:
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
cd app
|
|
91
|
+
yarn unlink
|
|
92
|
+
yarn publish
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Troubleshooting
|
|
48
96
|
|
|
49
|
-
|
|
97
|
+
### Error: Invalid hook call
|
|
50
98
|
|
|
51
99
|
The following error may be encountered at runtime while running a React app locally when using `npm link genesys-react-components` to load the local package:
|
|
52
100
|
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DxAccordionProps } from '..';
|
|
2
3
|
import './DxAccordion.scss';
|
|
3
|
-
|
|
4
|
-
title: React.ReactNode;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
showOpen?: boolean;
|
|
7
|
-
}
|
|
8
|
-
export default function DxAccordion(props: IProps): JSX.Element;
|
|
9
|
-
export {};
|
|
4
|
+
export default function DxAccordion(props: DxAccordionProps): JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CheckedChangedCallback } from '..';
|
|
3
|
+
import './DxCheckbox.scss';
|
|
4
|
+
interface IProps {
|
|
5
|
+
label: string;
|
|
6
|
+
itemValue: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
checked?: boolean;
|
|
9
|
+
initiallyChecked?: boolean;
|
|
10
|
+
name?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
onCheckChanged?: CheckedChangedCallback;
|
|
13
|
+
useRadioType?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export default function DxCheckbox(props: IProps): JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { DxItemGroupProps } from '..';
|
|
3
3
|
import './DxItemGroup.scss';
|
|
4
|
-
import './checkbox.scss';
|
|
5
4
|
import './radiobutton.scss';
|
|
6
5
|
import './dropdown.scss';
|
|
7
6
|
import './multiselect.scss';
|
|
8
|
-
|
|
9
|
-
title?: string;
|
|
10
|
-
description?: string;
|
|
11
|
-
format: DxItemGroupFormat;
|
|
12
|
-
items: DxItemGroupItem[];
|
|
13
|
-
onItemChanged?: ItemChangedCallback;
|
|
14
|
-
onItemsChanged?: ItemGroupChangedCallback;
|
|
15
|
-
}
|
|
16
|
-
export declare type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
|
|
17
|
-
export default function DxItemGroup(props: IProps): JSX.Element;
|
|
18
|
-
export {};
|
|
7
|
+
export default function DxItemGroup(props: DxItemGroupProps): JSX.Element;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DxTabPanelProps } from '..';
|
|
2
3
|
import './DxTabPanel.scss';
|
|
3
|
-
|
|
4
|
-
title: React.ReactNode;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
}
|
|
7
|
-
export default function DxTabPanel(props: IProps): JSX.Element;
|
|
8
|
-
export {};
|
|
4
|
+
export default function DxTabPanel(props: DxTabPanelProps): JSX.Element;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { DxTabbedContentProps } from '..';
|
|
2
3
|
import './DxTabbedContent.scss';
|
|
3
|
-
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
initialTabId?: number;
|
|
6
|
-
}
|
|
7
|
-
export default function DxTabbedContent(props: IProps): JSX.Element;
|
|
8
|
-
export {};
|
|
4
|
+
export default function DxTabbedContent(props: DxTabbedContentProps): JSX.Element;
|
package/build/index.d.ts
CHANGED
|
@@ -4,24 +4,29 @@ import DxAccordion from './dxaccordion/DxAccordion';
|
|
|
4
4
|
import DxAccordionGroup from './dxaccordion/DxAccordionGroup';
|
|
5
5
|
import DxButton from './dxbutton/DxButton';
|
|
6
6
|
import DxItemGroup from './dxitemgroup/DxItemGroup';
|
|
7
|
+
import DxCheckbox from './dxitemgroup/DxCheckbox';
|
|
7
8
|
import DxLabel from './dxlabel/DxLabel';
|
|
8
9
|
import DxTabbedContent from './dxtabbedcontent/DxTabbedContent';
|
|
9
10
|
import DxTabPanel from './dxtabbedcontent/DxTabPanel';
|
|
10
11
|
import DxTextbox from './dxtextbox/DxTextbox';
|
|
11
12
|
import DxToggle from './dxtoggle/DxToggle';
|
|
12
|
-
export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };
|
|
13
|
+
export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxCheckbox, DxLabel, DxTabbedContent, DxTabPanel, DxTextbox, DxToggle };
|
|
13
14
|
export interface StringChangedCallback {
|
|
14
15
|
(value: string): void;
|
|
15
16
|
}
|
|
16
17
|
export interface BooleanChangedCallback {
|
|
17
18
|
(value?: boolean): void;
|
|
18
19
|
}
|
|
20
|
+
export interface CheckedChangedCallback {
|
|
21
|
+
(checked: boolean): void;
|
|
22
|
+
}
|
|
19
23
|
export interface VoidEventCallback {
|
|
20
24
|
(): void;
|
|
21
25
|
}
|
|
22
26
|
export interface DxItemGroupItem {
|
|
23
27
|
label: string;
|
|
24
28
|
value: string;
|
|
29
|
+
disabled?: boolean;
|
|
25
30
|
}
|
|
26
31
|
export interface DxItemGroupItemValue {
|
|
27
32
|
item: DxItemGroupItem;
|
|
@@ -36,15 +41,19 @@ export interface ItemGroupChangedCallback {
|
|
|
36
41
|
export interface DxToggleProps {
|
|
37
42
|
isTriState?: boolean;
|
|
38
43
|
initialValue?: boolean;
|
|
44
|
+
value?: boolean;
|
|
39
45
|
label?: string;
|
|
40
46
|
description?: string;
|
|
41
47
|
trueIcon?: GenesysDevIcons;
|
|
42
48
|
falseIcon?: GenesysDevIcons;
|
|
49
|
+
disabled?: boolean;
|
|
43
50
|
onChange?: BooleanChangedCallback;
|
|
51
|
+
className?: string;
|
|
44
52
|
}
|
|
45
53
|
export declare type DxTextboxType = 'text' | 'password' | 'email' | 'date' | 'datetime-local' | 'time' | 'integer' | 'decimal';
|
|
46
54
|
export interface DxTextboxProps {
|
|
47
55
|
initialValue?: string;
|
|
56
|
+
value?: string;
|
|
48
57
|
inputType?: DxTextboxType;
|
|
49
58
|
label?: string;
|
|
50
59
|
description?: string;
|
|
@@ -56,4 +65,33 @@ export interface DxTextboxProps {
|
|
|
56
65
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
57
66
|
onFocus?: VoidEventCallback;
|
|
58
67
|
onBlur?: VoidEventCallback;
|
|
68
|
+
disabled?: boolean;
|
|
69
|
+
className?: string;
|
|
70
|
+
}
|
|
71
|
+
export interface DxAccordionProps {
|
|
72
|
+
title: React.ReactNode;
|
|
73
|
+
children: React.ReactNode;
|
|
74
|
+
showOpen?: boolean;
|
|
75
|
+
className?: string;
|
|
76
|
+
}
|
|
77
|
+
export interface DxItemGroupProps {
|
|
78
|
+
title?: string;
|
|
79
|
+
description?: string;
|
|
80
|
+
format: DxItemGroupFormat;
|
|
81
|
+
items: DxItemGroupItem[];
|
|
82
|
+
disabled?: boolean;
|
|
83
|
+
className?: string;
|
|
84
|
+
onItemChanged?: ItemChangedCallback;
|
|
85
|
+
onItemsChanged?: ItemGroupChangedCallback;
|
|
86
|
+
}
|
|
87
|
+
export declare type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';
|
|
88
|
+
export interface DxTabbedContentProps {
|
|
89
|
+
children: React.ReactNode;
|
|
90
|
+
initialTabId?: number;
|
|
91
|
+
className?: string;
|
|
92
|
+
}
|
|
93
|
+
export interface DxTabPanelProps {
|
|
94
|
+
title: React.ReactNode;
|
|
95
|
+
children: React.ReactNode;
|
|
96
|
+
className?: string;
|
|
59
97
|
}
|
package/build/index.js
CHANGED
|
@@ -29,12 +29,12 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z$c = ".dx-accordion {\n margin: 0;\n}\n.dx-accordion .accordion-heading {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: #bfd4e4;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n color: #54565a;\n padding: 13px 20px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.dx-accordion .accordion-heading .icon {\n line-height: 0;\n}\n.dx-accordion .accordion-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-accordion .accordion-content *:first-child {\n margin-top: 0;\n}\n.dx-accordion .accordion-content *:last-child {\n margin-bottom: 0;\n}";
|
|
32
|
+
var css_248z$c = ".dx-accordion {\n margin: 0;\n}\n.dx-accordion .accordion-heading {\n border-width: 0 0 1px 0;\n border-style: solid;\n border-color: #bfd4e4;\n font-style: normal;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n color: #54565a;\n padding: 13px 20px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n}\n.dx-accordion .accordion-heading .icon {\n line-height: 0;\n}\n.dx-accordion .accordion-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-accordion .accordion-content > *:first-child {\n margin-top: 0;\n}\n.dx-accordion .accordion-content > *:last-child {\n margin-bottom: 0;\n}";
|
|
33
33
|
styleInject(css_248z$c);
|
|
34
34
|
|
|
35
35
|
function DxAccordion(props) {
|
|
36
36
|
const [isOpen, setIsOpen] = useState(props.showOpen || false);
|
|
37
|
-
return (React.createElement("div", { className:
|
|
37
|
+
return (React.createElement("div", { className: `dx-accordion${props.className ? ' ' + props.className : ''}` },
|
|
38
38
|
React.createElement("div", { className: 'accordion-heading', onClick: () => setIsOpen(!isOpen) },
|
|
39
39
|
props.title,
|
|
40
40
|
" ",
|
|
@@ -46,10 +46,10 @@ var css_248z$b = ".dx-accordion-group {\n margin: 40px 0;\n}";
|
|
|
46
46
|
styleInject(css_248z$b);
|
|
47
47
|
|
|
48
48
|
function DxAccordionGroup(props) {
|
|
49
|
-
return React.createElement("div", { className:
|
|
49
|
+
return React.createElement("div", { className: `dx-accordion-group${props.className ? ' ' + props.className : ''}` }, props.children);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
var css_248z$a = ".dx-button {\n margin: 15px 10px;\n border-radius: 2px;\n padding: 8px 15px;\n cursor: pointer;\n font-weight: 500;\n}\n.dx-button-primary {\n color: #ffffff;\n border: 1px solid #419bb2;\n background-color: #419bb2;\n}\n.dx-button-primary:hover {\n background-color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: #9aafb540;\n border-color: #9aafb540;\n transition: 0.1s;\n}\n.dx-button-secondary {\n color: #419bb2;\n border: 1px solid #419bb2;\n background-color: #ffffff;\n}\n.dx-button-secondary:hover {\n color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: #8a9a9e;\n background-color: #e0e6e8;\n border-color: #e0e6e8;\n transition: 0.1s;\n}";
|
|
52
|
+
var css_248z$a = ".dx-button {\n margin: 15px 10px;\n border-radius: 2px;\n padding: 8px 15px;\n cursor: pointer;\n font-weight: 500;\n}\n.dx-button-primary {\n color: #ffffff;\n border: 1px solid #419bb2;\n background-color: #419bb2;\n}\n.dx-button-primary:hover {\n background-color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-primary:focus {\n background-color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-primary:disabled {\n background-color: #9aafb540;\n border-color: #9aafb540;\n transition: 0.1s;\n cursor: not-allowed;\n}\n.dx-button-secondary {\n color: #419bb2;\n border: 1px solid #419bb2;\n background-color: #ffffff;\n}\n.dx-button-secondary:hover {\n color: #317b8d;\n border-color: #317b8d;\n transition: 0.1s;\n}\n.dx-button-secondary:focus {\n color: #419bb2;\n border-color: #419bb2;\n box-shadow: 0 0 0 2px #aac9ff;\n transition: 0.1s;\n}\n.dx-button-secondary:disabled {\n color: #8a9a9e;\n background-color: #e0e6e8;\n border-color: #e0e6e8;\n transition: 0.1s;\n cursor: not-allowed;\n}";
|
|
53
53
|
styleInject(css_248z$a);
|
|
54
54
|
|
|
55
55
|
function DxButton(props) {
|
|
@@ -67,39 +67,56 @@ function DxButton(props) {
|
|
|
67
67
|
return (React.createElement("button", { className: classNames.join(' '), type: 'button', onClick: handleClick, disabled: props.disabled === true }, props.children));
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
var css_248z$9 = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}
|
|
70
|
+
var css_248z$9 = ".dx-item-group {\n display: block;\n border: 0;\n margin: 0;\n padding: 0;\n}";
|
|
71
71
|
styleInject(css_248z$9);
|
|
72
72
|
|
|
73
|
-
var css_248z$8 = "
|
|
73
|
+
var css_248z$8 = "";
|
|
74
74
|
styleInject(css_248z$8);
|
|
75
75
|
|
|
76
|
-
var css_248z$7 = ".dx-
|
|
76
|
+
var css_248z$7 = ".dx-select-group {\n appearance: none;\n position: relative;\n}\n.dx-select-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n padding: 8px 32px 8px 12px;\n width: 100%;\n appearance: none;\n}\n.dx-select-group select:focus-visible {\n outline: 2px solid #aac9ff;\n}\n.dx-select-group::after {\n position: absolute;\n bottom: 12px;\n right: 12px;\n content: \"\\f104\";\n font-size: 8px;\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n pointer-events: none;\n}\n.dx-select-group.disabled::after {\n color: #8a9a9e;\n}\n.dx-select-group.disabled select:disabled {\n background-color: #e6ebec;\n border-color: #e8eaed;\n color: #8a9a9e;\n cursor: not-allowed;\n}";
|
|
77
77
|
styleInject(css_248z$7);
|
|
78
78
|
|
|
79
|
-
var css_248z$6 = ".dx-
|
|
79
|
+
var css_248z$6 = ".dx-multiselect-group {\n appearance: none;\n position: relative;\n}\n.dx-multiselect-group select {\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n width: 100%;\n appearance: none;\n scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n outline: 2px solid #aac9ff;\n}\n.dx-multiselect-group select option {\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n -webkit-appearance: none;\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 31px;\n padding: 8px 12px;\n color: #75757a;\n}\n.dx-multiselect-group select option:checked {\n background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);\n}\n.dx-multiselect-group select option:disabled {\n color: #8a9a9e;\n cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 7px;\n height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n background-color: #e6ebec;\n border-color: #e8eaed;\n cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n color: #8a9a9e;\n}";
|
|
80
80
|
styleInject(css_248z$6);
|
|
81
81
|
|
|
82
|
-
var css_248z$5 = ".dx-
|
|
82
|
+
var css_248z$5 = ".dx-label {\n margin: 20px 0;\n display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n display: block;\n font-family: Roboto;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n}\n.dx-label .label-text {\n margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n padding: 6px 20px;\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n}\n.dx-label .input-description .icon {\n color: #597393;\n line-height: 0;\n}";
|
|
83
83
|
styleInject(css_248z$5);
|
|
84
84
|
|
|
85
|
-
var css_248z$4 = ".dx-label {\n margin: 20px 0;\n display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n display: block;\n font-family: Roboto;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: #75757a;\n}\n.dx-label .label-text {\n margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n padding: 6px 20px;\n display: flex;\n flex-flow: row nowrap;\n gap: 8px;\n}\n.dx-label .input-description .icon {\n color: #597393;\n line-height: 0;\n}";
|
|
86
|
-
styleInject(css_248z$4);
|
|
87
|
-
|
|
88
85
|
function DxLabel(props) {
|
|
89
86
|
const hasLabel = props.label && props.label !== '';
|
|
90
87
|
const description = props.description ? (React.createElement("div", { className: 'input-description' },
|
|
91
88
|
React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppInfoSolid }),
|
|
92
89
|
React.createElement("span", null, props.description))) : undefined;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
props.label ? React.createElement("legend", { className: 'label-text' }, props.label) : undefined,
|
|
96
|
-
props.children,
|
|
97
|
-
description));
|
|
98
|
-
}
|
|
99
|
-
return (React.createElement("label", { className: 'dx-label ' + props.className || '' },
|
|
90
|
+
const contents = (React.createElement(React.Fragment, null,
|
|
91
|
+
' ',
|
|
100
92
|
hasLabel ? React.createElement("span", { className: 'label-text' }, props.label) : undefined,
|
|
101
93
|
props.children,
|
|
102
94
|
description));
|
|
95
|
+
const className = `dx-label${props.className ? ' ' + props.className : ''}`;
|
|
96
|
+
if (props.useFieldset) {
|
|
97
|
+
return React.createElement("fieldset", { className: className }, contents);
|
|
98
|
+
}
|
|
99
|
+
return React.createElement("label", { className: className }, contents);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
var css_248z$4 = ".dx-checkbox {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n margin-top: 0;\n}\n.dx-checkbox .label-text {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 12px;\n line-height: 18px;\n color: #75757a;\n}\n.dx-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid #8a96a3;\n border-radius: 2px;\n background-color: #ffffff;\n flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n background-color: #8a96a3;\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n display: block;\n position: relative;\n top: 7px;\n left: 3px;\n font-size: 9px;\n line-height: 0;\n color: #ffffff;\n content: \"\\f103\";\n font-family: genesys-dev-icons !important;\n font-style: normal;\n font-weight: normal !important;\n font-feature-settings: normal;\n font-variant: normal;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n border-color: #4d5061;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n outline: #aac9ff solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox input[type=radio] {\n -webkit-appearance: none;\n appearance: none;\n margin: 0 8px 0 0;\n width: 16px;\n height: 16px;\n border: 1px solid #8a96a3;\n border-radius: 8px;\n background-color: #ffffff;\n flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n content: \"\";\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 8px;\n position: relative;\n top: 2px;\n left: 2px;\n background-color: #8a96a3;\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n border-color: #4d5061;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n outline: #aac9ff solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n outline: 0;\n}\n.dx-checkbox.disabled {\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n border-color: #e8eaed;\n cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n background-color: #e8eaed;\n cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n margin: 0;\n}";
|
|
103
|
+
styleInject(css_248z$4);
|
|
104
|
+
|
|
105
|
+
function DxCheckbox(props) {
|
|
106
|
+
let initialValue = props.checked !== undefined ? props.checked : props.initiallyChecked || false;
|
|
107
|
+
const [checked, setChecked] = useState(initialValue);
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
if (props.checked === undefined || props.checked === checked)
|
|
110
|
+
return;
|
|
111
|
+
setChecked(props.checked);
|
|
112
|
+
}, [props.checked]);
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
if (props.onCheckChanged)
|
|
115
|
+
props.onCheckChanged(checked);
|
|
116
|
+
}, [checked]);
|
|
117
|
+
return (React.createElement("label", { className: `dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}` },
|
|
118
|
+
React.createElement("input", { type: props.useRadioType ? 'radio' : 'checkbox', name: props.name, id: props.label, value: props.itemValue, checked: checked, onChange: (e) => setChecked(e.target.checked), disabled: props.disabled === true }),
|
|
119
|
+
React.createElement("span", { className: 'label-text' }, props.label)));
|
|
103
120
|
}
|
|
104
121
|
|
|
105
122
|
function DxItemGroup(props) {
|
|
@@ -113,36 +130,50 @@ function DxItemGroup(props) {
|
|
|
113
130
|
props.onItemsChanged(data);
|
|
114
131
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
115
132
|
}, [data]);
|
|
116
|
-
// Handle
|
|
117
|
-
const
|
|
133
|
+
// Handle individual item changed
|
|
134
|
+
const itemChanged = (idx, item, checked) => {
|
|
118
135
|
if (props.onItemChanged)
|
|
119
|
-
props.onItemChanged(item,
|
|
136
|
+
props.onItemChanged(item, checked);
|
|
120
137
|
let newData = [...data];
|
|
121
138
|
// Unselect everything if it's radio buttons
|
|
122
139
|
if (props.format === 'radio')
|
|
123
140
|
newData.forEach((value) => (value.isSelected = false));
|
|
124
141
|
// Set the selected state of the new item
|
|
125
|
-
newData[idx].isSelected =
|
|
142
|
+
newData[idx].isSelected = checked;
|
|
143
|
+
setData(newData);
|
|
144
|
+
};
|
|
145
|
+
const selectChanged = (e) => {
|
|
146
|
+
const options = e.target.options;
|
|
147
|
+
let newData = [...data];
|
|
148
|
+
// Assign selected value for each item in the list
|
|
149
|
+
for (let i = 0; i < options.length; i++) {
|
|
150
|
+
const thisItem = newData.find((value) => value.item.value === options[i].value);
|
|
151
|
+
thisItem.isSelected = options[i].selected;
|
|
152
|
+
}
|
|
153
|
+
// Update entire data list
|
|
126
154
|
setData(newData);
|
|
155
|
+
// Trigger individual update
|
|
156
|
+
const changedItemIdx = newData.findIndex((value) => value.item.value === e.target.value);
|
|
157
|
+
if (changedItemIdx >= 0)
|
|
158
|
+
itemChanged(changedItemIdx, newData[changedItemIdx].item, newData[changedItemIdx].isSelected);
|
|
127
159
|
};
|
|
128
160
|
switch (props.format) {
|
|
129
161
|
case 'multiselect':
|
|
130
162
|
case 'dropdown': {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
163
|
+
const isMulti = props.format === 'multiselect';
|
|
164
|
+
return (React.createElement(DxLabel, { label: props.title, description: props.description, className: props.className },
|
|
165
|
+
React.createElement("div", { className: `dx-item-group${isMulti ? ' dx-multiselect-group' : ' dx-select-group'}${props.disabled ? ' disabled' : ''}` },
|
|
166
|
+
React.createElement("select", { multiple: isMulti, disabled: props.disabled === true, onChange: (e) => selectChanged(e) }, data.map((d, i) => (React.createElement("option", { key: i, value: d.item.value, disabled: d.item.disabled }, d.item.label)))))));
|
|
134
167
|
}
|
|
135
168
|
case 'checkbox':
|
|
136
169
|
case 'radio':
|
|
137
170
|
default: {
|
|
138
|
-
return (React.createElement(DxLabel, { label: props.title, description: props.description, className:
|
|
139
|
-
React.createElement("input", { type: props.format, name: props.format === 'checkbox' ? `${id}-${i}` : id, id: d.item.label, value: d.item.value, checked: d.isSelected, onChange: (e) => onChange(i, d.item, e) }),
|
|
140
|
-
React.createElement("span", { className: 'label-text' }, d.item.label))))));
|
|
171
|
+
return (React.createElement(DxLabel, { label: props.title, description: props.description, className: `dx-item-group${props.disabled ? ' disabled' : ''}${props.className ? ' ' + props.className : ''}`, useFieldset: true }, data.map((d, i) => (React.createElement(DxCheckbox, { key: i, name: props.format === 'checkbox' ? `${id}-${i}` : id, label: d.item.label, itemValue: d.item.value, initiallyChecked: d.isSelected, onCheckChanged: (checked) => itemChanged(i, d.item, checked), useRadioType: props.format === 'radio', disabled: props.disabled || d.item.disabled })))));
|
|
141
172
|
}
|
|
142
173
|
}
|
|
143
174
|
}
|
|
144
175
|
|
|
145
|
-
var css_248z$3 = ".dx-tabbed-content {\n margin: 40px 0;\n}\n.dx-tabbed-content .tab-titles {\n border-bottom: 1px solid #bfd4e4;\n font-weight: normal;\n font-size: 14px;\n line-height: 20px;\n}\n.dx-tabbed-content .tab-titles .tab-title {\n display: inline-block;\n padding: 5px 20px;\n border-bottom: 1px solid transparent;\n cursor: pointer;\n}\n.dx-tabbed-content .tab-titles .tab-title.active {\n border-bottom-color: #597393;\n font-weight: bold;\n}\n.dx-tabbed-content .tab-titles .tab-title p {\n margin: 0;\n display: inline;\n}\n.dx-tabbed-content .tab-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-tabbed-content .tab-content *:first-child {\n margin-top: 0;\n}\n.dx-tabbed-content .tab-content *:last-child {\n margin-bottom: 0;\n}";
|
|
176
|
+
var css_248z$3 = ".dx-tabbed-content {\n margin: 40px 0;\n}\n.dx-tabbed-content .tab-titles {\n border-bottom: 1px solid #bfd4e4;\n font-weight: normal;\n font-size: 14px;\n line-height: 20px;\n}\n.dx-tabbed-content .tab-titles .tab-title {\n display: inline-block;\n padding: 5px 20px;\n border-bottom: 1px solid transparent;\n cursor: pointer;\n}\n.dx-tabbed-content .tab-titles .tab-title:hover {\n border-color: #bfd4e4;\n}\n.dx-tabbed-content .tab-titles .tab-title.active {\n border-bottom-color: #597393;\n font-weight: bold;\n}\n.dx-tabbed-content .tab-titles .tab-title p {\n margin: 0;\n display: inline;\n}\n.dx-tabbed-content .tab-content {\n padding: 13px 20px 20px 20px;\n border-bottom: 1px solid #bfd4e4;\n}\n.dx-tabbed-content .tab-content > *:first-child {\n margin-top: 0;\n}\n.dx-tabbed-content .tab-content > *:last-child {\n margin-bottom: 0;\n}";
|
|
146
177
|
styleInject(css_248z$3);
|
|
147
178
|
|
|
148
179
|
function DxTabbedContent(props) {
|
|
@@ -154,7 +185,7 @@ function DxTabbedContent(props) {
|
|
|
154
185
|
return 'Unknown title';
|
|
155
186
|
return child.props.title;
|
|
156
187
|
}));
|
|
157
|
-
return (React.createElement("div", { className:
|
|
188
|
+
return (React.createElement("div", { className: `dx-tabbed-content${props.className ? ' ' + props.className : ''}` },
|
|
158
189
|
React.createElement("div", { className: 'tab-titles' }, titles.map((title, i) => (React.createElement("span", { key: i, className: `tab-title${i === activeTab ? ' active' : ''}`, onClick: () => setActiveTab(i) }, title)))),
|
|
159
190
|
React.createElement("div", { className: 'tab-content' }, React.Children.toArray(props.children)[activeTab])));
|
|
160
191
|
}
|
|
@@ -163,15 +194,15 @@ var css_248z$2 = "";
|
|
|
163
194
|
styleInject(css_248z$2);
|
|
164
195
|
|
|
165
196
|
function DxTabPanel(props) {
|
|
166
|
-
return React.createElement("div", { className:
|
|
197
|
+
return React.createElement("div", { className: `dx-tab-panel${props.className ? ' ' + props.className : ''}` }, props.children);
|
|
167
198
|
}
|
|
168
199
|
|
|
169
|
-
var css_248z$1 = ".dx-textbox {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n border: 1px solid #c6cbd1;\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\n}\n.dx-textbox.with-label {\n margin-top: 0;\n}\n.dx-textbox:focus-within {\n outline: #aac9ff solid 2px;\n}\n.dx-textbox .icon {\n display: block;\n flex: none;\n color: #75757a;\n}\n.dx-textbox .icon.input-icon {\n font-size: 14px;\n line-height: 0;\n}\n.dx-textbox .icon.clear-icon {\n font-size: 11px;\n line-height: 0;\n cursor: pointer;\n padding: 4px;\n margin-right: -4px;\n}\n.dx-textbox input {\n flex-grow: 1;\n border: 0;\n background:
|
|
200
|
+
var css_248z$1 = ".dx-textbox {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n border: 1px solid #c6cbd1;\n border-radius: 2px;\n margin: 0;\n padding: 0 10px;\n height: 32px;\n background-color: #ffffff;\n}\n.dx-textbox.with-label {\n margin-top: 0;\n}\n.dx-textbox:focus-within {\n outline: #aac9ff solid 2px;\n}\n.dx-textbox .icon {\n display: block;\n flex: none;\n color: #75757a;\n}\n.dx-textbox .icon.input-icon {\n font-size: 14px;\n line-height: 0;\n}\n.dx-textbox .icon.clear-icon {\n font-size: 11px;\n line-height: 0;\n cursor: pointer;\n padding: 4px;\n margin-right: -4px;\n}\n.dx-textbox input {\n flex-grow: 1;\n border: 0;\n background: transparent;\n box-sizing: border-box;\n height: 32px;\n width: 100%;\n padding: 0;\n margin: 0;\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 16px;\n color: #272d2d;\n}\n.dx-textbox input:focus-visible {\n outline: 0;\n}\n.dx-textbox input::placeholder {\n font-style: normal;\n font-weight: 300;\n font-size: 14px;\n line-height: 16px;\n color: #757576;\n}\n.dx-textbox.disabled {\n background-color: #e6ebec;\n border-color: #e8eaed;\n cursor: not-allowed;\n}\n.dx-textbox.disabled input {\n cursor: not-allowed;\n color: #75757a;\n}\n.dx-textbox.disabled .icon,\n.dx-textbox.disabled input::placeholder {\n color: #ffffff;\n}";
|
|
170
201
|
styleInject(css_248z$1);
|
|
171
202
|
|
|
172
203
|
function DxTextbox(props) {
|
|
173
204
|
const [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);
|
|
174
|
-
const [value, setValue] = useState(props.initialValue || '');
|
|
205
|
+
const [value, setValue] = useState(props.initialValue || props.value || '');
|
|
175
206
|
const [isFocused, setIsFocused] = useState(false);
|
|
176
207
|
const [escapePressed, setEscapePressed] = useState(Date.now());
|
|
177
208
|
const [step, setStep] = useState(undefined);
|
|
@@ -184,6 +215,10 @@ function DxTextbox(props) {
|
|
|
184
215
|
document.removeEventListener('keydown', globalKeyBindings, false);
|
|
185
216
|
};
|
|
186
217
|
}, []);
|
|
218
|
+
// Value prop updated
|
|
219
|
+
useEffect(() => {
|
|
220
|
+
setValue(props.value || '');
|
|
221
|
+
}, [props.value]);
|
|
187
222
|
// Escape pressed
|
|
188
223
|
useEffect(() => {
|
|
189
224
|
var _a;
|
|
@@ -244,7 +279,7 @@ function DxTextbox(props) {
|
|
|
244
279
|
if (inputType === 'integer' || inputType === 'decimal')
|
|
245
280
|
inputType = 'number';
|
|
246
281
|
// TODO: handle props.inputType
|
|
247
|
-
let component = (React.createElement("div", { className: `dx-textbox${hasLabel ? ' with-label' : ''}`, style: {} },
|
|
282
|
+
let component = (React.createElement("div", { className: `dx-textbox${hasLabel ? ' with-label' : ''}${props.disabled ? ' disabled' : ''}`, style: {} },
|
|
248
283
|
props.icon ? React.createElement(GenesysDevIcon, { icon: props.icon, className: 'input-icon' }) : undefined,
|
|
249
284
|
React.createElement("input", { className: 'dx-input', type: inputType, step: step, value: value, placeholder: props.placeholder, onChange: (e) => setValue(e.target.value), ref: inputRef, onFocus: () => {
|
|
250
285
|
setIsFocused(true);
|
|
@@ -254,25 +289,35 @@ function DxTextbox(props) {
|
|
|
254
289
|
setIsFocused(false);
|
|
255
290
|
if (props.onBlur)
|
|
256
291
|
props.onBlur();
|
|
257
|
-
} }),
|
|
258
|
-
props.clearButton && (value || isFocused) ? (React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppTimes, className: 'clear-icon', onClick: () => setValue('') })) : undefined));
|
|
292
|
+
}, disabled: props.disabled === true }),
|
|
293
|
+
props.clearButton && (value || isFocused) && !props.disabled ? (React.createElement(GenesysDevIcon, { icon: GenesysDevIcons.AppTimes, className: 'clear-icon', onClick: () => setValue('') })) : undefined));
|
|
259
294
|
// Render
|
|
260
|
-
return (React.createElement(DxLabel, { label: props.label, description: props.description }, component));
|
|
295
|
+
return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className }, component));
|
|
261
296
|
}
|
|
262
297
|
|
|
263
|
-
var css_248z = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n background: #f5f8fb;\n border: 1px solid #c6cbd1;\n border-radius: 6px;\n height: 26px;\n padding: 0px 4px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 2px;\n cursor: pointer;\n}\n.dx-toggle-container .dx-toggle:hover .slider {\n border-color: #aac9ff;\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: #c4c4c4;\n}\n.dx-toggle-container .dx-toggle .clear-placeholder {\n width: 19px;\n padding: 0 1px 0 0;\n margin: 0;\n display: block;\n}\n.dx-toggle-container .dx-toggle .slider {\n height: 22px;\n width: 22px;\n border-radius: 22px;\n background-color: #419bb2;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n}\n.dx-toggle-container .dx-toggle .slider .icon {\n font-size: 10px;\n line-height: 0;\n color: #ffffff;\n padding: 0;\n margin: 0;\n}";
|
|
298
|
+
var css_248z = ".dx-toggle-container {\n display: inline-block;\n}\n.dx-toggle-container .dx-toggle {\n background: #f5f8fb;\n border: 1px solid #c6cbd1;\n border-radius: 6px;\n height: 26px;\n padding: 0px 4px;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: center;\n gap: 2px;\n cursor: pointer;\n}\n.dx-toggle-container .dx-toggle:hover .slider {\n border-color: #aac9ff;\n}\n.dx-toggle-container .dx-toggle .icon {\n font-size: 10px;\n line-height: 0;\n margin: 0 5px;\n color: #c4c4c4;\n}\n.dx-toggle-container .dx-toggle .clear-placeholder {\n width: 19px;\n padding: 0 1px 0 0;\n margin: 0;\n display: block;\n}\n.dx-toggle-container .dx-toggle .slider {\n height: 22px;\n width: 22px;\n border-radius: 22px;\n background-color: #419bb2;\n box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n}\n.dx-toggle-container .dx-toggle .slider .icon {\n font-size: 10px;\n line-height: 0;\n color: #ffffff;\n padding: 0;\n margin: 0;\n}\n.dx-toggle-container.disabled .dx-toggle {\n border-color: #e8eaed;\n color: #ffffff;\n cursor: not-allowed;\n}\n.dx-toggle-container.disabled .dx-toggle:hover .slider {\n border-color: transparent;\n}\n.dx-toggle-container.disabled .dx-toggle .slider {\n color: #8a9a9e;\n background-color: #e0e6e8;\n}";
|
|
264
299
|
styleInject(css_248z);
|
|
265
300
|
|
|
266
301
|
function DxToggle(props) {
|
|
267
|
-
|
|
302
|
+
let initialValue = props.value !== undefined ? props.value : props.initialValue;
|
|
303
|
+
if (!props.isTriState)
|
|
304
|
+
initialValue = initialValue || false;
|
|
305
|
+
const [value, setValue] = useState(initialValue);
|
|
268
306
|
const trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;
|
|
269
307
|
const falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;
|
|
308
|
+
useEffect(() => {
|
|
309
|
+
if (props.initialValue || props.value === value || (!props.isTriState && props.value === undefined))
|
|
310
|
+
return;
|
|
311
|
+
setValue(props.value);
|
|
312
|
+
}, [props.value]);
|
|
270
313
|
useEffect(() => {
|
|
271
314
|
if (props.onChange)
|
|
272
315
|
props.onChange(value);
|
|
273
316
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
274
317
|
}, [value]);
|
|
275
318
|
const toggleValue = () => {
|
|
319
|
+
if (props.disabled)
|
|
320
|
+
return;
|
|
276
321
|
if (props.isTriState) {
|
|
277
322
|
if (value === undefined)
|
|
278
323
|
setValue(true);
|
|
@@ -285,8 +330,8 @@ function DxToggle(props) {
|
|
|
285
330
|
setValue(!value);
|
|
286
331
|
}
|
|
287
332
|
};
|
|
288
|
-
return (React.createElement(DxLabel, { label: props.label, description: props.description },
|
|
289
|
-
React.createElement("div", { className:
|
|
333
|
+
return (React.createElement(DxLabel, { label: props.label, description: props.description, className: props.className },
|
|
334
|
+
React.createElement("div", { className: `dx-toggle-container${props.disabled ? ' disabled' : ''}` },
|
|
290
335
|
React.createElement("div", { className: 'dx-toggle', onClick: toggleValue },
|
|
291
336
|
value !== false ? React.createElement(GenesysDevIcon, { icon: falseIcon }) : undefined,
|
|
292
337
|
value === true && props.isTriState ? React.createElement("div", { className: 'clear-placeholder' }, "\u00A0") : undefined,
|
|
@@ -295,5 +340,5 @@ function DxToggle(props) {
|
|
|
295
340
|
value !== true ? React.createElement(GenesysDevIcon, { icon: trueIcon }) : undefined))));
|
|
296
341
|
}
|
|
297
342
|
|
|
298
|
-
export { DxAccordion, DxAccordionGroup, DxButton, DxItemGroup, DxLabel, DxTabPanel, DxTabbedContent, DxTextbox, DxToggle };
|
|
343
|
+
export { DxAccordion, DxAccordionGroup, DxButton, DxCheckbox, DxItemGroup, DxLabel, DxTabPanel, DxTabbedContent, DxTextbox, DxToggle };
|
|
299
344
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/dxaccordion/DxAccordion.tsx","../src/dxaccordion/DxAccordionGroup.tsx","../src/dxbutton/DxButton.tsx","../src/dxlabel/DxLabel.tsx","../src/dxitemgroup/DxItemGroup.tsx","../src/dxtabbedcontent/DxTabbedContent.tsx","../src/dxtabbedcontent/DxTabPanel.tsx","../src/dxtextbox/DxTextbox.tsx","../src/dxtoggle/DxToggle.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useState } from 'react';\n\nimport './DxAccordion.scss';\n\ninterface IProps {\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n\tshowOpen?: boolean;\n}\n\nexport default function DxAccordion(props: IProps) {\n\tconst [isOpen, setIsOpen] = useState(props.showOpen || false);\n\n\treturn (\n\t\t<div className='dx-accordion'>\n\t\t\t<div className='accordion-heading' onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t{props.title} <GenesysDevIcon icon={isOpen ? GenesysDevIcons.AppChevronUp : GenesysDevIcons.AppChevronDown} />\n\t\t\t</div>\n\t\t\t{isOpen ? <div className='accordion-content'>{props.children}</div> : undefined}\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxAccordionGroup.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n}\n\nexport default function DxAccordionGroup(props: IProps) {\n\treturn <div className='dx-accordion-group'>{props.children}</div>;\n}\n","import React from 'react';\nimport { VoidEventCallback } from '..';\n\nimport './DxButton.scss';\n\ninterface IProps {\n\ttype?: 'primary' | 'secondary';\n\tdisabled?: boolean;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonClick?: VoidEventCallback;\n}\n\nexport default function DxButton(props: IProps) {\n\tlet classNames = ['dx-button'];\n\tclassNames.push(`dx-button-${props.type || 'primary'}`);\n\tif (props.className) classNames.push(props.className);\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n\t\tif (!props.onClick) return;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tprops.onClick();\n\t};\n\n\treturn (\n\t\t<button className={classNames.join(' ')} type='button' onClick={handleClick} disabled={props.disabled === true}>\n\t\t\t{props.children}\n\t\t</button>\n\t);\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React from 'react';\n\nimport './DxLabel.scss';\n\ninterface IProps {\n\tlabel?: string;\n\tdescription?: string;\n\tuseFieldset?: boolean;\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxLabel(props: IProps) {\n\tconst hasLabel = props.label && props.label !== '';\n\n\tconst description = props.description ? (\n\t\t<div className='input-description'>\n\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />\n\t\t\t<span>{props.description}</span>\n\t\t</div>\n\t) : undefined;\n\n\tif (props.useFieldset) {\n\t\treturn (\n\t\t\t<fieldset className={'dx-label ' + props.className || ''}>\n\t\t\t\t{props.label ? <legend className='label-text'>{props.label}</legend> : undefined}\n\t\t\t\t{props.children}\n\t\t\t\t{description}\n\t\t\t</fieldset>\n\t\t);\n\t}\n\treturn (\n\t\t<label className={'dx-label ' + props.className || ''}>\n\t\t\t{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}\n\t\t\t{props.children}\n\t\t\t{description}\n\t\t</label>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { DxItemGroupItem, DxItemGroupItemValue, ItemChangedCallback, ItemGroupChangedCallback } from '..';\n\nimport './DxItemGroup.scss';\nimport './checkbox.scss';\nimport './radiobutton.scss';\nimport './dropdown.scss';\nimport './multiselect.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\ninterface IProps {\n\ttitle?: string;\n\tdescription?: string;\n\tformat: DxItemGroupFormat;\n\titems: DxItemGroupItem[];\n\tonItemChanged?: ItemChangedCallback;\n\tonItemsChanged?: ItemGroupChangedCallback;\n}\n\nexport type DxItemGroupFormat = 'checkbox' | 'radio' | 'dropdown' | 'multiselect';\n\nexport default function DxItemGroup(props: IProps) {\n\tconst [data, setData] = useState<DxItemGroupItemValue[]>(\n\t\tprops.items.map((item) => {\n\t\t\treturn { item, isSelected: false };\n\t\t})\n\t);\n\tconst [id] = useState(uuid());\n\n\t// data changed\n\tuseEffect(() => {\n\t\tif (props.onItemsChanged) props.onItemsChanged(data);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [data]);\n\n\t// Handle checkbox changed\n\tconst onChange = (idx: number, item: DxItemGroupItem, e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (props.onItemChanged) props.onItemChanged(item, e.target.checked);\n\t\tlet newData = [...data];\n\t\t// Unselect everything if it's radio buttons\n\t\tif (props.format === 'radio') newData.forEach((value) => (value.isSelected = false));\n\t\t// Set the selected state of the new item\n\t\tnewData[idx].isSelected = e.target.checked;\n\t\tsetData(newData);\n\t};\n\n\tswitch (props.format) {\n\t\tcase 'multiselect':\n\t\tcase 'dropdown': {\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description}>\n\t\t\t\t\t<div className={`dx-item-group${props.format === 'multiselect' ? ' dx-multiselect-group' : ' dx-select-group'}`}>\n\t\t\t\t\t\t<select multiple={props.format === 'multiselect'}>\n\t\t\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t\t\t<option key={i} value={d.item.value}>\n\t\t\t\t\t\t\t\t\t{d.item.label}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t\tcase 'checkbox':\n\t\tcase 'radio':\n\t\tdefault: {\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description} className='dx-item-group' useFieldset={true}>\n\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t<label key={i}>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype={props.format}\n\t\t\t\t\t\t\t\tname={props.format === 'checkbox' ? `${id}-${i}` : id}\n\t\t\t\t\t\t\t\tid={d.item.label}\n\t\t\t\t\t\t\t\tvalue={d.item.value}\n\t\t\t\t\t\t\t\tchecked={d.isSelected}\n\t\t\t\t\t\t\t\tonChange={(e) => onChange(i, d.item, e)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className='label-text'>{d.item.label}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t))}\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t}\n}\n","import React, { useState } from 'react';\n\nimport './DxTabbedContent.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n\tinitialTabId?: number;\n}\n\nexport default function DxTabbedContent(props: IProps) {\n\tconst [activeTab, setActiveTab] = useState(props.initialTabId || 0);\n\tconst [titles] = useState<React.ReactNode[]>(\n\t\t// Scrape titles from child elements\n\t\tReact.Children.toArray(props.children).map((child: any) => {\n\t\t\tif (!child || !child.props || !child.props.title) return 'Unknown title';\n\t\t\treturn child.props.title;\n\t\t})\n\t);\n\n\treturn (\n\t\t<div className='dx-tabbed-content'>\n\t\t\t<div className='tab-titles'>\n\t\t\t\t{titles.map((title, i) => (\n\t\t\t\t\t<span key={i} className={`tab-title${i === activeTab ? ' active' : ''}`} onClick={() => setActiveTab(i)}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className='tab-content'>{React.Children.toArray(props.children)[activeTab]}</div>\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxTabPanel.scss';\n\ninterface IProps {\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxTabPanel(props: IProps) {\n\treturn <div className='dx-tab-panel'>{props.children}</div>;\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport DxLabel from '../dxlabel/DxLabel';\nimport { DxTextboxProps, StringChangedCallback, VoidEventCallback } from '..';\n\nimport './DxTextbox.scss';\n\nexport default function DxTextbox(props: DxTextboxProps) {\n\tconst [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);\n\tconst [value, setValue] = useState(props.initialValue || '');\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [escapePressed, setEscapePressed] = useState(Date.now());\n\tconst [step, setStep] = useState<string | number | undefined>(undefined);\n\tlet [timer, setTimer] = useState(undefined as unknown as ReturnType<typeof setTimeout>);\n\n\t// Constructor\n\tuseEffect(() => {\n\t\t// Register global key bindings\n\t\tdocument.addEventListener('keydown', globalKeyBindings, false);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', globalKeyBindings, false);\n\t\t};\n\t}, []);\n\n\t// Escape pressed\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\t\tsetValue('');\n\t\tinputRef.current?.blur();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [escapePressed]);\n\n\t// Value changed\n\tuseEffect(() => {\n\t\tif (props.inputType === 'decimal') {\n\t\t\t// Normalize step setting\n\t\t\tif (!isNaN(parseFloat(value))) {\n\t\t\t\tconst match = /\\.(.+)/.exec(value);\n\t\t\t\tconsole.log(match);\n\t\t\t\tif (match) {\n\t\t\t\t\tconst s = `0.${Array.apply(null, Array(match[1].length - 1))\n\t\t\t\t\t\t.map(() => '0')\n\t\t\t\t\t\t.join('')}1`;\n\t\t\t\t\tconsole.log(s);\n\t\t\t\t\tsetStep(s);\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (props.inputType === 'integer') {\n\t\t\t// Overwrite value as integer to forcibly truncate floating point numbers\n\t\t\tsetValue(parseInt(value).toString());\n\t\t}\n\n\t\t// Debounce onChange notification\n\t\tif (!props.onChange) return;\n\t\tclearTimeout(timer);\n\t\tsetTimer(setTimeout(() => (props.onChange ? props.onChange(value) : undefined), debounceMs));\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// Update state from props\n\tuseEffect(() => {\n\t\tsetDebounceMs(props.changeDebounceMs || 300);\n\t}, [props.changeDebounceMs]);\n\n\t// Normalize inputRef\n\tlet inputRef = useRef<HTMLInputElement>(null);\n\tif (props.inputRef) inputRef = props.inputRef;\n\tconst hasLabel = props.label && props.label !== '';\n\n\t// Global key bindings\n\tfunction globalKeyBindings(event: KeyboardEvent) {\n\t\t// Escape - cancel search\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\t\t\tsetEscapePressed(Date.now());\n\t\t\treturn;\n\t\t}\n\t}\n\n\t// Normalize input type\n\tlet inputType: React.HTMLInputTypeAttribute | undefined = props.inputType;\n\tif (inputType === 'integer' || inputType === 'decimal') inputType = 'number';\n\n\t// TODO: handle props.inputType\n\tlet component = (\n\t\t<div className={`dx-textbox${hasLabel ? ' with-label' : ''}`} style={{}}>\n\t\t\t{props.icon ? <GenesysDevIcon icon={props.icon} className='input-icon' /> : undefined}\n\t\t\t<input\n\t\t\t\tclassName='dx-input'\n\t\t\t\ttype={inputType}\n\t\t\t\tstep={step}\n\t\t\t\tvalue={value}\n\t\t\t\tplaceholder={props.placeholder}\n\t\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t\t\tref={inputRef}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tif (props.onFocus) props.onFocus();\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tif (props.onBlur) props.onBlur();\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{props.clearButton && (value || isFocused) ? (\n\t\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppTimes} className='clear-icon' onClick={() => setValue('')} />\n\t\t\t) : undefined}\n\t\t</div>\n\t);\n\n\t// Render\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description}>\n\t\t\t{component}\n\t\t</DxLabel>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport { BooleanChangedCallback, DxToggleProps } from '..';\n\nimport './DxToggle.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\nexport default function DxToggle(props: DxToggleProps) {\n\tconst [value, setValue] = useState(props.isTriState ? props.initialValue : props.initialValue || false);\n\n\tconst trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;\n\tconst falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;\n\n\tuseEffect(() => {\n\t\tif (props.onChange) props.onChange(value);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\tconst toggleValue = () => {\n\t\tif (props.isTriState) {\n\t\t\tif (value === undefined) setValue(true);\n\t\t\telse if (value === true) setValue(false);\n\t\t\telse setValue(undefined);\n\t\t} else {\n\t\t\tsetValue(!value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description}>\n\t\t\t<div className='dx-toggle-container'>\n\t\t\t\t<div className='dx-toggle' onClick={toggleValue}>\n\t\t\t\t\t{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}\n\t\t\t\t\t{value === true && props.isTriState ? <div className='clear-placeholder'> </div> : undefined}\n\t\t\t\t\t<div className='slider'>{value !== undefined ? <GenesysDevIcon icon={value ? trueIcon : falseIcon} /> : undefined}</div>\n\t\t\t\t\t{value === false && props.isTriState ? <div className='clear-placeholder'> </div> : undefined}\n\t\t\t\t\t{value !== true ? <GenesysDevIcon icon={trueIcon} /> : undefined}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DxLabel>\n\t);\n}\n"],"names":["uuid"],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;SCdwB,WAAW,CAAC,KAAa;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC;IAE9D,QACC,6BAAK,SAAS,EAAC,cAAc;QAC5B,6BAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC;YAClE,KAAK,CAAC,KAAK;;YAAE,oBAAC,cAAc,IAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAAC,YAAY,GAAG,eAAe,CAAC,cAAc,GAAI,CACzG;QACL,MAAM,GAAG,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,QAAQ,CAAO,GAAG,SAAS,CAC1E,EACL;AACH;;;;;SCdwB,gBAAgB,CAAC,KAAa;IACrD,OAAO,6BAAK,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAC,QAAQ,CAAO,CAAC;AACnE;;;;;SCGwB,QAAQ,CAAC,KAAa;IAC7C,IAAI,UAAU,GAAG,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC;IACxD,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,CAAC,CAAkD;QACtE,IAAI,CAAC,KAAK,CAAC,OAAO;YAAE,OAAO;QAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,KAAK,CAAC,OAAO,EAAE,CAAC;KAChB,CAAC;IAEF,QACC,gCAAQ,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAC5G,KAAK,CAAC,QAAQ,CACP,EACR;AACH;;;;;;;;;;;;;;;;;;;;SCjBwB,OAAO,CAAC,KAAa;IAC5C,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;IAEnD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IACpC,6BAAK,SAAS,EAAC,mBAAmB;QACjC,oBAAC,cAAc,IAAC,IAAI,EAAE,eAAe,CAAC,YAAY,GAAI;QACtD,kCAAO,KAAK,CAAC,WAAW,CAAQ,CAC3B,IACH,SAAS,CAAC;IAEd,IAAI,KAAK,CAAC,WAAW,EAAE;QACtB,QACC,kCAAU,SAAS,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,IAAI,EAAE;YACtD,KAAK,CAAC,KAAK,GAAG,gCAAQ,SAAS,EAAC,YAAY,IAAE,KAAK,CAAC,KAAK,CAAU,GAAG,SAAS;YAC/E,KAAK,CAAC,QAAQ;YACd,WAAW,CACF,EACV;KACF;IACD,QACC,+BAAO,SAAS,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,IAAI,EAAE;QACnD,QAAQ,GAAG,8BAAM,SAAS,EAAC,YAAY,IAAE,KAAK,CAAC,KAAK,CAAQ,GAAG,SAAS;QACxE,KAAK,CAAC,QAAQ;QACd,WAAW,CACL,EACP;AACH;;SCjBwB,WAAW,CAAC,KAAa;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAC/B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;QACpB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;KACnC,CAAC,CACF,CAAC;IACF,MAAM,CAAC,EAAE,CAAC,GAAG,QAAQ,CAACA,EAAI,EAAE,CAAC,CAAC;;IAG9B,SAAS,CAAC;QACT,IAAI,KAAK,CAAC,cAAc;YAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;KAErD,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;;IAGX,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,IAAqB,EAAE,CAAsC;QAC3F,IAAI,KAAK,CAAC,aAAa;YAAE,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACrE,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;;QAExB,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO;YAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;;QAErF,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAC3C,OAAO,CAAC,OAAO,CAAC,CAAC;KACjB,CAAC;IAEF,QAAQ,KAAK,CAAC,MAAM;QACnB,KAAK,aAAa,CAAC;QACnB,KAAK,UAAU,EAAE;YAChB,QACC,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW;gBAC1D,6BAAK,SAAS,EAAE,gBAAgB,KAAK,CAAC,MAAM,KAAK,aAAa,GAAG,uBAAuB,GAAG,kBAAkB,EAAE;oBAC9G,gCAAQ,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,aAAa,IAC9C,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACd,gCAAQ,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IACjC,CAAC,CAAC,IAAI,CAAC,KAAK,CACL,CACT,CAAC,CACM,CACJ,CACG,EACT;SACF;QACD,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,SAAS;YACR,QACC,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,SAAS,EAAC,eAAe,EAAC,WAAW,EAAE,IAAI,IACtG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACd,+BAAO,GAAG,EAAE,CAAC;gBACZ,+BACC,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,IAAI,EAAE,KAAK,CAAC,MAAM,KAAK,UAAU,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EACrD,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAChB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EACnB,OAAO,EAAE,CAAC,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GACtC;gBACF,8BAAM,SAAS,EAAC,YAAY,IAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAQ,CAC3C,CACR,CAAC,CACO,EACT;SACF;KACD;AACF;;;;;SC7EwB,eAAe,CAAC,KAAa;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ;;IAExB,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAU;QACrD,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,eAAe,CAAC;QACzE,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;KACzB,CAAC,CACF,CAAC;IAEF,QACC,6BAAK,SAAS,EAAC,mBAAmB;QACjC,6BAAK,SAAS,EAAC,YAAY,IACzB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,MACpB,8BAAM,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,KAAK,SAAS,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,IACrG,KAAK,CACA,CACP,CAAC,CACG;QACN,6BAAK,SAAS,EAAC,aAAa,IAAE,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAO,CACjF,EACL;AACH;;;;;SCtBwB,UAAU,CAAC,KAAa;IAC/C,OAAO,6BAAK,SAAS,EAAC,cAAc,IAAE,KAAK,CAAC,QAAQ,CAAO,CAAC;AAC7D;;;;;SCJwB,SAAS,CAAC,KAAqB;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,IAAI,GAAG,CAAC,CAAC;IAC5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA8B,SAAS,CAAC,CAAC;IACzE,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAqD,CAAC,CAAC;;IAGxF,SAAS,CAAC;;QAET,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC;QAE/D,OAAO;YACN,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC;SAClE,CAAC;KACF,EAAE,EAAE,CAAC,CAAC;;IAGP,SAAS,CAAC;;QACT,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;;KAEzB,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;;IAGpB,SAAS,CAAC;QACT,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE;;YAElC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;gBAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACnC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACnB,IAAI,KAAK,EAAE;oBACV,MAAM,CAAC,GAAG,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;yBAC1D,GAAG,CAAC,MAAM,GAAG,CAAC;yBACd,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC;oBACd,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBACf,OAAO,CAAC,CAAC,CAAC,CAAC;iBACX;aACD;SACD;aAAM,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE;;YAEzC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;SACrC;;QAGD,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE,OAAO;QAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,QAAQ,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;KAE7F,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;IAGZ,SAAS,CAAC;QACT,aAAa,CAAC,KAAK,CAAC,gBAAgB,IAAI,GAAG,CAAC,CAAC;KAC7C,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;;IAG7B,IAAI,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,IAAI,KAAK,CAAC,QAAQ;QAAE,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;;IAGnD,SAAS,iBAAiB,CAAC,KAAoB;;QAE9C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YAC7B,OAAO;SACP;KACD;;IAGD,IAAI,SAAS,GAA6C,KAAK,CAAC,SAAS,CAAC;IAC1E,IAAI,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,SAAS;QAAE,SAAS,GAAG,QAAQ,CAAC;;IAG7E,IAAI,SAAS,IACZ,6BAAK,SAAS,EAAE,aAAa,QAAQ,GAAG,aAAa,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;QACrE,KAAK,CAAC,IAAI,GAAG,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAC,YAAY,GAAG,GAAG,SAAS;QACrF,+BACC,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE;gBACR,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,IAAI,KAAK,CAAC,OAAO;oBAAE,KAAK,CAAC,OAAO,EAAE,CAAC;aACnC,EACD,MAAM,EAAE;gBACP,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,IAAI,KAAK,CAAC,MAAM;oBAAE,KAAK,CAAC,MAAM,EAAE,CAAC;aACjC,GACA;QACD,KAAK,CAAC,WAAW,KAAK,KAAK,IAAI,SAAS,CAAC,IACzC,oBAAC,cAAc,IAAC,IAAI,EAAE,eAAe,CAAC,QAAQ,EAAE,SAAS,EAAC,YAAY,EAAC,OAAO,EAAE,MAAM,QAAQ,CAAC,EAAE,CAAC,GAAI,IACnG,SAAS,CACR,CACN,CAAC;;IAGF,QACC,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,IACzD,SAAS,CACD,EACT;AACH;;;;;SC/GwB,QAAQ,CAAC,KAAoB;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC;IAExG,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,eAAe,CAAC,QAAQ,CAAC;IAC5D,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,eAAe,CAAC,QAAQ,CAAC;IAE9D,SAAS,CAAC;QACT,IAAI,KAAK,CAAC,QAAQ;YAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;KAE1C,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG;QACnB,IAAI,KAAK,CAAC,UAAU,EAAE;YACrB,IAAI,KAAK,KAAK,SAAS;gBAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;iBACnC,IAAI,KAAK,KAAK,IAAI;gBAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;;gBACpC,QAAQ,CAAC,SAAS,CAAC,CAAC;SACzB;aAAM;YACN,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;SACjB;KACD,CAAC;IAEF,QACC,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW;QAC1D,6BAAK,SAAS,EAAC,qBAAqB;YACnC,6BAAK,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW;gBAC7C,KAAK,KAAK,KAAK,GAAG,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,GAAI,GAAG,SAAS;gBACjE,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,UAAU,GAAG,6BAAK,SAAS,EAAC,mBAAmB,aAAa,GAAG,SAAS;gBACjG,6BAAK,SAAS,EAAC,QAAQ,IAAE,KAAK,KAAK,SAAS,GAAG,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAI,GAAG,SAAS,CAAO;gBACvH,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,UAAU,GAAG,6BAAK,SAAS,EAAC,mBAAmB,aAAa,GAAG,SAAS;gBACjG,KAAK,KAAK,IAAI,GAAG,oBAAC,cAAc,IAAC,IAAI,EAAE,QAAQ,GAAI,GAAG,SAAS,CAC3D,CACD,CACG,EACT;AACH;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/dxaccordion/DxAccordion.tsx","../src/dxaccordion/DxAccordionGroup.tsx","../src/dxbutton/DxButton.tsx","../src/dxlabel/DxLabel.tsx","../src/dxitemgroup/DxCheckbox.tsx","../src/dxitemgroup/DxItemGroup.tsx","../src/dxtabbedcontent/DxTabbedContent.tsx","../src/dxtabbedcontent/DxTabPanel.tsx","../src/dxtextbox/DxTextbox.tsx","../src/dxtoggle/DxToggle.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useState } from 'react';\nimport { DxAccordionProps } from '..';\n\nimport './DxAccordion.scss';\n\nexport default function DxAccordion(props: DxAccordionProps) {\n\tconst [isOpen, setIsOpen] = useState(props.showOpen || false);\n\n\treturn (\n\t\t<div className={`dx-accordion${props.className ? ' ' + props.className : ''}`}>\n\t\t\t<div className='accordion-heading' onClick={() => setIsOpen(!isOpen)}>\n\t\t\t\t{props.title} <GenesysDevIcon icon={isOpen ? GenesysDevIcons.AppChevronUp : GenesysDevIcons.AppChevronDown} />\n\t\t\t</div>\n\t\t\t{isOpen ? <div className='accordion-content'>{props.children}</div> : undefined}\n\t\t</div>\n\t);\n}\n","import React from 'react';\n\nimport './DxAccordionGroup.scss';\n\ninterface IProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nexport default function DxAccordionGroup(props: IProps) {\n\treturn <div className={`dx-accordion-group${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;\n}\n","import React from 'react';\nimport { VoidEventCallback } from '..';\n\nimport './DxButton.scss';\n\ninterface IProps {\n\ttype?: 'primary' | 'secondary';\n\tdisabled?: boolean;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonClick?: VoidEventCallback;\n}\n\nexport default function DxButton(props: IProps) {\n\tlet classNames = ['dx-button'];\n\tclassNames.push(`dx-button-${props.type || 'primary'}`);\n\tif (props.className) classNames.push(props.className);\n\n\tconst handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n\t\tif (!props.onClick) return;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tprops.onClick();\n\t};\n\n\treturn (\n\t\t<button className={classNames.join(' ')} type='button' onClick={handleClick} disabled={props.disabled === true}>\n\t\t\t{props.children}\n\t\t</button>\n\t);\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React from 'react';\n\nimport './DxLabel.scss';\n\ninterface IProps {\n\tlabel?: string;\n\tdescription?: string;\n\tuseFieldset?: boolean;\n\tclassName?: string;\n\tchildren: React.ReactNode;\n}\n\nexport default function DxLabel(props: IProps) {\n\tconst hasLabel = props.label && props.label !== '';\n\n\tconst description = props.description ? (\n\t\t<div className='input-description'>\n\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppInfoSolid} />\n\t\t\t<span>{props.description}</span>\n\t\t</div>\n\t) : undefined;\n\n\tconst contents = (\n\t\t<React.Fragment>\n\t\t\t{' '}\n\t\t\t{hasLabel ? <span className='label-text'>{props.label}</span> : undefined}\n\t\t\t{props.children}\n\t\t\t{description}\n\t\t</React.Fragment>\n\t);\n\n\tconst className = `dx-label${props.className ? ' ' + props.className : ''}`;\n\n\tif (props.useFieldset) {\n\t\treturn <fieldset className={className}>{contents}</fieldset>;\n\t}\n\treturn <label className={className}>{contents}</label>;\n}\n","import React, { useEffect, useState } from 'react';\nimport { CheckedChangedCallback } from '..';\n\nimport './DxCheckbox.scss';\n\ninterface IProps {\n\tlabel: string;\n\titemValue: string;\n\tdescription?: string;\n\tchecked?: boolean;\n\tinitiallyChecked?: boolean;\n\tname?: string;\n\tclassName?: string;\n\tonCheckChanged?: CheckedChangedCallback;\n\tuseRadioType?: boolean;\n\tdisabled?: boolean;\n}\n\nexport default function DxCheckbox(props: IProps) {\n\tlet initialValue: boolean = props.checked !== undefined ? props.checked : props.initiallyChecked || false;\n\n\tconst [checked, setChecked] = useState<boolean>(initialValue);\n\n\tuseEffect(() => {\n\t\tif (props.checked === undefined || props.checked === checked) return;\n\t\tsetChecked(props.checked);\n\t}, [props.checked]);\n\n\tuseEffect(() => {\n\t\tif (props.onCheckChanged) props.onCheckChanged(checked);\n\t}, [checked]);\n\n\treturn (\n\t\t<label className={`dx-checkbox${props.className ? ' ' + props.className : ''}${props.disabled ? ' disabled' : ''}`}>\n\t\t\t<input\n\t\t\t\ttype={props.useRadioType ? 'radio' : 'checkbox'}\n\t\t\t\tname={props.name}\n\t\t\t\tid={props.label}\n\t\t\t\tvalue={props.itemValue}\n\t\t\t\tchecked={checked}\n\t\t\t\tonChange={(e) => setChecked(e.target.checked)}\n\t\t\t\tdisabled={props.disabled === true}\n\t\t\t/>\n\t\t\t<span className='label-text'>{props.label}</span>\n\t\t</label>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { DxItemGroupItem, DxItemGroupItemValue, DxItemGroupProps, ItemChangedCallback, ItemGroupChangedCallback } from '..';\n\nimport './DxItemGroup.scss';\nimport './radiobutton.scss';\nimport './dropdown.scss';\nimport './multiselect.scss';\nimport DxLabel from '../dxlabel/DxLabel';\nimport DxCheckbox from './DxCheckbox';\n\nexport default function DxItemGroup(props: DxItemGroupProps) {\n\tconst [data, setData] = useState<DxItemGroupItemValue[]>(\n\t\tprops.items.map((item) => {\n\t\t\treturn { item, isSelected: false };\n\t\t})\n\t);\n\tconst [id] = useState(uuid());\n\n\t// data changed\n\tuseEffect(() => {\n\t\tif (props.onItemsChanged) props.onItemsChanged(data);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [data]);\n\n\t// Handle individual item changed\n\tconst itemChanged = (idx: number, item: DxItemGroupItem, checked: boolean) => {\n\t\tif (props.onItemChanged) props.onItemChanged(item, checked);\n\t\tlet newData = [...data];\n\t\t// Unselect everything if it's radio buttons\n\t\tif (props.format === 'radio') newData.forEach((value) => (value.isSelected = false));\n\t\t// Set the selected state of the new item\n\t\tnewData[idx].isSelected = checked;\n\t\tsetData(newData);\n\t};\n\n\tconst selectChanged = (e: React.ChangeEvent<HTMLSelectElement>) => {\n\t\tconst options = e.target.options;\n\t\tlet newData = [...data];\n\t\t// Assign selected value for each item in the list\n\t\tfor (let i = 0; i < options.length; i++) {\n\t\t\tconst thisItem = newData.find((value) => value.item.value === options[i].value);\n\t\t\tthisItem.isSelected = options[i].selected;\n\t\t}\n\t\t// Update entire data list\n\t\tsetData(newData);\n\t\t// Trigger individual update\n\t\tconst changedItemIdx = newData.findIndex((value) => value.item.value === e.target.value);\n\t\tif (changedItemIdx >= 0) itemChanged(changedItemIdx, newData[changedItemIdx].item, newData[changedItemIdx].isSelected);\n\t};\n\n\tswitch (props.format) {\n\t\tcase 'multiselect':\n\t\tcase 'dropdown': {\n\t\t\tconst isMulti = props.format === 'multiselect';\n\t\t\treturn (\n\t\t\t\t<DxLabel label={props.title} description={props.description} className={props.className}>\n\t\t\t\t\t<div className={`dx-item-group${isMulti ? ' dx-multiselect-group' : ' dx-select-group'}${props.disabled ? ' disabled' : ''}`}>\n\t\t\t\t\t\t<select multiple={isMulti} disabled={props.disabled === true} onChange={(e) => selectChanged(e)}>\n\t\t\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t\t\t<option key={i} value={d.item.value} disabled={d.item.disabled}>\n\t\t\t\t\t\t\t\t\t{d.item.label}\n\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t\tcase 'checkbox':\n\t\tcase 'radio':\n\t\tdefault: {\n\t\t\treturn (\n\t\t\t\t<DxLabel\n\t\t\t\t\tlabel={props.title}\n\t\t\t\t\tdescription={props.description}\n\t\t\t\t\tclassName={`dx-item-group${props.disabled ? ' disabled' : ''}${props.className ? ' ' + props.className : ''}`}\n\t\t\t\t\tuseFieldset={true}\n\t\t\t\t>\n\t\t\t\t\t{data.map((d, i) => (\n\t\t\t\t\t\t<DxCheckbox\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tname={props.format === 'checkbox' ? `${id}-${i}` : id}\n\t\t\t\t\t\t\tlabel={d.item.label}\n\t\t\t\t\t\t\titemValue={d.item.value}\n\t\t\t\t\t\t\tinitiallyChecked={d.isSelected}\n\t\t\t\t\t\t\tonCheckChanged={(checked) => itemChanged(i, d.item, checked)}\n\t\t\t\t\t\t\tuseRadioType={props.format === 'radio'}\n\t\t\t\t\t\t\tdisabled={props.disabled || d.item.disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</DxLabel>\n\t\t\t);\n\t\t}\n\t}\n}\n","import React, { useState } from 'react';\nimport { DxTabbedContentProps } from '..';\n\nimport './DxTabbedContent.scss';\n\nexport default function DxTabbedContent(props: DxTabbedContentProps) {\n\tconst [activeTab, setActiveTab] = useState(props.initialTabId || 0);\n\tconst [titles] = useState<React.ReactNode[]>(\n\t\t// Scrape titles from child elements\n\t\tReact.Children.toArray(props.children).map((child: any) => {\n\t\t\tif (!child || !child.props || !child.props.title) return 'Unknown title';\n\t\t\treturn child.props.title;\n\t\t})\n\t);\n\n\treturn (\n\t\t<div className={`dx-tabbed-content${props.className ? ' ' + props.className : ''}`}>\n\t\t\t<div className='tab-titles'>\n\t\t\t\t{titles.map((title, i) => (\n\t\t\t\t\t<span key={i} className={`tab-title${i === activeTab ? ' active' : ''}`} onClick={() => setActiveTab(i)}>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className='tab-content'>{React.Children.toArray(props.children)[activeTab]}</div>\n\t\t</div>\n\t);\n}\n","import React from 'react';\nimport { DxTabPanelProps } from '..';\n\nimport './DxTabPanel.scss';\n\nexport default function DxTabPanel(props: DxTabPanelProps) {\n\treturn <div className={`dx-tab-panel${props.className ? ' ' + props.className : ''}`}>{props.children}</div>;\n}\n","import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport DxLabel from '../dxlabel/DxLabel';\nimport { DxTextboxProps } from '..';\n\nimport './DxTextbox.scss';\n\nexport default function DxTextbox(props: DxTextboxProps) {\n\tconst [debounceMs, setDebounceMs] = useState(props.changeDebounceMs || 300);\n\tconst [value, setValue] = useState(props.initialValue || props.value || '');\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [escapePressed, setEscapePressed] = useState(Date.now());\n\tconst [step, setStep] = useState<string | number | undefined>(undefined);\n\tlet [timer, setTimer] = useState(undefined as unknown as ReturnType<typeof setTimeout>);\n\n\t// Constructor\n\tuseEffect(() => {\n\t\t// Register global key bindings\n\t\tdocument.addEventListener('keydown', globalKeyBindings, false);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', globalKeyBindings, false);\n\t\t};\n\t}, []);\n\n\t// Value prop updated\n\tuseEffect(() => {\n\t\tsetValue(props.value || '');\n\t}, [props.value]);\n\n\t// Escape pressed\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\t\tsetValue('');\n\t\tinputRef.current?.blur();\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [escapePressed]);\n\n\t// Value changed\n\tuseEffect(() => {\n\t\tif (props.inputType === 'decimal') {\n\t\t\t// Normalize step setting\n\t\t\tif (!isNaN(parseFloat(value))) {\n\t\t\t\tconst match = /\\.(.+)/.exec(value);\n\t\t\t\tconsole.log(match);\n\t\t\t\tif (match) {\n\t\t\t\t\tconst s = `0.${Array.apply(null, Array(match[1].length - 1))\n\t\t\t\t\t\t.map(() => '0')\n\t\t\t\t\t\t.join('')}1`;\n\t\t\t\t\tconsole.log(s);\n\t\t\t\t\tsetStep(s);\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (props.inputType === 'integer') {\n\t\t\t// Overwrite value as integer to forcibly truncate floating point numbers\n\t\t\tsetValue(parseInt(value).toString());\n\t\t}\n\n\t\t// Debounce onChange notification\n\t\tif (!props.onChange) return;\n\t\tclearTimeout(timer);\n\t\tsetTimer(setTimeout(() => (props.onChange ? props.onChange(value) : undefined), debounceMs));\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// Update state from props\n\tuseEffect(() => {\n\t\tsetDebounceMs(props.changeDebounceMs || 300);\n\t}, [props.changeDebounceMs]);\n\n\t// Normalize inputRef\n\tlet inputRef = useRef<HTMLInputElement>(null);\n\tif (props.inputRef) inputRef = props.inputRef;\n\tconst hasLabel = props.label && props.label !== '';\n\n\t// Global key bindings\n\tfunction globalKeyBindings(event: KeyboardEvent) {\n\t\t// Escape - cancel search\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.stopPropagation();\n\t\t\tevent.preventDefault();\n\t\t\tsetEscapePressed(Date.now());\n\t\t\treturn;\n\t\t}\n\t}\n\n\t// Normalize input type\n\tlet inputType: React.HTMLInputTypeAttribute | undefined = props.inputType;\n\tif (inputType === 'integer' || inputType === 'decimal') inputType = 'number';\n\n\t// TODO: handle props.inputType\n\tlet component = (\n\t\t<div className={`dx-textbox${hasLabel ? ' with-label' : ''}${props.disabled ? ' disabled' : ''}`} style={{}}>\n\t\t\t{props.icon ? <GenesysDevIcon icon={props.icon} className='input-icon' /> : undefined}\n\t\t\t<input\n\t\t\t\tclassName='dx-input'\n\t\t\t\ttype={inputType}\n\t\t\t\tstep={step}\n\t\t\t\tvalue={value}\n\t\t\t\tplaceholder={props.placeholder}\n\t\t\t\tonChange={(e) => setValue(e.target.value)}\n\t\t\t\tref={inputRef}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tif (props.onFocus) props.onFocus();\n\t\t\t\t}}\n\t\t\t\tonBlur={() => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tif (props.onBlur) props.onBlur();\n\t\t\t\t}}\n\t\t\t\tdisabled={props.disabled === true}\n\t\t\t/>\n\t\t\t{props.clearButton && (value || isFocused) && !props.disabled ? (\n\t\t\t\t<GenesysDevIcon icon={GenesysDevIcons.AppTimes} className='clear-icon' onClick={() => setValue('')} />\n\t\t\t) : undefined}\n\t\t</div>\n\t);\n\n\t// Render\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description} className={props.className}>\n\t\t\t{component}\n\t\t</DxLabel>\n\t);\n}\n","import React, { useEffect, useState } from 'react';\nimport { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';\nimport { BooleanChangedCallback, DxToggleProps } from '..';\n\nimport './DxToggle.scss';\nimport DxLabel from '../dxlabel/DxLabel';\n\nexport default function DxToggle(props: DxToggleProps) {\n\tlet initialValue: boolean | undefined = props.value !== undefined ? props.value : props.initialValue;\n\tif (!props.isTriState) initialValue = initialValue || false;\n\n\tconst [value, setValue] = useState<boolean | undefined>(initialValue);\n\n\tconst trueIcon = props.trueIcon || GenesysDevIcons.AppCheck;\n\tconst falseIcon = props.falseIcon || GenesysDevIcons.AppTimes;\n\n\tuseEffect(() => {\n\t\tif (props.initialValue || props.value === value || (!props.isTriState && props.value === undefined)) return;\n\t\tsetValue(props.value);\n\t}, [props.value]);\n\n\tuseEffect(() => {\n\t\tif (props.onChange) props.onChange(value);\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\tconst toggleValue = () => {\n\t\tif (props.disabled) return;\n\t\tif (props.isTriState) {\n\t\t\tif (value === undefined) setValue(true);\n\t\t\telse if (value === true) setValue(false);\n\t\t\telse setValue(undefined);\n\t\t} else {\n\t\t\tsetValue(!value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DxLabel label={props.label} description={props.description} className={props.className}>\n\t\t\t<div className={`dx-toggle-container${props.disabled ? ' disabled' : ''}`}>\n\t\t\t\t<div className='dx-toggle' onClick={toggleValue}>\n\t\t\t\t\t{value !== false ? <GenesysDevIcon icon={falseIcon} /> : undefined}\n\t\t\t\t\t{value === true && props.isTriState ? <div className='clear-placeholder'> </div> : undefined}\n\t\t\t\t\t<div className='slider'>{value !== undefined ? <GenesysDevIcon icon={value ? trueIcon : falseIcon} /> : undefined}</div>\n\t\t\t\t\t{value === false && props.isTriState ? <div className='clear-placeholder'> </div> : undefined}\n\t\t\t\t\t{value !== true ? <GenesysDevIcon icon={trueIcon} /> : undefined}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DxLabel>\n\t);\n}\n"],"names":["uuid"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "genesys-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.8",
|
|
4
4
|
"description": "A React component library containing standardized form elements.",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"bugs": {
|
|
21
21
|
"url": "https://github.com/purecloudlabs/genesys-react-components/issues"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://github.
|
|
23
|
+
"homepage": "https://purecloudlabs.github.io/genesys-react-components",
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@rollup/plugin-commonjs": "^21.0.1",
|
|
26
26
|
"@rollup/plugin-node-resolve": "^13.0.6",
|