mag-component-layout-list - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

index.js

@@ -23,3 +23,3 @@ /**
  * @example
- * var CheckList = require('../stb/ui/layout.list'),
+ * var LayoutList = require('mag-component-layout-list'),
  *     list = new LayoutList({
@@ -34,3 +34,4 @@ *         propagate: true,
  *                         {
- *                             className: 'star'
+ *                             className: 'star',
+ *                             name: '$text'
  *                         },
@@ -41,3 +42,4 @@ *                         'Some text'
  *                         // do something
- *                     }
+ *                     },
+ *                     name: 'starItem'
  *                 },
@@ -77,2 +79,5 @@ *                 {
  * });
+ *
+ * list.links.starItem.links.$text.innerText = 'new Text';
+ *
  */
@@ -90,2 +95,7 @@ function LayoutList ( config ) {
     /**
+     * Hash map of layouts links
+     */
+    this.links = {};
+
+    /**
      * No data placeholder
@@ -187,2 +197,6 @@ *
 
+        if ( config.name ) {
+            this.links[config.name] = layout;
+        }
+
         $item.appendChild(layout.$node);
@@ -210,2 +224,3 @@ $item.layout = layout;
 LayoutList.prototype.setData = function ( config ) {
+    this.links = {};
     List.prototype.setData.call(this, config);
@@ -212,0 +227,0 @@

package.json

 {
     "name": "mag-component-layout-list",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "description": "Base layout list implementation.",
@@ -20,9 +20,9 @@ "author": {
     "dependencies": {
-        "mag-component-layout": "^1.1.0",
-        "mag-component-list": "^1.2.1",
-        "stb-component": "^1.4.0"
+        "mag-component-layout": "^1.2.0",
+        "mag-component-list": "^1.2.3",
+        "stb-component": "^1.4.1"
     },
     "devDependencies": {
         "jsdoc": "^3.5.5",
-        "mag-eslint": "^1.0.0"
+        "mag-eslint": "^1.0.2"
     },
@@ -29,0 +29,0 @@ "keywords": [

readme.md

@@ -12,2 +12,3 @@ Layout list component
 Layout list is a component to build user interface, an instance of [Component](https://github.com/stbsdk/component) module.
+It is based on [mag-component-list](https://github.com/magsdk/component-list) and [mag-component-layout](https://github.com/magsdk/component-layout).
 
@@ -27,6 +28,128 @@
 ```js
-var list = require('mag-component-layout-list');
+var LayoutList = require('mag-component-layout-list');
 ```
 
+Create layout list instance:
 
+```js
+var layoutList = new LayoutList({
+    // mag-component-list config
+    cycle: false,
+    className: 'list',
+
+    data: [
+        {
+            // mag-component-layout config.data
+            items: [
+                new Button({value: 'Ok'}),
+                new Button({value: 'Cancel'}),
+                new Button({value: 'Exit'})
+            ]
+        },
+        {
+            // mag-component-layout config.data
+            items: [
+                HTMLElement1,
+                HTMLElement2
+            ],
+            value: someItemData2
+        },
+        {
+            items: [
+                  {
+                     className: 'star'
+                  },
+                  'Some text'
+              ],
+              click: function () {
+                  // do something
+              }
+          },
+          {
+              items: [
+                  'Hello world',
+                  {
+                      value: 'hi',
+                      className: 'status'
+                  }
+              ],
+              value:{
+                  uri: 'http://55.55.55.55/some'
+              },
+              click: someHandler
+          }
+        
+    ],
+
+    // custom render function
+    render: function ( $item, config ) {},
+
+    noData: 'No items',
+    fixedData: true,
+    size: 3,
+    focusIndex: 0,
+    propagate: false,
+    type: LayoutList.prototype.TYPE_HORIZONTAL,
+    events: {
+        'focus:item': function ( event ) {
+            console.log(event);
+        },
+        'click:item': function ( event ) {
+            console.log(event);
+        }
+    }
+});
+```
+
+To change data after creation:
+
+```js
+layoutList.setData({
+    focusIndex: 0,
+    data: [
+        {
+            items: [
+                  {
+                     className: 'star'
+                  },
+                  'Some text'
+              ],
+              click: function () {
+                  // do something
+              }
+          },
+          {
+              items: [
+                  'Hello world',
+                  {
+                      value: 'hi',
+                      className: 'status'
+                  }
+              ],
+              value:{
+                  uri: 'http://55.55.55.55/some'
+              },
+              click: someHandler
+          },
+          {
+              items: [
+                  {
+                      className: 'big',
+                      value: ' Some'
+                  },
+                  {
+                      value: new Input()
+                  }
+              ]
+          }
+    ]
+});
+```
+
+To change focus position:
+
+```js
+layoutList.focusIndex(index);
+```
+
 ## Development mode ##
@@ -33,0 +156,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32728

10.6%

Lines of code

650

2.04%

Number of lines in readme file

167

279.55%

Number of medium supply chain risk alerts

0

-100%

Dependency changes

• Updated

  mag-component-layout@^1.2.0

• Updated

  mag-component-list@^1.2.3

• Updated

  stb-component@^1.4.1