@nebularstreams/libmui 2.0.2 → 2.0.3

package/src/widgets/InputWidget.js

@@ -0,0 +1,238 @@
+import m from "mithril";
+import {ButtonNew} from "./Basic";
+
+/* eslint-disable no-prototype-builtins,no-nested-ternary */
+/* global m, Hammer */
+
+const
+
+    getInput = (attrs, value, parse = false) => {
+        if (parse || attrs.type === "number") {
+            const val = attrs.float ? Number.parseFloat(value) : Number.parseInt(value, 10);
+            return Number.isNaN(val) ? undefined : val;
+        }
+        return value;
+    },
+    getValue = (attrs, state, parse) => {
+        const lastVal = state.hasOwnProperty("value") ? state.value : attrs.value;
+        return getInput(attrs, lastVal, parse);
+    },
+    /*
+        hammer = new Hammer.Manager(dom, { touchAction: "pan-y" }),
+            panner = new Hammer.Pan({ direction: Hammer.DIRECTION_VERTICAL }),
+            singleTap = listenTap && new Hammer.Tap();
+
+        hammer.add(listenTap ? [panner, singleTap] : [panner]);
+        hammer.on("panstart", (e) => {
+
+     */
+
+    StaticFieldWidget = {
+        view: (vnode) => {
+            const {attrs, state} = vnode;
+            // este vnode NO es el mismo que el del hammer, pero su estado SI !
+            state.attrs = attrs; // guardamos una copia de los ultimos attrs en el estado
+
+            return m(
+                ".input-static.w-100.ellipsis",
+                {
+                    class: (attrs.onDrag ? "withdrag " : "") + (attrs.staticClass || "grows"),
+                    ...attrs.staticTitle && {title: attrs.staticTitle},
+                    ...attrs.onDrag || {onclick: attrs.onClick},
+                    oncreate: ({dom, state}) => {
+
+                        if (attrs.onDrag && !attrs.readonly) {
+
+                            const
+                                hammer = state.hammer = new Hammer.Manager(dom, {touchAction: "pan-y"}),
+                                panner = new Hammer.Pan({direction: Hammer.DIRECTION_VERTICAL}),
+                                singleTap = new Hammer.Tap();
+
+                            hammer.add([panner, singleTap]);
+                            hammer.on("tap", () => vnode.state.attrs.onClick());
+                            hammer.on("panup", (e) => vnode.state.attrs.onDrag(-1, e.srcEvent));
+                            hammer.on("pandown", (e) => vnode.state.attrs.onDrag(1, e.srcEvent));
+                            hammer.on("panend pancancel", (e) => vnode.state.attrs.onDrag(0, e.srcEvent));
+                        }
+                        if (attrs.focus) {
+                            dom.focus();
+                        }
+                    },
+                    onremove: ({state}) => {
+                        state.hammer && state.hammer.destroy();
+                    }
+                },
+                attrs.value
+            );
+        }
+    },
+    InputWidget = {
+        view: ({attrs, state}) => {
+            const reset = (redraw) => {
+                // if (state.value !== undefined && state.showInput) delete state.showInput;
+                if (state.value && state.showInput) delete state.showInput;
+                delete state.value;
+                if (redraw) m.redraw();
+            };
+            return m(
+                ".textfield.flexcol.relative",
+                {
+                    class: (attrs.label ? "witharia" : "") + (attrs.containerClass ? " " + attrs.containerClass : ""),
+                    ...attrs.label && {"aria-label": attrs.label}
+                },
+                [
+                    (attrs.staticField && (attrs.readonly || !state.showInput))
+                        ? m(StaticFieldWidget, {
+                            readonly: attrs.readonly,
+                            staticClass: (state.dragging ? "accent " : "") + (attrs.staticClass || ""),
+                            staticTitle: attrs.staticTitle || attrs.draginc && "Click then drag up and down to modify value, or just click to enter a custom value",
+                            value: attrs.displayTitle || getValue(attrs, state),
+                            focus: attrs.focus,
+                            ...attrs.draginc && !attrs.readonly && {
+                                onDrag: (direction, event) => {
+                                    if (direction) {
+                                        state.dragging = true;
+                                        let value = getValue(attrs, state, true);
+                                        if (Number.isNaN(value) || value === undefined) return;
+                                        value += direction * attrs.draginc;
+                                        if (attrs.max !== undefined && value > attrs.max) value = attrs.max;
+                                        if (attrs.min !== undefined && value < attrs.min) value = attrs.min;
+                                        state.value = attrs.type === "number" ? value : String(value);
+                                        attrs.onchange(state.value, event);
+                                    } else {
+                                        delete state.dragging;
+                                        delete state.value;
+                                        m.redraw();
+                                    }
+                                }
+                            },
+                            ...attrs.readonly || {
+                                onClick: () => {
+                                    state.showInput = true;
+                                    state.value = attrs.value;
+                                    m.redraw();
+                                }
+                            }
+                        })
+
+                        : ((state.multi || attrs.alwaysmulti) && (!attrs.type || attrs.type === "text"))
+                            ? m("textarea.w-100", {
+                                class: attrs.class,
+                                value: getValue(attrs, state),
+                                ...attrs.title && {title: attrs.title},
+                                placeholder: attrs.hint || "",
+                                oninput: (event) => {
+                                    state.value = getInput(attrs, event.target.value);
+                                    if (attrs.validator) state.isValid = attrs.validator(state.value);
+                                    if (attrs.onchange) {
+                                        (attrs.oninput || attrs.onchange)(state.value, event, true);
+                                    }
+                                },
+                                onchange: (event) => {
+                                    if (attrs.onchange) {
+                                        if (attrs.validator) state.isValid = attrs.validator(state.value);
+                                        const value = getInput(attrs, event.target.value);
+                                        reset(false);
+                                        attrs.onchange(value, event, true);
+                                    }
+                                },
+                                onblur: () => {
+                                    if (state.showInput) {
+                                        reset(true);
+                                    }
+                                },
+                                onkeyup: (event) => {
+                                    if (event.key === "Escape" && state.showInput) {
+                                        reset(false);
+                                    }
+                                }
+                            })
+                            : m("input.w-100", {
+                                ...attrs.id && {id: attrs.id},
+                                type: attrs.type || "text",
+                                ...attrs.max !== undefined && {max: attrs.max},
+                                ...attrs.min !== undefined && {min: attrs.min},
+                                ...attrs.step > 0 && {step: attrs.step},
+                                ...attrs.maxlength && {maxlength: attrs.maxlength},
+                                class: (attrs.class || "") + (attrs.validator ? state.isValid ? " bg-ok" : " bg-error" : ""),
+                                ...attrs.title && {title: attrs.title},
+                                value: getValue(attrs, state),
+                                placeholder: attrs.hint || "",
+                                oninput: (event) => {
+                                    state.value = getInput(attrs, event.target.value);
+                                    event.fromoninput = true;
+                                    if (attrs.validator) state.isValid = attrs.validator(state.value);
+                                    if (attrs.onchange) {
+                                        (attrs.oninput || attrs.onchange)(state.value, event);
+                                    }
+                                },
+                                onchange: (event) => {
+                                    if (attrs.onchange) {
+                                        if (attrs.validator) state.isValid = attrs.validator(state.value);
+                                        event.enterPressed = state.enterPressed;
+                                        delete state.enterPressed;
+                                        attrs.onchange(getInput(attrs, event.target.value), event);
+                                        if (attrs.staticField) {
+                                            reset(true);
+                                        } else {
+                                            delete state.value;
+                                        }
+                                    }
+                                },
+                                onblur: () => {
+                                    if (state.showInput) {
+                                        reset(true);
+                                    }
+                                },
+                                onkeyup: (event) => {
+                                    if (state.showInput) {
+                                        if (event.key === "Escape") {
+                                            reset(true);
+                                        } else if (event.key === "Enter") {
+                                            if (state.value === attrs.value || !state.value) {
+                                                attrs.onchange(attrs.value, event);
+                                                reset(true);
+                                            }
+                                        }
+                                    }
+                                },
+                                onkeypress: (event) => {
+                                    if (!state.showInput && event.key === "Enter") {
+                                        attrs.onenter && attrs.onenter(event.target.value, event);
+                                    }
+                                }
+                            }),
+
+                    m(".span.actions.absolute.right.bottom", [
+                        ...(attrs.multi && !attrs.alwaysmulti && (!attrs.type || attrs.type === "text"))
+                            ? [
+                                m(ButtonNew, {
+                                    icon: state.multi ? "angle-double-up" : "angle-double-down",
+                                    class: "pad-2 transp",
+                                    onClick: () => {
+                                        state.multi = !state.multi;
+                                        m.redraw();
+                                    }
+                                })
+                            ]
+                            : [],
+                        ...attrs.actions ? attrs.actions.map((action) => m(ButtonNew, {
+                            ...action,
+                            class: "transp pad-2"
+                        })) : [],
+                        ...attrs.action
+                            ? [
+                                m(ButtonNew, {...attrs.action, class: "transp pad-2"})
+                            ] : []
+                    ])
+                ]);
+        },
+        oninit: ({attrs, state}) => {
+            if (attrs.staticField && attrs.draginc) {
+                const value = getValue(attrs, state, true);
+                state.showInput = (Number.isNaN(value) || value === undefined || value === null);
+            }
+        }
+    };
+
+export default InputWidget;

package/src/widgets/NoticeWidget.js

@@ -0,0 +1,31 @@
+import m from "mithril";
+import {Icon, defineWidget} from "./Basic";
+
+const
+    NoticeWidget = defineWidget(
+        ({attrs, children}) => (
+            children.length
+                ? m(
+                    ".notice.cardie.flexcol.pad-3",
+                    {class: attrs.class || "marg-2 font-75"},
+                    m(
+                        ".flexrow",
+                        [
+                            ...attrs.icon ? [m(Icon, attrs)] : [],
+                            m(".pad-2.pad-h", attrs.text)
+                        ]
+                    ),
+                    ...children
+                )
+                : m(
+                    ".notice.cardie.flexrow.pad-3",
+                    {class: attrs.class || "marg-2 font-75", onclick: attrs.onClick},
+                    [
+                        ...attrs.icon ? [m(Icon, attrs)] : [],
+                        m(".pad-2.pad-h", attrs.text)
+                    ]
+                )
+        )
+    );
+
+export default NoticeWidget;