Skip to content

Commit 4f9b6bf

Browse files
FialkaksuFialkaksu
authored
MARKET-1557 List Component (#178)
* Add list-component * Add readme * Edit readme * Added styles * Add nested lists * fixes by review * minor edits * code refactoring * code edits and modified preview * minor edits * minor edits and updates * minor edits * added elRef * updated Props table * code edits, update readme
1 parent c6f4271 commit 4f9b6bf

File tree

9 files changed

+195
-0
lines changed

9 files changed

+195
-0
lines changed

‎components/bl-list-component/README.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# List
2+
3+
List is the component that can be used in Backendless [UI-Builder](https://backendless.com/developers/#ui-builder). It allows you to add a standard list to your application. Select the type of list (ordered/unordered) and specify the data that will be displayed inside the list.
4+
More information about list you can find [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li).
5+
6+
<p align="center">
7+
<img src="./thumbnail.png" alt="main thumbnail" width="780"/>
8+
</p>
9+
10+
## Properties
11+
12+
| Property | Type | Default value | Logic | Data Binding | UI Setting | Description |
13+
|-----------------------------|----------------------------------------------|----------------|-----------------|--------------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
14+
| Type <br> `type` | *Select* <br> [Unordered:`ul`, Ordered:`ol`] | Unordered:`ul` | Type Logic | NO | YES | Controls the type of list(ul/ol). |
15+
| List Items <br> `listItems` | *JSON* | | ListItems Logic | YES | YES | Specifies a JSON array containing data of the list items. Watch [Codeless Examples](#Examples). Signature of items list: `[ <Item> ]`. Signature of item: `{ content: String, children: [ <Item> ], type: String }`. |
16+
17+
## Events
18+
19+
| Name | Triggers | Context Blocks |
20+
|--------------------------|----------------------------------------------------|---------------------------------|
21+
| On Click List Item Event | Triggered when the user click any item of the list | `{event: Object, item: Object}` |
22+
23+
## Styles
24+
25+
**Theme**
26+
````
27+
@bl-customComponent-list-theme: @themePrimary;
28+
@bl-customComponent-list-themeTextColor: @appTextColor;
29+
````
30+
31+
**Dimensions**
32+
```
33+
@bl-customComponent-list-margin: 5px;
34+
@bl-customComponent-list-item-fontSize: 1rem;
35+
@bl-customComponent-list-item-line-height: 1.3;
36+
@bl-customComponent-list-item-padding: 3px;
37+
```
38+
39+
**Other**
40+
```
41+
@bl-customComponent-list-item-cursor: pointer;
42+
```
43+
44+
## Examples
45+
46+
Below is a Codeless Example highlighting how to use the List component:
47+
48+
![list data example](example-images/list-data-example.png)
49+
![list data example view](example-images/list-data-example-view.png)
50+
51+
<details>
52+
<summary>Try yourself</summary>
53+
54+
```
55+
<block xmlns="http://www.w3.org/1999/xhtml" type="lists_create_with" id="l,E8eVLhb*x63^hP*la/" x="150.875" y="100"><mutation items="3"></mutation><value name="ADD0"><block type="create_object" id="lK@[V],7)GKBht*H9}5w"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="1-WlSJq.:K|!ZBS/pmRU"><field name="TEXT">Coffee</field></block></value></block></value><value name="ADD1"><block type="create_object" id="y-p_EQMEqsM+)qQ0|QT3"><mutation><properties><item id="property" prop-name="content"></item><item id="property" prop-name="children"></item><item id="property" prop-name="type"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="Cs~vab~EVSM?x[2C%evw"><field name="TEXT">Tea</field></block></value><value name="create_object_mutator_container_properties_stack_property1"><block type="lists_create_with" id="xg)hALvr^^o:(hzS^%oD"><mutation items="3"></mutation><value name="ADD0"><block type="create_object" id="t?!{!$)nn)v=p5n2BM-/"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="1gH0_`thfD#3|zQ3F-q3"><field name="TEXT">green</field></block></value></block></value><value name="ADD1"><block type="create_object" id="3]xTn`sDru3C^Ix#9!u+"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="mtU^H#1TZn19{8.$CF5("><field name="TEXT">white with flowers and citrus fruits</field></block></value></block></value><value name="ADD2"><block type="create_object" id="zJkLto=ydf4}`yWT5IRo"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="IVv6P;g~nB;KB0ppY!tu"><field name="TEXT">black "Earl Grey"</field></block></value></block></value></block></value><value name="create_object_mutator_container_properties_stack_property2"><block type="text" id="hppU.V;[zPM:/vUmpre{"><field name="TEXT">ol</field></block></value></block></value><value name="ADD2"><block type="create_object" id="RtqLQ-Q,S[MV9Tnr}J@`"><mutation><properties><item id="property" prop-name="content"></item><item id="property" prop-name="children"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="T$uN$kz~Z+VP)Jv9{A+T"><field name="TEXT">Water</field></block></value><value name="create_object_mutator_container_properties_stack_property1"><block type="lists_create_with" id="6?cxDbZMXN]KlK3,gi#!"><mutation items="2"></mutation><value name="ADD0"><block type="create_object" id=";4m+8p2KZDW*C}?)I?/L"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id="2%dgUD%M7a,d}Nw^@2n}"><field name="TEXT">carbonated</field></block></value></block></value><value name="ADD1"><block type="create_object" id="RRFGu:]1TnWNGg`+b{QM"><mutation><properties><item id="property" prop-name="content"></item></properties></mutation><value name="create_object_mutator_container_properties_stack_property0"><block type="text" id=";[J=F_W,G[#43Ah/v./l"><field name="TEXT">non-carbonated</field></block></value></block></value></block></value></block></value></block>
56+
```
57+
</details>

‎components/bl-list-component/component.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"id": "c_f95c74e56529269bdafe747715db7bbe",
3+
"name": "List",
4+
"description": "The List component allows the user to add a standard list to an application.",
5+
"showInToolbox": true,
6+
"faIcon": "list",
7+
"mainJS": "dist/index.js",
8+
"type": "custom",
9+
"category": "Custom Components",
10+
"properties": [
11+
{
12+
"type": "select",
13+
"name": "type",
14+
"label": "Type",
15+
"showInSettings": true,
16+
"defaultValue": "ul",
17+
"hasLogicHandler": false,
18+
"handlerId": "typeLogic",
19+
"options": [
20+
{
21+
"value": "ul",
22+
"label": "Unordered"
23+
},
24+
{
25+
"value": "ol",
26+
"label": "Ordered"
27+
}
28+
],
29+
"handlerLabel": "Type Logic",
30+
"settingTooltip": "Select a list type"
31+
},
32+
{
33+
"type": "json",
34+
"name": "listItems",
35+
"showInSettings": true,
36+
"hasLogicHandler": true,
37+
"handlerId": "listItemsLogic",
38+
"handlerLabel": "List Items Logic",
39+
"dataBinding": true,
40+
"defaultValue": "[{\n \"content\": \"first item\"\n},\n {\n \"content\": \"second item\",\n \"children\": [{\n \"content\": \"second item first subitem\"\n },\n {\n \"content\": \"second item second subitem\"\n },\n {\n \"content\": \"second item third subitem\"\n }],\n \"type\": \"ol\"\n },\n {\n \"content\": \"third item\",\n \"children\": [{\n \"content\": \"third item first subitem\"\n },\n {\n \"content\": \"third item second subitem\"\n }]\n }]",
41+
"handlerDescription": "Specifies a JSON array containing data of the list items. Signature of items list: [ <Item> ]. Signature of item: { content: String, children: [ <Item> ], type: String }.",
42+
"label": "List Items",
43+
"settingTooltip": "List Items Data"
44+
}
45+
],
46+
"eventHandlers": [
47+
{
48+
"name": "onItemClick",
49+
"label": "On Click List Item Event",
50+
"contextBlocks": [
51+
{
52+
"id": "event",
53+
"label": "Click Event"
54+
},
55+
{
56+
"id": "item",
57+
"label": "List Item"
58+
}
59+
],
60+
"handlerDescription": "This event is fired when the user clicks the mouse or taps the item of the list."
61+
}
62+
],
63+
"actions": [],
64+
"settings": [],
65+
"pods": {}
66+
}

‎components/bl-list-component/example-images/list-data-example-view.png‎

15.3 KB
Loading

‎components/bl-list-component/example-images/list-data-example.png‎

35.3 KB
Loading

‎components/bl-list-component/preview.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div data-module-type="system" data-module-id="paragraph" data-display data-uid="26ee0bea5794136c571887825e151d79"><ul><li data-display="" style="margin-bottom:10px;">unordered lists ( ul ) - the list items are marked with bullets</li><li data-display="">ordered lists ( ol ) - the list items are marked with numbers or letters</li></ul></div>

‎components/bl-list-component/src/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { List } from './list';
2+
3+
const { cn } = BackendlessUI.CSSUtils;
4+
5+
export default function ListComponent({ component, elRef, eventHandlers }) {
6+
const { classList, style, display, type, listItems } = component;
7+
8+
const items = listItems || [];
9+
10+
const onItemClick = (event, item) => {
11+
event.stopPropagation();
12+
eventHandlers.onItemClick({ event, item });
13+
};
14+
15+
if (!display) {
16+
return null;
17+
}
18+
19+
return (
20+
<div ref={ elRef } className={ cn('bl-customComponent-list', ...classList) } style={ style }>
21+
<List type={ type } items={ items } onItemClick={ onItemClick } />
22+
</div>
23+
);
24+
}

‎components/bl-list-component/src/list.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export function List({ type, items, onItemClick }) {
2+
const ListElement = type === 'ol' ? 'ol' : 'ul';
3+
4+
return (
5+
<ListElement className="list">
6+
{ items.map((item, i) => (
7+
<Item key={ i } item={ item } listType={ item.type || type } onClick={ onItemClick } />
8+
)) }
9+
</ListElement>
10+
);
11+
}
12+
13+
function Item({ key, item, listType, onClick }) {
14+
return (
15+
<li key={ key } className="list__item" onClick={ (e) => onClick(e, item) }>
16+
{ item.content }
17+
18+
{ item.children && (
19+
<List type={ listType } items={ item.children } onItemClick={ onClick } />
20+
)}
21+
</li>
22+
);
23+
}

‎components/bl-list-component/styles/index.less‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@bl-customComponent-list-theme: @themePrimary;
2+
@bl-customComponent-list-themeTextColor: @appTextColor;
3+
4+
@bl-customComponent-list-margin: 5px;
5+
@bl-customComponent-list-item-fontSize: 1rem;
6+
@bl-customComponent-list-item-line-height: 1.3;
7+
@bl-customComponent-list-item-padding: 3px;
8+
9+
@bl-customComponent-list-item-cursor: pointer;
10+
11+
.bl-customComponent-list {
12+
color: @bl-customComponent-list-themeTextColor;
13+
14+
.list {
15+
margin: @bl-customComponent-list-margin;
16+
}
17+
18+
.list__item {
19+
font-size: @bl-customComponent-list-item-fontSize;
20+
padding: @bl-customComponent-list-item-padding;
21+
line-height: @bl-customComponent-list-item-line-height;
22+
cursor: @bl-customComponent-list-item-cursor;
23+
}
24+
}

‎components/bl-list-component/thumbnail.png‎

10.3 KB
Loading

0 commit comments

Comments
 (0)