pixel-react 1.7.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +2 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/PhoneInput/PhoneInput.d.ts +0 -1
- package/lib/components/PhoneInput/types.d.ts +6 -0
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/index.d.ts +8 -0
- package/lib/index.esm.js +105 -61
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +105 -61
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +4 -0
- package/src/assets/Themes/DarkTheme.scss +5 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/auto_save_icon.svg +4 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/assets/styles/_colors.scss +0 -1
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +1 -1
- package/src/components/DownloadClient/DownloadClient.stories.tsx +1 -1
- package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +43 -56
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +18 -13
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +1 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +9 -2
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +133 -117
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +6 -0
- package/src/components/Excel/ExcelFile.stories.tsx +1 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +19 -8
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/PhoneInput/PhoneInput.stories.tsx +16 -41
- package/src/components/PhoneInput/PhoneInput.tsx +10 -2
- package/src/components/PhoneInput/phoneInput.scss +898 -0
- package/src/components/PhoneInput/types.ts +6 -0
- package/src/components/TableTree/data.ts +0 -45
- 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/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/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -3,144 +3,160 @@
|
|
3
3
|
.ff-excel {
|
4
4
|
display: flex;
|
5
5
|
flex-direction: column;
|
6
|
-
}
|
7
6
|
|
8
|
-
.ff-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
--header-background-color: var(--pop-up-background-blur);
|
16
|
-
--elevation: var(--brand-color);
|
17
|
-
|
18
|
-
position: relative;
|
19
|
-
overflow: visible;
|
20
|
-
background: var(--background-color);
|
21
|
-
color: var(--text-color);
|
22
|
-
display: inline-block;
|
23
|
-
}
|
7
|
+
.ff-excel-toolbar-container {
|
8
|
+
position: relative;
|
9
|
+
top: 0;
|
10
|
+
background-color: var(--excel-toolbar-bg);
|
11
|
+
padding: 4px 8px;
|
12
|
+
margin-bottom: 20px;
|
13
|
+
}
|
24
14
|
|
25
|
-
.ff-spreadsheet
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
15
|
+
.ff-spreadsheet {
|
16
|
+
--background-color: var(--drawer-footer-bg);
|
17
|
+
--text-color: var(--text-color);
|
18
|
+
--readonly-text-color: var(--toggle-strip-active);
|
19
|
+
--outline-color: var(--toggle-strip-active);
|
20
|
+
--outline-background-color: var(--overlay-bg);
|
21
|
+
--border-color: var(--excel-sheet-border);
|
22
|
+
--header-background-color: var(--excel-header-bg);
|
23
|
+
--elevation: var(--brand-color);
|
24
|
+
|
25
|
+
position: relative;
|
26
|
+
overflow: scroll;
|
27
|
+
background: var(--background-color);
|
28
|
+
color: var(--text-color);
|
29
|
+
scrollbar-width: none;
|
30
|
+
display: inline-block;
|
31
|
+
}
|
30
32
|
|
31
|
-
.ff-spreadsheet-active-cell
|
32
|
-
|
33
|
-
|
34
|
-
|
33
|
+
.ff-spreadsheet-active-cell {
|
34
|
+
position: absolute;
|
35
|
+
border: 2px solid var(--outline-color);
|
36
|
+
box-sizing: border-box;
|
37
|
+
}
|
35
38
|
|
36
|
-
.ff-spreadsheet-
|
37
|
-
|
38
|
-
|
39
|
-
height: 0px;
|
39
|
+
.ff-spreadsheet-active-cell--edit {
|
40
|
+
background: var(--background-color);
|
41
|
+
box-shadow: var(--elevation);
|
40
42
|
}
|
41
43
|
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
44
|
+
.ff-spreadsheet-table {
|
45
|
+
overflow: scroll;
|
46
|
+
top: 0;
|
47
|
+
left: 0;
|
48
|
+
margin: 0;
|
49
|
+
position: relative;
|
50
|
+
&::-webkit-scrollbar {
|
51
|
+
height: 0px;
|
52
|
+
}
|
53
|
+
border-collapse: collapse;
|
54
|
+
table-layout: fixed;
|
55
|
+
}
|
46
56
|
|
47
|
-
.ff-spreadsheet-cell {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
}
|
57
|
+
.ff-spreadsheet-cell {
|
58
|
+
outline: none;
|
59
|
+
position: relative;
|
60
|
+
z-index: 0;
|
61
|
+
}
|
52
62
|
|
53
|
-
.ff-spreadsheet-active-cell .select_dot {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
}
|
63
|
+
.ff-spreadsheet-active-cell .select_dot {
|
64
|
+
background-color: var(--elevation);
|
65
|
+
height: 10px;
|
66
|
+
width: 10px;
|
67
|
+
border-radius: 50%;
|
68
|
+
position: absolute;
|
69
|
+
bottom: -5px;
|
70
|
+
right: -5px;
|
71
|
+
cursor: crosshair;
|
72
|
+
z-index: 1000;
|
73
|
+
}
|
64
74
|
|
65
|
-
.ff-spreadsheet-cell--readonly {
|
66
|
-
|
67
|
-
}
|
75
|
+
.ff-spreadsheet-cell--readonly {
|
76
|
+
color: var(--readonly-text-color);
|
77
|
+
}
|
68
78
|
|
69
|
-
.ff-spreadsheet-cell,
|
70
|
-
.ff-spreadsheet-header {
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
}
|
79
|
+
.ff-spreadsheet-cell,
|
80
|
+
.ff-spreadsheet-header {
|
81
|
+
border: 0.1px solid var(--border-color);
|
82
|
+
overflow: hidden;
|
83
|
+
word-break: keep-all;
|
84
|
+
white-space: nowrap;
|
85
|
+
text-align: left;
|
86
|
+
box-sizing: border-box;
|
87
|
+
user-select: none;
|
88
|
+
}
|
79
89
|
|
80
|
-
.ff-spreadsheet-header {
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
90
|
+
.ff-spreadsheet-header {
|
91
|
+
border: 0.1px solid var(--border-color);
|
92
|
+
background-color: var(--header-background-color);
|
93
|
+
color: var(--readonly-text-color);
|
94
|
+
text-align: center;
|
95
|
+
z-index: 1000;
|
96
|
+
}
|
85
97
|
|
86
|
-
.
|
87
|
-
|
88
|
-
|
98
|
+
.ff-spreadsheet-corner-header {
|
99
|
+
padding-left: 20px;
|
100
|
+
z-index: 1100;
|
101
|
+
}
|
89
102
|
|
90
|
-
.ff-spreadsheet-header--selected {
|
91
|
-
|
92
|
-
|
93
|
-
}
|
103
|
+
.ff-spreadsheet-header--selected {
|
104
|
+
background: var(--brand-color);
|
105
|
+
color: var(--tooltip-text-color);
|
106
|
+
}
|
94
107
|
|
95
|
-
.ff-spreadsheet-
|
96
|
-
.ff-spreadsheet-data-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
108
|
+
.ff-spreadsheet-data-viewer,
|
109
|
+
.ff-spreadsheet-data-editor input {
|
110
|
+
padding: 4px;
|
111
|
+
box-sizing: border-box;
|
112
|
+
}
|
113
|
+
.ff-spreadsheet-header {
|
114
|
+
box-sizing: border-box;
|
115
|
+
}
|
101
116
|
|
102
|
-
.ff-spreadsheet-data-viewer--preserve-breaks {
|
103
|
-
|
104
|
-
}
|
117
|
+
.ff-spreadsheet-data-viewer--preserve-breaks {
|
118
|
+
white-space: pre-wrap;
|
119
|
+
}
|
105
120
|
|
106
|
-
.ff-spreadsheet-data-editor,
|
107
|
-
.ff-spreadsheet-data-editor input {
|
108
|
-
|
109
|
-
|
110
|
-
}
|
121
|
+
.ff-spreadsheet-data-editor,
|
122
|
+
.ff-spreadsheet-data-editor input {
|
123
|
+
width: 100%;
|
124
|
+
height: 100%;
|
125
|
+
}
|
111
126
|
|
112
|
-
.ff-spreadsheet-data-editor input {
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
}
|
127
|
+
.ff-spreadsheet-data-editor input {
|
128
|
+
font: inherit;
|
129
|
+
color: inherit;
|
130
|
+
background: none;
|
131
|
+
border: none;
|
132
|
+
outline: none;
|
133
|
+
margin: 0;
|
134
|
+
}
|
120
135
|
|
121
|
-
.ff-spreadsheet-data-viewer--boolean {
|
122
|
-
|
123
|
-
}
|
136
|
+
.ff-spreadsheet-data-viewer--boolean {
|
137
|
+
text-align: center;
|
138
|
+
}
|
124
139
|
|
125
|
-
.ff-spreadsheet-floating-rect {
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
}
|
140
|
+
.ff-spreadsheet-floating-rect {
|
141
|
+
position: absolute;
|
142
|
+
pointer-events: none;
|
143
|
+
box-sizing: border-box;
|
144
|
+
}
|
130
145
|
|
131
|
-
.ff-spreadsheet-floating-rect--hidden {
|
132
|
-
|
133
|
-
}
|
146
|
+
.ff-spreadsheet-floating-rect--hidden {
|
147
|
+
display: none;
|
148
|
+
}
|
134
149
|
|
135
|
-
.ff-spreadsheet-floating-rect--selected {
|
136
|
-
|
137
|
-
|
138
|
-
}
|
150
|
+
.ff-spreadsheet-floating-rect--selected {
|
151
|
+
background: var(--outline-background-color);
|
152
|
+
border: 2px var(--outline-color) solid;
|
153
|
+
}
|
139
154
|
|
140
|
-
.ff-spreadsheet-floating-rect--dragging {
|
141
|
-
|
142
|
-
}
|
155
|
+
.ff-spreadsheet-floating-rect--dragging {
|
156
|
+
border: none;
|
157
|
+
}
|
143
158
|
|
144
|
-
.ff-spreadsheet-floating-rect--copied {
|
145
|
-
|
159
|
+
.ff-spreadsheet-floating-rect--copied {
|
160
|
+
border: 2px var(--outline-color) dashed;
|
161
|
+
}
|
146
162
|
}
|
@@ -98,6 +98,8 @@ export type Props<CellType extends Types.CellBase> = {
|
|
98
98
|
/** Callback called when the Spreadsheet's evaluated data changes. */
|
99
99
|
onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
|
100
100
|
setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
|
101
|
+
/** Set your dynamic sheet Height*/
|
102
|
+
sheetHeight: string;
|
101
103
|
};
|
102
104
|
|
103
105
|
/**
|
@@ -113,6 +115,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
113
115
|
onKeyDown,
|
114
116
|
Table = DefaultTable,
|
115
117
|
Row = DefaultRow,
|
118
|
+
sheetHeight,
|
116
119
|
HeaderRow = DefaultHeaderRow,
|
117
120
|
DataEditor = DefaultDataEditor,
|
118
121
|
DataViewer = DefaultDataViewer,
|
@@ -443,6 +446,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
443
446
|
const rootNode = React.useMemo(
|
444
447
|
() => (
|
445
448
|
<div className="ff-excel">
|
449
|
+
<div className="ff-excel-toolbar-container">
|
446
450
|
<ExcelToolBar
|
447
451
|
onBold={onBold}
|
448
452
|
onItalic={onItalic}
|
@@ -455,8 +459,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
|
|
455
459
|
setBackgroundColor={setBackgroundColor}
|
456
460
|
setFormatePainter={setFormatePainter}
|
457
461
|
/>
|
462
|
+
</div>
|
458
463
|
<div
|
459
464
|
ref={rootRef}
|
465
|
+
style={{height:sheetHeight}}
|
460
466
|
className={classNames('ff-spreadsheet', className)}
|
461
467
|
onKeyDown={handleKeyDown}
|
462
468
|
onMouseMove={handleMouseMove}
|
@@ -91,7 +91,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
91
91
|
value: string;
|
92
92
|
}>({
|
93
93
|
label: 'Times New Roman',
|
94
|
-
value: '
|
94
|
+
value: 'Times New Roman',
|
95
|
+
});
|
96
|
+
const [selectedFontSize, setSelectedFontSize] = useState<{
|
97
|
+
label: string;
|
98
|
+
value: string;
|
99
|
+
}>({
|
100
|
+
label: '11',
|
101
|
+
value: '11',
|
95
102
|
});
|
96
103
|
const [colorContainer, setColorPicker] = useState<ColorContainer>({
|
97
104
|
color: 'var(--error-light)',
|
@@ -219,9 +226,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
219
226
|
<div className="ff-excel-toolbar-font-family">
|
220
227
|
<Select
|
221
228
|
showLabel={false}
|
229
|
+
optionZIndex={1000}
|
222
230
|
onChange={(e) => {
|
223
|
-
setSelectedFontFamily({ label: e.label, value: e.
|
224
|
-
setFontFamily(data, e.
|
231
|
+
setSelectedFontFamily({ label: e.label, value: e.label });
|
232
|
+
setFontFamily(data, e.value);
|
225
233
|
}}
|
226
234
|
required={false}
|
227
235
|
optionsList={fontFamily}
|
@@ -233,13 +241,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
233
241
|
<div className="ff-excel-toolbar-font-size">
|
234
242
|
<Select
|
235
243
|
showLabel={false}
|
244
|
+
optionZIndex={1000}
|
236
245
|
required={false}
|
237
|
-
onChange={(e) =>
|
238
|
-
|
239
|
-
|
240
|
-
label: '11',
|
241
|
-
value: '11',
|
246
|
+
onChange={(e) => {
|
247
|
+
setSelectedFontSize({ label: e.label, value: e.value });
|
248
|
+
setFontSize(data, e.value);
|
242
249
|
}}
|
250
|
+
optionsList={fontSize}
|
251
|
+
selectedOption={selectedFontSize}
|
243
252
|
/>
|
244
253
|
</div>
|
245
254
|
</Tooltip>
|
@@ -308,6 +317,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
308
317
|
/>
|
309
318
|
<MenuOption
|
310
319
|
iconName="arrow_down"
|
320
|
+
zIndex={1000}
|
311
321
|
iconSize={12}
|
312
322
|
options={underlineTypeIcon}
|
313
323
|
tooltipPlacement="top"
|
@@ -384,6 +394,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
384
394
|
<MenuOption
|
385
395
|
iconName="arrow_down"
|
386
396
|
iconSize={12}
|
397
|
+
zIndex={1000}
|
387
398
|
options={borderTypeIcon}
|
388
399
|
tooltipPlacement="top"
|
389
400
|
variant="light"
|
@@ -66,6 +66,7 @@ import TextColor from '../../assets/icons/text_color.svg?react';
|
|
66
66
|
import FillColor from '../../assets/icons/fill_color.svg?react';
|
67
67
|
import FormulaIcon from '../../assets/icons/formula_icon.svg?react';
|
68
68
|
import ExcelCornerMenu from '../../assets/icons/excel_corner_menu.svg?react';
|
69
|
+
import AutoSaveIcon from '../../assets/icons/auto_save_icon.svg?react';
|
69
70
|
|
70
71
|
import ApkFileType from '../../assets/icons/apk_file_type.svg?react';
|
71
72
|
import CsvFileType from '../../assets/icons/csv_file_type.svg?react';
|
@@ -318,6 +319,7 @@ Components['text_color'] = TextColor;
|
|
318
319
|
Components['fill_color'] = FillColor;
|
319
320
|
Components['formula_icon'] = FormulaIcon;
|
320
321
|
Components['excel_corner_menu'] = ExcelCornerMenu;
|
322
|
+
Components['auto_save_icon'] = AutoSaveIcon;
|
321
323
|
Components['export'] = Export;
|
322
324
|
Components['apk_file_type'] = ApkFileType;
|
323
325
|
Components['csv_file_type'] = CsvFileType;
|
@@ -15,7 +15,11 @@ const Template = ({
|
|
15
15
|
placeholder,
|
16
16
|
onFocus,
|
17
17
|
onBlur,
|
18
|
-
|
18
|
+
international,
|
19
|
+
enableAreaCodeStretch,
|
20
|
+
defaultCountry,
|
21
|
+
disabled,
|
22
|
+
id,
|
19
23
|
}: PhoneInputProps) => {
|
20
24
|
const [phone, setPhone] = useState<string>(value || '');
|
21
25
|
const [valid, setValid] = useState(true);
|
@@ -38,6 +42,11 @@ const Template = ({
|
|
38
42
|
onFocus={onFocus}
|
39
43
|
onBlur={onBlur}
|
40
44
|
isValid={valid}
|
45
|
+
international={international}
|
46
|
+
enableAreaCodeStretch={enableAreaCodeStretch}
|
47
|
+
defaultCountry={defaultCountry}
|
48
|
+
disabled={disabled}
|
49
|
+
id={id}
|
41
50
|
/>
|
42
51
|
);
|
43
52
|
};
|
@@ -46,50 +55,16 @@ const Template = ({
|
|
46
55
|
export const Default = Template.bind({});
|
47
56
|
Default.args = {
|
48
57
|
country: 'IN',
|
49
|
-
value: '
|
58
|
+
value: '91',
|
50
59
|
width: '400px',
|
51
60
|
placeholder: 'Enter phone number',
|
52
61
|
onChange: () => {},
|
53
62
|
onFocus: () => {},
|
54
63
|
onBlur: () => {},
|
55
64
|
isValid: true,
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
country: 'IN',
|
62
|
-
value: '9176543210',
|
63
|
-
width: '300px',
|
64
|
-
onChange: () => {},
|
65
|
-
placeholder: 'Enter phone number',
|
66
|
-
onFocus: () => {},
|
67
|
-
onBlur: () => {},
|
68
|
-
isValid: true,
|
69
|
-
};
|
70
|
-
|
71
|
-
// Story with a custom country
|
72
|
-
export const WithCustomCountry = Template.bind({});
|
73
|
-
WithCustomCountry.args = {
|
74
|
-
country: 'IN',
|
75
|
-
value: '9176543210',
|
76
|
-
width: '300px',
|
77
|
-
onChange: () => {},
|
78
|
-
placeholder: 'Enter phone number',
|
79
|
-
onFocus: () => {},
|
80
|
-
onBlur: () => {},
|
81
|
-
isValid: true,
|
82
|
-
};
|
83
|
-
|
84
|
-
// Story with empty value
|
85
|
-
export const EmptyValue = Template.bind({});
|
86
|
-
EmptyValue.args = {
|
87
|
-
country: 'IN',
|
88
|
-
value: '91',
|
89
|
-
width: '500px',
|
90
|
-
onChange: () => {},
|
91
|
-
placeholder: 'Enter phone number',
|
92
|
-
onFocus: () => {},
|
93
|
-
onBlur: () => {},
|
94
|
-
isValid: false,
|
65
|
+
international: true,
|
66
|
+
enableAreaCodeStretch: true,
|
67
|
+
defaultCountry: 'IN',
|
68
|
+
disabled: false,
|
69
|
+
id: 'addPrimaryNumberId',
|
95
70
|
};
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
2
2
|
import PhoneInput from 'react-phone-input-2';
|
3
|
-
import 'react-phone-input-2/lib/style.css';
|
4
3
|
import { PhoneInputProps } from './types';
|
5
4
|
import Typography from '../Typography';
|
6
5
|
import './PhoneInput.scss';
|
@@ -13,6 +12,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
|
|
13
12
|
placeholder = 'Enter phone number',
|
14
13
|
onFocus,
|
15
14
|
onBlur,
|
15
|
+
id,
|
16
|
+
dropdownStyle = {},
|
17
|
+
enableAreaCodeStretch = false,
|
18
|
+
disabled = false,
|
16
19
|
}) => {
|
17
20
|
const [phone, setPhone] = useState<string>(value);
|
18
21
|
const [isFocused, setIsFocused] = useState(false);
|
@@ -57,8 +60,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
|
|
57
60
|
};
|
58
61
|
|
59
62
|
return (
|
60
|
-
<div>
|
63
|
+
<div id={id}>
|
61
64
|
<PhoneInput
|
65
|
+
specialLabel=""
|
66
|
+
countryCodeEditable={false}
|
62
67
|
country={country}
|
63
68
|
value={phone}
|
64
69
|
onChange={handlePhoneChange}
|
@@ -77,6 +82,9 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
|
|
77
82
|
placeholder={placeholder}
|
78
83
|
onFocus={handleFocus}
|
79
84
|
onBlur={handleBlur}
|
85
|
+
dropdownStyle={dropdownStyle}
|
86
|
+
enableAreaCodeStretch={enableAreaCodeStretch}
|
87
|
+
disabled={disabled}
|
80
88
|
/>
|
81
89
|
{error && !isFocused && (
|
82
90
|
<Typography color={'var(--error_light)'} className="error">
|