feat: add number prop

Quasi-Studio · Nov 11, 2023 · eda3492 · eda3492
1 parent e759da0
commit eda3492
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git a/packages/block-data/src/types/index.ts b/packages/block-data/src/types/index.ts
@@ -225,7 +225,34 @@ export function readonlyProp(name: string, value: string): ReadonlyProp {
   };
 }
 
-export type Prop = TextProp | SwitchProp | DropdownProp | ReadonlyProp;
+export interface NumberProp extends PropBase {
+  type: "number";
+  defaultVal: number;
+  min: number;
+  max: number;
+}
+
+export function numberProp(
+  name: string,
+  defaultVal: number,
+  min: number = -Infinity,
+  max: number = Infinity,
+): NumberProp {
+  return {
+    name,
+    type: "number",
+    defaultVal,
+    min,
+    max,
+  };
+}
+
+export type Prop =
+  | TextProp
+  | SwitchProp
+  | DropdownProp
+  | ReadonlyProp
+  | NumberProp;
 export type Props = Prop[];
 
 export interface ComponentInfo {

diff --git a/packages/northstar/src/utils/props.ts b/packages/northstar/src/utils/props.ts
@@ -28,8 +28,20 @@ export interface ReadonlyPropData extends PropDataBase {
    */
   setVal(val: string): void;
 }
+export interface NumberPropData extends PropDataBase {
+  type: "number";
+  min: number;
+  max: number;
+  getVal(): number;
+  setVal(val: number): void;
+}
 
-export type PropData = TextPropData | SwitchPropData | DropdownPropData | ReadonlyPropData;
+export type PropData =
+  | TextPropData
+  | SwitchPropData
+  | DropdownPropData
+  | ReadonlyPropData
+  | NumberPropData;
 export type PropsData = PropData[];
 
 export function mergeProps([props0, ...propsRest]: PropsData[]) {

diff --git a/packages/northstar/src/views/properties.r.ts b/packages/northstar/src/views/properties.r.ts
@@ -1,5 +1,7 @@
-import { MainElRef, byProp, bySelf, ref, view } from "refina";
+import { $clsFunc, MainElRef, byProp, bySelf, ref, view } from "refina";
 import { getSelectedProps } from "../utils/props";
+import "@refina/fluentui-icons/add.r.ts";
+import "@refina/fluentui-icons/subtract.r.ts";
 
 export default view(_ => {
   const props = getSelectedProps();
@@ -9,24 +11,42 @@ export default view(_ => {
     _._div(
       {
         onclick: () => {
-          (r.current!.$mainEl!.firstChild! as HTMLInputElement).focus();
+          (r.current?.$mainEl?.firstChild as HTMLElement | null | undefined)?.focus();
         },
       },
       p.name,
     );
     _.$cls`col-span-2 h-8`;
-    _.$ref(r);
     if (p.type === "text") {
+      _.$ref(r);
       _.fUnderlineTextInput(p.getVal(), false, "unset") && p.setVal(_.$ev);
     } else if (p.type === "switch") {
       _.fSwitch("", p.getVal()) && p.setVal(_.$ev);
     } else if (p.type === "dropdown") {
+      _.$ref(r);
       if (_.fUnderlineDropdown(p.getVal(), p.options)) {
         p.setVal(_.$ev);
       }
     } else if (p.type === "readonly") {
       _.$cls`w-full border-b border-gray-500 flex items-center pl-2`;
       _.div(p.getVal());
+    } else if (p.type === "number") {
+      const value = p.getVal();
+      _.$cls`w-full grid grid-cols-4 items-center px-2`;
+      _.div(() => {
+        const btnStyle = $clsFunc`w-5 h-5 p-[2px] box-content font-bold border-2 border-gray-500 rounded hover:border-gray-800 disabled:opacity-50`;
+
+        btnStyle(_);
+        _.$cls`justify-self-end`;
+        _.button(_ => _.fiSubtract20Filled(), value === p.min) && p.setVal(value - 1);
+
+        _.$cls`col-span-2 pl-2 justify-self-center`;
+        _.span(value.toString());
+
+        btnStyle(_);
+        _.$cls`justify-self-start`;
+        _.button(_ => _.fiAdd20Filled(), value === p.max) && p.setVal(value + 1);
+      });
     }
   });