MARKET-1557 List Component

components/bl-list-component/README.md

@@ -0,0 +1,46 @@
+# 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       | *Select* <br> [`ul`, `ol`] | `ul`          | Type Logic      | NO           | YES        | Controls the type of list(ul/ol).                                                                                                                                                                   |
+| Items List | *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> ] }. |
+| Background | *Color*                    |               |                 | NO           | YES        | Controls the background color of the main block.                                                                                                                                                    |
+| Width      | *Text*                     |               |                 | NO           | YES        | Controls the width of the main block.                                                                                                                                                               |
+| Color      | *Color*                    |               |                 | NO           | YES        | Controls the color of the list items.                                                                                                                                                               |
+| Font Size  | *Text*                     |               |                 | NO           | YES        | Controls the font size of the list items.                                                                                                                                                           |
+| 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               | `List Item`    |
+
+## Styles
+
+**Theme**
+````
+@bl-customComponent-list-theme: @themePrimary;
+@bl-customComponent-list-themeTextColor: @appTextColor;
+````
+
+**Dimensions**
+```
+@bl-customComponent-list-item-fontSize: 1rem;
+```
+
+## 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)

components/bl-list-component/component.json

@@ -0,0 +1,106 @@
+{
+  "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": "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": "onClickListItem",
+      "label": "On Click List Item Event",
+      "contextBlocks": [
+        {
+          "id": "item",
+          "label": "List Item"
+        }
+      ],
+      "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,28 @@
+import { List } from "./list";
+
+const { cn } = BackendlessUI.CSSUtils;
+
+export default function ListComponent({ component, eventHandlers }) {
+  const { classList, width, backgroundColor, type, listItems, color, fontSize, padding } = component;
+
+  const onClickHandler = (e, key) => {
+    e.stopPropagation();
+    eventHandlers.onClickListItem({ item: key });
+  };
+
+  const options = {
+    type: type && type === "ol" ? "ol" : "ul",
+    style: {
+      color: color,
+      fontSize: fontSize,
+      padding: padding,
+    },
+    onClickHandler: onClickHandler,
+  };
+
+  return (
+    <div className={cn("bl-customComponent-list", classList)} style={{ width, backgroundColor }}>
+      <List options={options} items={listItems} />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,19 @@
+@bl-customComponent-list-theme: @themePrimary;
+@bl-customComponent-list-themeTextColor: @appTextColor;
+
+@bl-customComponent-list-item-fontSize: 1rem;
+
+.bl-customComponent-list {
+  color: @bl-customComponent-list-themeTextColor;
+  user-select: none;
+
+  .list {
+
+    &__item {
+      font-size: @bl-customComponent-list-item-fontSize;
+      padding: @bl-customComponent-list-item-fontSize / 2;
+      line-height: 1.3;
+      cursor: pointer;
+    }
+  }
+}