Skip to content

Commit 74ee208

Browse files
marcus-wishesmarcus-wishes
committed
fixed time time default german messages, which were not imported correctly. updated packages
1 parent 0abeb93 commit 74ee208

File tree

6 files changed

+954
-718
lines changed

6 files changed

+954
-718
lines changed

‎library/src/components/timetable/LPTimeTableHeader.tsx‎

Lines changed: 97 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -9,145 +9,168 @@ const headerTimeSlotFormat = "HH:mm"
99

1010
type Props = {
1111
slotsArray: Dayjs[]
12-
groupHeaderColumnWidth: number | string,
13-
columnWidth: number | string,
14-
startDate: Dayjs,
15-
endDate: Dayjs,
16-
timeSlotsPerDay: number,
17-
timeSteps: number,
12+
groupHeaderColumnWidth: number | string
13+
columnWidth: number | string
14+
startDate: Dayjs
15+
endDate: Dayjs
16+
timeSlotsPerDay: number
17+
timeSteps: number
1818
}
1919

20-
export const LPTimeTableHeader = forwardRef( function TimeTableHeader ( {
21-
slotsArray,
22-
groupHeaderColumnWidth,
23-
columnWidth,
24-
startDate,
25-
endDate,
26-
timeSlotsPerDay,
27-
timeSteps,
28-
}: Props,
20+
const backgroundColor = token("color.background.neutral")
21+
22+
export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
23+
{
24+
slotsArray,
25+
groupHeaderColumnWidth,
26+
columnWidth,
27+
startDate,
28+
endDate,
29+
timeSlotsPerDay,
30+
timeSteps,
31+
}: Props,
2932
tableHeaderRef: React.Ref<HTMLTableSectionElement>,
3033
) {
31-
32-
const days = [ ...new Set( slotsArray.map( it => it.startOf( "day" ).format() ) ) ].map( it => dayjs( it ) )
34+
const days = [
35+
...new Set(slotsArray.map((it) => it.startOf("day").format())),
36+
].map((it) => dayjs(it))
3337

3438
return (
3539
<>
36-
{/* the colgroup defined the coliumn widths. There are always two column for one visible, one fixed size, and one which can expand if the table is smaller than the parent. */ }
40+
{/* the colgroup defined the coliumn widths. There are always two column for one visible, one fixed size, and one which can expand if the table is smaller than the parent. */}
3741
<colgroup>
38-
<col style={ {
39-
minWidth: typeof groupHeaderColumnWidth === "string" ? groupHeaderColumnWidth : `${ groupHeaderColumnWidth }px`,
40-
width: typeof groupHeaderColumnWidth === "string" ? groupHeaderColumnWidth : `${ groupHeaderColumnWidth }px`
41-
} }
42+
<col
43+
style={{
44+
minWidth:
45+
typeof groupHeaderColumnWidth === "string"
46+
? groupHeaderColumnWidth
47+
: `${groupHeaderColumnWidth}px`,
48+
width:
49+
typeof groupHeaderColumnWidth === "string"
50+
? groupHeaderColumnWidth
51+
: `${groupHeaderColumnWidth}px`,
52+
}}
4253
/>
43-
{ slotsArray.map( ( _, i ) => {
54+
{slotsArray.map((_, i) => {
4455
return (
4556
<>
4657
<col
47-
key={ i * 2 }
48-
style={ {
49-
minWidth: typeof columnWidth === "string" ? columnWidth : `${ columnWidth }px`,
50-
width: typeof columnWidth === "string" ? columnWidth : `${ columnWidth }px`,
51-
} }
52-
/>
53-
<col
54-
key={ i * 2 + 1 }
58+
key={i * 2}
59+
style={{
60+
minWidth:
61+
typeof columnWidth === "string"
62+
? columnWidth
63+
: `${columnWidth}px`,
64+
width:
65+
typeof columnWidth === "string"
66+
? columnWidth
67+
: `${columnWidth}px`,
68+
}}
5569
/>
70+
<col key={i * 2 + 1} />
5671
</>
5772
)
58-
} ) }
73+
})}
5974
</colgroup>
60-
<thead ref={ tableHeaderRef }>
75+
<thead ref={tableHeaderRef}>
6176
<tr>
6277
<th
63-
style={ {
78+
style={{
6479
zIndex: 4,
6580
position: "sticky",
6681
left: 0,
6782
top: 0,
6883
borderLeftStyle: "none",
6984
width: groupHeaderColumnWidth,
70-
borderRight: `1px solid ${ token( "color.border.bold" ) }`,
71-
backgroundColor: token( "elevation.surface" ),
72-
} }
73-
className={ styles.unselectable }
85+
borderRight: `1px solid ${token(
86+
"color.border.bold",
87+
)}`,
88+
backgroundColor,
89+
}}
90+
className={styles.unselectable}
7491
>
7592
<div
76-
style={ {
93+
style={{
7794
display: "flex",
7895
justifyContent: "right",
7996
paddingRight: "0.3rem",
80-
} }
97+
}}
8198
>
82-
{ `${ startDate.format( "DD.MM." ) } - ${ endDate.format( "DD.MM.YY" ) }` }
99+
{`${startDate.format("DD.MM.")} - ${endDate.format(
100+
"DD.MM.YY",
101+
)}`}
83102
</div>
84103
</th>
85-
{ days.map( ( date ) => {
104+
{days.map((date) => {
86105
return (
87106
<th
88-
key={ date.toISOString() }
89-
colSpan={ timeSlotsPerDay * 2 }
90-
style={ {
91-
backgroundColor: token( "elevation.surface" ),
92-
} }
107+
key={date.toISOString()}
108+
colSpan={timeSlotsPerDay * 2}
109+
style={{
110+
backgroundColor,
111+
}}
93112
>
94113
<div
95-
style={ {
114+
style={{
96115
display: "flex",
97116
justifyContent: "center",
98-
} }
99-
className={ styles.unselectable }
117+
}}
118+
className={styles.unselectable}
100119
>
101-
{ date.format( headerDateFormat ) }
120+
{date.format(headerDateFormat)}
102121
</div>
103122
</th>
104123
)
105-
} )
106-
}
124+
})}
107125
</tr>
108126
<tr>
109127
<th
110-
className={ `${ styles.unselectable } ${ styles.headerTimeSlot }` }
111-
style={ {
128+
className={`${styles.unselectable} ${styles.headerTimeSlot}`}
129+
style={{
112130
zIndex: 4,
113131
position: "sticky",
114132
left: 0,
115133
top: 0,
116134
borderLeftStyle: "none",
117-
borderRight: `1px solid ${ token( "color.border.bold" ) }`,
118-
} }
135+
borderRight: `1px solid ${token(
136+
"color.border.bold",
137+
)}`,
138+
backgroundColor,
139+
}}
119140
>
120141
<div
121-
style={ {
142+
style={{
122143
paddingRight: "0.3rem",
123144
display: "flex",
124145
justifyContent: "right",
125-
} }
146+
}}
126147
>
127-
{ `${ slotsArray[ 0 ].format( "HH:mm" ) } - ${ slotsArray[ 0 ].add( timeSlotsPerDay * timeSteps, "minutes" ).format( "HH:mm" ) } [${ slotsArray.length }]` }
148+
{`${slotsArray[0].format("HH:mm")} - ${slotsArray[0]
149+
.add(timeSlotsPerDay * timeSteps, "minutes")
150+
.format("HH:mm")} [${slotsArray.length}]`}
128151
</div>
129152
</th>
130-
{ slotsArray.map( ( slot, i ) => {
131-
const isNewDay = i === 0 || !slotsArray[ i - 1 ].isSame( slot, "day" )
153+
{slotsArray.map((slot, i) => {
154+
const isNewDay =
155+
i === 0 || !slotsArray[i - 1].isSame(slot, "day")
132156
return (
133157
<th
134-
key={ i }
135-
style={ {
158+
key={i}
159+
style={{
136160
paddingLeft: isNewDay ? "4px" : "2px",
137-
borderLeftWidth: isNewDay && i > 0 ? "1px" : "0",
138-
} }
139-
colSpan={ 2 }
140-
className={ `${ styles.unselectable } ${ styles.headerTimeSlot }` }
161+
borderLeftWidth:
162+
isNewDay && i > 0 ? "1px" : "0",
163+
backgroundColor,
164+
}}
165+
colSpan={2}
166+
className={`${styles.unselectable} ${styles.headerTimeSlot}`}
141167
>
142-
{ slot.format( headerTimeSlotFormat ) }
168+
{slot.format(headerTimeSlotFormat)}
143169
</th>
144170
)
145-
} )
146-
}
171+
})}
147172
</tr>
148173
</thead>
149174
</>
150-
151175
)
152-
153-
} )
176+
})

