diff --git a/notes.md b/notes.md index a3e9c64..6253288 100644 --- a/notes.md +++ b/notes.md @@ -1,2 +1,5 @@ ### State management in react is a f*king mess -### Update to TypeScript \ No newline at end of file +### Update to TypeScript + + +### Don't use delete keyword to delete keys from object, it becomes hard to debug \ No newline at end of file diff --git a/src/frameworks/tkinter/sidebarWidgets.js b/src/frameworks/tkinter/sidebarWidgets.js index faa5582..ad21802 100644 --- a/src/frameworks/tkinter/sidebarWidgets.js +++ b/src/frameworks/tkinter/sidebarWidgets.js @@ -8,6 +8,7 @@ import Frame from "./widgets/frame" import { Input, Text } from "./widgets/input" import Label from "./widgets/label" import MainWindow from "./widgets/mainWindow" +import OptionMenu from "./widgets/optionMenu" import Slider from "./widgets/slider" import TopLevel from "./widgets/toplevel" @@ -73,6 +74,12 @@ const TkinterSidebar = [ link: "https://github.com", widgetClass: Slider }, + { + name: "Option Menu", + img: ButtonWidget, + link: "https://github.com", + widgetClass: OptionMenu + }, ] diff --git a/src/frameworks/tkinter/widgets/ checkButton.js b/src/frameworks/tkinter/widgets/ checkButton.js index 88ebfa2..12ac1d3 100644 --- a/src/frameworks/tkinter/widgets/ checkButton.js +++ b/src/frameworks/tkinter/widgets/ checkButton.js @@ -108,7 +108,7 @@ export class CheckBox extends Widget{ export class RadioButton extends Widget{ static widgetType = "radio_button" - // FIXME: the radio buttons are not visible because of the default heigh provided + // FIXME: the radio buttons are not visible because of the default height provided constructor(props) { super(props) diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js new file mode 100644 index 0000000..f102409 --- /dev/null +++ b/src/frameworks/tkinter/widgets/optionMenu.js @@ -0,0 +1,134 @@ +import Widget from "../../../canvas/widgets/base" + +import Tools from "../../../canvas/constants/tools" +import { removeKeyFromObject } from "../../../utils/common" +import { ArrowDownOutlined, DownOutlined } from "@ant-design/icons" + + +class OptionMenu extends Widget{ + + static widgetType = "option_menu" + // FIXME: the radio buttons are not visible because of the default heigh provided + constructor(props) { + super(props) + + this.droppableTags = null // disables drops + + // const {layout, ...newAttrs} = this.state.attrs // Removes the layout attribute + + const newAttrs = removeKeyFromObject("layout", this.state.attrs) + + this.minSize = {width: 50, height: 30} + + + this.state = { + ...this.state, + isDropDownOpen: false, + size: { width: 120, height: 'fit' }, + attrs: { + ...newAttrs, + styling: { + foregroundColor: { + label: "Foreground Color", + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "#000", + onChange: (value) => { + this.setWidgetStyling("color", value) + this.setAttrValue("styling.foregroundColor", value) + } + } + }, + + defaultValue: { + label: "Default Value", + tool: Tools.INPUT, + value: "Select option", + onChange: ({inputs, selectedRadio}) => { + this.setAttrValue("options", {inputs, selectedRadio}) + } + }, + options: { + label: "Options", + tool: Tools.INPUT_RADIO_LIST, + value: {inputs: ["option 1"], selectedRadio: -1}, + onChange: ({inputs, selectedRadio}) => { + this.setAttrValue("options", {inputs, selectedRadio}) + } + } + + } + } + } + + componentDidMount(){ + super.componentDidMount() + // this.setAttrValue("styling.backgroundColor", "#fff") + this.setWidgetName("Option menu") + this.setWidgetStyling("backgroundColor", "#fff") + } + + getToolbarAttrs(){ + + const toolBarAttrs = super.getToolbarAttrs() + + const attrs = this.state.attrs + return ({ + id: this.__id, + widgetName: toolBarAttrs.widgetName, + checkLabel: attrs.checkLabel, + size: toolBarAttrs.size, + ...attrs, + }) + } + + toggleDropDownOpen = () => { + this.setState((prev) => ({ + isDropDownOpen: !prev.isDropDownOpen + })) + } + + renderContent(){ + + const {inputs, selectedRadio} = this.getAttrValue("options") + + return ( +
+
+ {this.getAttrValue("defaultValue")} + +
+ +
+
+ {this.state.isDropDownOpen && +
+ { + inputs.map((value, index) => { + return ( +
+ + + {value} + +
+ ) + }) + } +
+ } + +
+ ) + } + +} + + +export default OptionMenu \ No newline at end of file diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js index 30c7e90..972ee06 100644 --- a/src/frameworks/tkinter/widgets/slider.js +++ b/src/frameworks/tkinter/widgets/slider.js @@ -16,7 +16,7 @@ class Slider extends Widget{ this.state = { ...this.state, - size: { width: 120, height: 40 }, + size: { width: 'fit', height: 'fit' }, attrs: { ...newAttrs, styling: { @@ -54,6 +54,13 @@ class Slider extends Widget{ toolProps: { placeholder: "max", stringMode: true, step: "0.1"}, value: 1, onChange: (value) => this.setAttrValue("scale.step", value) + }, + default: { + label: "Default", + tool: Tools.NUMBER_INPUT, + toolProps: { placeholder: "max", stringMode: true, step: "0.1"}, + value: 0, + onChange: (value) => this.setAttrValue("scale.default", value) } }, @@ -85,9 +92,17 @@ class Slider extends Widget{ renderContent(){ return (
-
-
- {this.getAttrValue("placeHolder")} +
+
+ +