Tabs tab className, DataTable expose processed entities ids array, ty…

…pings update

client_core/router/Router/index.tsx

@@ -1,3 +1,5 @@
+//TODO: support url with "//" like delimeters
+
 import React, { Suspense, useState, useLayoutEffect } from 'react'
 
 import isNullable from '../../../common/is/nullable'

client_core/store/fetch_module/index.ts

@@ -41,7 +41,7 @@ const actions: Actions = {
         state.lastError = res
 
         state.errRes[ID]
-            ?   state.errRes[ID].push(res)
+            ?   state.errRes[ID]!.push(res)
             :   state.errRes[ID] = [ res ]
 
         setState(state)
@@ -61,7 +61,7 @@ const actions: Actions = {
         const errorsById = store.state.errRes[ID]
 
         return errorsById && errorsById.length
-            ?   errorsById.at(-1).message
+            ?   errorsById.at(-1)!.message
             :   ''
     }
 }

client_core/store/fetch_module/types.d.ts

@@ -1,10 +1,15 @@
 import type { HookStore } from '../index'
 
 
+type AnyError = {
+    date: number
+} & Obj
+
+
 type State = {
     requests: Obj<number>
-    errRes: Obj
-    lastError: Obj
+    errRes: Obj<AnyError[]>
+    lastError: AnyError
 }
 
 type Actions = {
@@ -18,4 +23,4 @@ type Actions = {
 type StoreInitialized = HookStore<State, Actions>
 
 
-export type { State, Actions, StoreInitialized }
+export type { State, Actions, StoreInitialized, AnyError }

client_core/ui/DataTable/README.md

@@ -79,7 +79,8 @@ Configurable and flexible data grid to manage big amount of data, built on top o
         - `searchByField` - **Object** Entities filtering params, where key is a column ID and value is a filtering value
         - `toggleColumns` - **Set<props.columnsConfig.ID>**. Column IDs to be hidden
         - `showPerPage` - **Number**. Number of entities showed per one pagination page
-        - `currentPage` - **Number**. Current pagination page<br /><br />
+        - `currentPage` - **Number**. Current pagination page starting from 1
+        - `__resultIDs` - **string[]**. Readonly inner filtered `props.entities.sorted` array of entities IDs */<br /><br />
 
 - `rootTagAttributes`
     - **div** tag attributes<br /><br />

client_core/ui/DataTable/index.tsx

@@ -34,7 +34,8 @@ const getDefaultState: () => State = () => ({
     searchByField: {},
     toggledColumns: new Set(),
     showPerPage: 0,
-    currentPage: 1
+    currentPage: 1,
+    __resultIDs: []
 })
 
 const DataTable = component<Props, DefaultProps>(
@@ -106,6 +107,9 @@ const DataTable = component<Props, DefaultProps>(
         dataTableTableProps = resolveTagAttributes(dataTableTableProps, tableAttributes)
 
 
+        state.__resultIDs = resultIDs
+
+
         return (
             <div { ...rootAttributes }>
                 <Table { ...dataTableTableProps } />

client_core/ui/DataTable/types.d.ts

@@ -57,6 +57,9 @@ type State<_SearchState = any> = {
 
     /** Current pagination page */
     currentPage: number
+
+    /** Readonly inner filtered props.entities.sorted array of entities IDs */
+    __resultIDs: string[]
 }
 
 

client_core/ui/Popup/styles.sass

@@ -4,7 +4,7 @@
     top: 0
     width: 100%
     height: 100%
-    z-index: 999
+    z-index: 200
 
 .close
     cursor: pointer

client_core/ui/Tabs/index.tsx

@@ -1,5 +1,4 @@
 //TODO?: no render labels when only one
-//TODO: tab content className
 
 import React from 'react'
 
@@ -21,10 +20,22 @@ const getContent = (content: Tab['content']) => (
         :   content
 )
 
+const getContentClassName = (
+    { content }: MergedProps['theme'],
+    tabClassName: Tab['className']
+) => (
+    content
+        ?   tabClassName
+            ?   `${content} ${tabClassName}`
+            :   content
+        :   tabClassName
+)
+
 function getTabsVisual(mergedProps: MergedProps) {
     const { tabs, activeTab, onChange, theme, showEmpty, renderAll } = mergedProps
 
     const tabsContent: React.ReactNode[] = []
+    let tabContentClassName
     const labels = tabs.map(tab => {
         const { label, id, payload, content, className } = tab
 
@@ -34,18 +45,18 @@ function getTabsVisual(mergedProps: MergedProps) {
             let tabContent = getContent(content)
             if (renderAll) {
                 const wrapperProps: ReactTagAttributes<HTMLDivElement> = {
-                    className,
                     children: tabContent,
                     key: id
                 }
                 isSelected
-                    ?   (wrapperProps.className = theme.content)
+                    ?   (wrapperProps.className = getContentClassName(theme, className))
                     :   (wrapperProps.style = { display: 'none' })
 
                 tabContent = <div { ...wrapperProps } />
             }
 
             tabsContent.push(tabContent)
+            isSelected && (tabContentClassName = className)
         }
 
 
@@ -65,7 +76,8 @@ function getTabsVisual(mergedProps: MergedProps) {
         activeTabContent: (showEmpty || tabsContent.length)
             ?   renderAll
                 ?   tabsContent
-                :   <div className={ theme.content } children={ tabsContent[0] } />
+                :   <div className={ getContentClassName(theme, tabContentClassName) }
+                        children={ tabsContent[0] } />
             :   _undef,
         labels: <div className={ theme.labels_wrapper } children={ labels } />
     }

demo_app/client/main/pages/DemoComponents/components/Tabs.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 
-import { Tabs } from 'app/components'
+import { Tabs, TabsProps } from 'app/components'
 
 
-const tabsData = ([ 1, 2, 3 ]).map(id => ({
+const tabsData: TabsProps['tabs'] = ([ 1, 2, 3 ]).map(id => ({
     id: `${id}`,
-    content: <div>content {id}</div>,
+    content: `content ${id}`,
     label: `label ${id}`
 }))
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "siegel",
-    "version": "0.14.87",
+    "version": "0.14.88",
     "homepage": "https://siegel-qe3q.onrender.com",
     "url": "https://github.com/CyberCookie/siegel",
     "bugs": "https://github.com/CyberCookie/siegel/issues",