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 - id: properties.style
type: List type: List
properties: properties:
style: style:
border: 1px solid blue border: 1px solid blue
- id: properties.style-two-items - id: properties.style-two-items
type: List type: List
properties: properties:
style: style:
border: 1px solid blue border: 1px solid blue
blocks: blocks:
- id: one - id: one
type: Test type: Test
- id: two - id: two
type: Test 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 <Box
blockId={blockId} blockId={blockId}
events={events} 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} methods={methods}
content={{ content={{
content: () => list.map((item) => item.content()), content: () => list.map((item) => item.content()),

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

@ -7,6 +7,18 @@
"type": "object", "type": "object",
"additionalProperties": false, "additionalProperties": false,
"properties": { "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": { "style": {
"type": "object", "type": "object",
"description": "Css style object to apply to List div.", "description": "Css style object to apply to List div.",