‎library/src/components/timetable/TimeTableMessageContext.tsx‎

Lines changed: 65 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import React, { createContext, Dispatch, useContext, useEffect, useState } from "react"
1+
import React, {
2+
createContext,
3+
Dispatch,
4+
useContext,
5+
useEffect,
6+
useState,
7+
} from "react"
28
import { Message } from "../inlinemessage"
39
import type { default as TranslatedTimeTableMessagesJson } from "../../localization/translations-compiled/en.json"
410

@@ -11,57 +17,81 @@ export type TranslatedTimeTableMessages = typeof TranslatedTimeTableMessagesJson
1117
*/
1218
//const germanMessages = await import( "../../localization/translations-compiled/de.json" )
1319
let germanMessages: TranslatedTimeTableMessages
14-
( async function main () {
20+
;(async function main() {
1521
// You can use await inside this function block
16-
germanMessages = await ( await import( "../../localization/translations-compiled/de.json" ) )
17-
} )();
18-
22+
const germanMessagesModule = await import(
23+
"../../localization/translations-compiled/de.json"
24+
)
25+
germanMessages = germanMessagesModule.default
26+
})()
1927

2028
//export type TranslatedTimeTableMessages = typeof germanMessages.default
2129

2230
export type TimeTableMessage = Omit<Message, "text"> & {
23-
messageKey: keyof TranslatedTimeTableMessages,
24-
messageValues?: Record<string, string | number | boolean>,
31+
messageKey: keyof TranslatedTimeTableMessages
32+
messageValues?: Record<string, string | number | boolean>
2533
}
2634

