From 19ac520f78e4f47634afd2897d161b6c2c9bd1d2 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Mon, 23 Sep 2024 23:13:36 +0530
Subject: [PATCH] feat: added spinbox

---
 .../tkinter/assets/widgets/spinbox.png        | Bin 0 -> 9915 bytes
 src/frameworks/tkinter/sidebarWidgets.js      |   8 +++
 src/frameworks/tkinter/widgets/input.js       |   2 +-
 src/frameworks/tkinter/widgets/spinBox.js     |  54 ++++++++++++++----
 4 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 src/frameworks/tkinter/assets/widgets/spinbox.png

diff --git a/src/frameworks/tkinter/assets/widgets/spinbox.png b/src/frameworks/tkinter/assets/widgets/spinbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..de9d58ce1d48d140a917cc0622bd87aa28947ef2
GIT binary patch
literal 9915
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

literal 0
HcmV?d00001

diff --git a/src/frameworks/tkinter/sidebarWidgets.js b/src/frameworks/tkinter/sidebarWidgets.js
index d66c326..b1c861e 100644
--- a/src/frameworks/tkinter/sidebarWidgets.js
+++ b/src/frameworks/tkinter/sidebarWidgets.js
@@ -9,6 +9,7 @@ import MainWindow from "./widgets/mainWindow"
 import OptionMenu from "./widgets/optionMenu"
 import Slider from "./widgets/slider"
 import TopLevel from "./widgets/toplevel"
+import SpinBox from "./widgets/spinBox"
 
 import MainWindowImage from "./assets/widgets/mainwindow.png"
 import TopLevelImage from "./assets/widgets/Toplevel.png"
@@ -21,6 +22,7 @@ import SliderImage from "./assets/widgets/slider.png"
 import DropDownImage from "./assets/widgets/dropdown.png"
 import CheckButtonImage from "./assets/widgets/check.png"
 import RadioButtonImage from "./assets/widgets/radio.png"
+import SpinBoxImage from "./assets/widgets/spinbox.png"
 
 
 const TkinterSidebar = [
@@ -90,6 +92,12 @@ const TkinterSidebar = [
         link: "https://github.com",
         widgetClass: OptionMenu
     },
+    {
+        name: "Spinbox",
+        img: SpinBoxImage,
+        link: "https://github.com",
+        widgetClass: SpinBox
+    },
 
 ]
 
diff --git a/src/frameworks/tkinter/widgets/input.js b/src/frameworks/tkinter/widgets/input.js
index 926d754..fca46fb 100644
--- a/src/frameworks/tkinter/widgets/input.js
+++ b/src/frameworks/tkinter/widgets/input.js
@@ -6,7 +6,7 @@ import { removeKeyFromObject } from "../../../utils/common"
 export class Input extends Widget{
 
     static widgetType = "entry"
-    // TODO: remove layouts
+    
     constructor(props) {
         super(props)
 
diff --git a/src/frameworks/tkinter/widgets/spinBox.js b/src/frameworks/tkinter/widgets/spinBox.js
index 8d6ef43..341fec4 100644
--- a/src/frameworks/tkinter/widgets/spinBox.js
+++ b/src/frameworks/tkinter/widgets/spinBox.js
@@ -1,6 +1,7 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { removeKeyFromObject } from "../../../utils/common"
+import { DownOutlined, UpOutlined } from "@ant-design/icons"
 
 
 class SpinBox extends Widget{
@@ -15,7 +16,7 @@ class SpinBox extends Widget{
 
         this.state = {
             ...this.state,
-            size: { width: 120, height: 40 },
+            size: { width: 70, height: 'fit' },
             attrs: {
                 ...newAttrs,
                 styling: {
@@ -30,13 +31,38 @@ class SpinBox extends Widget{
                         }
                     }
                 },
-                placeHolder: {
-                    label: "PlaceHolder",
-                    tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
-                    toolProps: {placeholder: "text", maxLength: 100}, 
-                    value: "placeholder text",
-                    onChange: (value) => this.setAttrValue("placeHolder", value)
-                }
+                spinProps: {
+                    label: "Properties",
+                    display: "horizontal",
+                    min: {
+                        label: "Min",
+                        tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
+                        toolProps: { placeholder: "min" },
+                        value: 0,
+                        onChange: (value) => this.setAttrValue("spinProps.min", value)
+                    },
+                    max: {
+                        label: "Max",
+                        tool: Tools.NUMBER_INPUT,
+                        toolProps: { placeholder: "max"},
+                        value: 100,
+                        onChange: (value) => this.setAttrValue("spinProps.max", value)
+                    },
+                    step: {
+                        label: "Step",
+                        tool: Tools.NUMBER_INPUT,
+                        toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
+                        value: 1,
+                        onChange: (value) => this.setAttrValue("spinProps.step", value)
+                    },
+                    default: {
+                        label: "Default",
+                        tool: Tools.NUMBER_INPUT,
+                        toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
+                        value: 0,
+                        onChange: (value) => this.setAttrValue("spinProps.default", value)
+                    }
+                },
 
             }
         }
@@ -45,7 +71,7 @@ class SpinBox extends Widget{
     componentDidMount(){
         super.componentDidMount()
         this.setAttrValue("styling.backgroundColor", "#fff")
-        this.setWidgetName("Entry")
+        this.setWidgetName("SpinBox")
     }
 
     getToolbarAttrs(){
@@ -66,9 +92,13 @@ class SpinBox extends Widget{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
-                    <div className="tw-text-sm tw-text-gray-300">
-                        {this.getAttrValue("placeHolder")}
+                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetStyling}>
+                    <div className="tw-text-sm ">
+                        {this.getAttrValue("spinProps.default")}
+                    </div>
+                    <div className="tw-flex tw-flex-col tw-text-black tw-gap-1 tw-text-sm">
+                        <UpOutlined />
+                        <DownOutlined />
                     </div>
                 </div>
             </div>