mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-23 14:39:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(blocksBasic): Added list direction, wrapping and scrolling.

Browse Source
This commit is contained in:
Sandile 2021-08-13 17:20:58 +02:00
parent d5d19b1872
commit aba280a4f3
3 changed files with 460 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

438
packages/blocks/blocksBasic/demo/examples/List.yaml
View File

@ -10,16 +10,448 @@
- id: properties.style
type: List
properties:
style:
style:
border: 1px solid blue
- id: properties.style-two-items
type: List
properties:
style:
style:
border: 1px solid blue
blocks:
- id: one
type: Test
- id: two
type: Test
- id: properties.direction is row
type: List
properties:
direction: row
style:
border: 1px solid blue
blocks:
- id: one
type: Test
- id: two
type: Test
- id: properties.direction is column
type: List
properties:
direction: column
style:
border: 1px solid blue
blocks:
- id: one
type: Test
- id: two
type: Test
- id: properties.direction is row with default wrap
type: List
properties:
direction: row
style:
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test
- id: properties.direction is row and with wrap
type: List
properties:
direction: row
wrap: wrap
style:
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test
- id: properties.direction is row with wrap-reverse
type: List
properties:
direction: row
wrap: wrap-reverse
style:
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test
- id: properties.direction is row with no wrap
type: List
properties:
direction: row
wrap: nowrap
style:
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test
- id: properties.direction is row with no wrap and scroll
type: List
properties:
direction: row
wrap: nowrap
scroll: true
style:
width: 950px
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test
- id: properties.direction is row with no wrap and scroll false
type: List
properties:
direction: row
wrap: nowrap
scroll: false
style:
width: 950px
border: 1px solid blue
blocks:
- id: 1
type: Test
- id: 2
type: Test
- id: 3
type: Test
- id: 4
type: Test
- id: 5
type: Test
- id: 6
type: Test
- id: 7
type: Test
- id: 8
type: Test
- id: 9
type: Test
- id: 10
type: Test
- id: 11
type: Test
- id: 12
type: Test
- id: 13
type: Test
- id: 14
type: Test
- id: 15
type: Test
- id: 16
type: Test
- id: 17
type: Test
- id: 18
type: Test
- id: 19
type: Test
- id: 20
type: Test
- id: 21
type: Test
- id: 22
type: Test
- id: 23
type: Test
- id: 24
type: Test
- id: 25
type: Test
- id: 26
type: Test
- id: 27
type: Test
- id: 28
type: Test
- id: 29
type: Test
- id: 30
type: Test

14
packages/blocks/blocksBasic/src/blocks/List/List.js
View File

@ -30,7 +30,19 @@ const List = ({ blockId, events, list, methods, properties }) => {
<Box
blockId={blockId}
events={events}
properties={{ style: properties.style }}
properties={{
style: {
...(properties.direction
? {
display: 'flex',
flexDirection: properties.direction,
flexWrap: properties.wrap ? properties.wrap : 'wrap',
overflow: properties.scroll ? 'auto' : 'visible',
}
: {}),
...properties.style,
},
}}
methods={methods}
content={{
content: () => list.map((item) => item.content()),

12
packages/blocks/blocksBasic/src/blocks/List/List.json
View File

@ -7,6 +7,18 @@
"type": "object",
"additionalProperties": false,
"properties": {
"direction": {
"type": "string",
"description": "List content as row or column."
},
"wrap": {
"type": "string",
"description": "List content is wrap, nowrap or wrap-reverse."
},
"scroll": {
"type": "boolean",
"description": "List content scrolling is true or false."
},
"style": {
"type": "object",
"description": "Css style object to apply to List div.",