Page Menu
Home
Sealhub
Search
Configure Global Search
Log In
Files
F996211
component-input-table.ts
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
6 KB
Referenced Files
None
Subscribers
None
component-input-table.ts
View Options
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import
type
{
JDDContext
,
Table
,
TableData
}
from
"@sealcode/jdd"
;
import
{
Markdown
}
from
"@sealcode/jdd"
;
import
{
isTableHeader
}
from
"@sealcode/jdd"
;
import
type
{
StatefulPage
}
from
"@sealcode/sealgen"
;
import
type
{
Context
}
from
"koa"
;
import
{
tempstream
}
from
"tempstream"
;
import
{
ComponentInput
}
from
"./component-input.js"
;
import
type
{
ComponentPreviewActions
}
from
"../component-preview-actions.js"
;
import
type
{
JDDPageState
}
from
"../jdd-page.js"
;
export
async
function
ComponentInputTable
<
State
extends
JDDPageState
,
CellType
,
HeaderType
>
({
state
,
arg_path
,
ctx
,
arg
,
value
,
page
,
makeJDDContext
,
makeAssetURL
,
}
:
{
state
:
State
;
ctx
:
Context
;
arg_path
:
string
[];
arg
:
Table
<
CellType
,
HeaderType
>
;
value
:
TableData
<
CellType
,
HeaderType
>
;
page
:
StatefulPage
<
JDDPageState
,
typeof
ComponentPreviewActions
>
;
makeJDDContext
:
(
ctx
:
Context
)
=>
JDDContext
;
makeAssetURL
:
(
asset
:
string
)
=>
string
;
})
:
Promise
<
string
>
{
if
(
!
value
)
{
value
=
await
arg
.
getEmptyValue
(
makeJDDContext
(
ctx
));
}
const
show_paste
=
arg
.
cell_type
instanceof
Markdown
&&
arg
.
header_type
instanceof
Markdown
;
return
tempstream
/* HTML */
`<fieldset>
<legend>
${
arg_path
.
at
(
-
1
)
!
}
</legend>
<div>
${
show_paste
?
/* HTML */
`<input
type="button"
value="paste"
placeholder="paste table here"
data-jdd-table-paste-argpath-value="
${
arg_path
.
join
(
"."
)
}
"
data-controller="jdd-table-paste"
/>`
:
""
}
<table
class="jdd-component-input--table"
style="position: relative; /* necessary for sticky th*/"
>
<tbody>
<tr>
<td></td>
${
[...
Array
(
arg
.
getColumnsCount
(
value
)).
keys
()]
.
map
(
(
column_index
)
=>
/* HTML */
`<th
class="sticky sticky--top subdued"
>
${
page
.
makeActionButton
(
state
,
{
action
:
"remove_table_column"
,
label
:
"Remove column"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-delete-column.svg"
)
}
"
/>`
,
}
,
arg_path,
column_index
)}
${
column_index
>=
arg
.
getColumnsCount
(
value
)
-
1
?
""
:
page
.
makeActionButton
(
state
,
{
action
:
"move_table_column_right"
,
label
:
"Move column to the right"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-move-column-right.svg"
)
}
"
/>`
,
}
,
arg_path,
column_index
)}
</th>`
)
.
join
(
""
)
}
</tr>
${
value
.
rows
.
map
(
(
row
,
row_index
)
=>
tempstream
/* HTML */
`<tr>
<td class="sticky sticky--left subdued">
<div
style="display: flex; flex-flow: column; row-gap: 5px;"
>
${
page
.
makeActionButton
(
state
,
{
action
:
"remove_table_row"
,
label
:
"Remove row"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-delete-row.svg"
)
}
"
/>`
,
}
,
arg_path,
row_index
)}
${
page
.
makeActionButton
(
state
,
{
action
:
"move_table_row_down"
,
label
:
"Move this row down"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-move-row-down.svg"
)
}
"
/>`
,
}
,
arg_path,
row_index
)}
</div>
</td>
${
isTableHeader
(
row
)
?
/* HTML */
tempstream
`<th
colspan="
${
arg
.
getColumnsCount
(
value
).
toString
()
}
"
>
${
ComponentInput
({
state
,
ctx
,
arg_path
:
[
...
arg_path
,
"rows"
,
row_index
.
toString
(),
"header_content"
,
],
arg
:
arg
.
header_type
,
value
:
row
.
header_content
,
page
,
makeJDDContext
,
makeAssetURL
,
}
)}
</th>`
:
row
.
cells
.
map
(
(
cell
,
cell_index
)
=>
tempstream
/* HTML */
`<td>
${
ComponentInput
({
ctx
,
state
,
arg_path
:
[
...
arg_path
,
"rows"
,
row_index
.
toString
(),
"cells"
,
cell_index
.
toString
(),
],
arg
:
arg
.
cell_type
,
value
:
cell
,
page
,
makeJDDContext
,
makeAssetURL
,
}
)}
</td>`
)
}
${
row_index
==
0
?
/* HTML */
`<td
class="subdued"
rowspan="
${
value
.
rows
.
length
.
toString
()
}
"
>
${
page
.
makeActionButton
(
state
,
{
action
:
"add_table_column"
,
label
:
"Add column"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-add-column-right.svg"
)
}
"
/>`
,
}
,
arg_path
)}
</td>`
:
""
}
</tr>`
)
}
<tr>
<td
class="subdued"
colspan="{(arg.getColumnsCount(value)"
+
1).toString()}
>
${
page
.
makeActionButton
(
state
,
{
action
:
"add_table_row"
,
label
:
"Add table row"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-add-row-below.svg"
)
}
"
/>`
,
}
,
arg_path,
arg.getColumnsCount(value),
undefined
)}
${
page
.
makeActionButton
(
state
,
{
action
:
"add_table_row"
,
label
:
"Add table header"
,
content
:
/* HTML */
`<img
width="20"
height="20"
src="
${
makeAssetURL
(
"icons/table-add-column-header-below.svg"
)
}
"
/>`
,
}
,
arg_path,
arg.getColumnsCount(value),
"header"
)}
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>`
;
}
File Metadata
Details
Attached
Mime Type
text/html
Expires
Tue, Dec 24, 14:02 (21 h, 12 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
557110
Default Alt Text
component-input-table.ts (6 KB)
Attached To
Mode
rJDDE jdd-editor
Attached
Detach File
Event Timeline
Log In to Comment