@web-atoms/web-controls 2.3.56 → 2.3.58

package/src/basic/DateField.tsx

@@ -12,6 +12,8 @@ import ComboBox from "./ComboBox";
 import InlinePopup, { InlinePopupButton } from "./InlinePopup";
 import PopupButton from "./PopupButton";
 import ToggleButtonBar from "./ToggleButtonBar";
+import TimeEditor from "./TimeEditor";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 
 CSS(StyleRule()
     .display("inline-block")
@@ -165,24 +167,16 @@ export default class DateField extends AtomControl {
 
             public owner: DateField;
 
-            public hour: any;
-
-            public minute: any;
-
             public type;
 
+            public time: TimeSpan;
+
             protected create(): void {
                 this.owner = owner;
                 this.type = "AM";
-                let h = this.owner.hour;
-                if (h > 12) {
-                    h -= 12;
-                    this.type = "PM";
-                }
-                this.hour = h || 9;
-                this.minute = this.owner.minute || 0;
+                const now = DateTime.from(owner.value ?? DateTime.today.addHours(owner.hour || 0).addMinutes(owner.minute || 0));
+                this.time = new TimeSpan(0, now.hour, now.minute);
                 super.create();
-                const now = DateTime.utcNow;
                 const yearStart = typeof this.owner.yearStart === "number" ? this.owner.yearStart : -10;
                 const yearEnd = typeof this.owner.yearEnd === "number" ? this.owner.yearEnd : 10;
                 const year = typeof this.owner.year === "number" ? this.owner.year : now.year;
@@ -200,22 +194,9 @@ export default class DateField extends AtomControl {
                         enableFunc={Bind.oneTime(() => this.owner.enableFunc)}
                         value={Bind.oneWay(() => this.owner.value)}
                     />
-                    { this.owner.enableTime && <div class="time-editor">
-                        <span text="Time"/>
-                        <ComboBox
-                            prompt="-"
-                            items={hours()}
-                            value={Bind.twoWays(() => this.hour)}
-                            />
-                        <ComboBox
-                            prompt="-"
-                            items={minutes()}
-                            value={Bind.twoWays(() => this.minute)}
-                            />
-                        <ToggleButtonBar
-                            value={Bind.twoWays(() => this.type)}
-                            items={[{ label: "AM", value: "AM"}, { label: "PM", value: "PM"}]}/>
-                    </div> }
+                    { this.owner.enableTime && <TimeEditor
+                        time={Bind.twoWays(() => this.time)}
+                    /> }
                     <button
                         class="clear"
                         text="Clear"
@@ -251,11 +232,7 @@ export default class DateField extends AtomControl {
                 }
                 let date = DateTime.from((d));
                 if (this.owner.enableTime) {
-                    date = date.addHours(this.hour)
-                        .addMinutes(this.minute);
-                    if (this.type === "PM") {
-                        date = date.addHours(12);
-                    }
+                    date = date.add(this.time);
                 }
                 this.owner.value = date.asJSDate;
                 this.close(date);

package/src/basic/Select.tsx

@@ -0,0 +1,74 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import IElement from "./IElement";
+import XNode from "@web-atoms/core/dist/core/XNode";
+
+const labelPathSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
+    element["labelPath"] = value;
+});
+
+const valuePathSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
+    element["valuePath"] = value;
+});
+
+const valueSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element, value) => {
+    element["initialValue"] = value;
+    setTimeout(refreshItems, 1, element);
+});
+
+const refreshItems = (element: HTMLSelectElement, items?: any[]) => {
+    items ??= element["items"];
+    (element as any).update = true;
+    element.options.length = 0;
+    const cv = element["initialValue"];
+    const lp = element["labelPath"] ?? ((item) => item?.label ?? item);
+    const vp = element["valuePath"] ?? ((item) => item?.value ?? item);
+    let i = 0;
+    let si = -1;
+    for (const iterator of items) {
+        const option = document.createElement("option");
+        const label = lp(iterator);
+        const value = vp(iterator);
+        option.text = label;
+        option.value = value;
+        element.options.add(option);
+        if(cv !== void 0) {
+            if (cv == value) {
+                si = i;
+            }
+        }
+        i++;
+    }
+    if (si != -1) {
+        element.selectedIndex = si;
+    }
+    (element as any).update = false;
+
+};
+
+
+const itemsSetter = AtomControl.registerProperty("data-items", "value", (ctrl, element: HTMLSelectElement, value) => {
+    element["items"] = value;
+    setTimeout(refreshItems, 1, element, value);
+});
+
+export interface ISelect extends IElement {
+    items: any[];
+    labelPath?: (item) => any;
+    valuePath?: (item) => any;
+    value?: any;
+}
+export default function Select({
+        items,
+        labelPath,
+        valuePath,
+        value
+    }: ISelect) {
+    const p = {};
+    p[labelPathSetter.property] = labelPath;
+    p[valuePathSetter.property] = valuePath;
+    p[valueSetter.property] = value;
+    p[itemsSetter.property] = items;
+    return <select
+        { ... p}
+        ></select>;
+}

