react-bootstrap-front 3.7.7 → 3.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.7.7",
+  "version": "3.7.8",
   "description": "React Bootstrap Components",
   "keywords": [
     "Bootstrap 4",

package/src/features/inline-list/DefaultLineBreak.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+
+export default class DefaultLineBreak extends Component {
+  render() {
+    let rowOddEven = '';
+    if (this.props.counter) {
+      rowOddEven = this.props.counter % 2 === 0 ? 'row-even' : 'row-odd';
+    }
+    return (
+      <div
+        className={classnames("inline-default-list-wrapper row row-line no-gutters", rowOddEven)}
+      >
+        <div class="col col-xs-w36">
+          {this.props.label}
+        </div>
+      </div>
+    );
+  }
+}

package/src/features/inline-list/DefaultList.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DefaultHeader, DefaultLine, DefaultLineAction } from './';
+import { DefaultHeader, DefaultLine, DefaultLineAction, DefaultLineBreak } from './';
 import { rbfIntl } from '../intl';
 
 export const DefaultList = props => {
-  let counter = 1;
+  let counter  = 1;
+  let previous = null;
   return (
     <div className="ui-inline-list-default-list">
       <div className="inline-list">
@@ -12,15 +13,38 @@ export const DefaultList = props => {
         {props.lines && (
           <div className="ui-inline-list-default-list-content">
             {Array.isArray(props.items) &&
-              props.items.map(item => (
-                <DefaultLine
-                  {...props}
-                  key={item.id}
-                  id={item.id}
-                  item={item}
-                  counter={props.oddEven ? counter++ : 0}
-                />
-              ))}
+              props.items.map(item => {
+                let myBreak = false;
+                if (props.breakpoint) {
+                  myBreak = props.breakpoint(previous, item);
+                }
+                previous = item;
+                if (myBreak !== false) {
+                  return (
+                    <>
+                      <DefaultLineBreak label={myBreak} counter={props.oddEven ? counter++ : 0}/>
+                      <DefaultLine
+                      {...props}
+                      key={item.id}
+                      id={item.id}
+                      item={item}
+                      counter={props.oddEven ? counter++ : 0}
+                    />
+                    </>
+                  );
+                } else {
+                  return (
+                    <DefaultLine
+                      {...props}
+                      key={item.id}
+                      id={item.id}
+                      item={item}
+                      counter={props.oddEven ? counter++ : 0}
+                    />
+                  )
+                }
+              })
+            }
           </div>
         )}
         {props.lines &&
@@ -47,6 +71,7 @@ export const DefaultList = props => {
 };
 
 DefaultList.propTypes = {
+  breakpoint: PropTypes.func,
   title: PropTypes.bool,
   lines: PropTypes.bool,
   oddEven: PropTypes.bool,
@@ -54,6 +79,7 @@ DefaultList.propTypes = {
   t: PropTypes.func,
 };
 DefaultList.defaultProps = {
+  breakpoint: false,
   title: true,
   lines: true,
   oddEven: true,

package/src/features/inline-list/index.js

@@ -2,6 +2,7 @@ export * from './ColLink';
 export { default as DefaultLine } from './DefaultLine';
 export * from './InlineEmpty';
 export { default as MobileLineAction } from './MobileLineAction';
+export { default as DefaultLineBreak } from './DefaultLineBreak';
 export { default as DefaultLineAction } from './DefaultLineAction';
 export { default as MobileLineText } from './MobileLineText';
 export * from './ResponsiveInlineList.jsx';

package/src/features/inline-list/style.scss

@@ -4,6 +4,7 @@
 @import './ResponsiveInlineList'; 
 @import './DefaultLine';
 @import './MobileLineAction';
+@import './DefaultLineBreak';
 @import './DefaultLineAction';
 @import './MobileLineText';
 @import './ResponsiveInlineHeader';