pixel-react 1.6.2 → 1.6.5
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/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AttachImage/AttachImage.d.ts +1 -6
- package/lib/components/AttachImage/types.d.ts +8 -0
- package/lib/components/Avatar/types.d.ts +9 -1
- package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
- package/lib/components/CreateVariable/index.d.ts +1 -0
- package/lib/components/CreateVariable/types.d.ts +56 -0
- package/lib/components/Drawer/Types.d.ts +13 -0
- package/lib/components/IconButton/types.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +7 -0
- package/lib/components/Select/components/types.d.ts +1 -0
- package/lib/components/Select/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
- package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
- package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
- package/lib/components/TableTree/TableTree copy.d.ts +25 -0
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +38 -5
- package/lib/index.d.ts +117 -7
- package/lib/index.esm.js +594 -324
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +594 -323
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/authorization_icon.svg +1 -0
- package/src/assets/icons/backward.svg +10 -0
- package/src/assets/icons/capture_icon.svg +6 -0
- package/src/assets/icons/download_file_icon.svg +2 -9
- package/src/assets/icons/forward.svg +3 -0
- package/src/assets/icons/project_status_icon.svg +10 -0
- package/src/assets/icons/refresh_icon.svg +4 -0
- package/src/assets/icons/rotate_icon.svg +10 -0
- package/src/assets/icons/swipe_icon.svg +9 -0
- package/src/assets/icons/tap_icon.svg +4 -0
- package/src/components/AttachImage/AttachImage.stories.tsx +2 -0
- package/src/components/AttachImage/AttachImage.tsx +5 -9
- package/src/components/AttachImage/types.ts +25 -18
- package/src/components/Avatar/Avatar.scss +4 -0
- package/src/components/Avatar/Avatar.stories.tsx +38 -18
- package/src/components/Avatar/Avatar.tsx +19 -3
- package/src/components/Avatar/types.ts +9 -1
- package/src/components/Charts/DonutChart/DonutChart.tsx +8 -3
- package/src/components/Charts/RadialChart/RadialChart.scss +4 -0
- package/src/components/Charts/RadialChart/RadialChart.tsx +51 -45
- package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
- package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
- package/src/components/CreateVariable/index.ts +1 -0
- package/src/components/CreateVariable/types.ts +58 -0
- package/src/components/Drawer/Drawer.scss +1 -1
- package/src/components/Drawer/Drawer.stories.tsx +0 -1
- package/src/components/Drawer/Drawer.tsx +4 -1
- package/src/components/Drawer/Types.ts +13 -0
- package/src/components/FileDropzone/FileDropzone.scss +0 -1
- package/src/components/Icon/iconList.ts +16 -0
- package/src/components/IconButton/IconButton.scss +11 -11
- package/src/components/IconButton/IconButton.tsx +2 -1
- package/src/components/IconButton/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +0 -4
- package/src/components/MiniModal/MiniModal.stories.tsx +3 -2
- package/src/components/MiniModal/MiniModal.tsx +28 -10
- package/src/components/MiniModal/types.ts +7 -0
- package/src/components/Select/Select.scss +20 -0
- package/src/components/Select/Select.stories.tsx +50 -1
- package/src/components/Select/Select.tsx +34 -7
- package/src/components/Select/components/Dropdown.scss +9 -0
- package/src/components/Select/components/Dropdown.tsx +20 -6
- package/src/components/Select/components/types.ts +1 -0
- package/src/components/Select/types.ts +12 -2
- package/src/components/TableTree/Components/TableBody.tsx +35 -0
- package/src/components/TableTree/Components/TableCell.tsx +59 -0
- package/src/components/TableTree/Components/TableHead.tsx +39 -0
- package/src/components/TableTree/Components/TableRow.tsx +37 -0
- package/src/components/TableTree/TableTree.scss +8 -5
- package/src/components/TableTree/TableTree.tsx +16 -46
- package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
- package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
- package/src/components/TableTree/types.ts +43 -5
- package/src/index.ts +2 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
- package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -13
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
- /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -6,6 +6,7 @@ import {
|
|
6
6
|
ArcResult,
|
7
7
|
ArcAnglesResult,
|
8
8
|
} from './types';
|
9
|
+
import Tooltip from '../../Tooltip';
|
9
10
|
|
10
11
|
const useColorMappings = () =>
|
11
12
|
useMemo(() => {
|
@@ -117,54 +118,59 @@ const RadialChart: React.FC<RadialChartProps> = ({
|
|
117
118
|
calculateArcAngles(status.value, total, currentAngle, radius);
|
118
119
|
currentAngle = endAngle;
|
119
120
|
return (
|
120
|
-
<
|
121
|
-
|
122
|
-
|
123
|
-
height={svgSize}
|
124
|
-
viewBox={`0 0 ${svgSize} ${svgSize}`}
|
125
|
-
onClick={() => onClick(status)}
|
126
|
-
role="img"
|
127
|
-
aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
|
121
|
+
<Tooltip
|
122
|
+
title={`${status.status}: ${Math.round(percentage * 100)}%`}
|
123
|
+
zIndex={1000}
|
128
124
|
>
|
129
|
-
<
|
130
|
-
|
131
|
-
|
132
|
-
}
|
125
|
+
<svg
|
126
|
+
key={status.status}
|
127
|
+
width={svgSize}
|
128
|
+
height={svgSize}
|
129
|
+
viewBox={`0 0 ${svgSize} ${svgSize}`}
|
130
|
+
onClick={() => onClick(status)}
|
131
|
+
role="img"
|
132
|
+
aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
|
133
133
|
>
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
stroke={
|
139
|
-
backgroundColorMapping[
|
140
|
-
normalizedStatus as keyof typeof colorMapping
|
141
|
-
]
|
142
|
-
}
|
143
|
-
strokeWidth={lineWidth}
|
144
|
-
/>
|
145
|
-
{/* Status Arc */}
|
146
|
-
<path
|
147
|
-
d={foregroundArcPath}
|
148
|
-
fill="none"
|
149
|
-
stroke={
|
150
|
-
colorMapping[normalizedStatus as keyof typeof colorMapping]
|
151
|
-
}
|
152
|
-
strokeWidth={lineWidth}
|
153
|
-
/>
|
154
|
-
{/* Percentage Text */}
|
155
|
-
<text
|
156
|
-
x="0"
|
157
|
-
y="0"
|
158
|
-
fill={
|
159
|
-
colorMapping[normalizedStatus as keyof typeof colorMapping]
|
160
|
-
}
|
161
|
-
textAnchor="middle"
|
162
|
-
dominantBaseline="central"
|
134
|
+
<g
|
135
|
+
transform={`translate(${radius + lineWidth}, ${
|
136
|
+
radius + lineWidth
|
137
|
+
})`}
|
163
138
|
>
|
164
|
-
{
|
165
|
-
|
166
|
-
|
167
|
-
|
139
|
+
{/* Background Circle */}
|
140
|
+
<path
|
141
|
+
d={backgroundArcPath}
|
142
|
+
fill="none"
|
143
|
+
stroke={
|
144
|
+
backgroundColorMapping[
|
145
|
+
normalizedStatus as keyof typeof colorMapping
|
146
|
+
]
|
147
|
+
}
|
148
|
+
strokeWidth={lineWidth}
|
149
|
+
/>
|
150
|
+
{/* Status Arc */}
|
151
|
+
<path
|
152
|
+
d={foregroundArcPath}
|
153
|
+
fill="none"
|
154
|
+
stroke={
|
155
|
+
colorMapping[normalizedStatus as keyof typeof colorMapping]
|
156
|
+
}
|
157
|
+
strokeWidth={lineWidth}
|
158
|
+
/>
|
159
|
+
{/* Percentage Text */}
|
160
|
+
<text
|
161
|
+
x="0"
|
162
|
+
y="0"
|
163
|
+
fill={
|
164
|
+
colorMapping[normalizedStatus as keyof typeof colorMapping]
|
165
|
+
}
|
166
|
+
textAnchor="middle"
|
167
|
+
dominantBaseline="central"
|
168
|
+
>
|
169
|
+
{`${Math.round(percentage * 100)}%`}
|
170
|
+
</text>
|
171
|
+
</g>
|
172
|
+
</svg>
|
173
|
+
</Tooltip>
|
168
174
|
);
|
169
175
|
})}
|
170
176
|
</div>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
.ff-create-variable-slider {
|
2
|
+
padding: 8px;
|
3
|
+
display: flex;
|
4
|
+
flex-direction: column;
|
5
|
+
gap: 8px;
|
6
|
+
.ff-hide-value-content {
|
7
|
+
display: flex;
|
8
|
+
align-items: center;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
.ff-create-slider-footer {
|
13
|
+
width: 100%;
|
14
|
+
gap: 8px;
|
15
|
+
display: flex;
|
16
|
+
align-items: center;
|
17
|
+
justify-content: flex-end;
|
18
|
+
}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import { useState } from 'react';
|
3
|
+
import CreateVariableSlider from './CreateVariableSlider';
|
4
|
+
import { CreateVariableProps } from './types';
|
5
|
+
import React from 'react';
|
6
|
+
|
7
|
+
const meta: Meta<typeof CreateVariableSlider> = {
|
8
|
+
title: 'Components/CreateVariableSlider',
|
9
|
+
component: CreateVariableSlider,
|
10
|
+
};
|
11
|
+
|
12
|
+
export default meta;
|
13
|
+
type Story = StoryObj<typeof CreateVariableSlider>;
|
14
|
+
|
15
|
+
export const WithState: Story = {
|
16
|
+
render: (args) => {
|
17
|
+
const [variableName, setVariableName] = useState('');
|
18
|
+
const [value, setValue] = useState('');
|
19
|
+
const [selectedVariableType, setSelectedVariableType] = useState({
|
20
|
+
label: 'Local Variable',
|
21
|
+
value: 'LOCAL',
|
22
|
+
});
|
23
|
+
const [hideValue, setHideValue] = useState(false);
|
24
|
+
|
25
|
+
const variableTypeList = [
|
26
|
+
{ label: 'Local Variable', value: 'LOCAL' },
|
27
|
+
{ label: 'Global Variable', value: 'GLOBAL' },
|
28
|
+
{ label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
|
29
|
+
];
|
30
|
+
const handleNameChange = (value) => {
|
31
|
+
setVariableName(value);
|
32
|
+
};
|
33
|
+
const handleValueChange = (value) => {
|
34
|
+
setValue(value);
|
35
|
+
};
|
36
|
+
const handleTypeChange = (value) => {
|
37
|
+
setSelectedVariableType(value);
|
38
|
+
};
|
39
|
+
const handleSubmit = () => {
|
40
|
+
let variable = {
|
41
|
+
name: variableName,
|
42
|
+
value,
|
43
|
+
type: selectedVariableType.value,
|
44
|
+
hideValue,
|
45
|
+
};
|
46
|
+
console.log('Variable :', variable);
|
47
|
+
};
|
48
|
+
|
49
|
+
return (
|
50
|
+
<CreateVariableSlider
|
51
|
+
{...args}
|
52
|
+
isOpen={true} // Ensures the drawer is open for interaction
|
53
|
+
variableName={variableName}
|
54
|
+
value={value}
|
55
|
+
selectedVariableType={selectedVariableType}
|
56
|
+
hideValue={hideValue}
|
57
|
+
variableTypesList={variableTypeList}
|
58
|
+
onNameChange={handleNameChange}
|
59
|
+
onValueChange={handleValueChange}
|
60
|
+
onVariableTypeChange={handleTypeChange}
|
61
|
+
onHideChange={setHideValue}
|
62
|
+
handleSubmit={handleSubmit}
|
63
|
+
/>
|
64
|
+
);
|
65
|
+
},
|
66
|
+
};
|
@@ -0,0 +1,95 @@
|
|
1
|
+
import { type FC, type JSX } from 'react';
|
2
|
+
import Drawer from '../Drawer';
|
3
|
+
import { CreateVariableProps } from './types';
|
4
|
+
import Input from '../Input';
|
5
|
+
import Select from '../Select';
|
6
|
+
import './CreateVariableSlider.scss';
|
7
|
+
import Checkbox from '../Checkbox';
|
8
|
+
import Icon from '../Icon';
|
9
|
+
import Button from '../Button';
|
10
|
+
import Tooltip from '../Tooltip';
|
11
|
+
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
12
|
+
|
13
|
+
const CreateVariableSlider: FC<CreateVariableProps> = ({
|
14
|
+
isOpen,
|
15
|
+
variableTypesList = [],
|
16
|
+
onClose,
|
17
|
+
onNameChange,
|
18
|
+
onValueChange,
|
19
|
+
variableName,
|
20
|
+
value,
|
21
|
+
onVariableTypeChange,
|
22
|
+
selectedVariableType,
|
23
|
+
hideValue = false,
|
24
|
+
onHideChange,
|
25
|
+
handleSubmit,
|
26
|
+
}): JSX.Element => {
|
27
|
+
const FooterContent: FC = (): JSX.Element => {
|
28
|
+
return (
|
29
|
+
<div className="ff-create-slider-footer">
|
30
|
+
<Button onClick={onClose} label="Cancel" variant="tertiary" />
|
31
|
+
<Button
|
32
|
+
variant="primary"
|
33
|
+
label="create"
|
34
|
+
type="submit"
|
35
|
+
onClick={handleSubmit}
|
36
|
+
disabled={checkEmpty(variableName) || checkEmpty(value)}
|
37
|
+
/>
|
38
|
+
</div>
|
39
|
+
);
|
40
|
+
};
|
41
|
+
return (
|
42
|
+
<Drawer
|
43
|
+
onClose={onClose}
|
44
|
+
isOpen={isOpen}
|
45
|
+
title="Create Variable"
|
46
|
+
width="284px"
|
47
|
+
height="222px"
|
48
|
+
top="35%"
|
49
|
+
right={8}
|
50
|
+
isFooterRequired={true}
|
51
|
+
overlay
|
52
|
+
footerContent={<FooterContent />}
|
53
|
+
>
|
54
|
+
<div className="ff-create-variable-slider">
|
55
|
+
<Input
|
56
|
+
label="Variable Name"
|
57
|
+
required
|
58
|
+
type="text"
|
59
|
+
name="variable name"
|
60
|
+
value={variableName}
|
61
|
+
onChange={(event) => onNameChange(event.target.value)}
|
62
|
+
/>
|
63
|
+
<Select
|
64
|
+
label="Variable Type"
|
65
|
+
required
|
66
|
+
onChange={(option: any) => onVariableTypeChange(option)}
|
67
|
+
selectedOption={selectedVariableType}
|
68
|
+
optionsList={variableTypesList}
|
69
|
+
optionZIndex={99999}
|
70
|
+
/>
|
71
|
+
<Input
|
72
|
+
label="Variable Value"
|
73
|
+
required
|
74
|
+
type="text"
|
75
|
+
name="value"
|
76
|
+
value={value}
|
77
|
+
onChange={(event) => onValueChange(event.target.value)}
|
78
|
+
/>
|
79
|
+
<div className="ff-hide-value-content">
|
80
|
+
<Checkbox
|
81
|
+
onChange={(event) => onHideChange(event.target.checked)}
|
82
|
+
name="hide value"
|
83
|
+
label="Hide Value"
|
84
|
+
checked={hideValue}
|
85
|
+
/>
|
86
|
+
<Tooltip title="Once the value is hidden, it cannot be undone">
|
87
|
+
<Icon name="info" width={12} height={12} />
|
88
|
+
</Tooltip>
|
89
|
+
</div>
|
90
|
+
</div>
|
91
|
+
</Drawer>
|
92
|
+
);
|
93
|
+
};
|
94
|
+
|
95
|
+
export default CreateVariableSlider;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './CreateVariableSlider';
|
@@ -0,0 +1,58 @@
|
|
1
|
+
export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
|
2
|
+
|
3
|
+
export type DynamicObj = {
|
4
|
+
[key: string]: any;
|
5
|
+
};
|
6
|
+
|
7
|
+
export interface CreateVariableProps {
|
8
|
+
/**
|
9
|
+
* Open Create variable Slider
|
10
|
+
*/
|
11
|
+
isOpen: boolean;
|
12
|
+
/**
|
13
|
+
* Value for the variable name
|
14
|
+
*/
|
15
|
+
variableName: string;
|
16
|
+
/**
|
17
|
+
* Value for the variable to be created
|
18
|
+
*/
|
19
|
+
value: string;
|
20
|
+
/**
|
21
|
+
* List for the variable types
|
22
|
+
*/
|
23
|
+
variableTypesList: DynamicObj[];
|
24
|
+
/**
|
25
|
+
* Selected variable type
|
26
|
+
*/
|
27
|
+
selectedVariableType: DynamicObj;
|
28
|
+
/**
|
29
|
+
* Function to handle variable type change
|
30
|
+
* @param option
|
31
|
+
* @returns
|
32
|
+
*/
|
33
|
+
onVariableTypeChange: (option: DynamicObj) => void;
|
34
|
+
/**
|
35
|
+
* Function to handle close
|
36
|
+
*/
|
37
|
+
onClose?: () => void;
|
38
|
+
/**
|
39
|
+
* onChange of name
|
40
|
+
*/
|
41
|
+
onNameChange: (value: string | boolean) => void;
|
42
|
+
/**
|
43
|
+
* onChange of value
|
44
|
+
*/
|
45
|
+
onValueChange: (value: string | boolean) => void;
|
46
|
+
/**
|
47
|
+
* Hide value
|
48
|
+
*/
|
49
|
+
hideValue: boolean;
|
50
|
+
/**
|
51
|
+
* onChange for hide value
|
52
|
+
*/
|
53
|
+
onHideChange: (value: boolean) => void;
|
54
|
+
/**
|
55
|
+
* Function to handle submit
|
56
|
+
*/
|
57
|
+
handleSubmit: () => void;
|
58
|
+
}
|
@@ -19,7 +19,6 @@
|
|
19
19
|
right: 0;
|
20
20
|
bottom: 0;
|
21
21
|
top: 87px;
|
22
|
-
min-width: 450px;
|
23
22
|
background-color: var(--primary-button-text-color);
|
24
23
|
z-index: 999;
|
25
24
|
transform: translateX(100%);
|
@@ -123,6 +122,7 @@
|
|
123
122
|
z-index: 1000;
|
124
123
|
background-color: var(--base-bg-color);
|
125
124
|
transform: translateY(3px);
|
125
|
+
border-radius: 0 0 4px 4px;
|
126
126
|
|
127
127
|
.button-container {
|
128
128
|
display: flex;
|
@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
|
|
36
36
|
zIndex = 999,
|
37
37
|
secondLayerZIndex = false,
|
38
38
|
top,
|
39
|
+
height,
|
40
|
+
width,
|
41
|
+
right = 0,
|
39
42
|
}: DrawerProps) => {
|
40
43
|
const [isExpanded, setIsExpanded] = useState(false);
|
41
44
|
|
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
|
|
85
88
|
className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
|
86
89
|
'ff-drawer--open': isOpen,
|
87
90
|
})}
|
88
|
-
style={{ zIndex, top }}
|
91
|
+
style={{ zIndex, top, height, width, right }}
|
89
92
|
>
|
90
93
|
{showHeader && (
|
91
94
|
<div
|
@@ -141,4 +141,17 @@ export interface DrawerProps {
|
|
141
141
|
* Custom top for the drawer
|
142
142
|
*/
|
143
143
|
top?: string;
|
144
|
+
/**
|
145
|
+
* Height of the drawer
|
146
|
+
*/
|
147
|
+
height?: string;
|
148
|
+
/**
|
149
|
+
*
|
150
|
+
* width of the drawer
|
151
|
+
*/
|
152
|
+
width?: string;
|
153
|
+
/**
|
154
|
+
* Position from right
|
155
|
+
*/
|
156
|
+
right?: string | number;
|
144
157
|
}
|
@@ -222,6 +222,14 @@ import AddToArchive from '../../assets/icons/add_archive.svg?react';
|
|
222
222
|
import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
|
223
223
|
import InfoUser from '../../assets/icons/info_user.svg?react';
|
224
224
|
import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
|
225
|
+
import ProjectStatusIcon from '../../assets/icons/project_status_icon.svg?react';
|
226
|
+
import captureIcon from '../../assets/icons/capture_icon.svg?react';
|
227
|
+
import rotateIcon from '../../assets/icons/rotate_icon.svg?react';
|
228
|
+
import tapIcon from '../../assets/icons/tap_icon.svg?react';
|
229
|
+
import refreshIcon from '../../assets/icons/refresh_icon.svg?react';
|
230
|
+
import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
|
231
|
+
import backward from '../../assets/icons/backward.svg?react';
|
232
|
+
import forward from '../../assets/icons/forward.svg?react';
|
225
233
|
|
226
234
|
Components['success'] = ToastSuccessIcon;
|
227
235
|
Components['alert'] = Alert;
|
@@ -442,5 +450,13 @@ Components['remove_user'] = RemoveUser;
|
|
442
450
|
Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
|
443
451
|
Components['info_user'] = InfoUser;
|
444
452
|
Components['web_service_icon'] = WebServiceIcon;
|
453
|
+
Components['project_status_icon'] = ProjectStatusIcon;
|
454
|
+
Components['capture_icon'] = captureIcon;
|
455
|
+
Components['backward'] = backward;
|
456
|
+
Components['forward'] = forward;
|
457
|
+
Components['refresh_icon'] = refreshIcon;
|
458
|
+
Components['rotate_icon'] = rotateIcon;
|
459
|
+
Components['tap_icon'] = tapIcon;
|
460
|
+
Components['swipe_icon'] = swipeIcon;
|
445
461
|
|
446
462
|
export default Components;
|
@@ -9,32 +9,32 @@
|
|
9
9
|
cursor: pointer;
|
10
10
|
@include mixins.center-content();
|
11
11
|
gap: 8px;
|
12
|
-
background-color: var(--
|
12
|
+
background-color: var(--hover-color);
|
13
13
|
padding: 2px 8px 2px 2px;
|
14
|
-
border: 1px solid
|
14
|
+
border: 1px solid var(--secondary-icon-color);
|
15
15
|
.button-icon {
|
16
16
|
width: 20px;
|
17
17
|
height: 20px;
|
18
|
-
border: 1px solid
|
18
|
+
border: 1px solid var(--primary-icon-color);
|
19
19
|
border-radius: 50%;
|
20
20
|
@include mixins.center-content();
|
21
|
-
background-color: var(--
|
21
|
+
background-color: var(--secondary-icon-color);
|
22
22
|
.ff-icon-color {
|
23
23
|
path {
|
24
|
-
color: var(--
|
24
|
+
color: var(--primary-icon-color);
|
25
25
|
}
|
26
26
|
}
|
27
27
|
}
|
28
28
|
.icon-name {
|
29
|
-
color: var(--
|
29
|
+
color: var(--secondary-icon-color);
|
30
30
|
@include mixins.center-content();
|
31
31
|
}
|
32
32
|
&:hover {
|
33
|
-
border: 1px solid
|
34
|
-
background-color: var(--
|
33
|
+
border: 1px solid transparent;
|
34
|
+
background-color: var(--secondary-icon-color);
|
35
35
|
.icon-name {
|
36
36
|
font-weight: 600;
|
37
|
-
color: var(--
|
37
|
+
color: var(--primary-icon-color);
|
38
38
|
@include mixins.center-content();
|
39
39
|
}
|
40
40
|
.button-icon {
|
@@ -43,10 +43,10 @@
|
|
43
43
|
border: 1px solid transparent;
|
44
44
|
border-radius: 50%;
|
45
45
|
@include mixins.center-content();
|
46
|
-
background-color: var(--
|
46
|
+
background-color: var(--hover-color);
|
47
47
|
.ff-icon-color {
|
48
48
|
path {
|
49
|
-
color: var(--
|
49
|
+
color: var(--secondary-icon-color);
|
50
50
|
}
|
51
51
|
}
|
52
52
|
}
|
@@ -9,9 +9,10 @@ const IconButton: React.FC<IconButtonProps> = ({
|
|
9
9
|
label,
|
10
10
|
iconName = 'plus_user_icon',
|
11
11
|
onClick,
|
12
|
+
ref,
|
12
13
|
}) => {
|
13
14
|
return (
|
14
|
-
<button onClick={onClick} className={classNames('ff-plus-icon')}>
|
15
|
+
<button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
|
15
16
|
<div className={classNames('button-icon')}>
|
16
17
|
<Icon
|
17
18
|
height={12}
|
@@ -35,7 +35,6 @@
|
|
35
35
|
&.popover-arrow-top {
|
36
36
|
bottom: 100%;
|
37
37
|
left: 30px;
|
38
|
-
border-width: 0 10px 10px 10px;
|
39
38
|
padding: 0 3px 0 0;
|
40
39
|
border-color: transparent transparent var(--ff-mini-modal-border)
|
41
40
|
transparent;
|
@@ -46,7 +45,6 @@
|
|
46
45
|
}
|
47
46
|
&.popover-arrow-left {
|
48
47
|
left: -15px; //align the arrow with modal for the right side modal
|
49
|
-
border-width: 10px 10px 10px 0;
|
50
48
|
border-color: transparent var(--ff-mini-modal-border) transparent
|
51
49
|
transparent;
|
52
50
|
filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -58,7 +56,6 @@
|
|
58
56
|
&.popover-arrow-bottom {
|
59
57
|
top: 100%;
|
60
58
|
left: 30px;
|
61
|
-
border-width: 10px 10px 0 10px;
|
62
59
|
border-color: var(--ff-mini-modal-border) transparent transparent
|
63
60
|
transparent; // Bottom part of the arrow with the correct color
|
64
61
|
filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -70,7 +67,6 @@
|
|
70
67
|
&.popover-arrow-right {
|
71
68
|
right: -10px;
|
72
69
|
top: 66px;
|
73
|
-
border-width: 10px 0 10px 10px;
|
74
70
|
border-color: transparent transparent transparent
|
75
71
|
var(--ff-mini-modal-border);
|
76
72
|
filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
|
@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
|
|
55
55
|
isOverlay: true,
|
56
56
|
zIndexOverlay: 99,
|
57
57
|
}}
|
58
|
-
modalProperties={{ width: 300, height: 180 }}
|
58
|
+
modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
|
59
59
|
headerProps={
|
60
60
|
<>
|
61
61
|
<Typography as="p">Modal 1</Typography>
|
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
|
|
271
271
|
isOverlay: true,
|
272
272
|
zIndexOverlay: 99,
|
273
273
|
}}
|
274
|
-
modalProperties={{ width: 300, height: 250 }}
|
274
|
+
modalProperties={{ width: 300, height: 250, left: 180 }}
|
275
|
+
arrowProperties={{ left: 270, size: 6 }}
|
275
276
|
arrowZIndex={1000}
|
276
277
|
headerProps={
|
277
278
|
<>
|
@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
31
31
|
extraLeftSpace,
|
32
32
|
isIconModel,
|
33
33
|
wrapperProperties,
|
34
|
+
arrowProperties,
|
34
35
|
arrowZIndex,
|
35
36
|
overlay,
|
36
37
|
outSideClick,
|
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
43
44
|
});
|
44
45
|
const [isVisible, setIsVisible] = useState(false);
|
45
46
|
const modalRef = useRef<HTMLDivElement>(null);
|
47
|
+
const {
|
48
|
+
width: modalWidth,
|
49
|
+
height: modalHeight,
|
50
|
+
borderRadius: modalBorderRadius = 4,
|
51
|
+
zIndex: modalZIndex = 99,
|
52
|
+
boxShadow: modalBoxShadow,
|
53
|
+
left: modalLeft,
|
54
|
+
top: modalTop,
|
55
|
+
} = modalProperties || {};
|
46
56
|
|
57
|
+
const {
|
58
|
+
left: popOverLeft,
|
59
|
+
top: popOverTop,
|
60
|
+
size: popOverSize = 10,
|
61
|
+
} = arrowProperties || {};
|
47
62
|
// Function to calculate available space
|
48
63
|
const getAvailableSpace = (rect: Rect): AvailableSpace => {
|
49
64
|
const { top, left, bottom, right } = rect;
|
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
196
211
|
};
|
197
212
|
}, [calculatePosition]);
|
198
213
|
|
199
|
-
const {
|
200
|
-
width: modalWidth,
|
201
|
-
height: modalHeight,
|
202
|
-
borderRadius: modalBorderRadius = 4,
|
203
|
-
zIndex: modalZIndex = 99,
|
204
|
-
boxShadow: modalBoxShadow,
|
205
|
-
} = modalProperties || {};
|
206
|
-
|
207
214
|
const {
|
208
215
|
width: wrapperWidth = 35,
|
209
216
|
zIndex: wrapperZIndex = 101,
|
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
234
241
|
animatedModal: isAnimated,
|
235
242
|
})}
|
236
243
|
style={{
|
237
|
-
top: `${calculatedModalTop}px`,
|
238
|
-
left: `${calculatedModalLeft}px`,
|
244
|
+
top: `${modalTop ?? calculatedModalTop}px`,
|
245
|
+
left: `${modalLeft ?? calculatedModalLeft}px`,
|
239
246
|
}}
|
240
247
|
>
|
241
248
|
{isPopOver && (
|
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
251
258
|
} ${getArrowClassName()}`}
|
252
259
|
style={{
|
253
260
|
zIndex: `${arrowZIndex}`,
|
261
|
+
top: `${popOverTop && popOverTop}px`,
|
262
|
+
left: `${popOverLeft && popOverLeft}px`,
|
263
|
+
borderWidth: `${
|
264
|
+
modalPosition === 'right'
|
265
|
+
? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
|
266
|
+
: modalPosition === 'top'
|
267
|
+
? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
|
268
|
+
: modalPosition === 'left'
|
269
|
+
? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
|
270
|
+
: `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
|
271
|
+
}`,
|
254
272
|
}}
|
255
273
|
/>
|
256
274
|
)}
|
@@ -5,6 +5,8 @@ interface ModalDimensions {
|
|
5
5
|
borderRadius?: number;
|
6
6
|
zIndex?: number;
|
7
7
|
boxShadow?: string;
|
8
|
+
left?: number;
|
9
|
+
top?: number;
|
8
10
|
}
|
9
11
|
export interface MiniEditModalProps {
|
10
12
|
/**
|
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
|
|
94
96
|
boxShadow?: string;
|
95
97
|
};
|
96
98
|
arrowZIndex?: number;
|
99
|
+
arrowProperties?: {
|
100
|
+
left?: number;
|
101
|
+
top?: number;
|
102
|
+
size?: number;
|
103
|
+
};
|
97
104
|
overlay?: {
|
98
105
|
isOverlay?: boolean;
|
99
106
|
zIndexOverlay?: number;
|