package/src/basic/TimeEditor.tsx

@@ -0,0 +1,135 @@
+import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
+import Select from "./Select";
+import Bind from "@web-atoms/core/dist/core/Bind";
+
+function hours() {
+    return [
+        { label: "01", value: 1 },
+        { label: "02", value: 2 },
+        { label: "03", value: 3 },
+        { label: "04", value: 4 },
+        { label: "05", value: 5 },
+        { label: "06", value: 6 },
+        { label: "07", value: 7 },
+        { label: "08", value: 8 },
+        { label: "09", value: 9 },
+        { label: "10", value: 10 },
+        { label: "11", value: 11 },
+        { label: "12", value: 12 },
+    ];
+}
+
+function minutes() {
+    const items = [];
+    for (let index = 0; index < 10; index++) {
+        items.push({ label: "0" + index, value: index });
+    }
+    for (let index = 10; index < 60; index++) {
+        items.push({ label: index.toString(), value: index });
+    }
+    return items;
+}
+
+CSS(StyleRule()
+    .paddingLeft(5)
+    .gridRow("2")
+    .flexLayout({ direction: "row", alignItems: "center", justifyContent: "start" as any, gap: 0})
+    .child(StyleRule("[data-element=hour]")
+        .marginLeft(5)
+        .marginRight(5)
+    )
+    .child(StyleRule("[data-element=minute]")
+        .marginRight(5)
+    )
+    .child(StyleRule("[data-element=pm]")
+        .marginRight(5)
+    )
+    .child(StyleRule("button")
+        .borderRadius(9999)
+        .outline("none")
+        .border("none")
+        .backgroundColor("transparent")
+        .and(StyleRule("[data-selected=true]")
+            .backgroundColor("var(--accent-color, blue)")
+            .color("var(--accent-text-color, white)")
+        )
+    )
+    .child(StyleRule("button[data-element=am]")
+        .borderTopRightRadius(0)
+        .borderBottomRightRadius(0)
+    )
+    .child(StyleRule("button[data-element=pm]")
+        .borderTopLeftRadius(0)
+        .borderBottomLeftRadius(0)
+    )
+    .child(StyleRule("select")
+        .border("none")
+        .outline("none")
+    ),"[data-time-editor]");
+
+export default class TimeEditor extends AtomControl {
+
+    // private time: TimeSpan;
+
+    public get time(): TimeSpan {
+        let t = new TimeSpan(0, this.hour, this.minute);
+        if (this.isPM) {
+            t = t.add(TimeSpan.fromHours(12));
+        }
+        return t;
+    }
+
+    public set time(v: TimeSpan) {
+        if(!v) {
+            v = TimeSpan.fromSeconds(0);
+        }
+        let h = v.hours;
+        if (h > 12) {
+            h -= 12;
+            this.isPM = true;
+        }
+        this.hour = h;
+        this.minute = v.minutes;
+        AtomBinder.refreshValue(this, "time");
+    }
+
+    public hour: number;
+
+    public minute: number;
+
+    public isPM: boolean;
+    
+    protected create(): void {
+        this.isPM = false;
+        this.hour = 12;
+        this.minute = 0;
+        this.render(<div
+            data-time-editor="time-editor"
+            event-change={() => setTimeout(() => AtomBinder.refreshValue(this, "time"), 1)}>
+            <Select
+                data-element="hour"
+                items={hours()}
+                value={Bind.twoWays(() => this.hour)}/>
+            <Select
+                data-element="minute" items={minutes()}
+                value={Bind.twoWays(() => this.minute)}/>
+            <button
+                event-click={() => (this.isPM = false, AtomBinder.refreshValue(this, "time"))}
+                data-selected={Bind.oneWay(() => !this.isPM)}
+                data-element="am"
+                text="AM"/>
+            <button
+                event-click={() => (this.isPM = true, AtomBinder.refreshValue(this, "time"))}
+                data-selected={Bind.oneWay(() => this.isPM)}
+                data-element="pm"
+                text="PM"/>
+        </div>);
+    }
+
+}