react-bootstrap-front 3.7.5 → 3.8.0

package/package.json

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

package/src/features/advanced/DefaultQuickSearch.js

@@ -8,10 +8,14 @@ export default class DefaultQuickSearch extends Component {
     name: PropTypes.string.isRequired,
     label: PropTypes.string,
     icon: PropTypes.element.isRequired,
+    plus: PropTypes.element,
+    reset: PropTypes.element,
   };
 
   static defaultProps = {
     label: '',
+    plus: null,
+    reset: null,
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -38,11 +42,11 @@ export default class DefaultQuickSearch extends Component {
     this.setState({ search: event.target.value });
   }
 
-  onSubmit(event) {
+  onSubmit(event, mode) {
     if (event) {
       event.preventDefault();
     }
-    this.props.onSubmit(this.state.search);
+    this.props.onSubmit(this.state.search, mode);
   }
 
   render() {
@@ -58,9 +62,19 @@ export default class DefaultQuickSearch extends Component {
             onChange={this.onChange}
           />
           <div className="input-group-append">
-            <button type="button" className="btn btn-outline-secondary bg-light" onClick={this.onSubmit}>
+            <button type="button" title="Recherche simple" className="btn btn-outline-secondary bg-light" onClick={(ev) => this.onSubmit(ev, "simple")}>
               {this.props.icon}
             </button>
+            {this.props.plus &&
+              <button type="button" title="Recherche mois stricte" className="btn btn-outline-secondary bg-light" onClick={(ev) => this.onSubmit(ev, "plus")}>
+                {this.props.plus}
+              </button>
+            }
+            {this.props.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>
+            }
           </div>
         </div>
       </form>

package/src/features/advanced/DropdownWrapper.js

@@ -39,16 +39,13 @@ export default class DropdownWrapper extends Component {
   }
 
   render() {
+    const clonedTrigger = React.cloneElement(
+      this.props.trigger,
+      {ref: this.state.ref, onClick: this.onClick, title: this.props.tooltip}
+    )
     return (
       <>
-        <div
-          ref={this.state.ref}
-          className={classnames('advanced-dropdown-wrapper', this.props.className)}
-          onClick={this.onClick}
-          title={this.props.tooltip}
-        >
-          {this.props.trigger}
-        </div>
+        {clonedTrigger}
         {this.state.open && (
           <Dropdown align={this.props.align} myRef={this.state.ref} onClose={this.onClose}>
             <div onClick={this.onClose}>{this.props.children}</div>

package/src/features/advanced/ResponsiveModalInner.scss

@@ -33,7 +33,6 @@
         margin-left: 20px;
         margin-right: 10px;
         padding: 2px;
-        background-color: theme-color('secondary');
       }
       .nav-link-inner-btn:hover {
         background-color: theme-color('secondary-light');

package/src/features/basic/CalmButton.js

@@ -99,13 +99,13 @@ export default class CalmButton extends Component {
                 {this.props.options.map(option => {
                   return (
                     <DropdownMenuOption
-                      key={`text-${option.id}`}
+                      key={`text-${option.value}`}
                       label={option.label}
                       onClick={ev => {
                         if (ev) {
                           ev.preventDefault();
                         }
-                        option.onClick();
+                        this.props.onClick(option.value);
                         this.onOptionsMenuClose();
                       }}
                     />

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/{InputColorPicker.js → ColorPicker.js}

@@ -35,12 +35,12 @@ export default class ColorPicker extends Component {
         type="button"
         className={classnames(this.props.className, 'btn btn-light')}
       >
-        'Color'
+        Color
       </button>
     );
     const { color } = this.props.currentState;
     return (
-      <DropdownWrapper trigger={trigger} className="" align="bottom-right" myRef={this.state.myRef}>
+      <DropdownWrapper trigger={trigger} className="rbf-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
         <DropdownMenu>
           <ChromePicker color={color} onChangeComplete={this.onChange} />
         </DropdownMenu>

package/src/features/draft/FontSize.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { DropdownWrapper } from '../advanced'
+import { DropdownMenu, DropdownMenuOption } from '../basic';
+
+export default class FontSize extends Component {
+  static propTypes = {
+    expanded: PropTypes.bool,
+    onExpandEvent: PropTypes.func,
+    onChange: PropTypes.func,
+    currentState: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      myRef: React.createRef()
+    }
+  }
+
+  stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  onChange = (color) => {
+    const { onChange } = this.props;
+    onChange('color', color.hex);
+  }
+
+  render() {
+    const trigger = (
+      <button
+        type="button"
+        className={classnames(this.props.className, 'btn btn-light')}
+      >
+        Size
+      </button>
+    );
+    const {
+        config: { icon, className, dropdownClassName, options, title },
+        onChange,
+        expanded,
+        doCollapse,
+        onExpandEvent,
+        doExpand,
+        translations,
+      } = this.props;
+    let { currentState: { fontSize: currentFontSize } } = this.props;
+    let { defaultFontSize } = this.state;
+    defaultFontSize = Number(defaultFontSize);
+    currentFontSize = currentFontSize ||
+    (options && options.indexOf(defaultFontSize) >= 0 && defaultFontSize);
+    return (
+      <DropdownWrapper trigger={trigger} className="rbf-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
+        <DropdownMenu>
+         {options.map((size, index) =>
+           (<DropdownMenuOption
+             className="rdw-fontsize-option"
+             active={currentFontSize === size}
+             onClick={() => onChange(size)}
+             key={index}
+           >
+             {size}
+           </DropdownMenuOption>),
+         )}
+        </DropdownMenu>
+      </DropdownWrapper>
+    );
+  }
+}

package/src/features/draft/Inline.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+export default class Inline extends Component {
+  static propTypes = {
+    expanded: PropTypes.bool,
+    onExpandEvent: PropTypes.func,
+    onChange: PropTypes.func,
+    currentState: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      myRef: React.createRef()
+    }
+  }
+  render() {
+    const { config, currentState, onChange, translations } = this.props;
+    return (
+      <div className={classnames('rbf-inline-wrapper btn-group pl-2', config.className)} aria-label="rdw-inline-control">
+        {
+          config.options
+            .map((style, index) =>
+              (<button
+                key={index}
+                onClick={() => onChange(style)}
+                className={classnames("btn btn-light", config[style].className, (currentState[style] === true ||
+                    (style === 'MONOSPACE' && currentState.CODE)) && "active")}
+                title={config[style].title || translations[`components.controls.inline.${style}`]}
+              >
+                <img
+                  alt=""
+                  src={config[style].icon}
+                />
+              </button>),
+            )
+        }
+      </div>
+    );
+  }
+}

package/src/features/draft/InputHtml.js

@@ -5,7 +5,7 @@ import { EditorState, Modifier } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { convertToHTML, convertFromHTML } from 'draft-convert';
 import { htmlToString } from '../helpers';
-import { InputColorPicker } from './';
+import { ColorPicker, Inline, FontSize } from './';
 import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
 const myStyle = {
@@ -249,13 +249,15 @@ export default class InputTextarea extends Component {
       options: ['inline','fontSize','colorPicker'],
       inline: {
         inDropdown: false,
+        component: Inline,
         options: ['bold', 'italic', 'underline', 'superscript', 'subscript'],
       },
       fontSize: {
+        component: FontSize,
         options: [7, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
       },
       colorPicker: {
-        component: InputColorPicker
+        component: ColorPicker
       }
     };
     return (

package/src/features/draft/InputHtml.scss

@@ -1,3 +1,8 @@
 .public-DraftStyleDefault-block {
     margin: 0;
 }
+
+.rdw-editor-toolbar {
+  padding: 5px;
+  border: 1px solid theme-color('secondary-light');
+}

package/src/features/draft/index.js

@@ -1,2 +1,4 @@
-export { default as InputColorPicker } from "./InputColorPicker";
+export { default as ColorPicker } from "./ColorPicker";
+export { default as FontSize } from "./FontSize";
+export { default as Inline } from "./Inline";
 export { default as InputHtml } from "./InputHtml";

package/src/features/draft/style.scss

@@ -1 +1,4 @@
-@import './InputColorPicker';
+@import './ColorPicker';
+@import './FontSize';
+@import './Inline';
+@import './InputHtml';

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/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

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