[Feature Request] Make just simple html5 components without linking to React

components/data-list-ng/data-list-ng.examples.html

@@ -3,9 +3,9 @@
     <div ng-app="Example.data-list" ng-strict-di ng-controller="ExampleCtrl as ctrl">
       <rg-data-list
         data="ctrl.data"
+        item-formatter="ctrl.itemFormatter"
         selection="ctrl.selection"
         on-select="ctrl.onSelect"
-        item-formatter="ctrl.itemFormatter"
       ></rg-data-list>
     </div>
   </file>
@@ -17,16 +17,15 @@
     import data from '@jetbrains/ring-ui/components/data-list/data-list.mock.js';
 
     function itemFormatter(item) {
-      return {
-        ...item,
-        collapsible: false
-      };
+      const {id: key, title, children, selectable} = item;
+      return {key, title, children, selectable};
     }
 
     const selection = new Selection({
       data,
-      isItemSelectable: item => item.selectable,
-      getChildren: item => item.items || []
+      getKey: item => item.id,
+      getChildren: item => item.children || [],
+      isItemSelectable: item => item.selectable
     });
 
     const exampleModule =  angular.module('Example.data-list', [RingDataList]);

components/data-list/data-list.examples.js

@@ -8,48 +8,42 @@ import DataList from './data-list';
 import Selection from './selection';
 import mock, {moreItems} from './data-list.mock';
 
