pixel-react 1.1.7 → 1.1.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/.yarn/install-state.gz +0 -0
- package/lib/components/AttachmentButton/AttachmentButton.d.ts +5 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/AttachmentButton/index.d.ts +1 -0
- package/lib/components/AttachmentButton/types.d.ts +8 -0
- package/lib/components/RadioButton/radioButtonTypes.d.ts +15 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +15 -0
- package/lib/components/Select/Select.d.ts +1 -1
- package/lib/components/Select/types.d.ts +4 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +8 -0
- package/lib/components/TableTree/TableTree.d.ts +1 -0
- package/lib/index.d.ts +27 -3
- package/lib/index.esm.js +399 -580
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +399 -579
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +10 -0
- package/src/assets/Themes/DarkTheme.scss +9 -0
- package/src/assets/icons/add_file.svg +14 -0
- package/src/assets/icons/nlp_help_icon.svg +3 -0
- package/src/assets/icons/notification_icon.svg +3 -0
- package/src/assets/icons/update_icon.svg +3 -0
- package/src/components/AppHeader/AppHeader.scss +56 -0
- package/src/components/AttachmentButton/AttachmentButton.scss +9 -0
- package/src/components/AttachmentButton/AttachmentButton.stories.tsx +76 -0
- package/src/components/AttachmentButton/AttachmentButton.tsx +113 -0
- package/src/components/AttachmentButton/index.ts +1 -0
- package/src/components/AttachmentButton/types.ts +8 -0
- package/src/components/Drawer/Drawer.scss +0 -1
- package/src/components/Icon/iconList.ts +9 -0
- package/src/components/Modal/modal.scss +1 -1
- package/src/components/MultiSelect/MultiSelect.scss +2 -2
- package/src/components/RadioButton/RadioButton.scss +74 -68
- package/src/components/RadioButton/RadioButton.tsx +22 -15
- package/src/components/RadioButton/radioButtonTypes.tsx +18 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +42 -1
- package/src/components/RadioGroup/RadioGroup.tsx +3 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +18 -0
- package/src/components/Select/Select.scss +1 -2
- package/src/components/Select/Select.tsx +3 -2
- package/src/components/Select/types.ts +5 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +5 -5
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
- package/src/components/Table/Table.scss +1 -0
- package/src/components/Table/Table.tsx +28 -13
- package/src/components/Table/Types.ts +8 -0
- package/src/components/TableTree/TableTree.scss +18 -2
- package/src/components/TableTree/TableTree.stories.tsx +9 -51
- package/src/components/TableTree/TableTree.tsx +15 -2
- package/src/index.ts +2 -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
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
@@ -12,87 +12,93 @@
|
|
12
12
|
transition: $properties $duration;
|
13
13
|
}
|
14
14
|
|
15
|
-
.ff-radio {
|
16
|
-
@extend .fontSm;
|
17
|
-
position: relative;
|
18
|
-
color: var(--text-color);
|
15
|
+
.ff-radio-wrapper {
|
19
16
|
display: flex;
|
20
17
|
align-items: center;
|
21
|
-
|
22
|
-
.ff-radio-input {
|
23
|
-
display: none;
|
24
|
-
}
|
25
|
-
.ff-radio-custom {
|
26
|
-
box-sizing: content-box;
|
27
|
-
@include circle(14px, 1px solid var(--radio-button-border)); //todo
|
28
|
-
position: relative;
|
29
|
-
margin-right: 8px;
|
30
|
-
@include transition(border-color, background-color);
|
18
|
+
gap: 4px;
|
31
19
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
20
|
+
.ff-radio {
|
21
|
+
@extend .fontSm;
|
22
|
+
position: relative;
|
23
|
+
color: var(--text-color);
|
24
|
+
display: flex;
|
25
|
+
align-items: center;
|
26
|
+
cursor: pointer;
|
27
|
+
.ff-radio-input {
|
28
|
+
display: none;
|
41
29
|
}
|
30
|
+
.ff-radio-custom {
|
31
|
+
box-sizing: content-box;
|
32
|
+
@include circle(14px, 1px solid var(--radio-button-border)); //todo
|
33
|
+
position: relative;
|
34
|
+
margin-right: 8px;
|
35
|
+
@include transition(border-color, background-color);
|
42
36
|
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
}
|
37
|
+
&::before {
|
38
|
+
content: '';
|
39
|
+
@include circle(12px);
|
40
|
+
background: #fbfdff; //todo
|
41
|
+
position: absolute;
|
42
|
+
top: 50%;
|
43
|
+
left: 50%;
|
44
|
+
transform: translate(-50%, -50%);
|
45
|
+
@include transition(background-color);
|
46
|
+
}
|
54
47
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
48
|
+
&::after {
|
49
|
+
content: '';
|
50
|
+
@include circle(16px, 4px solid #f7edff); //todo
|
51
|
+
position: absolute;
|
52
|
+
top: 50%;
|
53
|
+
left: 50%;
|
54
|
+
transform: translate(-50%, -50%);
|
55
|
+
opacity: 0;
|
56
|
+
@include transition(opacity);
|
57
|
+
}
|
63
58
|
}
|
64
|
-
}
|
65
|
-
.ff-radio-input:checked + .ff-radio-custom {
|
66
|
-
border-color: var(--brand-color);
|
67
59
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
60
|
+
&:hover .ff-radio-custom {
|
61
|
+
border: 1px solid var(--brand-color);
|
62
|
+
&::before {
|
63
|
+
background-color: var(--drawer-footer-bg);
|
64
|
+
}
|
65
|
+
&::after {
|
66
|
+
opacity: 1;
|
67
|
+
@include transition(opacity);
|
68
|
+
}
|
72
69
|
}
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
70
|
+
.ff-radio-input:checked + .ff-radio-custom {
|
71
|
+
border-color: var(--brand-color);
|
72
|
+
|
73
|
+
&::before {
|
74
|
+
background: var(--brand-color);
|
75
|
+
height: 12px;
|
76
|
+
width: 12px;
|
77
|
+
}
|
78
78
|
}
|
79
|
+
.ff-radio-input:disabled + .ff-radio-custom {
|
80
|
+
border: 1px solid var(--radio-button-border);
|
81
|
+
&::before {
|
82
|
+
background: var(--drawer-footer-bg);
|
83
|
+
}
|
79
84
|
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
85
|
+
&::after {
|
86
|
+
border: 4px solid var(--radio-button-hover);
|
87
|
+
opacity: 0;
|
88
|
+
@include transition(opacity);
|
89
|
+
}
|
84
90
|
}
|
85
|
-
}
|
86
91
|
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
+
.ff-radio-input:checked:disabled + .ff-radio-custom {
|
93
|
+
border-color: var(--brand-color);
|
94
|
+
background-color: var(--drawer-footer-bg);
|
95
|
+
&::before {
|
96
|
+
background: var(--brand-color);
|
97
|
+
}
|
98
|
+
}
|
99
|
+
&--disabled {
|
100
|
+
cursor: default;
|
101
|
+
opacity: 0.5;
|
92
102
|
}
|
93
|
-
}
|
94
|
-
&--disabled {
|
95
|
-
cursor: default;
|
96
|
-
opacity: 0.5;
|
97
103
|
}
|
98
104
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import './RadioButton.scss';
|
3
3
|
import classNames from 'classnames';
|
4
|
+
import Tooltip from '../Tooltip';
|
4
5
|
|
5
6
|
const RadioButton: React.FC<RadioButtonProps> = ({
|
6
7
|
label,
|
@@ -9,23 +10,29 @@ const RadioButton: React.FC<RadioButtonProps> = ({
|
|
9
10
|
onChange,
|
10
11
|
value,
|
11
12
|
disabled = false,
|
13
|
+
showTooltip = false,
|
14
|
+
tooltipChildren = 'Custom JSX',
|
15
|
+
tooltipTitle = 'Custom JSX',
|
12
16
|
}) => {
|
13
17
|
return (
|
14
|
-
<
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
18
|
+
<div className="ff-radio-wrapper">
|
19
|
+
<label
|
20
|
+
className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
|
21
|
+
>
|
22
|
+
<input
|
23
|
+
disabled={disabled}
|
24
|
+
type="radio"
|
25
|
+
name={name}
|
26
|
+
value={value}
|
27
|
+
checked={checked}
|
28
|
+
onChange={onChange}
|
29
|
+
className="ff-radio-input"
|
30
|
+
/>
|
31
|
+
<span className="ff-radio-custom" />
|
32
|
+
{label}
|
33
|
+
</label>
|
34
|
+
{showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
|
35
|
+
</div>
|
29
36
|
);
|
30
37
|
};
|
31
38
|
|
@@ -37,4 +37,22 @@ interface RadioButtonProps {
|
|
37
37
|
* Optional.
|
38
38
|
*/
|
39
39
|
disabled?: boolean;
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Indicates whether the radio button show the tooltip.
|
43
|
+
* Optional.
|
44
|
+
*/
|
45
|
+
showTooltip?: boolean;
|
46
|
+
|
47
|
+
/**
|
48
|
+
* The content of the tooltip.
|
49
|
+
* Optional.
|
50
|
+
*/
|
51
|
+
tooltipChildren?: React.ReactNode;
|
52
|
+
|
53
|
+
/**
|
54
|
+
* The content of the tooltip.
|
55
|
+
* Optional.
|
56
|
+
*/
|
57
|
+
tooltipTitle?: React.ReactNode;
|
40
58
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import RadioGroup from './RadioGroup';
|
3
3
|
import { useState } from 'react';
|
4
|
+
import Icon from '../Icon';
|
4
5
|
|
5
6
|
const meta: Meta<typeof RadioGroup> = {
|
6
7
|
title: 'Components/RadioGroup',
|
@@ -57,7 +58,7 @@ export const WithDisabledOption: Story = {
|
|
57
58
|
},
|
58
59
|
};
|
59
60
|
|
60
|
-
export const
|
61
|
+
export const DisabledSelected: Story = {
|
61
62
|
render: () => {
|
62
63
|
const radioOptions = [
|
63
64
|
{ value: 'men', label: 'Men' },
|
@@ -78,4 +79,44 @@ export const DisabledSelcted: Story = {
|
|
78
79
|
);
|
79
80
|
},
|
80
81
|
};
|
82
|
+
|
83
|
+
export const WithToolTipIcon: Story = {
|
84
|
+
render: () => {
|
85
|
+
const radioOptions = [
|
86
|
+
{
|
87
|
+
value: 'men',
|
88
|
+
label: 'Men',
|
89
|
+
showTooltip: true,
|
90
|
+
tooltipChildren: <Icon name="info" />,
|
91
|
+
tooltipTitle: 'Info',
|
92
|
+
},
|
93
|
+
{
|
94
|
+
value: 'women',
|
95
|
+
label: 'Women',
|
96
|
+
showTooltip: true,
|
97
|
+
disabled: true,
|
98
|
+
},
|
99
|
+
{
|
100
|
+
value: 'other',
|
101
|
+
label: 'Other',
|
102
|
+
showTooltip: true,
|
103
|
+
tooltipChildren: <Icon name="info" />,
|
104
|
+
tooltipTitle: 'Info',
|
105
|
+
},
|
106
|
+
];
|
107
|
+
const [selectedOption, setSelectedOption] = useState('women');
|
108
|
+
const handleOptionChange = (option: Option) => {
|
109
|
+
setSelectedOption(option.value);
|
110
|
+
};
|
111
|
+
return (
|
112
|
+
<RadioGroup
|
113
|
+
options={radioOptions}
|
114
|
+
onChange={handleOptionChange}
|
115
|
+
name="gender"
|
116
|
+
selectedValue={selectedOption}
|
117
|
+
/>
|
118
|
+
);
|
119
|
+
},
|
120
|
+
};
|
121
|
+
|
81
122
|
export default meta;
|
@@ -16,6 +16,9 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
|
|
16
16
|
<RadioButton
|
17
17
|
key={option.value}
|
18
18
|
label={option.label}
|
19
|
+
showTooltip={option?.showTooltip}
|
20
|
+
tooltipChildren={option?.tooltipChildren}
|
21
|
+
tooltipTitle={option?.tooltipTitle}
|
19
22
|
name={name}
|
20
23
|
value={option.value}
|
21
24
|
checked={selectedValue === option.value}
|
@@ -17,6 +17,24 @@ interface Option {
|
|
17
17
|
* Optional.
|
18
18
|
*/
|
19
19
|
disabled?: boolean;
|
20
|
+
|
21
|
+
/**
|
22
|
+
* Indicates whether the radio button show the tooltip.
|
23
|
+
* Optional.
|
24
|
+
*/
|
25
|
+
showTooltip?: boolean;
|
26
|
+
|
27
|
+
/**
|
28
|
+
* The content of the tooltip.
|
29
|
+
* Optional.
|
30
|
+
*/
|
31
|
+
tooltipChildren?: React.ReactNode;
|
32
|
+
|
33
|
+
/**
|
34
|
+
* The content of the tooltip.
|
35
|
+
* Optional.
|
36
|
+
*/
|
37
|
+
tooltipTitle?: React.ReactNode;
|
20
38
|
}
|
21
39
|
|
22
40
|
/**
|
@@ -110,7 +110,7 @@
|
|
110
110
|
&-input {
|
111
111
|
@extend .fontSm;
|
112
112
|
@include absolute-position(6px, auto, auto, auto);
|
113
|
-
width:
|
113
|
+
width: 100%;
|
114
114
|
min-height: calc(100% - 8px);
|
115
115
|
padding: 0 28px 0 8px;
|
116
116
|
border-radius: 4px;
|
@@ -118,7 +118,6 @@
|
|
118
118
|
z-index: 100;
|
119
119
|
background: transparent;
|
120
120
|
outline: none;
|
121
|
-
color: var(--ff-select-text-color);
|
122
121
|
|
123
122
|
&:hover {
|
124
123
|
~ .ff-select-label {
|
@@ -115,6 +115,7 @@ const Select = ({
|
|
115
115
|
showBorder = true,
|
116
116
|
required = false,
|
117
117
|
optionsRequired = true,
|
118
|
+
selectedOptionColor = 'var(--ff-select-text-color)',
|
118
119
|
}: SelectProps) => {
|
119
120
|
const initialState: SelectState = useMemo(
|
120
121
|
() => ({
|
@@ -248,7 +249,7 @@ const Select = ({
|
|
248
249
|
return (
|
249
250
|
<div className={classNames(`ff-select-wrapper ${className}`)}>
|
250
251
|
<div className="ff-select">
|
251
|
-
<input
|
252
|
+
<input
|
252
253
|
type="text"
|
253
254
|
className={classNames('ff-select-input', {
|
254
255
|
'ff-select-input--default': !isInputFocused,
|
@@ -261,7 +262,7 @@ const Select = ({
|
|
261
262
|
'ff-select-input--no-border': !showBorder,
|
262
263
|
})}
|
263
264
|
// inline css required due to multiple overlay scenarios are present
|
264
|
-
style={{ zIndex: optionZIndex }}
|
265
|
+
style={{ zIndex: optionZIndex, color: selectedOptionColor }}
|
265
266
|
onFocus={() => handleSelectAction('FOCUS_INPUT')}
|
266
267
|
onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
|
267
268
|
onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
|
@@ -64,6 +64,11 @@ export interface SelectProps {
|
|
64
64
|
* optionsRequired:false prop removes options from dropdown & shows static label only
|
65
65
|
*/
|
66
66
|
optionsRequired?: boolean;
|
67
|
+
|
68
|
+
/**
|
69
|
+
* selectedOptionColor prop provides the custom color for the selected option
|
70
|
+
*/
|
71
|
+
selectedOptionColor?: string;
|
67
72
|
}
|
68
73
|
|
69
74
|
export interface DrowdownPosition {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
@mixin arrow-style(
|
2
|
-
$size:
|
2
|
+
$size: 6px,
|
3
3
|
$color: var(--ff-connecting-branch-color),
|
4
4
|
$z-index: 2
|
5
5
|
) {
|
@@ -25,7 +25,7 @@
|
|
25
25
|
$size: 5px,
|
26
26
|
$color: var(--ff-connecting-branch-color),
|
27
27
|
$position: right,
|
28
|
-
$offset: -
|
28
|
+
$offset: -2px
|
29
29
|
) {
|
30
30
|
position: absolute;
|
31
31
|
height: $size;
|
@@ -43,8 +43,8 @@
|
|
43
43
|
$offset: -1px
|
44
44
|
) {
|
45
45
|
position: absolute;
|
46
|
-
height:
|
47
|
-
width:
|
46
|
+
height: 5px;
|
47
|
+
width: 5px;
|
48
48
|
background-color: var(--ff-connecting-branch-color);
|
49
49
|
clip-path: $clip;
|
50
50
|
top: calc(25% - 4px);
|
@@ -180,5 +180,5 @@
|
|
180
180
|
|
181
181
|
.ff-connecting-branch-grid-reverse {
|
182
182
|
direction: rtl;
|
183
|
-
margin
|
183
|
+
margin: 0px 0px 16px 0px;
|
184
184
|
}
|
@@ -2,7 +2,12 @@ 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 {
|
5
|
+
import {
|
6
|
+
ColumnsProps,
|
7
|
+
DataProps,
|
8
|
+
TableProps,
|
9
|
+
SelectedItemProps,
|
10
|
+
} from './Types';
|
6
11
|
import { prepareData } from '../../utils/TableCell/TableCell';
|
7
12
|
import Checkbox from '../Checkbox';
|
8
13
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
@@ -19,12 +24,14 @@ const Table = ({
|
|
19
24
|
partialSelected = false,
|
20
25
|
withFixedHeader = true,
|
21
26
|
borderWithRadius = false,
|
22
|
-
|
27
|
+
headerCheckboxDisabled = false,
|
23
28
|
// noDataContent,
|
24
29
|
// noDataImage,
|
25
30
|
// noDataImageSize,
|
26
31
|
height = '100%',
|
27
32
|
className = '',
|
33
|
+
tableHeadClass = '',
|
34
|
+
tableBodyRowClass = '',
|
28
35
|
}: TableProps) => {
|
29
36
|
const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
|
30
37
|
let { onClick, accessor } = column;
|
@@ -38,7 +45,7 @@ const Table = ({
|
|
38
45
|
}
|
39
46
|
};
|
40
47
|
if (checkEmpty(data)) return null;
|
41
|
-
|
48
|
+
|
42
49
|
return (
|
43
50
|
<div
|
44
51
|
style={{ height: height }}
|
@@ -49,11 +56,14 @@ const Table = ({
|
|
49
56
|
>
|
50
57
|
<table className={classNames(`ff-table`)} cellSpacing={0}>
|
51
58
|
<thead
|
52
|
-
className={classNames(
|
53
|
-
|
54
|
-
|
59
|
+
className={classNames(
|
60
|
+
{
|
61
|
+
'ff-fixed-header': withFixedHeader,
|
62
|
+
},
|
63
|
+
tableHeadClass
|
64
|
+
)}
|
55
65
|
>
|
56
|
-
<tr
|
66
|
+
<tr>
|
57
67
|
{/* columns.map((column, index) */}
|
58
68
|
{columns.map((column, index) => (
|
59
69
|
<th
|
@@ -62,7 +72,7 @@ const Table = ({
|
|
62
72
|
style={{ width: column?.width }}
|
63
73
|
>
|
64
74
|
<div>
|
65
|
-
|
75
|
+
{index === 0 && withCheckbox && (
|
66
76
|
<span className="ff-table-checkbox">
|
67
77
|
<Checkbox
|
68
78
|
onChange={(e) => {
|
@@ -75,7 +85,7 @@ const Table = ({
|
|
75
85
|
disabled={headerCheckboxDisabled}
|
76
86
|
/>
|
77
87
|
</span>
|
78
|
-
)}
|
88
|
+
)}
|
79
89
|
|
80
90
|
{column.header}
|
81
91
|
</div>
|
@@ -86,10 +96,15 @@ const Table = ({
|
|
86
96
|
<tbody>
|
87
97
|
{data.length > 0 &&
|
88
98
|
data.map((row: any, index: number) => (
|
89
|
-
<tr
|
90
|
-
|
91
|
-
|
92
|
-
|
99
|
+
<tr
|
100
|
+
key={row.id || index}
|
101
|
+
className={classNames(
|
102
|
+
tableBodyRowClass,
|
103
|
+
{
|
104
|
+
'disabled-row': row.disabled,
|
105
|
+
},
|
106
|
+
)}
|
107
|
+
>
|
93
108
|
{columns.map((column, i) => {
|
94
109
|
return (
|
95
110
|
<td
|
@@ -97,4 +97,12 @@ export interface ColumnsProps {
|
|
97
97
|
* classNames for the table container
|
98
98
|
*/
|
99
99
|
className?: string;
|
100
|
+
/**
|
101
|
+
* classNames for the table Header container
|
102
|
+
*/
|
103
|
+
tableHeadClass?:string;
|
104
|
+
/**
|
105
|
+
* classNames for the table Row container
|
106
|
+
*/
|
107
|
+
tableBodyRowClass?:string;
|
100
108
|
}
|
@@ -55,8 +55,8 @@
|
|
55
55
|
}
|
56
56
|
&:hover {
|
57
57
|
background-color: var(--hover-color);
|
58
|
-
.ff-action-
|
59
|
-
display:
|
58
|
+
.ff-title-action-container {
|
59
|
+
display: flex;
|
60
60
|
}
|
61
61
|
}
|
62
62
|
}
|
@@ -86,11 +86,22 @@
|
|
86
86
|
font-weight: 400;
|
87
87
|
cursor: pointer;
|
88
88
|
|
89
|
+
.ff-title-label {
|
90
|
+
display: flex;
|
91
|
+
align-items: center;
|
92
|
+
}
|
93
|
+
|
89
94
|
.ff-hover-icon {
|
90
95
|
display: none;
|
91
96
|
position: absolute;
|
92
97
|
right: 10px;
|
93
98
|
}
|
99
|
+
|
100
|
+
// &:hover {
|
101
|
+
// > .ff-title-action-container {
|
102
|
+
// display: flex;
|
103
|
+
// }
|
104
|
+
// }
|
94
105
|
}
|
95
106
|
}
|
96
107
|
|
@@ -140,3 +151,8 @@
|
|
140
151
|
}
|
141
152
|
}
|
142
153
|
}
|
154
|
+
|
155
|
+
.ff-title-action-container {
|
156
|
+
display: none;
|
157
|
+
align-items: center;
|
158
|
+
}
|
@@ -2,9 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import TableTree from './TableTree';
|
3
3
|
import Button from '../Button';
|
4
4
|
import treeData from './data';
|
5
|
-
import Typography from '../Typography/Typography';
|
6
5
|
import Icon from '../Icon/Icon';
|
7
|
-
import Chip from '../Chip/Chip';
|
8
6
|
import './TableTreeStories.scss';
|
9
7
|
|
10
8
|
const meta: Meta<typeof TableTree> = {
|
@@ -19,52 +17,6 @@ type Story = StoryObj<typeof TableTree>;
|
|
19
17
|
|
20
18
|
// TODO :: below code is a temporary will Modify later
|
21
19
|
|
22
|
-
const createTilteAndAction = (row: any): JSX.Element => {
|
23
|
-
if (row?.folder) {
|
24
|
-
return (
|
25
|
-
<div className="ff-parent-node-section">
|
26
|
-
<div className="ff-folder-name-style">
|
27
|
-
<Typography fontWeight="semi-bold">{`${row?.title} - Action Folder lenthy name`}</Typography>
|
28
|
-
</div>
|
29
|
-
|
30
|
-
<Chip
|
31
|
-
fullText={`Sub Modules ${row?.scriptCount}`}
|
32
|
-
label={`SM ${row?.subModuleCount}`}
|
33
|
-
variant="primary"
|
34
|
-
/>
|
35
|
-
<Chip
|
36
|
-
fullText={`Scripts Count ${row?.scriptCount}`}
|
37
|
-
label={`SC ${row?.scriptCount}`}
|
38
|
-
variant="primary"
|
39
|
-
/>
|
40
|
-
<div className="ff-action-section">
|
41
|
-
<div className="ff-action-menu">
|
42
|
-
<Icon hoverEffect name="logo" />
|
43
|
-
<Icon hoverEffect name="sun_icon" />
|
44
|
-
<Icon hoverEffect name="more" />
|
45
|
-
</div>
|
46
|
-
</div>
|
47
|
-
</div>
|
48
|
-
);
|
49
|
-
} else {
|
50
|
-
return (
|
51
|
-
<div className="ff-parent-node-section">
|
52
|
-
<div className="ff-file-name-style">
|
53
|
-
<Typography>{`${row.title} - Action File with lenthy name`}</Typography>
|
54
|
-
</div>
|
55
|
-
<div className="ff-action-section">
|
56
|
-
<div className="ff-action-menu">
|
57
|
-
<Icon hoverEffect name="file" />
|
58
|
-
<Icon hoverEffect name="manage_apps" />
|
59
|
-
<Icon hoverEffect name="dropzone_icon" />
|
60
|
-
<Icon hoverEffect name="more" />
|
61
|
-
</div>
|
62
|
-
</div>
|
63
|
-
</div>
|
64
|
-
);
|
65
|
-
}
|
66
|
-
};
|
67
|
-
|
68
20
|
export const Default: Story = {
|
69
21
|
args: {
|
70
22
|
select: 'radio',
|
@@ -72,7 +24,7 @@ export const Default: Story = {
|
|
72
24
|
e.preventDefault();
|
73
25
|
e.stopPropagation();
|
74
26
|
|
75
|
-
console.log(node, '------------', e);
|
27
|
+
console.log(node, '------------', e.target.value);
|
76
28
|
},
|
77
29
|
selected: ['MOD1003'],
|
78
30
|
treeData,
|
@@ -82,8 +34,14 @@ export const Default: Story = {
|
|
82
34
|
accessor: 'title',
|
83
35
|
width: '400px',
|
84
36
|
isClickable: true,
|
85
|
-
|
86
|
-
|
37
|
+
actions: (row) => {
|
38
|
+
console.log('🚀 ~ row:', row);
|
39
|
+
return [
|
40
|
+
<Icon hoverEffect name="file" />,
|
41
|
+
<Icon hoverEffect name="manage_apps" />,
|
42
|
+
<Icon hoverEffect name="dropzone_icon" />,
|
43
|
+
<Icon hoverEffect name="more" />,
|
44
|
+
];
|
87
45
|
},
|
88
46
|
},
|
89
47
|
|