pixel-react 1.5.6 → 1.5.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/.storybook/main.ts +7 -1
- package/lib/components/Charts/LineChart/types.d.ts +3 -0
- package/lib/components/LabelEditTextField/types.d.ts +5 -0
- package/lib/components/MiniModal/types.d.ts +9 -0
- package/lib/index.d.ts +17 -0
- package/lib/index.esm.js +169 -95
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +169 -95
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/info_user.svg +5 -0
- package/src/assets/icons/license_info.svg +12 -12
- package/src/components/Charts/LineChart/LineChart.scss +8 -7
- package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
- package/src/components/Charts/LineChart/LineChart.tsx +30 -27
- package/src/components/Charts/LineChart/types.ts +22 -20
- package/src/components/EditTextField/EditTextField.stories.tsx +1 -1
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -0
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +11 -15
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +44 -13
- package/src/components/LabelEditTextField/types.ts +5 -0
- package/src/components/MiniModal/MiniModal.scss +9 -5
- package/src/components/MiniModal/MiniModal.stories.tsx +28 -1
- package/src/components/MiniModal/MiniModal.tsx +110 -74
- package/src/components/MiniModal/types.ts +9 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +1 -1
- package/src/components/MultiSelect/MultiSelect.tsx +11 -8
@@ -31,6 +31,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
31
31
|
extraLeftSpace,
|
32
32
|
isIconModel,
|
33
33
|
wrapperProperties,
|
34
|
+
arrowZIndex,
|
35
|
+
overlay,
|
36
|
+
outSideClick,
|
34
37
|
},
|
35
38
|
ref
|
36
39
|
) => {
|
@@ -127,9 +130,13 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
127
130
|
} else if (modalPosition === 'right') {
|
128
131
|
return leftTopArrow
|
129
132
|
? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
|
130
|
-
: modalPositionState?.top -
|
133
|
+
: modalPositionState?.top -
|
134
|
+
safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
|
131
135
|
} else if (modalPosition === 'top') {
|
132
|
-
return
|
136
|
+
return (
|
137
|
+
modalPositionState.top -
|
138
|
+
(safeHeight + (extraTopSpace?.normalModal ?? 10))
|
139
|
+
);
|
133
140
|
}
|
134
141
|
return modalPositionState.top - safeHeight / 1.5;
|
135
142
|
};
|
@@ -138,7 +145,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
138
145
|
// Specifying the modal left
|
139
146
|
const calculateModalLeft = () => {
|
140
147
|
if (modalPosition === 'right') {
|
141
|
-
return
|
148
|
+
return (
|
149
|
+
modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
|
150
|
+
);
|
142
151
|
} else if (firstAnchorRef) {
|
143
152
|
return firstAnchor;
|
144
153
|
} else if (modalPosition === 'left') {
|
@@ -152,9 +161,9 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
152
161
|
// Handle escape and enter functionality
|
153
162
|
const handleEsc = useEscapeKey('Escape');
|
154
163
|
const handleEnter = useEscapeKey('Enter');
|
155
|
-
handleEsc(
|
164
|
+
handleEsc(outSideClick);
|
156
165
|
handleEnter(proceedButtonProps?.onClick);
|
157
|
-
useClickOutside(modalRef,
|
166
|
+
useClickOutside(modalRef, outSideClick);
|
158
167
|
|
159
168
|
// Calculate the modal position
|
160
169
|
const calculatePosition = useCallback(() => {
|
@@ -192,96 +201,123 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
|
|
192
201
|
height: modalHeight,
|
193
202
|
borderRadius: modalBorderRadius = 4,
|
194
203
|
zIndex: modalZIndex = 99,
|
204
|
+
boxShadow: modalBoxShadow,
|
195
205
|
} = modalProperties || {};
|
196
206
|
|
197
|
-
const {
|
198
|
-
|
207
|
+
const {
|
208
|
+
width: wrapperWidth = 35,
|
209
|
+
zIndex: wrapperZIndex = 101,
|
210
|
+
boxShadow: wrapperBoxShadow,
|
211
|
+
} = wrapperProperties || {};
|
212
|
+
const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
|
199
213
|
|
200
214
|
if (isWrapped && isPopOver) {
|
201
215
|
return null;
|
202
216
|
}
|
203
217
|
|
204
218
|
return createPortal(
|
205
|
-
|
206
|
-
|
207
|
-
className={classNames('ff-mini-edit-modal-container', {
|
208
|
-
modalVisible: isVisible,
|
209
|
-
animatedModal: isAnimated,
|
210
|
-
})}
|
211
|
-
style={{
|
212
|
-
top: `${calculatedModalTop}px`,
|
213
|
-
left: `${calculatedModalLeft}px`,
|
214
|
-
}}
|
215
|
-
>
|
216
|
-
{isPopOver && (
|
217
|
-
<div
|
218
|
-
className={`popover-arrow popover-arrow-${
|
219
|
-
modalPosition === 'right'
|
220
|
-
? 'left'
|
221
|
-
: modalPosition === 'top'
|
222
|
-
? 'bottom'
|
223
|
-
: modalPosition === 'left'
|
224
|
-
? 'right'
|
225
|
-
: 'top'
|
226
|
-
} ${getArrowClassName()}`}
|
227
|
-
/>
|
228
|
-
)}
|
229
|
-
{isWrapped && (
|
219
|
+
<>
|
220
|
+
{isOverlay && (
|
230
221
|
<div
|
231
|
-
className={'
|
222
|
+
className={classNames('ff-mini-modal-overlay')}
|
232
223
|
style={{
|
233
|
-
|
234
|
-
|
235
|
-
zIndex: `${wrapperZIndex}`,
|
224
|
+
zIndex: zIndexOverlay ?? 98,
|
225
|
+
backgroundColor: backgroundColorOverlay ?? 'transparent',
|
236
226
|
}}
|
227
|
+
onClick={cancelButtonProps?.onClick}
|
237
228
|
></div>
|
238
229
|
)}
|
239
230
|
<div
|
240
|
-
|
241
|
-
|
242
|
-
|
231
|
+
ref={ref || modalRef}
|
232
|
+
className={classNames('ff-mini-edit-modal-container', {
|
233
|
+
modalVisible: isVisible,
|
234
|
+
animatedModal: isAnimated,
|
243
235
|
})}
|
244
236
|
style={{
|
245
|
-
|
246
|
-
|
247
|
-
height: `${modalHeight}px`,
|
248
|
-
borderRadius: `${modalBorderRadius}px`,
|
249
|
-
zIndex: `${modalZIndex}`,
|
237
|
+
top: `${calculatedModalTop}px`,
|
238
|
+
left: `${calculatedModalLeft}px`,
|
250
239
|
}}
|
251
240
|
>
|
252
|
-
{
|
253
|
-
<
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
241
|
+
{isPopOver && (
|
242
|
+
<div
|
243
|
+
className={`popover-arrow popover-arrow-${
|
244
|
+
modalPosition === 'right'
|
245
|
+
? 'left'
|
246
|
+
: modalPosition === 'top'
|
247
|
+
? 'bottom'
|
248
|
+
: modalPosition === 'left'
|
249
|
+
? 'right'
|
250
|
+
: 'top'
|
251
|
+
} ${getArrowClassName()}`}
|
252
|
+
style={{
|
253
|
+
zIndex: `${arrowZIndex}`,
|
254
|
+
}}
|
255
|
+
/>
|
261
256
|
)}
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
/>
|
275
|
-
<Button
|
276
|
-
variant="secondary"
|
277
|
-
className="btn-proceed"
|
278
|
-
label={proceedButtonProps?.text}
|
279
|
-
onClick={proceedButtonProps?.onClick}
|
280
|
-
/>
|
281
|
-
</footer>
|
257
|
+
{isWrapped && (
|
258
|
+
<div
|
259
|
+
className={'wrapped-div'}
|
260
|
+
style={{
|
261
|
+
left: `${calculatedAnchorRefLeft}px`,
|
262
|
+
width: `${wrapperWidth}px`,
|
263
|
+
zIndex: `${wrapperZIndex}`,
|
264
|
+
boxShadow:
|
265
|
+
wrapperBoxShadow ??
|
266
|
+
`0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
|
267
|
+
}}
|
268
|
+
></div>
|
282
269
|
)}
|
270
|
+
<div
|
271
|
+
className={classNames('mini-edit-modal', {
|
272
|
+
'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
|
273
|
+
'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
|
274
|
+
})}
|
275
|
+
style={{
|
276
|
+
minWidth: isWrapped ? '358px' : '',
|
277
|
+
width: `${modalWidth}px`,
|
278
|
+
height: `${modalHeight}px`,
|
279
|
+
borderRadius: `${modalBorderRadius}px`,
|
280
|
+
zIndex: `${modalZIndex}`,
|
281
|
+
boxShadow: `${
|
282
|
+
modalBoxShadow ??
|
283
|
+
'0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
|
284
|
+
}`,
|
285
|
+
}}
|
286
|
+
>
|
287
|
+
{headerProps ? (
|
288
|
+
<Typography as="div">{headerProps}</Typography>
|
289
|
+
) : isIconModel ? (
|
290
|
+
<></>
|
291
|
+
) : (
|
292
|
+
<Typography as="header">
|
293
|
+
<Typography as="h2">Header text</Typography>
|
294
|
+
<hr />
|
295
|
+
</Typography>
|
296
|
+
)}
|
297
|
+
<div>{childContent}</div>
|
298
|
+
{footerContent ? (
|
299
|
+
<Typography as="footer">{footerContent}</Typography>
|
300
|
+
) : isIconModel ? (
|
301
|
+
<></>
|
302
|
+
) : (
|
303
|
+
<footer className="modal-footer">
|
304
|
+
<Button
|
305
|
+
variant="primary"
|
306
|
+
className="btn-cancel"
|
307
|
+
onClick={cancelButtonProps?.onClick}
|
308
|
+
label={cancelButtonProps?.text}
|
309
|
+
/>
|
310
|
+
<Button
|
311
|
+
variant="secondary"
|
312
|
+
className="btn-proceed"
|
313
|
+
label={proceedButtonProps?.text}
|
314
|
+
onClick={proceedButtonProps?.onClick}
|
315
|
+
/>
|
316
|
+
</footer>
|
317
|
+
)}
|
318
|
+
</div>
|
283
319
|
</div>
|
284
|
-
|
320
|
+
</>,
|
285
321
|
document.body
|
286
322
|
);
|
287
323
|
}
|
@@ -4,6 +4,7 @@ interface ModalDimensions {
|
|
4
4
|
height?: number;
|
5
5
|
borderRadius?: number;
|
6
6
|
zIndex?: number;
|
7
|
+
boxShadow?: string;
|
7
8
|
}
|
8
9
|
export interface MiniEditModalProps {
|
9
10
|
/**
|
@@ -90,7 +91,15 @@ export interface MiniEditModalProps {
|
|
90
91
|
wrapperProperties?: {
|
91
92
|
width?: number;
|
92
93
|
zIndex?: number;
|
94
|
+
boxShadow?: string;
|
93
95
|
};
|
96
|
+
arrowZIndex?: number;
|
97
|
+
overlay?: {
|
98
|
+
isOverlay?: boolean;
|
99
|
+
zIndexOverlay?: number;
|
100
|
+
backgroundColorOverlay?: string;
|
101
|
+
};
|
102
|
+
outSideClick?: any;
|
94
103
|
}
|
95
104
|
export interface Rect {
|
96
105
|
top: number;
|
@@ -130,7 +130,7 @@ export const Controlled: Story = {
|
|
130
130
|
const [options, setOptions] = useState<Option[]>([]);
|
131
131
|
const [selectedOptions, setSelectedOptions] = useState<
|
132
132
|
{ label?: string; value?: string }[]
|
133
|
-
>([
|
133
|
+
>([]);
|
134
134
|
const onChange = (options: { label?: string; value?: string }[]) => {
|
135
135
|
setSelectedOptions(options);
|
136
136
|
};
|
@@ -265,15 +265,18 @@ const MultiSelect = ({
|
|
265
265
|
};
|
266
266
|
}, [isOpen]);
|
267
267
|
useEffect(() => {
|
268
|
-
if (options?.length
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
268
|
+
if (!checkEmpty(options?.length)) {
|
269
|
+
let initializeOptions=options;
|
270
|
+
if(!checkEmpty(selectedOptions?.length)){
|
271
|
+
initializeOptions = options.map((option) => ({
|
272
|
+
...option,
|
273
|
+
isChecked: selectedOptions.some(
|
274
|
+
(selectedOption) =>
|
275
|
+
getValue(selectedOption, valueAccessor) ===
|
274
276
|
getValue(option, valueAccessor)
|
275
|
-
|
276
|
-
|
277
|
+
),
|
278
|
+
}));
|
279
|
+
}
|
277
280
|
setAllOptions(initializeOptions);
|
278
281
|
}
|
279
282
|
}, [options, selectedOptions]);
|