35+
const timeTableMessageContext = createContext<
36+
| {
37+
message: TimeTableMessage | undefined
38+
setMessage: Dispatch<
39+
React.SetStateAction<TimeTableMessage | undefined>
40+
>
41+
messagesTranslations: TranslatedTimeTableMessages
42+
}
43+
| undefined
44+
>(undefined)
2745

28-
const timeTableMessageContext = createContext<{
29-
message: TimeTableMessage | undefined,
30-
setMessage: Dispatch<React.SetStateAction<TimeTableMessage | undefined>>,
31-
messagesTranslations: TranslatedTimeTableMessages,
32-
} | undefined>( undefined )
46+
export function TimeTableMessageProvider({
47+
messagesTranslations = germanMessages,
48+
children,
49+
}: {
50+
messagesTranslations?: TranslatedTimeTableMessages
51+
children: JSX.Element
52+
}) {
53+
const [message, setMessage] = useState<TimeTableMessage>()
3354

34-
export function TimeTableMessageProvider ( { messagesTranslations = germanMessages, children }: { messagesTranslations?: TranslatedTimeTableMessages, children: JSX.Element } ) {
35-
const [ message, setMessage ] = useState<TimeTableMessage>()
36-
37-
useEffect( () => {
38-
console.log( "messagesTranslations", messagesTranslations )
39-
}, [ messagesTranslations ] )
55+
useEffect(() => {
56+
console.log("messagesTranslations", messagesTranslations)
57+
}, [messagesTranslations])
4058

4159
return (
42-
<timeTableMessageContext.Provider value={ { message, setMessage, messagesTranslations } }>
43-
{ children }
60+
<timeTableMessageContext.Provider
61+
value={{ message, setMessage, messagesTranslations }}
62+
>
63+
{children}
4464
</timeTableMessageContext.Provider>
4565
)
4666
}
4767

48-
export function useTimeTableMessage () {
49-
const ret = useContext( timeTableMessageContext )
50-
if ( !ret ) throw new Error( "useTimeTableMessage must be used within a TimeTableMessageProvider" )
51-
let messageTranslation = ret.message ? ret.messagesTranslations[ ret.message.messageKey ] : undefined
52-
if ( !messageTranslation && ret.message ) {
53-
messageTranslation = `no translation found for key [${ ret.message?.messageKey }]`
54-
} else if ( messageTranslation && ret.message?.messageValues ) {
55-
Object.entries( ret.message.messageValues ).forEach( ( [ key, value ] ) => {
56-
messageTranslation = messageTranslation?.replace( `{${ key }}`, value.toString() )
57-
} )
68+
export function useTimeTableMessage() {
69+
const ret = useContext(timeTableMessageContext)
70+
if (!ret)
71+
throw new Error(
72+
"useTimeTableMessage must be used within a TimeTableMessageProvider",
73+
)
74+
let messageTranslation = ret.message
75+
? ret.messagesTranslations[ret.message.messageKey]
76+
: undefined
77+
if (!messageTranslation && ret.message) {
78+
messageTranslation = `no translation found for key [${ret.message?.messageKey}]`
79+
} else if (messageTranslation && ret.message?.messageValues) {
80+
Object.entries(ret.message.messageValues).forEach(([key, value]) => {
81+
messageTranslation = messageTranslation?.replace(
82+
`{${key}}`,
83+
value.toString(),
84+
)
85+
})
5886
}
5987

60-
const translatedMessage: Message | undefined = ret.message && messageTranslation ? {
61-
...ret.message,
62-
text: messageTranslation,
63-
} : undefined
88+
const translatedMessage: Message | undefined =
89+
ret.message && messageTranslation
90+
? {
91+
...ret.message,
92+
text: messageTranslation,
93+
}
94+
: undefined
6495

6596
return { ...ret, translatedMessage }
6697
}
67-

0 commit comments

Comments
 (0)