MARKET-1557 List Component

components/bl-list-component/README.md

@@ -0,0 +1,55 @@
+# 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.
+
+<p align="center">
+  <img src="./thumbnail.png" alt="main thumbnail" width="643"/>
+</p>
+
+Additional properties allow customizing the font size, background color, text color, padding and behavior of the component. Refer to the Properties section below.
+
+## Configuration
+
+The configuration can be done in the UI Builder or using the Codeless Logic. You need to select the type of list (ordered/unordered) and specify the data that will be displayed inside the list.
+
+## Properties
+
+| Property                 | Type       | Default value | Logic              | Data Binding | UI Setting | Description                                                        |
+|--------------------------|------------|---------------|--------------------|--------------|------------|-------------------------------------------------------------------|
+| Type                     | *Select*   | `"Unordered"` | Type Logic         | NO           | YES        | Controls the type of list(ul/ol).                                                               |
+| List Items               | *JSON*     |               | ListItems Logic    | YES          | NO         | Specifies a JSON array containing data for the list items. Watch [Codeless Examples] #codeless-examples). |
+| 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.                                                             |
+
+## 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-size: 20px;
+```
+
+**Colors**
+````
+@bl-customComponent-list-item-hover-background-color: if(@isLightTheme, rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+````
+
+## Codeless 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,88 @@
+{
+  "id": "c_f95c74e56529269bdafe747715db7bbe",
+  "name": "List",
+  "description": "The List component allows the user to add a standard list to an application.",
+  "showInToolbox": true,
+  "faIcon": "pencil-ruler",
+  "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"
+    },
+    {
+      "type": "json",
+      "name": "listItems",
+      "showInSettings": false,
+      "hasLogicHandler": true,
+      "handlerId": "listItemsLogic",
+      "handlerLabel": "List Items Logic",
+      "dataBinding": true
+    },
+    {
+      "type": "color",
+      "name": "backgroundColor",
+      "label": "Background",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "backgroundColorLogic"
+    },
+    {
+      "type": "text",
+      "name": "width",
+      "label": "Width",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "widthLogic"
+    },
+    {
+      "type": "color",
+      "name": "color",
+      "label": "Color",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "colorLogic"
+    },
+    {
+      "type": "text",
+      "name": "fontSize",
+      "label": "Font Size",
+      "showInSettings": true,
+      "hasLogicHandler": false,
+      "handlerId": "fontSizeLogic"
+    }
+  ],
+  "eventHandlers": [
+    {
+      "name": "onClickListItem",
+      "label": "On Click List Item Event",
+      "contextBlocks": [
+        {
+          "id": "item",
+          "label": "List Item"
+        }
+      ]
+    }
+  ],
+  "actions": [],
+  "settings": [],
+  "pods": {}
+}

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

@@ -0,0 +1,19 @@
+import { List } from './list';
+
+export default function ListComponent ({
+  component, eventHandlers
+}) {
+
+  const { cn } = BackendlessUI.CSSUtils;
+  const { style, classList, width, backgroundColor } = component;
+
+  style.width = width;
+  style.backgroundColor = backgroundColor;
+
+  return (
+    <div className={ cn('bl-customComponent-list', classList) } style={ style }>
+      <List component={component}
+            eventHandlers={eventHandlers}/>
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+import { List } from './list';
+
+export function ListContent({
+  component, eventHandlers, child}) {
+
+  const { color, fontSize, listItems, type} = component;
+
+  const itemStyles = {
+    color   : color,
+    fontSize: fontSize
+  };
+
+  const onItemClick = (key) => {
+    eventHandlers.onClickListItem({item: key});
+  }
+
+ const getItems = (items) => {
+    return (items || []).map((item, i) => {
+      if (item.child && item.child.length !== 0) {
+          return (
+            <li key={i.toString()}
+              className="list__item"
+              style = {itemStyles}
+              onClick={(e) => {
+                e.stopPropagation();
+                onItemClick(item.item);
+              }}
+            >
+              {item.item}
+              <List component={component}
+                    child={item.child}
+                    eventHandlers={eventHandlers}/>
+            </li>
+          )
+      } else {
+        return (
+          <li key={i.toString()}
+            className="list__item"
+            style = {itemStyles}
+            onClick={(e) => {
+              e.stopPropagation();
+              onItemClick(item.item);
+            }}
+          >
+            {item.item}
+          </li>
+        )
+      }
+    });
+  }
+
+  return (getItems(child || listItems))
+}

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

@@ -0,0 +1,30 @@
+import { ListContent } from './list-content';
+
+export function List ({
+  component, eventHandlers, child
+}) {
+
+  const listType = (type) => {
+    if(type && type === 'ol') {
+      return (
+        <ol className="list">
+          <ListContent
+          component={component}
+          child={child}
+          eventHandlers={eventHandlers} />
+        </ol>
+      )
+    } else {
+      return (
+        <ul className="list">
+          <ListContent
+          component={component}
+          child={child}
+          eventHandlers={eventHandlers} />
+        </ul>
+      )
+    }
+  };
+
+  return (listType(component.type))
+}

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

@@ -0,0 +1,25 @@
+@bl-customComponent-list-theme: @themePrimary;
+@bl-customComponent-list-themeTextColor: @appTextColor;
+
+@bl-customComponent-list-item-hover-background-color: if(@isLightTheme, rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
+
+@bl-customComponent-list-item-size: 20px;
+
+.bl-customComponent-list {
+  color: @bl-customComponent-list-themeTextColor;
+  user-select: none;
+
+  .list {
+    margin: @bl-customComponent-list-item-size;
+  }
+
+  .list__item {
+    padding: @bl-customComponent-list-item-size / 2;
+    line-height: 1.3;
+    cursor: pointer;
+
+    &:hover {
+      background-color: @bl-customComponent-list-item-hover-background-color;
+    }
+  }
+}