react-bootstrap-front 3.7.7 → 3.9.1

package/package.json

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

package/src/features/advanced/DefaultQuickSearch.js

@@ -71,7 +71,7 @@ export default class DefaultQuickSearch extends Component {
               </button>
             }
             {this.props.reset &&
-              <button type="button" title="Initialiser la recherche" className="btn btn-outline-secondary bg-light" onClick={(ev) => this.onSubmit(ev, "reset")}>
+              <button type="button" title="Initialiser la recherche" className="btn btn-outline-secondary bg-light text-warning" onClick={(ev) => this.onSubmit(ev, "reset")}>
                 {this.props.reset}
               </button>
             }

package/src/features/advanced/ResponsiveModalInner.js

@@ -298,7 +298,7 @@ export default class ResponsiveModalInner extends Component {
                             </div>
                           }
                         </div>
-                        {this.props.buttons && (
+                        {(this.props.buttons || this.props.help || this.props.saving) && (
                           <div className={classnames('modal-footer', this.props.modalClassName)}>
                             {(this.props.help || this.props.saving ) &&
                               <div className="modal-left-buttons">

package/src/features/basic/InputJson.js

@@ -8,7 +8,6 @@ import { getFieldId } from '../helpers';
 export const InputJson = props => {
   let myId = getFieldId(props.name, props.id);
   const data = JSON.parse(props.value) || {};
-  console.log(data, props.value);
   return (
     <InputGroup {...props} id={myId}>
       {props.prepend && props.prepend !== '' && (

package/src/features/basic/InputMonetary.js

@@ -12,7 +12,7 @@ export default function InputMonetary(props) {
     const rnd = getRandomInt(10000, 99999);
     myId = `${myId}-${rnd}`;
   }
-  const value = props.value || 0;
+  const value = props.value || (props.allowNull ? '' : 0);
   return (
     <InputGroup {...props} id={myId}>
       {props.prepend && props.prepend !== '' && (
@@ -94,6 +94,7 @@ export default function InputMonetary(props) {
 }
 
 InputMonetary.propTypes = {
+  allowNull: PropTypes.bool,
   autoComplete: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.element,
@@ -125,6 +126,7 @@ InputMonetary.propTypes = {
 };
 
 InputMonetary.defaultProps = {
+  allowNull: false,
   autoComplete: 'off',
   disabled: false,
   error: false,

package/src/features/draft/InputHtml.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { EditorState, Modifier } from 'draft-js';
+import { EditorState, Modifier, CompositeDecorator } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { convertToHTML, convertFromHTML } from 'draft-convert';
 import { htmlToString } from '../helpers';
@@ -52,6 +52,9 @@ const toHtml = {
     if (entity.type === 'LINK') {
       return <a href={entity.data.url}>{originalText}</a>;
     }
+    if (entity.type === 'MAILMERGE') {
+      return <span data-mailmerge="{originalText}">{originalText}</span>;
+    }
     return originalText;
   },
 };
@@ -105,6 +108,9 @@ const fromHtml = {
     if (nodeName === 'a') {
       return createEntity('LINK', 'MUTABLE', { url: node.href });
     }
+    if (nodeName === 'span' && node.dataset && node.dataset.mailmerge) {
+      return createEntity('MAILMERGE', 'IMMUTABLE', { mailmerge: node.dataset.mailmerge });
+    }
   },
   textToEntity: (text, createEntity) => {
     const result = [];
@@ -129,6 +135,27 @@ const fromHtml = {
   },
 };
 
+function findMailmergeEntities(contentBlock, callback, contentState) {
+  console.log(callback);
+  contentBlock.findEntityRanges(
+    (character) => {
+      const entityKey = character.getEntity();
+      const found = entityKey !== null && contentState.getEntity(entityKey).getType() === 'MAILMERGE';
+      return found;
+    },
+    callback
+  );
+}
+
+const Mailmerge = (props) => {
+  const {mailmerge} = props.contentState.getEntity(props.entityKey).getData();
+  return (
+    <a href={mailmerge}>
+      {props.children}
+    </a>
+  );
+};
+
 export default class InputTextarea extends Component {
   static propTypes = {
     id: PropTypes.string,
@@ -169,9 +196,15 @@ export default class InputTextarea extends Component {
     } else {
       content = '<p/>';
     }
+    const decorator = new CompositeDecorator([
+      {
+        strategy: findMailmergeEntities,
+        component: Mailmerge,
+      },
+    ]);
     const value = convertFromHTML(fromHtml)(content);
     this.state = {
-      editorState: EditorState.createWithContent(value),
+      editorState: EditorState.createWithContent(value, decorator),
       toolbar: false,
     };
     this.onEditorStateChange = this.onEditorStateChange.bind(this);

package/src/features/draft/InputHtml.scss

@@ -6,3 +6,7 @@
   padding: 5px;
   border: 1px solid theme-color('secondary-light');
 }
+
+.rbf-mailmerge {
+  color: #105a1c;
+}

package/src/features/filter/DefaultPanel.jsx

@@ -73,6 +73,7 @@ export default class DefaultPanel extends Component {
     validPanelIcon: PropTypes.element.isRequired,
     cancelPanelIcon: PropTypes.element.isRequired,
     onToggleFilter: PropTypes.func.isRequired,
+    clearIcon: PropTypes.element.isRequired,
     sortNoneIcon: PropTypes.element,
     sortUpIcon: PropTypes.element,
     sortDownIcon: PropTypes.element,
@@ -178,7 +179,11 @@ export default class DefaultPanel extends Component {
     let { filter } = this.state;
     const col = event.target.name;
     const oper = event.target.value;
-    filter.updateFilterOperator(col.replace('oper-', ''), oper);
+    if (oper !== '') {
+      filter.updateFilterOperator(col.replace('oper-', ''), oper);
+    } else {
+      filter.removeFilter(col.replace('oper-', ''));
+    }
     this.setState({ filter, local: true });
   }
 
@@ -253,6 +258,11 @@ export default class DefaultPanel extends Component {
                 {this.props.cancelPanelIcon}
               </button>
             )}
+            {this.props.onClearFilter &&
+              <button className="btn btn-warning text-light" onClick={this.props.onClearFilter}>
+                {this.props.clearIcon}
+              </button>
+            }
             <button className="btn btn-primary text-light" onClick={this.onValid}>
               {this.props.validPanelIcon}
             </button>

package/src/features/filter/Filter.js

@@ -192,7 +192,11 @@ export default class Filter {
   removeFilter(name, action = 'default') {
     let elem = this.data.filters.find(elt => elt.getFilterName() === name);
     if (elem) {
-      elem.removeFilterCrit(action);
+      if (action === 'default') {
+        this.data.filters = this.data.filters.filter(elt => elt.getFilterName() !== name)
+      } else {
+        elem.removeFilterCrit(action);
+      }
     }
   }
 

package/src/features/filter/FilterBuilder.jsx

@@ -27,33 +27,33 @@ import { InputAutocomplete, FilterHeader } from './';
 const getOptionsForType = (type, update = false) => {
   let options = [
     {value: '', label: ''},
-    {value: FILTER_OPER_EQUAL, label: '='},
-    {value: FILTER_OPER_NOT_EQUAL, label: '!='},
-    {value: FILTER_OPER_EMPTY, label: 'ø'},
-    {value: FILTER_OPER_NOT_EMPTY, label: '!ø'},
+    {value: FILTER_OPER_EQUAL, label: 'Est égal à'},
+    {value: FILTER_OPER_NOT_EQUAL, label: 'Est différenrt de'},
+    {value: FILTER_OPER_EMPTY, label: 'Est vide'},
+    {value: FILTER_OPER_NOT_EMPTY, label: 'N\'est pas vide'},
   ];
   if (type !== 'date' && type !== 'datetime' && type !== 'picker' && type !== 'select') {
     options.push(
-      {value: FILTER_OPER_LIKE, label: '*'},
-      {value: FILTER_OPER_NOT_LIKE, label: '!*'},
-      {value: FILTER_OPER_START_WITH, label: '^*'},
-      {value: FILTER_OPER_END_WITH, label: '*$'},
-      {value: FILTER_OPER_SOUND_LIKE, label: '~'}
+      {value: FILTER_OPER_LIKE, label: 'Contient'},
+      {value: FILTER_OPER_NOT_LIKE, label: 'Ne contient pas'},
+      {value: FILTER_OPER_START_WITH, label: 'Commence par'},
+      {value: FILTER_OPER_END_WITH, label: 'Termine par'},
+      {value: FILTER_OPER_SOUND_LIKE, label: 'Ressemble à'}
     );
   }
   if (type !== 'picker' && type !== 'select') {
     options.push(
-      {value: FILTER_OPER_GREATER, label: '>'},
-      {value: FILTER_OPER_GREATER_OR_EQUAL, label: '>='},
-      {value: FILTER_OPER_GREATER_OR_EQUAL_OR_NULL, label: '>=ø'},
-      {value: FILTER_OPER_LOWER, label: '<'},
-      {value: FILTER_OPER_LOWER_OR_EQUAL, label: '<='},
-      {value: FILTER_OPER_LOWER_OR_EQUAL_OR_NULL, label: '<=ø'},
+      {value: FILTER_OPER_GREATER, label: 'Supérieur à'},
+      {value: FILTER_OPER_GREATER_OR_EQUAL, label: 'Supérieur ou égal à'},
+      {value: FILTER_OPER_GREATER_OR_EQUAL_OR_NULL, label: 'Vide ou supérieur et égal à'},
+      {value: FILTER_OPER_LOWER, label: 'Inférieur à'},
+      {value: FILTER_OPER_LOWER_OR_EQUAL, label: 'Inférieur ou égal à'},
+      {value: FILTER_OPER_LOWER_OR_EQUAL_OR_NULL, label: 'Vide ou inférieur et égal à'},
     );
   };
-  if (update && (type === 'date' || type === 'datetime' || type === 'monetary')) {
+  if (update && (type === 'date' || type === 'datetime' || type === 'monetary' || type === 'number')) {
     options.push(
-      {value: FILTER_OPER_BETWEEN, label: '<.>'}
+      {value: FILTER_OPER_BETWEEN, label: 'Compris entre'}
     );
   }
   return options;
@@ -71,7 +71,6 @@ export default class FilterBuilder extends Component {
     delIcon: PropTypes.element.isRequired,
     calIcon: PropTypes.element.isRequired,
     className: PropTypes.string,
-    clearIcon: PropTypes.element.isRequired,
     withHeader: PropTypes.bool,
   };
   static defaultProps = {
@@ -118,6 +117,9 @@ export default class FilterBuilder extends Component {
                 colOper = FILTER_OPER_EQUAL;
               }
             }
+            if (value === null) {
+              value = '';
+            }
             const prepend = (
               <select
                 id={`oper-${colFilterable}`}
@@ -155,7 +157,7 @@ export default class FilterBuilder extends Component {
                       display={col.filterable.display}
                       value={value}
                       size={this.props.size}
-                      clearIcon={this.props.clearIcon}
+                      clearIcon={this.props.delIcon}
                       onSearch={col.filterable.onSearch}
                       onSelect={this.props.onChange}
                     />
@@ -176,7 +178,7 @@ export default class FilterBuilder extends Component {
                         value={value}
                         onChange={this.props.onChange}
                         calIcon={this.props.calIcon}
-                        delIcon={this.props.clearIcon}
+                        delIcon={this.props.delIcon}
                       />
                     </div>
                     {colOper === FILTER_OPER_BETWEEN && this.props.onUpdate &&
@@ -189,7 +191,7 @@ export default class FilterBuilder extends Component {
                           value={elem.getFilterCrit('between')}
                           onChange={this.props.onUpdate}
                           calIcon={this.props.calIcon}
-                          delIcon={this.props.clearIcon}
+                          delIcon={this.props.delIcon}
                         />
                       </div>
                     }
@@ -210,7 +212,8 @@ export default class FilterBuilder extends Component {
                           value={value}
                           onChange={this.props.onChange}
                           calIcon={this.props.calIcon}
-                          delIcon={this.props.clearIcon}
+                          delIcon={this.props.delIcon}
+                          allowNull={true}
                         />
                       </div>
                       {colOper === FILTER_OPER_BETWEEN && this.props.onUpdate &&
@@ -223,7 +226,7 @@ export default class FilterBuilder extends Component {
                             value={elem.getFilterCrit('between')}
                             onChange={this.props.onUpdate}
                             calIcon={this.props.calIcon}
-                            delIcon={this.props.clearIcon}
+                            delIcon={this.props.delIcon}
                           />
                         </div>
                       }
@@ -365,7 +368,7 @@ export default class FilterBuilder extends Component {
                                       this.props.onRemove(ev);
                                     }}
                                   >
-                                    {this.props.clearIcon}
+                                    {this.props.delIcon}
                                   </button>
                                 </div>
                             </div>
@@ -411,7 +414,7 @@ export default class FilterBuilder extends Component {
                                 this.props.onChange(ev);
                               }}
                             >
-                              {this.props.clearIcon}
+                              {this.props.delIcon}
                             </button>
                             <button
                               type="button"
@@ -466,7 +469,7 @@ export default class FilterBuilder extends Component {
                                       this.props.onRemove(ev);
                                     }}
                                   >
-                                    {this.props.clearIcon}
+                                    {this.props.delIcon}
                                   </button>
                                 </div>
                             </div>

package/src/features/filter/FilterBuilder.scss

@@ -1,5 +1,6 @@
 .filter-filter-builder {
   .input-group-prepend {
+    width: 180px;
     label, select, span {
       height: 100%;
       background-color: theme-color('light') !important;
@@ -9,6 +10,8 @@
       min-width: 50px;
       select{
         padding: 0px;
+        padding-right: 20px;
+        color: theme-color('dark') !important;
       }
     }
   }

package/src/features/filter/FilterHeader.jsx

@@ -40,7 +40,7 @@ export default function FilterHeader(props) {
             borderColor="secondary-light"
           />
         </div>
-        <div className="col-xxs-w16 form-group">
+        <div className="col-xxs-none form-group">
           <label htmlFor="filter-oper" className="text-secondary">
             <span>Condition</span>
           </label>

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';

package/src/features/list/ActionButton.js

@@ -124,7 +124,7 @@ export default class ActionButton extends Component {
                     if (elem) {
                       return (
                         <DropdownMenuOption
-                          key={`elem-${action.label}`}
+                          key={`elem-${elem.label}`}
                           label={elem.label}
                           onClick={ev => {
                             if (ev) {
@@ -149,7 +149,7 @@ export default class ActionButton extends Component {
       );
     } else {
       if (this.state.options && Array.isArray(this.state.options)) {
-        if (this.state.options.length > 1) {
+        if (this.state.options.length >= 1) {
           const trigger = (
             <button
               type="button"
@@ -166,7 +166,7 @@ export default class ActionButton extends Component {
                 {this.state.options.map(elem => {
                   return (
                     <DropdownMenuOption
-                      key={`elem-${action.label}`}
+                      key={`elem-${elem.label}`}
                       label={elem.label}
                       onClick={ev => {
                         if (ev) {

package/src/features/list/DefaultHeader.jsx

@@ -194,7 +194,7 @@ export default class DefaultHeader extends Component {
           'default-list-header text-secondary overflow-hidden',
           this.props.className,
           'bg-' + this.props.headerBackgroundTheme,
-          'text' + this.props.headerTextTheme
+          'text-' + this.props.headerTextTheme
         )}
       >
         <Row>

package/src/features/list/DefaultLine.jsx

@@ -74,7 +74,11 @@ export default class DesktopListLine extends Component {
     }
     this.props.inlineActions.forEach(action => {
       if (action.role === 'MODIFY') {
-        action.onClick(this.props.id);
+        if (action.param === 'object') {
+          action.onClick(this.props.item);
+        } else {
+          action.onClick(this.props.id);
+        }
       }
     });
     return false;

package/src/features/page/DefaultContent.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Row, Col } from '../grid';
 
 const myLocalStyle = {
   position: 'absolute',
@@ -24,7 +25,26 @@ export const DefaultContent = props => {
   }
   return (
     <>
-      {props.header && <div className="rbf-responsive-content-header" style={headerStyle} />}
+      {props.header && 
+        <div className="rbf-responsive-content-header" style={headerStyle}>
+          <div className="default-page-header text-secondary overflow-hidden">
+            <Row>
+              <Col size={{ xsxs: 36 }}>
+                <div className="pl-2" style={{ display: 'inline-block', float: 'left' }}>
+                  <span className={classnames('header-icon', 'no-selector', 'text-' + props.headerTextTheme)}>
+                    {props.icon && props.icon}
+                  </span>
+                </div>
+                <div className="pl-2" style={{ display: 'inline-block', float: 'left' }}>
+                  <span className="header-title">
+                    {props.headerContent}
+                  </span>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      }
       <div style={inlineStyle}>
         <div className="custom-scrollbar" style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
           <div className={classnames(props.className)}>
@@ -40,10 +60,12 @@ DefaultContent.propTypes = {
   className: PropTypes.string,
   children: PropTypes.element,
   header: PropTypes.bool,
+  headerContent: PropTypes.element,
 };
 
 DefaultContent.defaultProps = {
   children: null,
   className: '',
   header: true,
+  headerContent: null,
 };

package/src/features/page/DefaultContent.scss

@@ -1,4 +1,25 @@
 .rbf-responsive-content-header {
-    background-color: theme-color('light');
-    border-bottom: 1px solid theme-color('secondary-light');
+  background-color: theme-color('light');
+  border-bottom: 1px solid theme-color('secondary-light');
+  
+  .default-page-header {
+    line-height: 50px;
+  }
+
+  .header-icon {
+    font-size: 1.1rem;
+    font-weight: bold;
+    padding-left: 5px;
+    padding-right: 10px;
+    display: inline-flex;
+    height: 26px;
+    vertical-align: middle;
+  }
+
+  .header-title {
+    font-size: 1.1rem;
+    font-weight: bold;
+    padding-left: 5px;
+    padding-right: 10px;
+  }
 }