MARKET-1557 List Component

components/bl-list-component/README.md

@@ -0,0 +1,62 @@
+# List
+
+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.
+More information about list you can find [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li).
+
+<p align="center">
+  <img src="./thumbnail.png" alt="main thumbnail" width="780"/>
+</p>
+
+## Properties
+
+| Property                          | Type                                         | Default value  | Logic           | Data Binding | UI Setting | Description                                                                                                                                                                                                          |
+|-----------------------------------|----------------------------------------------|----------------|-----------------|--------------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Type <br> `type`                  | *Select* <br> [Unordered:`ul`, Ordered:`ol`] | Unordered:`ul` | Type Logic      | NO           | YES        | Controls the type of list(ul/ol).                                                                                                                                                                                    |
+| Items List <br> `listItems`       | *JSON*                                       | `[]`           | ListItems Logic | YES          | NO         | 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 }`. |
+| Background <br> `backgroundColor` | *Color*                                      |                |                 | NO           | YES        | Controls the background color of the main block.                                                                                                                                                                     |
+| Width <br> `width`                | *Text*                                       |                |                 | NO           | YES        | Controls the width of the main block.                                                                                                                                                                                |
+| Color <br> `color`                | *Color*                                      |                |                 | NO           | YES        | Controls the color of the list items.                                                                                                                                                                                |
+| Font Size <br> `fontSize`         | *Text*                                       |                |                 | NO           | YES        | Controls the font size of the list items.                                                                                                                                                                            |
+| Padding <br> `padding`            | *Text*                                       |                |                 | NO           | YES        | Controls the padding of the list items.                                                                                                                                                                              |
+
+## Events
+
+| Name               | Triggers                                 | Context Blocks                               |
+|--------------------|------------------------------------------|----------------------------------------------|
+| On Click List Item | when the user click any item of the list | `{itemContent: String, itemChildren: Array}` |
+
+## Styles
+
+**Theme**
+````
+@bl-customComponent-list-theme: @themePrimary;
+@bl-customComponent-list-themeTextColor: @appTextColor;
+````
+
+**Dimensions**
+```
+@bl-customComponent-list-margin: 5px;
+@bl-customComponent-list-item-fontSize: 1rem;
+@bl-customComponent-list-item-line-height: 1.3;
+@bl-customComponent-list-item-padding: 3px;
+```
+
+**Other**
+```
+@bl-customComponent-list-item-cursor: pointer;
+```
+
+## Examples
+
+Below is a Codeless Example highlighting how to use the List component:
+
+![list data example](example-images/list-data-example.png)
+![list data example view](example-images/list-data-example-view.png)
+
+<details>
+<summary>Try yourself</summary>
+
+```
+<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>
+```
+</details>

components/bl-list-component/component.json

@@ -0,0 +1,110 @@
+{
+  "id": "c_f95c74e56529269bdafe747715db7bbe",
+  "name": "List",
+  "description": "The List component allows the user to add a standard list to an application.",
+  "showInToolbox": true,
+  "faIcon": "list",
+  "mainJS": "dist/index.js",
+  "type": "custom",
+  "category": "Custom Components",
+  "properties": [
+    {
+      "type": "select",
+      "name": "type",
+      "label": "Type",
+      "showInSettings": true,
+      "defaultValue": "ul",
+      "hasLogicHandler": false,
+      "handlerId": "typeLogic",
+      "options": [
+        {
+          "value": "ul",
+          "label": "Unordered"
+        },
+        {
+          "value": "ol",
+          "label": "Ordered"
+        }
+      ],
+      "handlerLabel": "Type Logic",
+      "settingTooltip": "Select a list type"
+    },
+    {
+      "type": "json",
+      "name": "listItems",
+      "showInSettings": false,
+      "hasLogicHandler": true,
+      "handlerId": "listItemsLogic",
+      "handlerLabel": "List Items Logic",
+      "dataBinding": true,
+      "defaultValue": "[]",
+      "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 }."
+    },
+    {
+      "type": "color",
+      "name": "backgroundColor",
+      "label": "Background",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "backgroundColorLogic",
+      "settingTooltip": "Choose a background for the list"
+    },
+    {
+      "type": "text",
+      "name": "width",
+      "label": "Width",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "widthLogic",
+      "settingTooltip": "Choose the width of the list"
+    },
+    {
+      "type": "color",
+      "name": "color",
+      "label": "Color",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "colorLogic",
+      "settingTooltip": "Select the text color of the list items"
+    },
+    {
+      "type": "text",
+      "name": "fontSize",
+      "label": "Font Size",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "fontSizeLogic",
+      "settingTooltip": "Select the font size of the list items"
+    },
+    {
+      "type": "text",
+      "name": "padding",
+      "label": "Padding",
+      "settingTooltip": "Select the padding for list items",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "paddingLogic"
+    }
+  ],
+  "eventHandlers": [
+    {
+      "name": "onItemClick",
+      "label": "On Click List Item Event",
+      "contextBlocks": [
+        {
+          "id": "itemContent",
+          "label": "List Item Content"
+        },
+        {
+          "id": "itemChildren",
+          "label": "List Item Children"
+        }
+      ],
+      "handlerDescription": "This event is fired when the user clicks the mouse or taps the item of the list."
+    }
+  ],
+  "actions": [],
+  "settings": [],
+  "pods": {},
+  "blockUI": "<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/preview.html

@@ -0,0 +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

@@ -0,0 +1,30 @@
+import { List } from "./list";
+
+const { cn } = BackendlessUI.CSSUtils;
+
+export default function ListComponent({ component, elRef, eventHandlers }) {
+  const { classList, display, width, backgroundColor, type, listItems, color, fontSize, padding } = component;
+
+  const items = listItems || [];
+
+  const onClickHandler = (e, itemContent, itemChildren) => {
+    e.stopPropagation();
+    eventHandlers.onItemClick({ itemContent, itemChildren });
+  };
+
+  const options = {
+    type: type === "ol" ? "ol" : "ul",
+    style: { color, fontSize, padding },
+    onClickHandler,
+  };
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <div ref={ elRef } className={ cn("bl-customComponent-list", classList) } style={{ width, backgroundColor }}>
+      <List options={ options } items={ items } />
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+export function List({ options, items, type }) {
+  const ListElement = type || options.type;
+
+  return (
+    <ListElement className="list">
+      { items.map((item, i) => {
+        const { content, children, type } = item;
+
+        return <Item key={ i } content={ content } children={ children } type={ type } options={ options } />;
+      }) }
+    </ListElement>
+  );
+}
+
+function Item(props) {
+  const { options, key, content, children, type } = props;
+  const { style, onClickHandler } = options;
+
+  return (
+    <li key={ key } className="list__item" style={ style } onClick={ (e) => onClickHandler(e, content, children) }>
+      { content }
+      { children && <List items={ children } type={ type } options={ options } /> }
+    </li>
+  );
+}

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

@@ -0,0 +1,24 @@
+@bl-customComponent-list-theme: @themePrimary;
+@bl-customComponent-list-themeTextColor: @appTextColor;
+
+@bl-customComponent-list-margin: 5px;
+@bl-customComponent-list-item-fontSize: 1rem;
+@bl-customComponent-list-item-line-height: 1.3;
+@bl-customComponent-list-item-padding: 3px;
+
+@bl-customComponent-list-item-cursor: pointer;
+
+.bl-customComponent-list {
+  color: @bl-customComponent-list-themeTextColor;
+
+  .list {
+    margin: @bl-customComponent-list-margin;
+
+    &__item {
+      font-size: @bl-customComponent-list-item-fontSize;
+      padding: @bl-customComponent-list-item-padding;
+      line-height: @bl-customComponent-list-item-line-height;
+      cursor: @bl-customComponent-list-item-cursor;
+    }
+  }
+}