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

feat: added checkbox and other widgets for tkinter

Browse Source
This commit is contained in:
paul
2024-09-23 12:31:01 +05:30
parent 1b9e049d91
commit 5d40894a40
18 changed files with 437 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards.js
View File

@@ -29,7 +29,7 @@ export function SidebarWidgetCard({ name, img, url, widgetClass, innerRef}){
return (
// <Draggable className="tw-cursor-pointer" id={name}>
<DraggableWrapper data-container={"sidebar"}
dragElementType={"widget"}
dragElementType={widgetClass.widgetType}
dragWidgetClass={widgetClass}
className="tw-cursor-pointer tw-w-fit tw-h-fit">

9
src/components/draggable/droppable.js
View File

@@ -3,7 +3,7 @@ import { useDragContext } from "./draggableContext"
/**
* @param {{include: [], exclude: []} || {}} - droppableTags - if empty object, allows everything to be dropped, define include to allow only included widgets, define exclude to exclude
* @param {{include: [], exclude: []} || {} || null} - droppableTags - if empty object, allows everything to be dropped, if null nothing can be dropped, define include to allow only included widgets, define exclude to exclude
*/
const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
@@ -20,11 +20,10 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
const dragElementType = draggedElement.getAttribute("data-draggable-type")
console.log("Current target: ", droppableTags, Object.keys(droppableTags))
setOverElement(e.currentTarget)
const allowDrop = (droppableTags && (Object.keys(droppableTags).length === 0 ||
const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 ||
(droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) ||
(droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType))
))
@@ -46,7 +45,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
// console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer)
const dragElementType = draggedElement.getAttribute("data-draggable-type")
const allowDrop = (droppableTags && (Object.keys(droppableTags).length === 0 ||
const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 ||
(droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) ||
(droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType))
))
@@ -67,7 +66,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
const dragElementType = draggedElement.getAttribute("data-draggable-type")
const allowDrop = (droppableTags && (Object.keys(droppableTags).length === 0 ||
const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 ||
(droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) ||
(droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType))
))

51
src/components/modals.js Normal file
View File

@@ -0,0 +1,51 @@
import { useState } from "react"
import { Modal } from "antd"
/**
* opens modal when clicked, acts as a wrapper
* @param {string} - message
* @param {string} - title
* @param {string} - okText
* @param {"default"|"danger"|"primary"} - okButtonType
* @returns
*/
export const ButtonModal = ({ message, title, okText="OK", onOk, onCancel, okButtonType="default", children}) => {
const [isModalOpen, setIsModalOpen] = useState(false)
const showModal = () => {
setIsModalOpen(true)
}
const handleOk = () => {
setIsModalOpen(false)
console.log("Ok pressed")
if (onOk){
onOk()
}
}
const handleCancel = (e) => {
e.stopPropagation()
setIsModalOpen(false)
console.log("cancel pressed")
if (onCancel){
onCancel()
}
}
return (
<div onClick={showModal}>
{children}
<Modal title={title} open={isModalOpen} onClose={handleCancel}
okText={okText}
onOk={handleOk} okType={okButtonType} onCancel={handleCancel}>
<p>{message}</p>
</Modal>
</div>
)
}