-import {moreLessButtonStates} from './item';
+import {moreLessStates} from './types';
 
 class DataListDemo extends PureComponent {
   expandedItems = new Set();
-  isItemCollapsible = item => item.collapsible && item.items && item.id > 10;
+  moreExpandedItems = new Set();
+
+  isItemCollapsible = item => item.collapsible && item.children && item.id > 10;
   isItemCollapsed = item => !this.expandedItems.has(item.id);
 
+  getKey = item => item.id;
+
   getChildren = item => {
     const collapsible = this.isItemCollapsible(item);
     const collapsed = this.isItemCollapsed(item);
-    return ((collapsible && collapsed) || !item.items) ? [] : item.items;
+    return ((collapsible && collapsed) || !item.children) ? [] : item.children;
   };
 
+  isItemSelectable = item => item.selectable;
+
   state = {
     data: mock,
     selection: new Selection({
       data: mock,
-      isItemSelectable: item => item.selectable,
-      getChildren: this.getChildren
+      getKey: this.getKey,
+      getChildren: this.getChildren,
+      isItemSelectable: this.isItemSelectable
     })
   };
 
-  moreExpandebleItems = new Set([mock[0].id]);
-  moreExpandedItems = new Set();
-
-  itemMoreLessState = item => {
-    if (this.moreExpandebleItems.has(item.id)) {
-      return this.moreExpandedItems.has(item.id)
-        ? moreLessButtonStates.LESS
-        : moreLessButtonStates.MORE;
-    } else {
-      return moreLessButtonStates.UNUSED;
-    }
-  };
-
   onItemMoreLess = (item, more) => {
     if (more) {
       this.moreExpandedItems.add(item.id);
-      item.items = item.items.concat([...moreItems]);
+      item.children = item.children.concat([...moreItems]);
     } else {
       this.moreExpandedItems.delete(item.id);
-      item.items = item.items.slice(0, item.items.length - moreItems.length);
+      item.children = item.children.slice(0, item.children.length - moreItems.length);
     }
 
     this.setState({data: [...this.state.data]});
@@ -60,10 +54,6 @@ class DataListDemo extends PureComponent {
   };
 
   itemFormatter = item => {
-    const items = this.getChildren(item);
-    const collapsible = this.isItemCollapsible(item);
-    const collapsed = this.isItemCollapsed(item);
-
     const onCollapse = () => {
       this.expandedItems.delete(item.id);
       this.setState({data: [...this.state.data]});
@@ -74,11 +64,23 @@ class DataListDemo extends PureComponent {
       this.setState({data: [...this.state.data]});
     };
 
+    let moreLessState = moreLessStates.UNUSED;
+    if (item.moreLess) {
+      if (this.moreExpandedItems.has(item.id)) {
+        moreLessState = moreLessStates.LESS;
+      } else {
+        moreLessState = moreLessStates.MORE;
+      }
+    }
+
     return {
-      ...item,
-      items,
-      collapsible,
-      collapsed,
+      key: this.getKey(item),
+      title: item.title,
+      children: this.getChildren(item),
+      selectable: this.isItemSelectable(item),
+      collapsible: this.isItemCollapsible(item),
+      collapsed: this.isItemCollapsed(item),
+      moreLessState,
       onCollapse,
       onExpand
     };
@@ -88,13 +90,10 @@ class DataListDemo extends PureComponent {
     return (
       <DataList
         data={this.state.data}
+        itemFormatter={this.itemFormatter}
         selection={this.state.selection}
         onSelect={this.onSelect}
-
-        itemFormatter={this.itemFormatter}
-
         onItemMoreLess={this.onItemMoreLess}
-        itemMoreLessState={this.itemMoreLessState}
       />
     );
   }

components/data-list/data-list.examples2.js

@@ -6,7 +6,7 @@ import DataList from './data-list';
 import Selection from './selection';
 import mock, {moreItems} from './data-list.mock';
 
-import {moreLessButtonStates} from './item';
+import {moreLessStates} from './types';
 
 class DataListDemo extends PureComponent {
   state = {
@@ -35,10 +35,10 @@ class DataListDemo extends PureComponent {
   itemMoreLessState = item => {
     if (this.moreExpandebleItems.has(item.id)) {
       return this.moreExpandedItems.has(item.id)
-        ? moreLessButtonStates.LESS
-        : moreLessButtonStates.MORE;
+        ? moreLessStates.LESS
+        : moreLessStates.MORE;
     } else {
-      return moreLessButtonStates.UNUSED;
+      return moreLessStates.UNUSED;
     }
   };
 

components/data-list/data-list.js

@@ -20,22 +20,16 @@ import Shortcuts from '../shortcuts/shortcuts';
 import Loader from '../loader/loader';
 
 import Selection from './selection';
-import Item, {moreLessButtonStates} from './item';
+import Item from './item';
 import type {ItemType} from './types';
 import styles from './data-list.css';
 
-import type {MoreLessButtonState} from './item';
-
 type Props = {
   className?: string,
   data: any[],
-  loading: boolean,
-
   itemFormatter: (item: any) => ItemType,
-
+  loading: boolean,
   onItemMoreLess: (item?: ItemType, more?: boolean) => void,
-  itemMoreLessState: (item?: ItemType) => MoreLessButtonState,
-
   remoteSelection: boolean,
 
   // selectionShortcutsHOC
@@ -54,22 +48,22 @@ type Props = {
 class DataList extends PureComponent {
   static propTypes = {
     data: PropTypes.array.isRequired,
-    loading: PropTypes.bool,
-
     itemFormatter: PropTypes.func.isRequired,
-
+    loading: PropTypes.bool,
     onItemMoreLess: PropTypes.func,
-    itemMoreLessState: PropTypes.func,
-
     remoteSelection: PropTypes.bool
   };
 
+  static childContextTypes = {
+    itemFormatter: PropTypes.func.isRequired,
+    onSelect: PropTypes.func,
+    onFocus: PropTypes.func,
+    onItemMoreLess: PropTypes.func
+  };
+
   static defaultProps = {
     loading: false,
-
     onItemMoreLess: () => {},
-    itemMoreLessState: () => moreLessButtonStates.UNUSED,
-
     remoteSelection: false
   };
 
@@ -78,6 +72,17 @@ class DataList extends PureComponent {
     shortcutsScope: getUID('ring-data-list-')
   };
 
+  getChildContext() {
+    const {
+      itemFormatter, onSelect, onItemMoreLess
+    } = this.props;
+
+    return {
+      itemFormatter, onSelect, onItemMoreLess,
+      onFocus: this.onItemFocus
+    };
+  }
+
   componentWillReceiveProps(nextProps) {
     const {data, selection, onSelect, selectable} = this.props;
 
@@ -119,8 +124,10 @@ class DataList extends PureComponent {
     const item = itemFormatter(selection.getFocused());
 
     if (item.collapsed) {
-      item.onExpand();
-    } else {
+      if (item.onExpand) {
+        item.onExpand();
+      }
+    } else if (item.onCollapse) {
       item.onCollapse();
     }
   }
@@ -156,35 +163,33 @@ class DataList extends PureComponent {
         <ul className={classes}>
           {data.map(model => {
             const item = itemFormatter(model);
-            const {id, title, items} = item;
 
-            const showMoreLessButton = this.props.itemMoreLessState(item);
+            const {
+              key, title, children, selectable,
+              collapsible, collapsed, onCollapse, onExpand,
+              moreLessState
+            } = item;
 
             return (
               <Item
-                key={id}
-                item={model}
+                key={key}
+                model={model}
                 title={title}
-                items={items}
-
-                itemFormatter={itemFormatter}
+                items={children}
 
-                collapsible={item.collapsible}
-                collapsed={item.collapsed}
-                onCollapse={item.onCollapse}
-                onExpand={item.onExpand}
+                collapsible={collapsible}
+                collapsed={collapsed}
+                onCollapse={onCollapse}
+                onExpand={onExpand}
 
                 focused={selection.isFocused(model)}
                 showFocus={selection.isFocused(model)}
-                onFocus={this.onItemFocus}
 
                 selection={selection}
-                selectable={item.selectable}
+                selectable={selectable}
                 selected={selection.isSelected(model)}
-                onSelect={this.onItemSelect}
 
-                showMoreLessButton={showMoreLessButton}
-                onItemMoreLess={this.props.onItemMoreLess}
+                moreLessState={moreLessState}
               />
             );
           })}

components/data-list/data-list.mock.js

@@ -12,13 +12,14 @@ export default [
     title: <span><strong>Assigner</strong> in 60 projects</span>,
     collapsible: true,
     selectable: true,
-    items: [
+    moreLess: true,
+    children: [
       {
         id: 11,
         title: '6 projects: as a member of jetbrains-team',
         collapsible: true,
         selectable: true,
-        items: [
+        children: [
           {
             id: 111,
             selectable: true,
@@ -58,7 +59,7 @@ export default [
     title: <span><strong>Code Reviewer</strong> in 5 projects</span>,
     selectable: true,
     collapsible: true,
-    items: [
+    children: [
       {
         id: 21,
         selectable: true,
@@ -75,7 +76,7 @@ export default [
         id: 22,
         title: '6 projects: as a member of jetbrains-team',
         collapsible: true,
-        items: [
+        children: [
           {
             id: 221,
             collapsible: true,
@@ -126,7 +127,7 @@ export default [
     title: <span><strong>Code Viewer</strong> in 5 projects</span>,
     selectable: true,
     collapsible: true,
-    items: [
+    children: [
       {
         id: 31,
         collapsible: true,
@@ -155,7 +156,7 @@ export default [
     id: 4,
     title: <span><strong>Commenter</strong> in 12 projects</span>,
     collapsible: true,
-    items: [
+    children: [
       {
         id: 41,
         collapsible: true,
@@ -190,7 +191,7 @@ export default [
         <Badge>team role</Badge>
       </span>
     ),
-    items: [
+    children: [
       {
         id: 51,
         selectable: true,