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

fix: file upload

Browse Source 
enhancement: widget styling
This commit is contained in:
paul
2024-09-24 14:33:02 +05:30
parent be17b93b02
commit 22e0a0543d
13 changed files with 205 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/cards.js
View File

@@ -1,14 +1,12 @@
import { useEffect, useMemo, useRef } from "react"
import Draggable from "./utils/draggableDnd"
import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined,
AudioOutlined, VideoCameraOutlined,
FileTextOutlined} from "@ant-design/icons"
import { GithubOutlined, GitlabOutlined, LinkOutlined,
AudioOutlined, FileTextOutlined} from "@ant-design/icons"
import DraggableWrapper from "./draggable/draggable"
import { useDragContext } from "./draggable/draggableContext"
export function SidebarWidgetCard({ name, img, url, widgetClass, innerRef}){
export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerRef}){
const urlIcon = useMemo(() => {
if (url){
@@ -36,16 +34,37 @@ export function SidebarWidgetCard({ name, img, url, widgetClass, innerRef}){
<div ref={innerRef} className="tw-select-none tw-h-[200px] tw-w-[230px] tw-flex tw-flex-col
tw-rounded-md tw-overflow-hidden
tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
tw-border-[#888] ">
tw-border-blue-500 tw-shadow-md">
<div className="tw-h-[200px] tw-pointer-events-none tw-w-full tw-overflow-hidden">
<img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
</div>
<span className="tw-text-xl tw-text-center">{name}</span>
<span className="tw-text-center tw-text-black tw-text-lg">{name}</span>
<div className="tw-flex tw-text-lg tw-place tw-px-4">
<a href={url} className="tw-text-black" target="_blank" rel="noopener noreferrer">
<a href={url} className="tw-text-gray-600" target="_blank" rel="noopener noreferrer">
{urlIcon}
</a>
{license?.name &&
<div className="tw-ml-auto tw-text-sm">
{
license.url ?
<a href={license.url} target="_blank" rel="noreferrer noopener"
className="tw-p-[1px] tw-px-2 tw-text-blue-500 tw-border-[1px]
tw-border-solid tw-rounded-sm tw-border-blue-500
tw-shadow-md tw-text-center tw-no-underline">
{license.name}
</a>
:
<div className="tw-p-[1px] tw-px-2 tw-text-blue-500 tw-border-[1px]
tw-border-solid tw-rounded-sm tw-border-blue-500
tw-shadow-md tw-text-center">
{license.name}
</div>
}
</div>
}
</div>
</div>
@@ -87,9 +106,10 @@ export function DraggableAssetCard({file}){
return (
<Draggable className="tw-cursor-pointer">
<>
<div className="tw-w-full tw-h-[240px] tw-p-1 tw-flex tw-flex-col tw-rounded-md tw-overflow-hidden
tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px] tw-border-[#888] ">
tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
tw-border-blue-500 tw-shadow-md ">
<div className="tw-h-[200px] tw-w-full tw-flex tw-place-content-center tw-p-1 tw-text-3xl tw-overflow-hidden">
{ file.fileType === "image" &&
<img src={file.previewUrl} alt={file.name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
@@ -113,9 +133,9 @@ export function DraggableAssetCard({file}){
}
</div>
<span className="tw-text-base">{file.name}</span>
<span className="tw-text-sm tw-text-back">{file.name}</span>
</div>
</Draggable>
</>
)
}

1
src/components/draggable/draggable.js
View File

@@ -33,6 +33,7 @@ const DraggableWrapper = memo(({dragElementType, dragWidgetClass=null, className
return (
<div className={`${className}`}
draggable
data-drag-start-within // this attribute indicates that the drag is occurring from within the project and not a outside file drop
data-draggable-type={dragElementType}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}

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

@@ -18,6 +18,11 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
const handleDragEnter = (e) => {
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
// if the drag is starting from outside (eg: file drop) or if drag doesn't exist
return
}
const dragElementType = draggedElement.getAttribute("data-draggable-type")
@@ -42,6 +47,12 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
}
const handleDragOver = (e) => {
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
// if the drag is starting from outside (eg: file drop) or if drag doesn't exist
return
}
// console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer)
const dragElementType = draggedElement.getAttribute("data-draggable-type")
@@ -57,6 +68,12 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
}
const handleDropEvent = (e) => {
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
// if the drag is starting from outside (eg: file drop) or if drag doesn't exist
return
}
e.stopPropagation()
setShowDroppable({

46
src/components/inputs.js
View File

@@ -1,6 +1,50 @@
import React, { useEffect, useState } from "react"
import React, { useEffect, useState, useRef } from "react"
import { Input, Button, Space, Radio } from "antd"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons'
export const SearchComponent = ({ onSearch, searchValue, onClear, ...props }) => {
const inputRef = useRef(null)
const handleOuterDivClick = () => {
inputRef.current.focus()
}
return (
<div className="tw-flex tw-gap-2 input tw-place-items-center" onClick={handleOuterDivClick}>
<SearchOutlined />
<input
type="text"
placeholder="Search"
className="tw-outline-none tw-w-full tw-border-none"
id=""
onInput={onSearch}
value={searchValue}
ref={inputRef} // Attach the ref to the input
{...props}
/>
<div className="">
{
searchValue.length > 0 &&
<div className="tw-cursor-pointer tw-text-gray-500"
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
if (onClear)
onClear()
}}>
<CloseCircleFilled />
</div>
}
</div>
</div>
)
}
export const DynamicInputList = () => {