pixel-react 1.6.7 → 1.6.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/lib/components/AppHeader/types.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
- package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
- package/lib/components/FileDropzone/types.d.ts +61 -0
- package/lib/components/MenuOption/types.d.ts +3 -2
- package/lib/components/Search/Search.d.ts +1 -1
- package/lib/components/Search/types.d.ts +4 -0
- package/lib/components/Table/Types.d.ts +1 -1
- package/lib/components/Tabs/types.d.ts +1 -0
- package/lib/index.d.ts +95 -23
- package/lib/index.esm.js +513 -294
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +514 -293
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/FormatString/FormatString.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
- package/src/assets/Themes/BaseTheme.scss +5 -3
- package/src/assets/Themes/DarkTheme.scss +5 -3
- package/src/assets/icons/window_maximize.svg +1 -2
- package/src/assets/icons/window_restore.svg +4 -0
- package/src/components/AppHeader/AppHeader.scss +33 -0
- package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
- package/src/components/AppHeader/AppHeader.tsx +111 -112
- package/src/components/AppHeader/types.ts +2 -0
- package/src/components/Charts/BarChart/BarChart.scss +4 -1
- package/src/components/Charts/BarChart/BarChart.tsx +23 -9
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
- package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
- package/src/components/Charts/LineChart/LineChart.scss +13 -9
- package/src/components/Charts/LineChart/LineChart.tsx +6 -2
- package/src/components/DatePicker/DatePicker.scss +11 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
- package/src/components/DatePicker/DatePicker.tsx +73 -22
- package/src/components/FileDropzone/Dropzone.tsx +76 -28
- package/src/components/FileDropzone/FileDropzone.scss +30 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
- package/src/components/FileDropzone/FileDropzone.tsx +46 -13
- package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
- package/src/components/FileDropzone/types.ts +73 -0
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/Input/Input.scss +137 -125
- package/src/components/Input/Input.tsx +69 -63
- package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
- package/src/components/InputWithDropdown/types.ts +3 -3
- package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
- package/src/components/MenuOption/MenuOption.tsx +1 -1
- package/src/components/MenuOption/types.ts +4 -2
- package/src/components/ModulesChip/ModuleChip.scss +21 -8
- package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
- package/src/components/ModulesChip/ModuleChip.tsx +6 -9
- package/src/components/MultiSelect/Dropdown.tsx +12 -5
- package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
- package/src/components/MultiSelect/MultiSelect.tsx +10 -9
- package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
- package/src/components/Search/Search.stories.tsx +28 -9
- package/src/components/Search/Search.tsx +32 -29
- package/src/components/Search/types.ts +4 -0
- package/src/components/Table/Table.scss +6 -5
- package/src/components/Table/Types.ts +1 -1
- package/src/components/Tabs/Tabs.scss +58 -4
- package/src/components/Tabs/Tabs.stories.tsx +31 -12
- package/src/components/Tabs/Tabs.tsx +27 -18
- package/src/components/Tabs/types.ts +1 -1
- package/src/components/TextArea/Textarea.stories.tsx +1 -1
- package/src/hooks/useFileDropzone.tsx +2 -1
- package/src/index.ts +4 -0
- package/src/utils/FormatString/FormatString.stories.tsx +58 -0
- package/src/utils/FormatString/FormatString.tsx +41 -0
@@ -19,9 +19,9 @@ export interface InputWithDropdownProps {
|
|
19
19
|
/**
|
20
20
|
* value | input field value
|
21
21
|
*/
|
22
|
-
value?: string | number
|
22
|
+
value?: string | number;
|
23
23
|
|
24
|
-
type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time'
|
24
|
+
type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
|
25
25
|
|
26
26
|
/**
|
27
27
|
* variants to set color/style of the input field
|
@@ -109,5 +109,5 @@ export interface InputWithDropdownProps {
|
|
109
109
|
*/
|
110
110
|
optionsRequired?: boolean;
|
111
111
|
|
112
|
-
dropdownPosition?: 'left' | 'right'
|
112
|
+
dropdownPosition?: 'left' | 'right';
|
113
113
|
}
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import MenuOption from './MenuOption';
|
3
3
|
import './MenuOption.scss';
|
4
|
-
import React from 'react';
|
4
|
+
import React, { ReactNode } from 'react';
|
5
|
+
import Icon from '../Icon';
|
5
6
|
|
6
7
|
const meta: Meta<typeof MenuOption> = {
|
7
8
|
title: 'Components/MenuOption',
|
@@ -48,7 +49,7 @@ const meta: Meta<typeof MenuOption> = {
|
|
48
49
|
type Story = StoryObj<typeof MenuOption>;
|
49
50
|
|
50
51
|
const options = [
|
51
|
-
{ label:
|
52
|
+
{ label: <div style={{display:'flex', justifyContent:"center", alignItems:"center",gap:"8px"}}>hello <Icon name='edit'/></div>, value: 'opt1', icon: 'success' },
|
52
53
|
{ label: 'Option 2', value: 'opt2', icon: 'success' },
|
53
54
|
{
|
54
55
|
label: 'Delete',
|
@@ -58,7 +59,7 @@ const options = [
|
|
58
59
|
},
|
59
60
|
];
|
60
61
|
|
61
|
-
const handleOptionClick = (option: { label: string }) => {
|
62
|
+
const handleOptionClick = (option: { label: string|ReactNode }) => {
|
62
63
|
alert(`Option clicked: ${option.label}`);
|
63
64
|
};
|
64
65
|
|
@@ -1,10 +1,12 @@
|
|
1
|
+
import { ReactNode } from "react";
|
2
|
+
|
1
3
|
interface OptionClick {
|
2
4
|
/**
|
3
5
|
* The label displayed for the option.
|
4
6
|
* @type {string}
|
5
7
|
* @required
|
6
8
|
*/
|
7
|
-
label: string;
|
9
|
+
label: string |ReactNode;
|
8
10
|
|
9
11
|
/**
|
10
12
|
* The value(s) associated with the option, which can be a single string or an array of strings.
|
@@ -24,7 +26,7 @@ interface OptionType extends OptionClick {
|
|
24
26
|
|
25
27
|
iconColor?: string;
|
26
28
|
|
27
|
-
name?: string;
|
29
|
+
name?: string | ReactNode;
|
28
30
|
|
29
31
|
/**
|
30
32
|
* Indicates whether the option is disabled.
|
@@ -2,19 +2,32 @@
|
|
2
2
|
@use '../../assets/styles/mixins';
|
3
3
|
|
4
4
|
.ff-Module-chip {
|
5
|
-
width:
|
6
|
-
height:
|
7
|
-
|
5
|
+
width: 68px;
|
6
|
+
height: 30px;
|
7
|
+
color: var(--table-column-text-color);
|
8
|
+
border: 1px solid var(--ff-editor-line-bg);
|
8
9
|
border-radius: 16px;
|
9
|
-
color: var(--brand-color);
|
10
10
|
cursor: pointer;
|
11
11
|
@include mixins.center-content();
|
12
|
-
.
|
13
|
-
|
14
|
-
color: var(--ff-header-text-color);
|
15
|
-
}
|
12
|
+
.module-typography {
|
13
|
+
color: var(--table-column-text-color);
|
16
14
|
}
|
17
15
|
&--active {
|
16
|
+
border: 0.5px solid var(--brand-color);
|
18
17
|
background: var(--brand-color);
|
18
|
+
.module-typography {
|
19
|
+
color: var(--base-bg-color);
|
20
|
+
font-weight: 600;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
&--hover {
|
24
|
+
&:hover {
|
25
|
+
border: 0.5px solid var(--brand-color);
|
26
|
+
background-color: var(--hover-color);
|
27
|
+
.module-typography {
|
28
|
+
color: var(--table-column-text-color);
|
29
|
+
font-weight: 600;
|
30
|
+
}
|
31
|
+
}
|
19
32
|
}
|
20
33
|
}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
3
|
import ModuleChip from './ModuleChip';
|
3
4
|
import { useState } from 'react';
|
@@ -6,7 +7,7 @@ const meta: Meta<typeof ModuleChip> = {
|
|
6
7
|
title: 'Components/ModuleChip',
|
7
8
|
component: ModuleChip,
|
8
9
|
parameters: {
|
9
|
-
layout: '
|
10
|
+
layout: 'centered',
|
10
11
|
},
|
11
12
|
argTypes: {
|
12
13
|
isActive: Boolean,
|
@@ -18,7 +19,6 @@ type Story = StoryObj<typeof ModuleChip>;
|
|
18
19
|
|
19
20
|
const defaultArgs = {
|
20
21
|
label: 'Modules',
|
21
|
-
isActive: false,
|
22
22
|
};
|
23
23
|
|
24
24
|
export const Controlled: Story = {
|
@@ -12,18 +12,15 @@ const ModuleChip: React.FC<ModuleChipProps> = ({
|
|
12
12
|
<div
|
13
13
|
className={classNames('ff-Module-chip', {
|
14
14
|
'ff-Module-chip--active': isActive,
|
15
|
+
'ff-Module-chip--hover': !isActive,
|
15
16
|
})}
|
16
17
|
onClick={onClick}
|
17
18
|
>
|
18
|
-
<
|
19
|
-
|
20
|
-
|
21
|
-
}
|
22
|
-
|
23
|
-
<Typography fontSize={'14px'} fontWeight="regular" lineHeight="21px">
|
24
|
-
{label}
|
25
|
-
</Typography>
|
26
|
-
</div>
|
19
|
+
<Typography
|
20
|
+
lineHeight="18px"
|
21
|
+
className="module-typography"
|
22
|
+
children={label}
|
23
|
+
/>
|
27
24
|
</div>
|
28
25
|
);
|
29
26
|
};
|
@@ -9,7 +9,7 @@ import Typography from '../Typography';
|
|
9
9
|
import Checkbox from '../Checkbox';
|
10
10
|
import Tooltip from '../Tooltip';
|
11
11
|
import { truncateText } from '../../utils/truncateText/truncateText';
|
12
|
-
import { getLabel } from '../../utils/getSelectOptionValue/getSelectOptionValue';
|
12
|
+
import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
|
13
13
|
|
14
14
|
const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
15
15
|
(
|
@@ -20,13 +20,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
20
20
|
dropdownPosition = {},
|
21
21
|
zIndex,
|
22
22
|
withSelectButton,
|
23
|
-
labelAccessor,
|
23
|
+
labelAccessor='label',
|
24
|
+
valueAccessor='value'
|
24
25
|
},
|
25
26
|
ref
|
26
27
|
) => {
|
27
28
|
const filteredOptions = options
|
28
29
|
? options.filter((option) =>
|
29
|
-
|
30
|
+
getValue(option, valueAccessor)
|
30
31
|
?.toLowerCase()
|
31
32
|
.includes(searchedKeyword.toLowerCase())
|
32
33
|
)
|
@@ -38,6 +39,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
38
39
|
e.stopPropagation();
|
39
40
|
handleOptionChange({}, false);
|
40
41
|
};
|
42
|
+
const renderOption=(info:any, labelAccessor:string)=>{
|
43
|
+
if(typeof info[labelAccessor] ==='string'){
|
44
|
+
return truncateText(getLabel(info, labelAccessor), 25)
|
45
|
+
}
|
46
|
+
return info[labelAccessor]
|
47
|
+
}
|
41
48
|
const topPosition = useMemo(() => {
|
42
49
|
let calculatedDropdownHeight = Math.min(
|
43
50
|
filteredOptions.length * optionHeight,
|
@@ -107,14 +114,14 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
|
|
107
114
|
<Tooltip
|
108
115
|
zIndex={zIndex + 1}
|
109
116
|
title={
|
110
|
-
|
117
|
+
typeof info[labelAccessor]==='string' && getLabel(info, labelAccessor)?.length > 25
|
111
118
|
? getLabel(info, labelAccessor)
|
112
119
|
: ''
|
113
120
|
}
|
114
121
|
children={
|
115
122
|
<Typography
|
116
123
|
className="dropdown-option-label"
|
117
|
-
children={
|
124
|
+
children={renderOption(info,labelAccessor)}
|
118
125
|
/>
|
119
126
|
}
|
120
127
|
/>
|
@@ -80,11 +80,7 @@ export const NameAccessor: Story = {
|
|
80
80
|
},
|
81
81
|
};
|
82
82
|
|
83
|
-
|
84
|
-
args: {
|
85
|
-
...defaultArgs,
|
86
|
-
},
|
87
|
-
};
|
83
|
+
|
88
84
|
export const EmailGroup: Story = {
|
89
85
|
render: () => {
|
90
86
|
const [options, setOptions] = useState([
|
@@ -124,6 +120,7 @@ export const EmailGroup: Story = {
|
|
124
120
|
acceptNewOption={true}
|
125
121
|
displayCount={true}
|
126
122
|
labelAccessor="label"
|
123
|
+
valueAccessor='value'
|
127
124
|
onEnter={onEnter}
|
128
125
|
/>
|
129
126
|
);
|
@@ -234,19 +231,19 @@ export const Machines: Story = {
|
|
234
231
|
render: () => {
|
235
232
|
const [options] = useState<Option[]>([
|
236
233
|
{
|
237
|
-
label:
|
234
|
+
label: <h2>Machine 1</h2>,
|
238
235
|
value: 'machine 1',
|
239
236
|
},
|
240
237
|
{
|
241
|
-
label:
|
238
|
+
label: <h2>Machine 2</h2>,
|
242
239
|
value: 'machine 2',
|
243
240
|
},
|
244
241
|
{
|
245
|
-
label:
|
242
|
+
label: <h2>Machine 3</h2>,
|
246
243
|
value: 'machine 3',
|
247
244
|
},
|
248
245
|
{
|
249
|
-
label:
|
246
|
+
label: <h2>Machine 4</h2>,
|
250
247
|
value: 'machine 4',
|
251
248
|
},
|
252
249
|
]);
|
@@ -265,6 +262,8 @@ export const Machines: Story = {
|
|
265
262
|
key={index}
|
266
263
|
label="Machines"
|
267
264
|
variant="machines"
|
265
|
+
// labelAccessor='label'
|
266
|
+
// valueAccessor='value'
|
268
267
|
options={options}
|
269
268
|
onSelectButtonClick={handleSelectChange}
|
270
269
|
highlightedMachine={machine.label}
|
@@ -273,6 +272,8 @@ export const Machines: Story = {
|
|
273
272
|
))}
|
274
273
|
<MultiSelect
|
275
274
|
label="Machines"
|
275
|
+
labelAccessor='label'
|
276
|
+
valueAccessor='value'
|
276
277
|
withSelectButton
|
277
278
|
options={options}
|
278
279
|
onSelectButtonClick={handleSelectChange}
|
@@ -284,4 +285,6 @@ export const Machines: Story = {
|
|
284
285
|
},
|
285
286
|
};
|
286
287
|
|
288
|
+
|
289
|
+
|
287
290
|
export default meta;
|
@@ -38,7 +38,8 @@ const ChipElement = ({
|
|
38
38
|
zIndex={zIndex + 1}
|
39
39
|
>
|
40
40
|
<Typography fontSize={10} lineHeight={'14px'} className="stye">
|
41
|
-
|
41
|
+
|
42
|
+
{typeof label==='string'? truncateText(label, 25):label}
|
42
43
|
</Typography>
|
43
44
|
</Tooltip>
|
44
45
|
</span>
|
@@ -73,9 +74,9 @@ const MultiSelect = ({
|
|
73
74
|
onManageLabelsClick = () => { },
|
74
75
|
className = '',
|
75
76
|
highlightedMachine = '',
|
76
|
-
onSelectButtonClick = () => {
|
77
|
-
labelAccessor = '',
|
78
|
-
valueAccessor =
|
77
|
+
onSelectButtonClick = () => {},
|
78
|
+
labelAccessor = 'label',
|
79
|
+
valueAccessor = 'value',
|
79
80
|
withSelectButton = variant === 'machines' ? true : false,
|
80
81
|
onEnter = () => { },
|
81
82
|
}: MultiSelectProps) => {
|
@@ -203,7 +204,7 @@ const MultiSelect = ({
|
|
203
204
|
if (input.length > 2) {
|
204
205
|
const matchedOption = allOptions.find(
|
205
206
|
(option) =>
|
206
|
-
getLabel(option,
|
207
|
+
getLabel(option, valueAccessor)?.toLowerCase() === input.toLowerCase()
|
207
208
|
);
|
208
209
|
setDisplayIcon(!matchedOption);
|
209
210
|
} else {
|
@@ -256,10 +257,10 @@ const MultiSelect = ({
|
|
256
257
|
};
|
257
258
|
}, [isOpen]);
|
258
259
|
useEffect(() => {
|
259
|
-
if (!checkEmpty(options
|
260
|
-
let initializeOptions
|
261
|
-
if
|
262
|
-
|
260
|
+
if (!checkEmpty(options)) {
|
261
|
+
let initializeOptions=options;
|
262
|
+
if(!checkEmpty(selectedOptions)){
|
263
|
+
initializeOptions = options.map((option) => ({
|
263
264
|
...option,
|
264
265
|
isChecked: selectedOptions.some(
|
265
266
|
(selectedOption) =>
|
@@ -24,7 +24,7 @@ const defaultArgs = {
|
|
24
24
|
secondButtonLabel: "Continue",
|
25
25
|
buttonVariant: "warning",
|
26
26
|
border: '1px solid var(--warning-modal-border-color)',
|
27
|
-
colorForTitleMessage: 'var(--
|
27
|
+
colorForTitleMessage: 'var(--status-button-bg-warning)'
|
28
28
|
}
|
29
29
|
|
30
30
|
export const DefaultModal: Story = {
|
@@ -1,6 +1,6 @@
|
|
1
|
-
|
2
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
3
2
|
import Search from './Search';
|
3
|
+
import React,{ useState } from 'react';
|
4
4
|
const meta: Meta<typeof Search> = {
|
5
5
|
title: 'Components/Search',
|
6
6
|
component: Search,
|
@@ -11,15 +11,34 @@ const meta: Meta<typeof Search> = {
|
|
11
11
|
};
|
12
12
|
|
13
13
|
type Story = StoryObj<typeof Search>;
|
14
|
-
const defaultArgs = {
|
15
|
-
placeholder: 'Search',
|
16
|
-
onSearch: (query: string) => alert(`Searching for: ${query}`),
|
17
|
-
disabled: false,
|
18
|
-
width: 200,
|
19
|
-
};
|
20
14
|
export const Default: Story = {
|
21
|
-
|
22
|
-
|
15
|
+
render: () => {
|
16
|
+
const [isExpand, setIsExpand] = useState(false);
|
17
|
+
const [searchValue, setSearchValue] = useState('');
|
18
|
+
|
19
|
+
const handleSearch = (value: string) => {
|
20
|
+
alert(`Searching for: ${value}`);
|
21
|
+
setSearchValue(value);
|
22
|
+
};
|
23
|
+
|
24
|
+
const handleClose = () => {
|
25
|
+
setIsExpand(false);
|
26
|
+
setSearchValue('');
|
27
|
+
};
|
28
|
+
return (
|
29
|
+
<div>
|
30
|
+
<Search
|
31
|
+
placeholder="Search here..."
|
32
|
+
isExpand={isExpand}
|
33
|
+
value={searchValue}
|
34
|
+
onSearch={handleSearch}
|
35
|
+
onExpand={(expand) => setIsExpand(expand)}
|
36
|
+
onClose={handleClose}
|
37
|
+
disabled={false}
|
38
|
+
width={200}
|
39
|
+
/>
|
40
|
+
</div>
|
41
|
+
);
|
23
42
|
},
|
24
43
|
};
|
25
44
|
|
@@ -7,22 +7,29 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
|
7
7
|
import Typography from '../Typography';
|
8
8
|
import Tooltip from '../Tooltip';
|
9
9
|
|
10
|
-
|
11
10
|
const Search = ({
|
12
11
|
placeholder = 'Search',
|
13
12
|
onSearch,
|
14
13
|
disabled = false,
|
15
14
|
width = 150,
|
15
|
+
value = '',
|
16
|
+
isExpand = false,
|
17
|
+
onClose,
|
18
|
+
onExpand,
|
16
19
|
}: SearchProps) => {
|
17
|
-
const [
|
18
|
-
const [searchValue, setSearchValue] = useState<string>('');
|
20
|
+
const [searchValue, setSearchValue] = useState<string>(value);
|
19
21
|
const inputRef = useRef<HTMLInputElement>(null);
|
20
22
|
|
21
23
|
useEffect(() => {
|
22
|
-
if (
|
24
|
+
if (isExpand && inputRef.current) {
|
23
25
|
inputRef.current.focus();
|
24
26
|
}
|
25
|
-
|
27
|
+
setSearchValue('');
|
28
|
+
}, [isExpand]);
|
29
|
+
|
30
|
+
useEffect(() => {
|
31
|
+
setSearchValue(value);
|
32
|
+
}, [value]);
|
26
33
|
|
27
34
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
28
35
|
if (event.key === 'Enter' && !checkEmpty(searchValue)) {
|
@@ -31,72 +38,67 @@ const Search = ({
|
|
31
38
|
handleSearchClearAndClose('Close');
|
32
39
|
}
|
33
40
|
};
|
34
|
-
|
35
|
-
setSearchValue(value);
|
36
|
-
if (value === '') {
|
37
|
-
onSearch('');
|
38
|
-
}
|
39
|
-
};
|
40
|
-
const handleIconClick = () => {
|
41
|
-
setIsExpanded(!disabled);
|
42
|
-
};
|
41
|
+
|
43
42
|
const handleSearchClearAndClose = (label: string) => {
|
44
43
|
setSearchValue('');
|
45
44
|
onSearch('');
|
46
45
|
if (label === 'Close') {
|
47
|
-
|
46
|
+
onClose?.();
|
48
47
|
}
|
49
|
-
if (label === 'Clear' &&
|
48
|
+
if (label === 'Clear' && isExpand && inputRef.current) {
|
50
49
|
inputRef.current.focus();
|
51
50
|
}
|
52
51
|
};
|
53
52
|
|
53
|
+
const handleIconClick = () => {
|
54
|
+
if (!disabled) {
|
55
|
+
onExpand?.(!isExpand);
|
56
|
+
}
|
57
|
+
};
|
58
|
+
|
54
59
|
return (
|
55
60
|
<div
|
56
61
|
className={classNames('ff-search-container', {
|
57
|
-
expanded:
|
62
|
+
expanded: isExpand,
|
58
63
|
disabled: disabled,
|
59
64
|
})}
|
60
65
|
>
|
61
66
|
<div
|
62
|
-
className={classNames('ff-search-icon', { expanded:
|
67
|
+
className={classNames('ff-search-icon', { expanded: isExpand })}
|
63
68
|
onClick={handleIconClick}
|
64
69
|
>
|
65
70
|
<Tooltip title="Search">
|
66
71
|
<Icon
|
67
72
|
name="search"
|
68
|
-
height={
|
69
|
-
width={
|
73
|
+
height={isExpand ? 14 : 16}
|
74
|
+
width={isExpand ? 14 : 16}
|
70
75
|
/>
|
71
76
|
</Tooltip>
|
72
77
|
</div>
|
73
78
|
<div
|
74
79
|
className={classNames('ff-vertical-line', {
|
75
|
-
expanded:
|
80
|
+
expanded: isExpand,
|
76
81
|
})}
|
77
82
|
></div>
|
78
83
|
<input
|
79
84
|
className="ff-search-input"
|
80
85
|
name="input"
|
81
|
-
style={{ width:
|
86
|
+
style={{ width: isExpand ? `${width}px` : '0px' }}
|
82
87
|
placeholder={placeholder}
|
83
88
|
type="text"
|
84
89
|
value={searchValue}
|
85
90
|
disabled={disabled}
|
86
91
|
ref={inputRef}
|
87
|
-
|
88
|
-
|
89
|
-
}}
|
92
|
+
autoComplete="off"
|
93
|
+
onChange={(e) => setSearchValue(e.target.value)}
|
90
94
|
onKeyDown={handleKeyDown}
|
91
95
|
/>
|
92
96
|
|
93
|
-
{
|
97
|
+
{isExpand && (
|
94
98
|
<>
|
95
99
|
<div
|
96
100
|
className="ff-search-clear-button"
|
97
|
-
onClick={() =>
|
98
|
-
handleSearchClearAndClose('Clear');
|
99
|
-
}}
|
101
|
+
onClick={() => handleSearchClearAndClose('Clear')}
|
100
102
|
>
|
101
103
|
{searchValue !== '' && (
|
102
104
|
<Typography
|
@@ -124,4 +126,5 @@ const Search = ({
|
|
124
126
|
</div>
|
125
127
|
);
|
126
128
|
};
|
129
|
+
|
127
130
|
export default Search;
|
@@ -1,5 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
1
|
.ff-fixed-header-table {
|
4
2
|
overflow-y: auto;
|
5
3
|
}
|
@@ -24,8 +22,8 @@
|
|
24
22
|
th {
|
25
23
|
border-bottom: 1px solid var(--slider-table-color);
|
26
24
|
}
|
27
|
-
th{
|
28
|
-
.ff-label-checkbox-container{
|
25
|
+
th {
|
26
|
+
.ff-label-checkbox-container {
|
29
27
|
display: flex;
|
30
28
|
align-items: center;
|
31
29
|
.ff-table-checkbox {
|
@@ -64,7 +62,7 @@
|
|
64
62
|
cursor: pointer;
|
65
63
|
}
|
66
64
|
}
|
67
|
-
td{
|
65
|
+
td {
|
68
66
|
.ff-data-checkbox-container {
|
69
67
|
display: flex;
|
70
68
|
align-items: center;
|
@@ -81,6 +79,9 @@
|
|
81
79
|
.secondary-bg {
|
82
80
|
background-color: var(--slider-table-color);
|
83
81
|
}
|
82
|
+
.tertiary-bg {
|
83
|
+
background-color: var(--custom-table-header-bg-color);
|
84
|
+
}
|
84
85
|
.default-bg {
|
85
86
|
background-color: transparent;
|
86
87
|
}
|
@@ -48,7 +48,7 @@ export interface TableProps {
|
|
48
48
|
/**
|
49
49
|
* Header type to have different background color
|
50
50
|
*/
|
51
|
-
headerType: 'default' | 'primary' | 'secondary';
|
51
|
+
headerType: 'default' | 'primary' | 'secondary' | 'tertiary';
|
52
52
|
/**
|
53
53
|
* withFixedHeader prop to have non-scrollable fixed table header
|
54
54
|
*/
|