react-bootstrap-front 3.7.8 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.7.8",
+  "version": "3.8.0",
   "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/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/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,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 &&
@@ -223,7 +225,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 +367,7 @@ export default class FilterBuilder extends Component {
                                       this.props.onRemove(ev);
                                     }}
                                   >
-                                    {this.props.clearIcon}
+                                    {this.props.delIcon}
                                   </button>
                                 </div>
                             </div>
@@ -411,7 +413,7 @@ export default class FilterBuilder extends Component {
                                 this.props.onChange(ev);
                               }}
                             >
-                              {this.props.clearIcon}
+                              {this.props.delIcon}
                             </button>
                             <button
                               type="button"
@@ -466,7 +468,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

@@ -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"

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