pixel-react 1.1.0 → 1.1.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/.yarn/install-state.gz +0 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.d.ts +5 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DashboardDonutChart/index.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +21 -0
- package/lib/components/Charts/PieChart/PieChart.d.ts +5 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/PieChart/index.d.ts +1 -0
- package/lib/components/Charts/PieChart/types.d.ts +27 -0
- package/lib/components/FF_Captcha/Recaptcha.d.ts +5 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FF_Captcha/types.d.ts +20 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -1
- package/lib/components/NLPInput/NlpInput.d.ts +4 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +19 -0
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +4 -0
- package/lib/components/NLPInput/index.d.ts +1 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/index.d.ts +96 -19
- package/lib/index.esm.js +2951 -249
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +2953 -247
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getEncryptedData/getEncryptedData.d.ts +2 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/package.json +6 -2
- package/src/StyleGuide/ColorPalette/ColorPalette.tsx +2 -4
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +95 -20
- package/src/assets/Themes/BaseTheme.scss +2 -3
- package/src/assets/Themes/DarkTheme.scss +9 -8
- package/src/assets/icons/wswb_delete_icon.svg +4 -0
- package/src/assets/icons/wswb_plus_icon.svg +5 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +145 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +52 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +335 -0
- package/src/components/Charts/DashboardDonutChart/index.ts +1 -0
- package/src/components/Charts/DashboardDonutChart/types.ts +33 -0
- package/src/components/Charts/PieChart/PieChart.scss +39 -0
- package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -0
- package/src/components/Charts/PieChart/PieChart.tsx +193 -0
- package/src/components/Charts/PieChart/index.ts +1 -0
- package/src/components/Charts/PieChart/types.ts +28 -0
- package/src/components/FF_Captcha/Recaptcha.scss +11 -0
- package/src/components/FF_Captcha/Recaptcha.tsx +41 -0
- package/src/components/FF_Captcha/captcha.stories.tsx +40 -0
- package/src/components/FF_Captcha/index.ts +0 -0
- package/src/components/FF_Captcha/types.ts +22 -0
- package/src/components/Icon/iconList.ts +6 -0
- package/src/components/Modal/modal.scss +1 -1
- package/src/components/MultiSelect/MultiSelect.stories.tsx +2 -3
- package/src/components/MultiSelect/MultiSelect.tsx +35 -23
- package/src/components/MultiSelect/MultiSelectTypes.ts +1 -1
- package/src/components/NLPInput/NLPInput.scss +246 -0
- package/src/components/NLPInput/NlpInput.stories.tsx +136 -0
- package/src/components/NLPInput/NlpInput.tsx +374 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -0
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -0
- package/src/components/NLPInput/index.ts +1 -0
- package/src/components/NLPInput/type.tsx +124 -0
- package/src/components/Table/Table.scss +5 -0
- package/src/components/Table/Table.stories.tsx +12 -0
- package/src/components/Table/Table.tsx +25 -14
- package/src/components/TextArea/Textarea.scss +1 -1
- package/src/index.ts +8 -1
- package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -0
- package/src/utils/getEncryptedData/getEncryptedData.ts +10 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
@@ -0,0 +1,180 @@
|
|
1
|
+
import { ReactNode, useContext, useRef, useState } from 'react';
|
2
|
+
import {
|
3
|
+
NlpDropDownListProps,
|
4
|
+
nlpDropdownDefaultCSSData,
|
5
|
+
} from './NlpDropDownType';
|
6
|
+
import useClickOutside from '../../../../hooks/useClickOutside';
|
7
|
+
import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
|
8
|
+
import './NlpDropdown.scss';
|
9
|
+
import Typography from '../../../Typography';
|
10
|
+
import ffid from '../../../../utils/ffID/ffid';
|
11
|
+
import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
|
12
|
+
import classNames from 'classnames';
|
13
|
+
|
14
|
+
type OptionType = {
|
15
|
+
label: ReactNode;
|
16
|
+
value: string;
|
17
|
+
displayName?: string;
|
18
|
+
description?: string;
|
19
|
+
nlpType?: string;
|
20
|
+
path?: string;
|
21
|
+
stepInputs?: { type?: string; name?: string }[];
|
22
|
+
returnType?: string;
|
23
|
+
};
|
24
|
+
|
25
|
+
const NlpDropdown = ({
|
26
|
+
onSelectBlur,
|
27
|
+
onSelectOptionSelector,
|
28
|
+
dropdownPosition,
|
29
|
+
options = [],
|
30
|
+
optionZIndex = 100,
|
31
|
+
inputRef,
|
32
|
+
}: NlpDropDownListProps) => {
|
33
|
+
// const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
|
34
|
+
const [nlpData] = useState<OptionType | null>(null);
|
35
|
+
const themeContext = useContext(ThemeContext);
|
36
|
+
const currentTheme = themeContext?.currentTheme;
|
37
|
+
const optionsWrapperRef = useRef<HTMLDivElement>(null);
|
38
|
+
useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
|
39
|
+
|
40
|
+
const { positionX, positionY, width, fromBottom } = dropdownPosition;
|
41
|
+
const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
|
42
|
+
nlpDropdownDefaultCSSData;
|
43
|
+
|
44
|
+
const updateDropdownPosition = () => {
|
45
|
+
let dropdownContainerHeight;
|
46
|
+
|
47
|
+
if (checkEmpty(options)) {
|
48
|
+
dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
|
49
|
+
} else if (options.length > 5) {
|
50
|
+
dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
|
51
|
+
} else {
|
52
|
+
dropdownContainerHeight =
|
53
|
+
options.length * optionHeight + 2 * dropDownWrapperPadding;
|
54
|
+
}
|
55
|
+
|
56
|
+
if (fromBottom > dropdownContainerHeight + margin) {
|
57
|
+
return {
|
58
|
+
left: positionX,
|
59
|
+
top: positionY,
|
60
|
+
width: width,
|
61
|
+
zIndex: optionZIndex,
|
62
|
+
};
|
63
|
+
}
|
64
|
+
return {
|
65
|
+
zIndex: optionZIndex,
|
66
|
+
left: positionX,
|
67
|
+
width: width,
|
68
|
+
top: positionY - selectInputHeight - dropdownContainerHeight - margin,
|
69
|
+
};
|
70
|
+
};
|
71
|
+
|
72
|
+
return (
|
73
|
+
<div className="ff-nlp-dropdown-wrapper">
|
74
|
+
<div
|
75
|
+
ref={optionsWrapperRef}
|
76
|
+
style={updateDropdownPosition()}
|
77
|
+
className={classNames('ff-nlp-options-wrapper', currentTheme)}
|
78
|
+
>
|
79
|
+
<div className="ff-nlp-options-wrapper1">
|
80
|
+
{!checkEmpty(options) ? (
|
81
|
+
options.map((option) => (
|
82
|
+
// <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
|
83
|
+
<div key={ffid()}>
|
84
|
+
<Typography
|
85
|
+
as="div"
|
86
|
+
lineHeight="30px"
|
87
|
+
className={classNames('ff-nlp-option', currentTheme)}
|
88
|
+
color="var(--ff-nlp-text-color)"
|
89
|
+
onClick={() => onSelectOptionSelector(option)}
|
90
|
+
>
|
91
|
+
<span className="mr-2 fontPoppinsRegularMd">
|
92
|
+
{option?.nlpType === 'NLP' ? (
|
93
|
+
<b className="nlp-type-NLP">NLP</b>
|
94
|
+
) : option?.nlpType === 'STEP_GROUP' ? (
|
95
|
+
<b className="nlp-type-step-group">SG</b>
|
96
|
+
) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
|
97
|
+
<b className="nlp-type-program-elements">PE</b>
|
98
|
+
) : (
|
99
|
+
'--'
|
100
|
+
)}
|
101
|
+
</span>
|
102
|
+
<span className="mr-2 fontPoppinsRegularMd">
|
103
|
+
{option?.platform === 'web' ? (
|
104
|
+
<b className="platform-web">Web</b>
|
105
|
+
) : option?.platform === 'android' ? (
|
106
|
+
<b className="platform-android">Android</b>
|
107
|
+
) : option?.platform === 'ios' ? (
|
108
|
+
<b className="platform-ios">iOS</b>
|
109
|
+
) : option?.platform === 'Generic' ? (
|
110
|
+
<b className="platform-ios">Generic</b>
|
111
|
+
) : (
|
112
|
+
'--'
|
113
|
+
)}
|
114
|
+
</span>
|
115
|
+
{option?.displayName}
|
116
|
+
</Typography>
|
117
|
+
</div>
|
118
|
+
))
|
119
|
+
) : (
|
120
|
+
<Typography
|
121
|
+
textAlign="center"
|
122
|
+
lineHeight="32px"
|
123
|
+
as="p"
|
124
|
+
color="var(--ff-nlp-text-color)"
|
125
|
+
className="ff-nlp-no-option"
|
126
|
+
>
|
127
|
+
No Results Found
|
128
|
+
</Typography>
|
129
|
+
)}
|
130
|
+
<button>+ Web Services</button>
|
131
|
+
</div>
|
132
|
+
<div className="ff-nlp-data">
|
133
|
+
<div>
|
134
|
+
<div className="nlp-details-header mt-4">Name:</div>
|
135
|
+
<div className="nlp-details nlpdiv-check">
|
136
|
+
{nlpData?.displayName || '--'}
|
137
|
+
</div>
|
138
|
+
<div className="nlp-details-header mt-4">Description:</div>
|
139
|
+
<div className="nlp-details nlpdiv-check">
|
140
|
+
{nlpData?.description || '--'}
|
141
|
+
</div>
|
142
|
+
{nlpData?.nlpType === 'STEP_GROUP' && (
|
143
|
+
<>
|
144
|
+
<div className="nlp-details-header mt-4">Path:</div>
|
145
|
+
<div className="nlp-details nlpdiv-check">
|
146
|
+
{nlpData?.path ? nlpData?.path.slice(6) : '--'}
|
147
|
+
</div>
|
148
|
+
</>
|
149
|
+
)}
|
150
|
+
<div className="nlp-details-header mt-4">Inputs:</div>
|
151
|
+
{nlpData?.stepInputs?.length ? (
|
152
|
+
nlpData.stepInputs.map((stepInput, index) => {
|
153
|
+
const stepInputType = stepInput.type
|
154
|
+
? stepInput.type.split('.').pop()
|
155
|
+
: '--';
|
156
|
+
return (
|
157
|
+
<div key={index}>
|
158
|
+
<div className="nlp-details-header">Input{index + 1}:</div>
|
159
|
+
<div className="nlp-details">type: {stepInputType}</div>
|
160
|
+
<div className="nlp-details mb-4">
|
161
|
+
name: {stepInput.name || '--'}
|
162
|
+
</div>
|
163
|
+
</div>
|
164
|
+
);
|
165
|
+
})
|
166
|
+
) : (
|
167
|
+
<div className="nlp-details mb-4">--</div>
|
168
|
+
)}
|
169
|
+
<div className="nlp-details-header">Output:</div>
|
170
|
+
<div className="nlp-details mb-4">
|
171
|
+
{nlpData?.returnType || '--'}
|
172
|
+
</div>
|
173
|
+
</div>
|
174
|
+
</div>
|
175
|
+
</div>
|
176
|
+
</div>
|
177
|
+
);
|
178
|
+
};
|
179
|
+
|
180
|
+
export default NlpDropdown;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './NlpInput';
|
@@ -0,0 +1,124 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
|
3
|
+
export interface SelectProps {
|
4
|
+
/*
|
5
|
+
* Label for the NLP NLP select dropdown
|
6
|
+
*/
|
7
|
+
label?: string;
|
8
|
+
|
9
|
+
/*
|
10
|
+
* If true, the NLP select dropdown will have a label
|
11
|
+
*/
|
12
|
+
showLabel?: boolean;
|
13
|
+
|
14
|
+
/*
|
15
|
+
* Options for the NLP select dropdown
|
16
|
+
*/
|
17
|
+
optionsList: any[];
|
18
|
+
|
19
|
+
/*
|
20
|
+
* Selected option for the NLP select dropdown
|
21
|
+
*/
|
22
|
+
selectedOption?: Option;
|
23
|
+
|
24
|
+
/*
|
25
|
+
* onChange callback function for handling selected option changes
|
26
|
+
*/
|
27
|
+
onChange: (option: Option) => void;
|
28
|
+
|
29
|
+
/*
|
30
|
+
* If error is true, this message will be displayed
|
31
|
+
*/
|
32
|
+
errorMsg?: string;
|
33
|
+
|
34
|
+
/*
|
35
|
+
* provide the className for the NLP select dropdown
|
36
|
+
*/
|
37
|
+
className?: string;
|
38
|
+
|
39
|
+
/*
|
40
|
+
* Providing the z-index for dropdown and select
|
41
|
+
*/
|
42
|
+
optionZIndex?: number;
|
43
|
+
|
44
|
+
/*
|
45
|
+
* Provide disable prop for the disabling the select component
|
46
|
+
*/
|
47
|
+
disabled?: boolean;
|
48
|
+
|
49
|
+
/*
|
50
|
+
* Provide disable prop for the providing border radius at right side
|
51
|
+
*/
|
52
|
+
borderRadius?: boolean;
|
53
|
+
|
54
|
+
/*
|
55
|
+
* Provide boolean value to show border or not
|
56
|
+
*/
|
57
|
+
showBorder?: boolean;
|
58
|
+
|
59
|
+
/*
|
60
|
+
* Provide the boolean value if the select component is required or not
|
61
|
+
*/
|
62
|
+
required?: boolean;
|
63
|
+
}
|
64
|
+
|
65
|
+
export interface DrowdownPosition {
|
66
|
+
positionX: number;
|
67
|
+
positionY: number;
|
68
|
+
width: number;
|
69
|
+
fromBottom: number;
|
70
|
+
}
|
71
|
+
|
72
|
+
export interface SelectState {
|
73
|
+
isInputFocused: boolean;
|
74
|
+
iconColor: string;
|
75
|
+
isIconClick: boolean;
|
76
|
+
showOptions: boolean;
|
77
|
+
options: any[];
|
78
|
+
option: string;
|
79
|
+
dropdownPosition: DrowdownPosition;
|
80
|
+
}
|
81
|
+
|
82
|
+
export type SelectAction =
|
83
|
+
| { type: 'FOCUS_INPUT' }
|
84
|
+
| {
|
85
|
+
type: 'BLUR_INPUT';
|
86
|
+
payload: {
|
87
|
+
optionsList: Option[];
|
88
|
+
option: Option['projectId'];
|
89
|
+
};
|
90
|
+
}
|
91
|
+
| { type: 'MOUSE_ENTER' }
|
92
|
+
| { type: 'MOUSE_LEAVE' }
|
93
|
+
| {
|
94
|
+
type: 'UPDATE_DROPDOWN_POSITION';
|
95
|
+
payload: {
|
96
|
+
positionX: number;
|
97
|
+
positionY: number;
|
98
|
+
width: number;
|
99
|
+
fromBottom: number;
|
100
|
+
};
|
101
|
+
}
|
102
|
+
| {
|
103
|
+
type: 'UPDATE_OPTION';
|
104
|
+
payload: string;
|
105
|
+
}
|
106
|
+
| {
|
107
|
+
type: 'UPDATE_OPTION_LIST';
|
108
|
+
payload: any[];
|
109
|
+
}
|
110
|
+
| {
|
111
|
+
type: 'SHOW_ERROR';
|
112
|
+
payload: {
|
113
|
+
optionsList: any[];
|
114
|
+
option: Option['projectId'];
|
115
|
+
};
|
116
|
+
};
|
117
|
+
|
118
|
+
export interface Option {
|
119
|
+
displayName: string | ReactNode;
|
120
|
+
projectId: string;
|
121
|
+
nlpType: string;
|
122
|
+
platform:string;
|
123
|
+
disabled?: boolean;
|
124
|
+
}
|
@@ -26,6 +26,7 @@ const sampleData = [
|
|
26
26
|
type: 'Web',
|
27
27
|
status: 'Open',
|
28
28
|
checked: false,
|
29
|
+
disabled:true
|
29
30
|
},
|
30
31
|
},
|
31
32
|
{
|
@@ -36,6 +37,7 @@ const sampleData = [
|
|
36
37
|
type: 'Mobile',
|
37
38
|
status: 'Close',
|
38
39
|
checked: true,
|
40
|
+
disabled:true
|
39
41
|
},
|
40
42
|
},
|
41
43
|
{
|
@@ -46,6 +48,7 @@ const sampleData = [
|
|
46
48
|
type: 'Web',
|
47
49
|
status: 'Close',
|
48
50
|
checked: true,
|
51
|
+
disabled:true
|
49
52
|
},
|
50
53
|
},
|
51
54
|
{
|
@@ -56,6 +59,7 @@ const sampleData = [
|
|
56
59
|
type: 'Web & Mobile',
|
57
60
|
status: 'Open',
|
58
61
|
checked: false,
|
62
|
+
disabled:false
|
59
63
|
},
|
60
64
|
},
|
61
65
|
{
|
@@ -66,6 +70,7 @@ const sampleData = [
|
|
66
70
|
type: 'Web',
|
67
71
|
status: 'Open',
|
68
72
|
checked: false,
|
73
|
+
disabled:true
|
69
74
|
},
|
70
75
|
},
|
71
76
|
{
|
@@ -76,6 +81,7 @@ const sampleData = [
|
|
76
81
|
type: 'Mobile',
|
77
82
|
status: 'Close',
|
78
83
|
checked: true,
|
84
|
+
disabled:true
|
79
85
|
},
|
80
86
|
},
|
81
87
|
{
|
@@ -86,6 +92,7 @@ const sampleData = [
|
|
86
92
|
type: 'Web',
|
87
93
|
status: 'Close',
|
88
94
|
checked: true,
|
95
|
+
disabled:true
|
89
96
|
},
|
90
97
|
},
|
91
98
|
{
|
@@ -96,6 +103,7 @@ const sampleData = [
|
|
96
103
|
type: 'Web & Mobile',
|
97
104
|
status: 'Open',
|
98
105
|
checked: false,
|
106
|
+
disabled:false
|
99
107
|
},
|
100
108
|
},
|
101
109
|
{
|
@@ -106,6 +114,7 @@ const sampleData = [
|
|
106
114
|
type: 'Web',
|
107
115
|
status: 'Open',
|
108
116
|
checked: false,
|
117
|
+
disabled:false
|
109
118
|
},
|
110
119
|
},
|
111
120
|
{
|
@@ -116,6 +125,7 @@ const sampleData = [
|
|
116
125
|
type: 'Mobile',
|
117
126
|
status: 'Close',
|
118
127
|
checked: true,
|
128
|
+
disabled:false
|
119
129
|
},
|
120
130
|
},
|
121
131
|
{
|
@@ -126,6 +136,7 @@ const sampleData = [
|
|
126
136
|
type: 'Web',
|
127
137
|
status: 'Close',
|
128
138
|
checked: true,
|
139
|
+
disabled:false
|
129
140
|
},
|
130
141
|
},
|
131
142
|
{
|
@@ -136,6 +147,7 @@ const sampleData = [
|
|
136
147
|
type: 'Web & Mobile',
|
137
148
|
status: 'Open',
|
138
149
|
checked: false,
|
150
|
+
disabled:false
|
139
151
|
},
|
140
152
|
},
|
141
153
|
];
|
@@ -2,8 +2,10 @@ import './Table.scss';
|
|
2
2
|
// import Checkbox from '../Checkbox';
|
3
3
|
import { isFunction } from '../../assets/utils/functionUtils';
|
4
4
|
import classNames from 'classnames';
|
5
|
-
import { ColumnsProps, DataProps, TableProps } from './Types';
|
5
|
+
import { ColumnsProps, DataProps, TableProps ,SelectedItemProps} from './Types';
|
6
6
|
import { prepareData } from '../../utils/TableCell/TableCell';
|
7
|
+
import Checkbox from '../Checkbox';
|
8
|
+
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
7
9
|
|
8
10
|
// import NoData from '../NoData/NoData';
|
9
11
|
|
@@ -11,13 +13,13 @@ const Table = ({
|
|
11
13
|
data = [],
|
12
14
|
columns = [],
|
13
15
|
headerType,
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
16
|
+
withCheckbox,
|
17
|
+
onSelect,
|
18
|
+
allSelected,
|
19
|
+
partialSelected = false,
|
18
20
|
withFixedHeader = true,
|
19
21
|
borderWithRadius = false,
|
20
|
-
|
22
|
+
headerCheckboxDisabled = false,
|
21
23
|
// noDataContent,
|
22
24
|
// noDataImage,
|
23
25
|
// noDataImageSize,
|
@@ -30,7 +32,13 @@ const Table = ({
|
|
30
32
|
onClick(accessor, row);
|
31
33
|
}
|
32
34
|
};
|
33
|
-
|
35
|
+
const onSelectClick = (e: object, item: SelectedItemProps) => {
|
36
|
+
if (onSelect) {
|
37
|
+
onSelect(e, item);
|
38
|
+
}
|
39
|
+
};
|
40
|
+
if (checkEmpty(data)) return null;
|
41
|
+
|
34
42
|
return (
|
35
43
|
<div
|
36
44
|
style={{ height: height }}
|
@@ -45,16 +53,16 @@ const Table = ({
|
|
45
53
|
'ff-fixed-header': withFixedHeader,
|
46
54
|
})}
|
47
55
|
>
|
48
|
-
<tr>
|
56
|
+
<tr >
|
49
57
|
{/* columns.map((column, index) */}
|
50
|
-
{columns.map((column) => (
|
58
|
+
{columns.map((column, index) => (
|
51
59
|
<th
|
52
60
|
className={headerType && `${headerType}-bg`}
|
53
61
|
key={column.header}
|
54
62
|
style={{ width: column?.width }}
|
55
63
|
>
|
56
64
|
<div>
|
57
|
-
|
65
|
+
{index === 0 && withCheckbox && (
|
58
66
|
<span className="ff-table-checkbox">
|
59
67
|
<Checkbox
|
60
68
|
onChange={(e) => {
|
@@ -67,7 +75,7 @@ const Table = ({
|
|
67
75
|
disabled={headerCheckboxDisabled}
|
68
76
|
/>
|
69
77
|
</span>
|
70
|
-
)}
|
78
|
+
)}
|
71
79
|
|
72
80
|
{column.header}
|
73
81
|
</div>
|
@@ -78,7 +86,10 @@ const Table = ({
|
|
78
86
|
<tbody>
|
79
87
|
{data.length > 0 &&
|
80
88
|
data.map((row: any, index: number) => (
|
81
|
-
<tr key={row.id || index}
|
89
|
+
<tr key={row.id || index} className={classNames(className,{
|
90
|
+
'disabled-row': row.disabled
|
91
|
+
})}
|
92
|
+
>
|
82
93
|
{columns.map((column, i) => {
|
83
94
|
return (
|
84
95
|
<td
|
@@ -89,7 +100,7 @@ const Table = ({
|
|
89
100
|
})}
|
90
101
|
>
|
91
102
|
<div>
|
92
|
-
{
|
103
|
+
{i === 0 && withCheckbox && (
|
93
104
|
<span className="ff-table-checkbox">
|
94
105
|
<Checkbox
|
95
106
|
onChange={(e) => {
|
@@ -99,7 +110,7 @@ const Table = ({
|
|
99
110
|
disabled={!!row.disabled}
|
100
111
|
/>
|
101
112
|
</span>
|
102
|
-
)}
|
113
|
+
)}
|
103
114
|
{prepareData(row, column)}
|
104
115
|
</div>
|
105
116
|
</td>
|
package/src/index.ts
CHANGED
@@ -39,7 +39,11 @@ import IconButton from './components/IconButton';
|
|
39
39
|
import Modal from './components/Modal';
|
40
40
|
import DragAndDrop from './components/DragAndDrop/DragAndDrop';
|
41
41
|
import AllProjectsDropdown from './components/AllProjectsDropdown';
|
42
|
+
import PieChart from './components/Charts/PieChart';
|
42
43
|
import AppHeader from './components/AppHeader';
|
44
|
+
import DashboardDonutChart from './components/Charts/DashboardDonutChart'
|
45
|
+
import Recaptcha from './components/FF_Captcha/Recaptcha';
|
46
|
+
import NLPInput from './components/NLPInput';
|
43
47
|
|
44
48
|
// Utils imports
|
45
49
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -90,11 +94,14 @@ export {
|
|
90
94
|
StatusButton,
|
91
95
|
IconButton,
|
92
96
|
Modal,
|
97
|
+
PieChart,
|
98
|
+
DashboardDonutChart,
|
93
99
|
|
94
100
|
DragAndDrop,
|
95
101
|
AllProjectsDropdown,
|
96
102
|
AppHeader,
|
97
|
-
|
103
|
+
Recaptcha,
|
104
|
+
NLPInput,
|
98
105
|
// utils exports
|
99
106
|
checkEmpty,
|
100
107
|
getExtension,
|
@@ -0,0 +1,55 @@
|
|
1
|
+
// getEncryptData.stories.tsx
|
2
|
+
import { useState } from 'react';
|
3
|
+
import getEncryptData from './getEncryptedData';
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: 'Utils/getEncryptedData',
|
7
|
+
component: getEncryptData,
|
8
|
+
};
|
9
|
+
|
10
|
+
export const InteractivePlayground = () => {
|
11
|
+
const [data, setData] = useState<string>('Sensitive information');
|
12
|
+
const [publicKey, setPublicKey] = useState<string>(`Add your public key`);
|
13
|
+
const [encryptedData, setEncryptedData] = useState<string | null>(null);
|
14
|
+
|
15
|
+
const handleEncrypt = () => {
|
16
|
+
const result = getEncryptData(data, publicKey);
|
17
|
+
setEncryptedData(result.toString());
|
18
|
+
};
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div>
|
22
|
+
<h1>Interactive Playground for getEncryptData</h1>
|
23
|
+
|
24
|
+
<div>
|
25
|
+
<label htmlFor="data">Data to Encrypt:</label>
|
26
|
+
<input
|
27
|
+
type="text"
|
28
|
+
id="data"
|
29
|
+
value={data}
|
30
|
+
onChange={(e) => setData(e.target.value)}
|
31
|
+
/>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<div>
|
35
|
+
<label htmlFor="publicKey">Public Key:</label>
|
36
|
+
<textarea
|
37
|
+
id="publicKey"
|
38
|
+
value={publicKey}
|
39
|
+
onChange={(e) => setPublicKey(e.target.value)}
|
40
|
+
rows={5}
|
41
|
+
cols={50}
|
42
|
+
/>
|
43
|
+
</div>
|
44
|
+
|
45
|
+
<button onClick={handleEncrypt}>Encrypt Data</button>
|
46
|
+
|
47
|
+
<h2>Encrypted Data:</h2>
|
48
|
+
{encryptedData ? (
|
49
|
+
<pre>{encryptedData}</pre>
|
50
|
+
) : (
|
51
|
+
<p>No encrypted data yet. Click "Encrypt Data" to generate it.</p>
|
52
|
+
)}
|
53
|
+
</div>
|
54
|
+
);
|
55
|
+
};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import JSEncrypt from 'jsencrypt';
|
2
|
+
|
3
|
+
const getEncryptedData = (data: string, publicKey: string) => {
|
4
|
+
const encrypt = new JSEncrypt();
|
5
|
+
encrypt.setPublicKey(publicKey);
|
6
|
+
const enData = encrypt.encrypt(data);
|
7
|
+
return enData;
|
8
|
+
};
|
9
|
+
|
10
|
+
export default getEncryptedData;
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddButton';
|