Are you sure you want to change the framework? This will clear the canvas.
*/} -
-
-
- {/* */}
- */}
-
-
- {/* dragOverlay (dnd-kit) helps move items from one container to another */}
-
-
+
+
+ {/* */}
+ */}
+
+ {/* dragOverlay (dnd-kit) helps move items from one container to another */}
+
+
+ )
+ }else if (file.fileType === "video"){
+ return (
+
+
+ )
+ }else if (file.fileType === "audio"){
+
+ return (
+
+
+ )
+
+ }else{
+ return (
+
+
+ )
+ }
+
+ }
+
+ const uploadList = uploadedAssets.map((file, idx) => ({
+ value: file.name,
+ label: returnComponentBasedOnFileType(file),
+ fileType: file.fileType,
+ type: file.type,
+ // previewUrl: file.previewUrl,
+ }))
+
+ return uploadList
+
+ }, [uploadedAssets])
useEffect(() => {
setToolbarOpen(isOpen)
@@ -45,6 +97,33 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
}
+ const renderUploadDropDown = (val, filter) => {
+
+
+ let uploadOptions = [...uploadItems]
+
+ if (filter){
+ uploadOptions = uploadOptions.filter((value, idx) => filter.includes(value.type))
+ }
+
+ return (
+
+
+
+ )
+
+ }
+
const renderLayoutManager = (val) => {
return (
@@ -198,6 +277,11 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
renderLayoutManager(val)
)
}
+ {
+ val.tool === Tools.UPLOADED_LIST && (
+ renderUploadDropDown(val.value, val?.toolProps?.filterOptions || null)
+ )
+ }
)
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index 18003fd..21eab56 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -344,7 +344,7 @@ class Widget extends React.Component {
}
generateCode(){
- throw new NotImplementedError("Get Code must be implemented by the subclass")
+ throw new NotImplementedError("generateCode() must be implemented by the subclass")
}
getAttributes() {
diff --git a/src/canvas/widgets/draggableWidgetContext.js b/src/canvas/widgets/draggableWidgetContext.js
index 2532041..435286b 100644
--- a/src/canvas/widgets/draggableWidgetContext.js
+++ b/src/canvas/widgets/draggableWidgetContext.js
@@ -4,7 +4,7 @@ const DragWidgetContext = createContext()
export const useDragWidgetContext = () => useContext(DragWidgetContext)
-// Provider component to wrap around parts of your app that need drag-and-drop functionality
+// Provider component to wrap around parts that need drag-and-drop functionality
export const DragWidgetProvider = ({ children }) => {
const [draggedElement, setDraggedElement] = useState(null)
diff --git a/src/components/cards.js b/src/components/cards.js
index 419dc19..a6665ed 100644
--- a/src/components/cards.js
+++ b/src/components/cards.js
@@ -2,8 +2,11 @@ import { useEffect, useMemo, useRef } from "react"
import Draggable from "./utils/draggableDnd"
import { GithubOutlined, GitlabOutlined, LinkOutlined,
- AudioOutlined, FileTextOutlined} from "@ant-design/icons"
+ AudioOutlined, FileTextOutlined,
+ DeleteFilled,
+ DeleteOutlined} from "@ant-design/icons"
import DraggableWrapper from "./draggable/draggable"
+import { Button } from "antd"
export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerRef}){
@@ -75,7 +78,7 @@ export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerR
}
-export function DraggableAssetCard({file}){
+export function DraggableAssetCard({file, onDelete}){
const videoRef = useRef()
@@ -106,36 +109,42 @@ export function DraggableAssetCard({file}){
return (
- <>
-
-
+ {children}
+
+ )
+}
diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js
index 4f11f6f..4980a81 100644
--- a/src/frameworks/tkinter/engine/code.js
+++ b/src/frameworks/tkinter/engine/code.js
@@ -44,7 +44,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
let widgetCode = widgetRef.generateCode(varName, currentParentVariable)
if (!(widgetCode instanceof Array)) {
- throw new Error("Generate code function should return array, each new line should be a new item")
+ throw new Error("generateCode() function should return array, each new line should be a new item")
}
// Add \n after every line
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js
index eb5f098..5288040 100644
--- a/src/frameworks/tkinter/widgets/label.js
+++ b/src/frameworks/tkinter/widgets/label.js
@@ -36,12 +36,18 @@ class Label extends TkinterBase{
},
labelWidget: {
label: "Text",
- tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
+ tool: Tools.INPUT,
toolProps: {placeholder: "text", maxLength: 100},
value: "Label",
onChange: (value) => this.setAttrValue("labelWidget", value)
- }
-
+ },
+ imageUpload: {
+ label: "Image",
+ tool: Tools.UPLOADED_LIST,
+ toolProps: {filterOptions: ["image/jpg", "image/jpeg", "image/png"]},
+ value: "",
+ onChange: (value) => this.setAttrValue("imageUpload", value)
+ },
}
}
}
@@ -82,7 +88,7 @@ class Label extends TkinterBase{
renderContent(){
return (
-
- { file.fileType === "image" &&
- 
- }
+
)
}
\ No newline at end of file
diff --git a/src/contexts/fileUploadContext.js b/src/contexts/fileUploadContext.js
new file mode 100644
index 0000000..21466bd
--- /dev/null
+++ b/src/contexts/fileUploadContext.js
@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const FileUploadContext = createContext()
+
+export const useFileUploadContext = () => useContext(FileUploadContext)
+
+// Provider component to wrap around parts that needs upload context
+export const FileUploadProvider = ({ children }) => {
+
+ const [uploadedAssets, setUploadedAssets] = useState([])
+
+ return (
+
+
-
+
+ { file.fileType === "image" &&
+
+ }
- {
- file.fileType === "video" &&
-
- }
+ {
+ file.fileType === "video" &&
+
+ }
- {
- file.fileType === "audio" &&
-
- {file.name}
+ false} draggable="false"
+ className="tw-text-sm tw-text-back tw-pointer-events-none">{file.name}
+
+
+ onDelete(file)} >
+
+
+
{/* {this.props.children} */}
diff --git a/src/index.js b/src/index.js
index fc9cc04..4c87c12 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
import "./styles/tailwind.css";
import "./styles/index.css";
+import { FileUploadProvider } from "./contexts/fileUploadContext";
const originalSetItem = localStorage.setItem;
// triggers itemsChaned event whenever the item in localstorage is chanegd.
@@ -67,7 +68,9 @@ root.render(
-
+
diff --git a/src/sidebar/uploadsContainer.js b/src/sidebar/uploadsContainer.js
index 649b678..f6c64ae 100644
--- a/src/sidebar/uploadsContainer.js
+++ b/src/sidebar/uploadsContainer.js
@@ -9,6 +9,7 @@ import { DraggableAssetCard } from "../components/cards.js"
import { filterObjectListStartingWith } from "../utils/filter"
import { getFileType } from "../utils/file.js"
import { SearchComponent } from "../components/inputs.js"
+import { useFileUploadContext } from "../contexts/fileUploadContext.js"
// import { update } from "../redux/assetSlice.js"
@@ -33,7 +34,7 @@ const props = {
* DND for file uploads
*
*/
-function UploadsContainer({assets, onAssetUploadChange}) {
+function UploadsContainer() {
// const dispatch = useDispatch()
// const selector = useSelector(state => state.assets)
@@ -42,27 +43,38 @@ function UploadsContainer({assets, onAssetUploadChange}) {
const [dragEnter, setDragEnter] = useState(false)
const [searchValue, setSearchValue] = useState("")
- const [uploadData, setUploadData] = useState(assets) // contains all the uploaded data
- const [uploadResults, setUploadResults] = useState(assets) // sets search results
+ // const [uploadData, setUploadData] = useState(assets) // contains all the uploaded data
+ const {uploadedAssets, setUploadedAssets} = useFileUploadContext()
+
+ const [uploadResults, setUploadResults] = useState(uploadedAssets) // sets search results
+
+ // useEffect(() => {
+ // setUploadResults(uploadData)
+ // }, [uploadData])
+
useEffect(() => {
- setUploadResults(uploadData)
- }, [uploadData])
+ setUploadResults(uploadedAssets)
+ }, [uploadedAssets])
useEffect(() => {
if (searchValue.length > 0) {
- const searchData = filterObjectListStartingWith(uploadData, "name", searchValue)
+ const searchData = filterObjectListStartingWith(uploadedAssets, "name", searchValue)
setUploadResults(searchData)
} else {
- setUploadResults(uploadData)
+ setUploadResults(uploadedAssets)
}
}, [searchValue])
function onSearch(event) {
-
setSearchValue(event.target.value)
+ }
+
+ function handleDelete(file){
+ // remove the file from the asset on delete
+ setUploadedAssets(prev => prev.filter(val => val.uid !== file.uid))
}
@@ -101,11 +113,12 @@ function UploadsContainer({assets, onAssetUploadChange}) {
const newFileData = {
...info.file,
previewUrl,
- fileType
+ fileType,
}
- // dispatch(update([newFileData, ...uploadData]))
- setUploadData(prev => [newFileData, ...prev])
- onAssetUploadChange([newFileData, ...uploadData])
+
+ // setUploadData(prev => [newFileData, ...prev])
+ setUploadedAssets(prev => [newFileData, ...prev])
+ // onAssetUploadChange([newFileData, ...uploadData])
setDragEnter(false)
message.success(`${info.file.name} file uploaded successfully.`)
@@ -126,6 +139,7 @@ function UploadsContainer({assets, onAssetUploadChange}) {
return (