react-bootstrap-front 3.7.8 → 3.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.7.8",
+  "version": "3.9.2",
   "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/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,17 +194,17 @@ 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>
-          <Col size={{ xs: 10, sm: 16, md: 10, lg: 14 }}>
+          <Col size={{ xs: 10, sm: 10, md: 10, lg: 14 }}>
             <div className="pl-2" style={{ display: 'inline-block', float: 'left' }}>
               <span style={iconstyle} className={classnames('no-selector', 'text-' + this.props.headerTextTheme)}>
                 {this.props.icon && this.props.icon}
               </span>
             </div>
-            <div className="pl-2" style={{ display: 'inline-block', float: 'left' }}>
+            <div className="pl-2 col-xs-none col-md-flex" style={{ display: 'inline-block', float: 'left' }}>
               <span style={titlestyle} className={classnames('no-selector', 'text-' + this.props.headerTextTheme)}>
                 {this.props.title}
               </span>
@@ -223,7 +223,7 @@ export default class DefaultHeader extends Component {
               </div>
             )}
           </Col>
-          <Col size={{ xs: 0, md: 12, lg: 8 }}>
+          <Col size={{ xs: 10, sm: 12, md: 12, lg: 8 }}>
             <Highlight
               className="w-100"
               style={sortStyle}
@@ -234,7 +234,7 @@ export default class DefaultHeader extends Component {
               {this.props.quickSearch}
             </Highlight>
           </Col>
-          <Col size={{ xs: 16, sm: 20, md: 14, lg: 14 }} className="text-right">
+          <Col size={{ xs: 16, sm: 14, md: 14, lg: 14 }} className="text-right">
             <ul className="nav justify-content-end rbf-list-default-header-nav">
               <li className="nav-item">
                 <Highlight

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/list/MobileList.jsx

@@ -101,7 +101,7 @@ export default class MobileList extends Component {
         col.card.position = 99;
       }
     });
-    dispCols = dispCols.filter(col => !col.hidden);
+    //dispCols = dispCols.filter(col => !col.hidden);
     let mobileCols = dispCols.filter(col => col.card);
     mobileCols.sort((a, b) => {
       if ((a.card.position && b.card.position && a.card.position > b.card.position) || !a.card.position) {

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;
+  }
 }

package/src/features/page/MobilePage.jsx

@@ -113,7 +113,7 @@ export default class MobilePage extends Component {
     return (
       <div id="page-root" className="full-page">
         <Container size="xs" className="display-mobile">
-          <CSSTransition in={this.state.menuUserOpen} timeout={duration}>
+          <CSSTransition in={this.state.menuUserOpen && this.props.authenticated} timeout={duration}>
             {state => (
               <div>
                 <div className="bg-white" style={{ ...userMenuDefaultStyles, ...userMenuStyles[state] }}>

package/src/styles/mixins/container.scss

@@ -44,6 +44,26 @@
   @return $not;
 }
 
+@function container-col-show-not($start, $end, $breakpoints: $container-breakpoints, $prefix: 'col') {
+  $not: '';
+  $started: 0;
+  @each $breakpoint in map-keys($breakpoints) {
+    @if $breakpoint == $start {
+      $started: 1;
+    }
+    @if $breakpoint == $end {
+      $started: 2;
+    }
+    @if $started >= 1 {
+      $not: $not + ':not([class*=\'#{$prefix}-#{$breakpoint}-flex\']):not([class*=\'#{$prefix}-#{$breakpoint}-block\'])';
+      @if $started == 2 {
+        @return $not;
+      }
+    }
+  }
+  @return $not;
+}
+
 @function container-d-none-not($start, $end, $breakpoints: $container-breakpoints, $prefix: 'd') {
   $not: '';
   $started: 0;
@@ -77,8 +97,9 @@
 
         $infix: container-infix($breakpoint, $breakpoints);
         $notCol: container-col-none-not($breakpoint, $current, $breakpoints);
+        $notShow: container-col-show-not($breakpoint, $current, $breakpoints);
         $notD: container-d-none-not($breakpoint, $current, $breakpoints);
-        .col#{$infix}-none#{$notCol} {
+        .col#{$infix}-none#{$notCol}#{$notShow} {
           display: none !important;
         }
         .col#{$infix}-flex {

package/.project

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>react-bootstrap-front</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.wst.validation.validationbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
-	</natures>
-</projectDescription>