kahuna-base-react-components 1.4.5 → 1.4.7
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/dist/components/KSelectRangeDate/KSelectRangeDate.d.ts +1 -0
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/languages/index.d.ts +2 -0
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/KButton/KButton.stories.tsx +1 -1
- package/src/components/KSelectRangeDate/KSelectRangeDate.tsx +99 -30
- package/src/languages/en.json +1 -0
- package/src/languages/tr.json +1 -0
|
@@ -28,6 +28,7 @@ export declare const getLanguageJson: () => {
|
|
|
28
28
|
last_fourteen_days: string;
|
|
29
29
|
last_twenty_eight_days: string;
|
|
30
30
|
last_month: string;
|
|
31
|
+
last_two_months: string;
|
|
31
32
|
last_three_months: string;
|
|
32
33
|
last_six_months: string;
|
|
33
34
|
last_twelve_months: string;
|
|
@@ -67,6 +68,7 @@ export declare const lang: {
|
|
|
67
68
|
last_fourteen_days: string;
|
|
68
69
|
last_twenty_eight_days: string;
|
|
69
70
|
last_month: string;
|
|
71
|
+
last_two_months: string;
|
|
70
72
|
last_three_months: string;
|
|
71
73
|
last_six_months: string;
|
|
72
74
|
last_twelve_months: string;
|
package/dist/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -32,6 +32,7 @@ export interface KSelectRangeDateProps {
|
|
|
32
32
|
popupCalendarBackground?: string
|
|
33
33
|
hideBackdrop?: boolean
|
|
34
34
|
weeklyMode?: boolean
|
|
35
|
+
includeLastYear?: boolean
|
|
35
36
|
shorthandEndDateOffsetDays?: number
|
|
36
37
|
weeklyModeStartDay?: number // Day the weekly range should start from (0=Sun...6=Sat); defaults to a rolling 7-day range if unset.
|
|
37
38
|
}
|
|
@@ -115,7 +116,6 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
|
|
|
115
116
|
|
|
116
117
|
const delta = props.shorthandEndDateOffsetDays ?? 0
|
|
117
118
|
|
|
118
|
-
|
|
119
119
|
const endDate = new Date(year, month, day - delta)
|
|
120
120
|
const startDate = new Date(year, month, day - delta - (range - 1))
|
|
121
121
|
setRange([startDate, endDate])
|
|
@@ -303,7 +303,7 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
|
|
|
303
303
|
<div className="flex flex-row">
|
|
304
304
|
{!props.weeklyMode && (
|
|
305
305
|
<div
|
|
306
|
-
className="w-[160px] bg-[#FFF] flex flex-col items-center gap-2 justify-start px-2.5 pt-5 pb-4 border-r-0"
|
|
306
|
+
className="w-[160px] bg-[#FFF] flex flex-col items-center gap-2 justify-start px-2.5 pt-5 pb-4 border-r-0 overflow-y-auto"
|
|
307
307
|
style={{
|
|
308
308
|
border: "1px solid #F3F3F3",
|
|
309
309
|
borderRightWidth: "0px",
|
|
@@ -311,34 +311,39 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
|
|
|
311
311
|
borderBottomLeftRadius: "16px"
|
|
312
312
|
}}
|
|
313
313
|
>
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
314
|
+
{!props.includeLastYear && (
|
|
315
|
+
<KButton
|
|
316
|
+
onClick={() => {
|
|
317
|
+
shorthandDateSelection(2)
|
|
318
|
+
setShorthandIndex({ ...shorthandIndex, current: 0 })
|
|
319
|
+
}}
|
|
320
|
+
width="140px"
|
|
321
|
+
background={shorthandIndex.current === 0 ? "#F7F7F7" : "#FFF"}
|
|
322
|
+
textColor={shorthandIndex.current === 0 ? "#000" : "#999"}
|
|
323
|
+
text={lang.button_text.yesterday}
|
|
324
|
+
borderRadius={8}
|
|
325
|
+
shadowDisabled
|
|
326
|
+
hoverBackground="#F0F0F0"
|
|
327
|
+
height="40px"
|
|
328
|
+
/>
|
|
329
|
+
)}
|
|
330
|
+
{!props.includeLastYear && (
|
|
331
|
+
<KButton
|
|
332
|
+
onClick={() => {
|
|
333
|
+
shorthandDateSelection(3)
|
|
334
|
+
setShorthandIndex({ ...shorthandIndex, current: 1 })
|
|
335
|
+
}}
|
|
336
|
+
width="140px"
|
|
337
|
+
background={shorthandIndex.current === 1 ? "#F7F7F7" : "#FFF"}
|
|
338
|
+
textColor={shorthandIndex.current === 1 ? "#000" : "#999"}
|
|
339
|
+
text={lang.button_text.last_three_days}
|
|
340
|
+
borderRadius={8}
|
|
341
|
+
shadowDisabled
|
|
342
|
+
hoverBackground="#F0F0F0"
|
|
343
|
+
height="40px"
|
|
344
|
+
/>
|
|
345
|
+
)}
|
|
346
|
+
|
|
342
347
|
<KButton
|
|
343
348
|
onClick={() => {
|
|
344
349
|
shorthandDateSelection(7)
|
|
@@ -381,6 +386,70 @@ const KSelectRangeDate: React.FC<KSelectRangeDateProps> = (props) => {
|
|
|
381
386
|
hoverBackground="#F0F0F0"
|
|
382
387
|
height="40px"
|
|
383
388
|
/>
|
|
389
|
+
{props.includeLastYear && (
|
|
390
|
+
<KButton
|
|
391
|
+
onClick={() => {
|
|
392
|
+
shorthandDateSelection(60)
|
|
393
|
+
setShorthandIndex({ ...shorthandIndex, current: 5 })
|
|
394
|
+
}}
|
|
395
|
+
width="140px"
|
|
396
|
+
background={shorthandIndex.current === 5 ? "#F7F7F7" : "#FFF"}
|
|
397
|
+
textColor={shorthandIndex.current === 5 ? "#000" : "#999"}
|
|
398
|
+
text={lang.button_text.last_two_months}
|
|
399
|
+
borderRadius={8}
|
|
400
|
+
shadowDisabled
|
|
401
|
+
hoverBackground="#F0F0F0"
|
|
402
|
+
height="40px"
|
|
403
|
+
/>
|
|
404
|
+
)}
|
|
405
|
+
{props.includeLastYear && (
|
|
406
|
+
<KButton
|
|
407
|
+
onClick={() => {
|
|
408
|
+
shorthandDateSelection(90)
|
|
409
|
+
setShorthandIndex({ ...shorthandIndex, current: 6 })
|
|
410
|
+
}}
|
|
411
|
+
width="140px"
|
|
412
|
+
background={shorthandIndex.current === 6 ? "#F7F7F7" : "#FFF"}
|
|
413
|
+
textColor={shorthandIndex.current === 6 ? "#000" : "#999"}
|
|
414
|
+
text={lang.button_text.last_three_months}
|
|
415
|
+
borderRadius={8}
|
|
416
|
+
shadowDisabled
|
|
417
|
+
hoverBackground="#F0F0F0"
|
|
418
|
+
height="40px"
|
|
419
|
+
/>
|
|
420
|
+
)}
|
|
421
|
+
{props.includeLastYear && (
|
|
422
|
+
<KButton
|
|
423
|
+
onClick={() => {
|
|
424
|
+
shorthandDateSelection(180)
|
|
425
|
+
setShorthandIndex({ ...shorthandIndex, current: 7 })
|
|
426
|
+
}}
|
|
427
|
+
width="140px"
|
|
428
|
+
background={shorthandIndex.current === 7 ? "#F7F7F7" : "#FFF"}
|
|
429
|
+
textColor={shorthandIndex.current === 7 ? "#000" : "#999"}
|
|
430
|
+
text={lang.button_text.last_six_months}
|
|
431
|
+
borderRadius={8}
|
|
432
|
+
shadowDisabled
|
|
433
|
+
hoverBackground="#F0F0F0"
|
|
434
|
+
height="40px"
|
|
435
|
+
/>
|
|
436
|
+
)}
|
|
437
|
+
{props.includeLastYear && (
|
|
438
|
+
<KButton
|
|
439
|
+
onClick={() => {
|
|
440
|
+
shorthandDateSelection(365)
|
|
441
|
+
setShorthandIndex({ ...shorthandIndex, current: 8 })
|
|
442
|
+
}}
|
|
443
|
+
width="140px"
|
|
444
|
+
background={shorthandIndex.current === 8 ? "#F7F7F7" : "#FFF"}
|
|
445
|
+
textColor={shorthandIndex.current === 8 ? "#000" : "#999"}
|
|
446
|
+
text={lang.button_text.last_twelve_months}
|
|
447
|
+
borderRadius={8}
|
|
448
|
+
shadowDisabled
|
|
449
|
+
hoverBackground="#F0F0F0"
|
|
450
|
+
height="40px"
|
|
451
|
+
/>
|
|
452
|
+
)}
|
|
384
453
|
</div>
|
|
385
454
|
)}
|
|
386
455
|
<div
|
package/src/languages/en.json
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"last_fourteen_days": "Last 14 days",
|
|
27
27
|
"last_twenty_eight_days": "Last 28 days",
|
|
28
28
|
"last_month": "Last Month",
|
|
29
|
+
"last_two_months": "Last 2 months",
|
|
29
30
|
"last_three_months": "Last 3 months",
|
|
30
31
|
"last_six_months": "Last 6 months",
|
|
31
32
|
"last_twelve_months": "Last 12 months",
|
package/src/languages/tr.json
CHANGED