Skip to content

Commit d0e2fef

Browse files
mstijakmstijak
committed
...
1 parent 5435970 commit d0e2fef

File tree

2 files changed

+78
-72
lines changed

2 files changed

+78
-72
lines changed

‎packages/cx/src/widgets/List.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,15 @@ export interface ListConfig<T = any> extends StyledContainerConfig {
3232
/** Record alias. Default is `$record`. */
3333
recordName?: RecordAlias;
3434

35+
/** Record alias. Alias for `recordName`. Default is `$record`. */
36+
recordAlias?: RecordAlias;
37+
3538
/** Index alias. Default is `$index`. */
3639
indexName?: RecordAlias;
3740

41+
/** Index alias. Alias for `indexName`. Default is `$index`. */
42+
indexAlias?: RecordAlias;
43+
3844
/** Style to be applied to each list item. */
3945
itemStyle?: StyleProp;
4046

‎packages/cx/src/widgets/form/TimeList.tsx‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/** @jsxImportSource react */
21
import { ContentResolver } from "../../ui/ContentResolver";
32
import { DataProxy } from "../../ui/DataProxy";
43
import { List } from "../List";
@@ -10,9 +9,7 @@ import { Culture } from "../../ui/Culture";
109
import { isString } from "../../util/isString";
1110
import { isFunction } from "../../util/isFunction";
1211
import { bind } from "../../ui/bind";
13-
import { Widget } from "../../ui/Widget";
1412
import type { Instance } from "../../ui/Instance";
15-
import { HtmlElement } from "../HtmlElement";
1613

1714
export interface TimeListProps {
1815
/** Selected time value. Should be a Date object or a valid date string. */
@@ -34,72 +31,75 @@ export interface TimeListProps {
3431
[key: string]: unknown;
3532
}
3633

37-
export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }: TimeListProps) => {
38-
return Widget.create({
39-
type: ContentResolver,
40-
params: { step, format, dummy: true },
41-
onResolve: ({ step, format }: { step?: number; format?: string }) => {
42-
let max = 24 * 60;
43-
if (!step) step = 15;
44-
if (step < 1) step = 1;
45-
let times = [];
46-
let today = zeroTime(new Date()).valueOf();
47-
for (let m = 0; m < max; m += step) {
48-
let time = m * 60 * 1000;
49-
times.push({
50-
id: m * 60 * 1000,
51-
text: Format.value(today + time, format || "datetime;HHmm"),
52-
});
53-
}
54-
let stepMs = step * 60 * 1000;
55-
return Widget.create({
56-
type: DataProxy,
57-
data: { $value: value },
58-
immutable: true,
59-
children: Widget.create({
60-
type: DataProxy,
61-
data: {
62-
$selection: {
63-
get: ({ $value }: { $value?: unknown }) => {
64-
if ($value == null) return null;
65-
let selectionDate = new Date($value as any);
66-
let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
67-
return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
68-
},
69-
set: (value: unknown, instance: Instance) => {
70-
let { store } = instance;
71-
let $value = store.get("$value");
72-
let copy = $value ? new Date($value as any) : new Date();
73-
let today = zeroTime(new Date()).valueOf();
74-
let date = new Date(today + (value as number));
75-
copy.setHours(date.getHours());
76-
copy.setMinutes(date.getMinutes());
77-
copy.setSeconds(date.getSeconds());
78-
copy.setMilliseconds(0);
79-
let encode = encoding || Culture.getDefaultDateEncoding();
80-
store.set("$value", encode(copy));
81-
},
82-
},
83-
},
84-
children: Widget.create({
85-
type: List,
86-
records: times,
87-
recordAlias: "$time",
88-
selection: {
89-
type: KeySelection,
90-
selection: { bind: "$selection" },
91-
},
92-
...props,
93-
onItemClick: (e: React.MouseEvent, instance: Instance) => {
94-
if (!onSelect) return;
95-
let date = new Date(instance.store.get('$value') as any);
96-
if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
97-
else if (isFunction(onSelect)) onSelect(e, instance, date);
98-
},
99-
children: HtmlElement.create("div", { text: bind("$time.text") }),
100-
}),
101-
}),
102-
});
103-
},
104-
});
105-
});
34+
export const TimeList = createFunctionalComponent(
35+
({ value, step, format, encoding, onSelect, ...props }: TimeListProps) => (
36+
<cx>
37+
<ContentResolver
38+
params={{ step, format, dummy: true }}
39+
onResolve={({ step, format }: { step?: number; format?: string }) => {
40+
let max = 24 * 60;
41+
if (!step) step = 15;
42+
if (step < 1) step = 1;
43+
let times = [];
44+
let today = zeroTime(new Date()).valueOf();
45+
for (let m = 0; m < max; m += step) {
46+
let time = m * 60 * 1000;
47+
times.push({
48+
id: m * 60 * 1000,
49+
text: Format.value(today + time, format || "datetime;HHmm"),
50+
});
51+
}
52+
let stepMs = step * 60 * 1000;
53+
return (
54+
<cx>
55+
<DataProxy data={{ $value: value }} immutable>
56+
<DataProxy
57+
data={{
58+
$selection: {
59+
get: ({ $value }: { $value?: unknown }) => {
60+
if ($value == null) return null;
61+
let selectionDate = new Date($value as any);
62+
let selectionTime =
63+
selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
64+
return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
65+
},
66+
set: (value: unknown, instance: Instance) => {
67+
let { store } = instance;
68+
let $value = store.get("$value");
69+
let copy = $value ? new Date($value as any) : new Date();
70+
let today = zeroTime(new Date()).valueOf();
71+
let date = new Date(today + (value as number));
72+
copy.setHours(date.getHours());
73+
copy.setMinutes(date.getMinutes());
74+
copy.setSeconds(date.getSeconds());
75+
copy.setMilliseconds(0);
76+
let encode = encoding || Culture.getDefaultDateEncoding();
77+
store.set("$value", encode(copy));
78+
},
79+
},
80+
}}
81+
>
82+
<List
83+
records={times}
84+
recordAlias="$time"
85+
selection={{ type: KeySelection, selection: bind("$selection") }}
86+
{...props}
87+
onItemClick={(e, instance) => {
88+
if (!onSelect) return;
89+
let date = new Date(instance.store.get("$value") as any);
90+
if (isString(onSelect))
91+
instance.invokeControllerMethod(onSelect, e, instance, date);
92+
else if (isFunction(onSelect)) onSelect(e, instance, date);
93+
}}
94+
>
95+
<div text={bind("$time.text")} />
96+
</List>
97+
</DataProxy>
98+
</DataProxy>
99+
</cx>
100+
);
101+
}}
102+
/>
103+
</cx>
104+
),
105+
);

0 commit comments

Comments
 (0)