Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added option menu

Browse Source
This commit is contained in:
paul
2024-09-23 19:31:30 +05:30
parent 1533888f07
commit 33cb40d886
5 changed files with 165 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
notes.md
View File

@@ -1,2 +1,5 @@
### State management in react is a f*king mess
### Update to TypeScript
### Update to TypeScript
### Don't use delete keyword to delete keys from object, it becomes hard to debug

7
src/frameworks/tkinter/sidebarWidgets.js
View File

@@ -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
},
]

2
src/frameworks/tkinter/widgets/ checkButton.js
View File

@@ -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)

134
src/frameworks/tkinter/widgets/optionMenu.js Normal file
View File

@@ -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 (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
onClick={this.toggleDropDownOpen}
>
<div className="tw-flex tw-justify-between tw-gap-1">
{this.getAttrValue("defaultValue")}
<div className="tw-text-sm">
<DownOutlined />
</div>
</div>
{this.state.isDropDownOpen &&
<div className="tw-absolute tw-p-1 tw-bg-white tw-rounded-md tw-shadow-md tw-left-0
tw-w-full tw-h-fit "
style={{top: "calc(100% + 5px)"}}
>
{
inputs.map((value, index) => {
return (
<div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center
hover:tw-bg-[#c5c5c573] tw-p-1">
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
{value}
</span>
</div>
)
})
}
</div>
}
</div>
)
}
}
export default OptionMenu

23
src/frameworks/tkinter/widgets/slider.js
View File

@@ -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 (
<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="flex flex-col items-center justify-center h-screen bg-gray-100">
<div className="w-full max-w-md">
<input
type="range"
min={this.getAttrValue("scale.min")}
max={this.getAttrValue("scale.max")}
step={this.getAttrValue("scale.step")}
value={this.getAttrValue("scale.default")}
className="tw-pointer-events-none w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
/>
</div>
</div>
</div>