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
@@ -0,0 +1,76 @@
|
|
1
|
+
import './FileDropzone.scss';
|
2
|
+
import Icon from '../Icon';
|
3
|
+
import Tooltip from '../Tooltip';
|
4
|
+
import { RadioFilePreviewProps } from './types';
|
5
|
+
import Typography from '../Typography';
|
6
|
+
import { useRef } from 'react';
|
7
|
+
|
8
|
+
const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
|
9
|
+
selectedFile,
|
10
|
+
onFileRemoveClick,
|
11
|
+
onFileReplaceClick
|
12
|
+
}) => {
|
13
|
+
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
14
|
+
|
15
|
+
const handleReplaceClick = () => {
|
16
|
+
if (fileInputRef.current) {
|
17
|
+
fileInputRef.current.click();
|
18
|
+
}
|
19
|
+
};
|
20
|
+
|
21
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
22
|
+
const file = event.target.files?.[0];
|
23
|
+
if (file) {
|
24
|
+
onFileReplaceClick?.(file);
|
25
|
+
}
|
26
|
+
};
|
27
|
+
return (
|
28
|
+
<div className="ff-webservice-file-wrapper">
|
29
|
+
<div className="ff-file-info">
|
30
|
+
<>
|
31
|
+
<Tooltip title={selectedFile}>
|
32
|
+
<Typography
|
33
|
+
lineHeight="18px"
|
34
|
+
fontWeight="semi-bold"
|
35
|
+
color={'var(--text-color)'}
|
36
|
+
className="ff-webservice-file-name"
|
37
|
+
>
|
38
|
+
{selectedFile}
|
39
|
+
</Typography>
|
40
|
+
</Tooltip>
|
41
|
+
</>
|
42
|
+
</div>
|
43
|
+
<>
|
44
|
+
<Tooltip title="Remove">
|
45
|
+
<Icon
|
46
|
+
name="close"
|
47
|
+
height={12}
|
48
|
+
width={12}
|
49
|
+
hoverEffect
|
50
|
+
onClick={onFileRemoveClick}
|
51
|
+
/>
|
52
|
+
</Tooltip>
|
53
|
+
</>
|
54
|
+
<>
|
55
|
+
<Tooltip title="Replace">
|
56
|
+
<Icon
|
57
|
+
name="replace_file"
|
58
|
+
color={'var(--icons-default-color)'}
|
59
|
+
height={16}
|
60
|
+
width={16}
|
61
|
+
hoverEffect
|
62
|
+
onClick={handleReplaceClick}
|
63
|
+
/>
|
64
|
+
</Tooltip>
|
65
|
+
<input
|
66
|
+
type="file"
|
67
|
+
ref={fileInputRef}
|
68
|
+
className='ff-input-ref'
|
69
|
+
onChange={handleFileChange}
|
70
|
+
/>
|
71
|
+
</>
|
72
|
+
</div>
|
73
|
+
);
|
74
|
+
};
|
75
|
+
|
76
|
+
export default RadioFilePreview;
|
@@ -1,4 +1,8 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
export interface RadioOption {
|
3
|
+
label: string;
|
4
|
+
value: string;
|
5
|
+
}
|
2
6
|
|
3
7
|
export interface FileDropzoneProps {
|
4
8
|
/**
|
@@ -65,6 +69,57 @@ export interface FileDropzoneProps {
|
|
65
69
|
* Returns the rejected files in the state
|
66
70
|
**/
|
67
71
|
getRejectedFiles?: (files: FileRejection[]) => void;
|
72
|
+
|
73
|
+
/**
|
74
|
+
* If its used in WebService has some other functionality so need to pass boolean value.
|
75
|
+
**/
|
76
|
+
isWebServiceFileDropZone?: boolean;
|
77
|
+
|
78
|
+
/**
|
79
|
+
* Its the selected radio option as a string.
|
80
|
+
**/
|
81
|
+
selectedRadioOption?: RadioOption;
|
82
|
+
|
83
|
+
/**
|
84
|
+
* Its the array of radio options in pattern of : { label: string; value: string; }.
|
85
|
+
**/
|
86
|
+
radioOptions?: RadioOption[];
|
87
|
+
|
88
|
+
/**
|
89
|
+
* Its the function which updates the selected radio option.
|
90
|
+
**/
|
91
|
+
handleOptionChange?: (option: RadioOption)=> void;
|
92
|
+
|
93
|
+
/**
|
94
|
+
* Its the File Name of File Selected from Local File.
|
95
|
+
**/
|
96
|
+
setSelectedFile?: (file: File | null) => void;
|
97
|
+
|
98
|
+
/**
|
99
|
+
* Its the File Name of File Selected from Local File.
|
100
|
+
**/
|
101
|
+
selectedFile?: File | null;
|
102
|
+
|
103
|
+
/**
|
104
|
+
* Its the function which updates the Selected file from Local Directory.
|
105
|
+
**/
|
106
|
+
handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
107
|
+
|
108
|
+
/**
|
109
|
+
* Its the function which makes the selected File empty state.
|
110
|
+
**/
|
111
|
+
handleRemoveFile?: () => void;
|
112
|
+
|
113
|
+
/**
|
114
|
+
* When The Api for the response fails need to show error message.
|
115
|
+
**/
|
116
|
+
isApiResponseError?: boolean;
|
117
|
+
|
118
|
+
/**
|
119
|
+
* If isDisable is true not able to access the FileDropzone
|
120
|
+
**/
|
121
|
+
isDisable?: boolean;
|
122
|
+
|
68
123
|
}
|
69
124
|
export interface FileState {
|
70
125
|
accepted: File[];
|
@@ -95,6 +150,7 @@ export interface DropzoneOptions {
|
|
95
150
|
invalidFileMessage?: string;
|
96
151
|
fileExistMessage?: string;
|
97
152
|
validateMIMEType?: boolean;
|
153
|
+
isApiResponseError?:boolean;
|
98
154
|
}
|
99
155
|
|
100
156
|
export interface DropzoneState {
|
@@ -116,6 +172,15 @@ export interface DroppableProps {
|
|
116
172
|
getInputProps: () => any;
|
117
173
|
isDragActive: boolean;
|
118
174
|
height: number | string;
|
175
|
+
isWebServiceFileDropZone?: boolean;
|
176
|
+
selectedRadioOption?: Option,
|
177
|
+
radioOptions?: RadioOption[],
|
178
|
+
handleOptionChange?: (option: RadioOption)=> void,
|
179
|
+
selectedFile?: File | null,
|
180
|
+
setSelectedFile?: (file: File | null) => void;
|
181
|
+
handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
182
|
+
handleRemoveFile?: () => void;
|
183
|
+
isDisable?: boolean;
|
119
184
|
}
|
120
185
|
|
121
186
|
export interface FilePreviewProps {
|
@@ -124,3 +189,11 @@ export interface FilePreviewProps {
|
|
124
189
|
onRemoveClick: (file: File) => void;
|
125
190
|
onReplaceClick: (file: File) => void;
|
126
191
|
}
|
192
|
+
|
193
|
+
export interface RadioFilePreviewProps {
|
194
|
+
selectedFile: string;
|
195
|
+
error?: string;
|
196
|
+
onFileRemoveClick?: () => void;
|
197
|
+
onFileReplaceClick?: (file: File | null) => void;
|
198
|
+
setSelectedFile?: (file: File | null) => void;
|
199
|
+
}
|
@@ -127,6 +127,7 @@ import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
|
|
127
127
|
import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
|
128
128
|
import Reload from '../../assets/icons/reload.svg?react';
|
129
129
|
import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
|
130
|
+
import WindowRestore from '../../assets/icons/window_restore.svg?react';
|
130
131
|
import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
|
131
132
|
import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
|
132
133
|
import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
|
@@ -370,6 +371,7 @@ Components['backward_icon'] = BackwardIcon;
|
|
370
371
|
Components['forward_icon'] = ForwardIcon;
|
371
372
|
Components['reload'] = Reload;
|
372
373
|
Components['window_maximize'] = WindowMaximize;
|
374
|
+
Components['window_restore'] = WindowRestore;
|
373
375
|
Components['window_minimize'] = WindowMinimize;
|
374
376
|
Components['hamburger_menu'] = HamburgerMenu;
|
375
377
|
Components['app_switch'] = AppSwitchIcon;
|
@@ -1,159 +1,171 @@
|
|
1
1
|
@use '../../assets/styles/fonts';
|
2
2
|
|
3
|
-
.ff-input-
|
4
|
-
display:
|
5
|
-
|
6
|
-
|
3
|
+
.ff-input-fieldset {
|
4
|
+
display: inline-block;
|
5
|
+
border: none;
|
6
|
+
padding: 0;
|
7
|
+
margin: 0;
|
8
|
+
width: 100%;
|
7
9
|
|
8
|
-
|
9
|
-
padding: 6px 8px;
|
10
|
+
&--disabled {
|
10
11
|
border: 1px solid var(--input-default-border-color);
|
12
|
+
background: var(--input-disabled-background-color);
|
11
13
|
border-radius: 4px;
|
12
|
-
|
13
|
-
line-height: 18px;
|
14
|
-
@extend .fontSm;
|
15
|
-
&--medium {
|
16
|
-
padding: 10px 9px;
|
17
|
-
}
|
18
|
-
&:disabled {
|
19
|
-
cursor: not-allowed;
|
20
|
-
}
|
21
|
-
&::placeholder {
|
22
|
-
opacity: 0;
|
23
|
-
@extend .fontXs;
|
24
|
-
line-height: 15px;
|
25
|
-
}
|
26
|
-
&--disabled {
|
27
|
-
background: transparent;
|
28
|
-
border-color: var(--input-default-border-color);
|
29
|
-
}
|
30
|
-
&--danger {
|
31
|
-
border-color: var(--input-error-text-color);
|
32
|
-
}
|
33
|
-
&--transparentBackground {
|
34
|
-
background: transparent;
|
35
|
-
}
|
36
|
-
&--no-border {
|
37
|
-
border: none;
|
38
|
-
}
|
39
|
-
&--placeholder {
|
40
|
-
&::placeholder {
|
41
|
-
opacity: 1;
|
42
|
-
}
|
43
|
-
}
|
14
|
+
opacity: 0.5;
|
44
15
|
}
|
45
|
-
|
46
|
-
.ff-input-label-container {
|
47
|
-
@extend .ff-input;
|
16
|
+
.ff-input-container {
|
48
17
|
display: flex;
|
49
|
-
|
50
|
-
position:
|
51
|
-
border: none;
|
52
|
-
outline: none;
|
53
|
-
line-height: 18px;
|
54
|
-
margin-top: 1px;
|
55
|
-
transition: all 0.3s ease-in-out;
|
56
|
-
&--medium {
|
57
|
-
line-height: 25px;
|
58
|
-
}
|
59
|
-
.ff-input-label {
|
60
|
-
color: var(--input-default-label-color);
|
61
|
-
&--danger {
|
62
|
-
color: var(--input-error-text-color);
|
63
|
-
}
|
64
|
-
&--disabled {
|
65
|
-
color: var(--input-default-border-color);
|
66
|
-
background-color: var(--input-label-bg-color);
|
67
|
-
}
|
68
|
-
}
|
18
|
+
flex-direction: column;
|
19
|
+
position: relative;
|
69
20
|
|
70
|
-
.required-asterisk {
|
71
|
-
color: var(--input-error-text-color);
|
72
|
-
}
|
73
|
-
}
|
74
|
-
&:hover {
|
75
|
-
.ff-input-label {
|
76
|
-
color: var(--input-default-label-color);
|
77
|
-
&--no-hover {
|
78
|
-
color: var(--input-default-label-color);
|
79
|
-
}
|
80
|
-
&--disabled {
|
81
|
-
color: var(--input-default-border-color);
|
82
|
-
}
|
83
|
-
&--danger {
|
84
|
-
color: var(--input-error-text-color);
|
85
|
-
}
|
86
|
-
}
|
87
21
|
.ff-input {
|
88
|
-
|
89
|
-
|
90
|
-
|
22
|
+
padding: 6px 8px;
|
23
|
+
border: 1px solid var(--input-default-border-color);
|
24
|
+
border-radius: 4px;
|
25
|
+
outline: none;
|
26
|
+
line-height: 18px;
|
27
|
+
@extend .fontSm;
|
28
|
+
&--medium {
|
29
|
+
padding: 10px 9px;
|
91
30
|
}
|
92
|
-
|
31
|
+
&:disabled {
|
32
|
+
cursor: not-allowed;
|
33
|
+
border: none;
|
93
34
|
background: transparent;
|
94
|
-
|
35
|
+
}
|
36
|
+
&::placeholder {
|
37
|
+
opacity: 0;
|
38
|
+
@extend .fontXs;
|
39
|
+
line-height: 15px;
|
95
40
|
}
|
96
41
|
&--danger {
|
97
42
|
border-color: var(--input-error-text-color);
|
98
43
|
}
|
44
|
+
&--transparentBackground {
|
45
|
+
background: transparent;
|
46
|
+
}
|
47
|
+
&--no-border {
|
48
|
+
border: none;
|
49
|
+
}
|
50
|
+
&--placeholder {
|
51
|
+
&::placeholder {
|
52
|
+
opacity: 1;
|
53
|
+
}
|
54
|
+
}
|
99
55
|
}
|
100
|
-
|
101
|
-
&:focus-within {
|
56
|
+
|
102
57
|
.ff-input-label-container {
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
58
|
+
@extend .ff-input;
|
59
|
+
display: flex;
|
60
|
+
gap: 2px;
|
61
|
+
position: absolute;
|
62
|
+
border: none;
|
63
|
+
outline: none;
|
64
|
+
line-height: 18px;
|
65
|
+
margin-top: 1px;
|
66
|
+
transition: all 0.3s ease-in-out;
|
67
|
+
&--medium {
|
68
|
+
line-height: 25px;
|
113
69
|
}
|
114
|
-
|
70
|
+
.ff-input-label {
|
71
|
+
color: var(--input-default-label-color);
|
72
|
+
&--danger {
|
73
|
+
color: var(--input-error-text-color);
|
74
|
+
}
|
75
|
+
&--disabled {
|
76
|
+
color: var(--input-default-border-color);
|
77
|
+
background-color: var(--input-label-bg-color);
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
.required-asterisk {
|
115
82
|
color: var(--input-error-text-color);
|
116
83
|
}
|
117
84
|
}
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
85
|
+
&:hover {
|
86
|
+
.ff-input-label {
|
87
|
+
color: var(--input-default-label-color);
|
88
|
+
&--no-hover {
|
89
|
+
color: var(--input-default-label-color);
|
90
|
+
}
|
91
|
+
&--disabled {
|
92
|
+
color: var(--input-default-border-color);
|
93
|
+
}
|
94
|
+
&--danger {
|
95
|
+
color: var(--input-error-text-color);
|
96
|
+
}
|
123
97
|
}
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
98
|
+
.ff-input {
|
99
|
+
border-color: var(--brand-color);
|
100
|
+
&--no-hover {
|
101
|
+
border-color: var(--input-default-border-color);
|
102
|
+
}
|
103
|
+
&--disabled {
|
104
|
+
background: transparent;
|
105
|
+
border-color: var(--input-default-border-color);
|
106
|
+
}
|
107
|
+
&--danger {
|
108
|
+
border-color: var(--input-error-text-color);
|
109
|
+
}
|
128
110
|
}
|
129
111
|
}
|
130
|
-
|
112
|
+
&:focus-within {
|
113
|
+
.ff-input-label-container {
|
114
|
+
top: -9px;
|
115
|
+
@extend .fontXs;
|
116
|
+
background-color: var(--input-label-bg-color);
|
117
|
+
line-height: 15px;
|
118
|
+
padding: 0px 2px;
|
119
|
+
margin-left: 10px;
|
120
|
+
}
|
121
|
+
.ff-input-label {
|
122
|
+
&--primary {
|
123
|
+
color: var(--brand-color);
|
124
|
+
}
|
125
|
+
&--danger {
|
126
|
+
color: var(--input-error-text-color);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
.ff-input {
|
130
|
+
border-color: var(--brand-color);
|
131
|
+
|
132
|
+
&--danger {
|
133
|
+
border-color: var(--input-error-text-color);
|
134
|
+
}
|
131
135
|
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
&--danger {
|
138
|
-
color: var(--input-error-text-color);
|
136
|
+
&::placeholder {
|
137
|
+
opacity: 1;
|
138
|
+
margin-bottom: 1px;
|
139
|
+
}
|
140
|
+
}
|
139
141
|
}
|
140
|
-
}
|
141
142
|
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
font-size: 10px;
|
147
|
-
background-color: var(--input-label-bg-color);
|
143
|
+
.ff-input-message {
|
144
|
+
@extend .fontXs;
|
145
|
+
padding: 0px 4px;
|
146
|
+
margin-left: 8px;
|
148
147
|
line-height: 15px;
|
149
|
-
|
150
|
-
|
148
|
+
&--danger {
|
149
|
+
color: var(--input-error-text-color);
|
150
|
+
}
|
151
151
|
}
|
152
|
-
|
153
|
-
|
152
|
+
|
153
|
+
&--float {
|
154
154
|
.ff-input-label-container {
|
155
|
+
//re-written label container code to place it at on border
|
156
|
+
top: -9px;
|
157
|
+
font-size: 10px;
|
158
|
+
background-color: var(--input-label-bg-color);
|
159
|
+
line-height: 15px;
|
160
|
+
padding: 0px 2px;
|
161
|
+
margin-left: 10px;
|
162
|
+
}
|
163
|
+
&--disabled {
|
155
164
|
cursor: not-allowed;
|
165
|
+
.ff-input-label-container {
|
166
|
+
cursor: not-allowed;
|
167
|
+
}
|
156
168
|
}
|
157
169
|
}
|
158
170
|
}
|
159
|
-
}
|
171
|
+
}
|
@@ -35,78 +35,84 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
35
35
|
const isValueFilled = !checkEmpty(value);
|
36
36
|
|
37
37
|
return (
|
38
|
-
<
|
39
|
-
className={classNames('ff-input-
|
40
|
-
'ff-input-
|
41
|
-
'ff-input-container--disabled': !!disabled,
|
38
|
+
<fieldset
|
39
|
+
className={classNames('ff-input-fieldset', {
|
40
|
+
'ff-input-fieldset--disabled': disabled,
|
42
41
|
})}
|
43
42
|
>
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
>
|
54
|
-
{required && <span className="required-asterisk">*</span>}
|
55
|
-
<span
|
43
|
+
<div
|
44
|
+
className={classNames('ff-input-container', {
|
45
|
+
'ff-input-container--float': isValueFilled,
|
46
|
+
'ff-input-container--disabled': !!disabled,
|
47
|
+
})}
|
48
|
+
>
|
49
|
+
{isLabelRequired && (
|
50
|
+
<label
|
51
|
+
htmlFor={name}
|
56
52
|
className={classNames(
|
57
|
-
`ff-input-label ff-input-label--${
|
53
|
+
`ff-input-label-container ff-input-label-container--${size}`,
|
58
54
|
{
|
59
|
-
'ff-input-label--
|
60
|
-
'ff-input-label--disabled': !!disabled,
|
61
|
-
'ff-input-label--danger': !!error,
|
55
|
+
'ff-input-label-container--danger': !!error,
|
62
56
|
}
|
63
57
|
)}
|
64
58
|
>
|
65
|
-
{
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
{
|
80
|
-
['ff-input--transparentBackground']: !!transparentBackground,
|
81
|
-
'ff-input--no-hover': !!value,
|
82
|
-
'ff-input--disabled': !!disabled,
|
83
|
-
'ff-input--danger': !!error,
|
84
|
-
'ff-input--no-border': !!noBorder,
|
85
|
-
'ff-input--placeholder': !isLabelRequired,
|
86
|
-
},
|
87
|
-
`${className}`
|
59
|
+
{required && <span className="required-asterisk">*</span>}
|
60
|
+
<span
|
61
|
+
className={classNames(
|
62
|
+
`ff-input-label ff-input-label--${variant}`,
|
63
|
+
{
|
64
|
+
'ff-input-label--no-hover': !!value,
|
65
|
+
'ff-input-label--disabled': !!disabled,
|
66
|
+
'ff-input-label--danger': !!error,
|
67
|
+
}
|
68
|
+
)}
|
69
|
+
>
|
70
|
+
{label}
|
71
|
+
</span>
|
72
|
+
</label>
|
88
73
|
)}
|
89
|
-
placeholder={placeholder}
|
90
|
-
disabled={disabled}
|
91
|
-
onChange={onChange}
|
92
|
-
onFocus={onFocus}
|
93
|
-
onBlur={onBlur}
|
94
|
-
autoComplete={autoComplete}
|
95
|
-
min={minValue}
|
96
|
-
max={maxValue}
|
97
|
-
{...props}
|
98
|
-
/>
|
99
74
|
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
}
|
105
|
-
|
106
|
-
{
|
107
|
-
|
108
|
-
|
109
|
-
|
75
|
+
<input
|
76
|
+
ref={ref} // Forward the ref here
|
77
|
+
name={name}
|
78
|
+
value={value}
|
79
|
+
type={type}
|
80
|
+
spellCheck={false}
|
81
|
+
id={name}
|
82
|
+
className={classNames(
|
83
|
+
`ff-input ff-input-${variant} default-input ff-input--${size}`,
|
84
|
+
{
|
85
|
+
['ff-input--transparentBackground']: !!transparentBackground,
|
86
|
+
'ff-input--no-hover': !!value,
|
87
|
+
'ff-input--disabled': !!disabled,
|
88
|
+
'ff-input--danger': !!error,
|
89
|
+
'ff-input--no-border': !!noBorder,
|
90
|
+
'ff-input--placeholder': !isLabelRequired,
|
91
|
+
},
|
92
|
+
`${className}`
|
93
|
+
)}
|
94
|
+
placeholder={placeholder}
|
95
|
+
disabled={disabled}
|
96
|
+
onChange={onChange}
|
97
|
+
onFocus={onFocus}
|
98
|
+
onBlur={onBlur}
|
99
|
+
autoComplete={autoComplete}
|
100
|
+
min={minValue}
|
101
|
+
max={maxValue}
|
102
|
+
{...props}
|
103
|
+
/>
|
104
|
+
|
105
|
+
{helperText && error && (
|
106
|
+
<span
|
107
|
+
className={classNames('ff-input-message', {
|
108
|
+
'ff-input-message--danger': !!error,
|
109
|
+
})}
|
110
|
+
>
|
111
|
+
{helperText}
|
112
|
+
</span>
|
113
|
+
)}
|
114
|
+
</div>
|
115
|
+
</fieldset>
|
110
116
|
);
|
111
117
|
}
|
112
118
|
);
|
@@ -10,6 +10,8 @@
|
|
10
10
|
border-radius: 4px;
|
11
11
|
padding: 0;
|
12
12
|
position: relative;
|
13
|
+
justify-content: space-between;
|
14
|
+
|
13
15
|
.ff-input-with-dropdown--left {
|
14
16
|
display: flex;
|
15
17
|
flex-direction: row-reverse;
|
@@ -24,6 +26,8 @@
|
|
24
26
|
}
|
25
27
|
|
26
28
|
.ff-floating-label-input-container {
|
29
|
+
display: flex;
|
30
|
+
flex: 1;
|
27
31
|
.ff-floating-label {
|
28
32
|
position: absolute;
|
29
33
|
z-index: 9;
|
@@ -48,7 +52,7 @@
|
|
48
52
|
}
|
49
53
|
|
50
54
|
.ff-floating-input {
|
51
|
-
|
55
|
+
width: 100%;
|
52
56
|
padding: 6px 7px;
|
53
57
|
line-height: 18px;
|
54
58
|
border: none;
|
@@ -92,7 +96,7 @@
|
|
92
96
|
}
|
93
97
|
|
94
98
|
.ff-floating-dropdown {
|
95
|
-
|
99
|
+
width: 100%;
|
96
100
|
border: none;
|
97
101
|
outline: none;
|
98
102
|
margin: 0;
|
@@ -100,6 +104,9 @@
|
|
100
104
|
&:disabled {
|
101
105
|
cursor: not-allowed;
|
102
106
|
}
|
107
|
+
&:hover {
|
108
|
+
background-color: var(--dropdown-bg-color);
|
109
|
+
}
|
103
110
|
}
|
104
111
|
|
105
112
|
.ff-floating-dropdown--left {
|