ywana-core8 0.0.901 → 0.0.903

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.901",
+  "version": "0.0.903",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/ContentViewer.js

@@ -6,9 +6,6 @@ import './ContentViewer.css'
 
 /**
  * Content Viewer
- * 
- * @param {*} props 
- * @returns 
  */
 export const ContentViewer = (props) => {
 
@@ -39,9 +36,6 @@ export const ContentViewer = (props) => {
 
 /**
  * Field Viewer
- * 
- * @param {} props 
- * @returns 
  */
 const FieldViewer = (props) => {
 

package/src/html/button.js

@@ -26,46 +26,74 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
     )
 }
 
+/**
+ * Action Button
+ */
 export const ActionButton = (props) => {
 
-    const { icon, state = "normal", action, className } = props
-    const [_state, setState] = useState("normal")
+    const { states, state, className } = props
+
+    const [_state, setState] = useState()
 
     useEffect(() => {
         setState(state)
     }, [state])
 
-    function activate() {
-        setState("running")
-        if (action) action()
-    }
+    useEffect(() => {
+        if (states[_state] && states[_state].autoexec) execute()
+    }, [_state])
 
-    let actionIcon = icon
-
-    switch(_state) {
-        case "normal":
-            actionIcon = icon
-            break
-        case "running":
-            actionIcon = "rotate_right"
-            break
-        case "success":
-            actionIcon = "task_alt"
-            break
-        case "error":
-            actionIcon = "error"
-            break
+    async function execute() {
+        if (states[_state]) {
+            const newState = await states[_state].action()
+            if (newState) setState(newState)
+        }
     }
 
+    if (!_state) return null
+    const { icon, label } = states[_state]
+
     return (
-        <Button {...props} icon={actionIcon} action={activate} className={`${className} action-btn ${_state}`} />
+        <Button {...props} icon={icon} label={label} action={execute} className={`${className} action-btn ${_state}`} />
     )
 
 }
 
-const ProgressButtonTest = (props) => {
+const ActionButtonTest = (props) => {
+
+    const states = {
+        normal: {
+            icon: "add",
+            label: "Create Job",
+            action: () => { 
+                return "running"
+            },
+        },
+        running: {
+            icon: "rotate_right",
+            label: "Creating Job",
+            autoexec: true,
+            action: () => { 
+                console.log("Creating Job")
+                return new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        resolve("success")
+                    }, 5000)
+                })
+            },
+        },
+        success: {
+            icon: "task_alt",
+            label: "Job Created"
+
+        },
+        error: {
+            icon: "error",
+            label: "Error"
+        }
+    }
 
     return (
-        <ActionButton label="Test1" icon="add" action={() => console.log("test")} state="success" raised/>
+        <ActionButton states={states} state="normal" raised/>
     )
 }

package/src/widgets/explorer/Explorer.js

@@ -7,7 +7,7 @@ import './Explorer.css'
  */
 export const FileExplorer = (props) => {
 
-    const { columns, files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid", defaultFolder, filterableColumns = false } = props
+    const { columns, files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid", defaultFolder, filterableColumns = false, searchBy=[] } = props
     const [selectedFolder, setSelectedFolder] = useState()
     const [selectedFile, setSelectedFile] = useState()
     const [search, setSearch] = useState()
@@ -36,7 +36,12 @@ export const FileExplorer = (props) => {
         setSearch(value)
     }
 
-    const filteredFiles = search ? files.filter(file => file.title.toLowerCase().includes(search.toLowerCase())) : files
+    const filteredFiles = search ? files.filter(file => {
+        const serchByValues = searchBy.map(key => file[key])
+        const searchByString = serchByValues.join(' ')
+        return searchByString.toLowerCase().includes(search.toLowerCase())
+    }) : files
+        
     const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
 
     return (

package/src/widgets/explorer/Explorer.test.js

@@ -110,6 +110,7 @@ const FileExplorerTest = (props) => {
                 { id: 'icon', label: 'Icon', minWidth: 100 },
                 { id: 'title', label: 'Titlcccce', minWidth: 100 },
             ]}
+            searchBy={['title', 'subtitle']}
         />
     )
-}
+}