react-bootstrap-front 3.7.3 → 3.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.7.3",
+  "version": "3.7.7",
   "description": "React Bootstrap Components",
   "keywords": [
     "Bootstrap 4",
@@ -34,9 +34,6 @@
     "react-router-dom": "^5.0.1"
   },
   "dependencies": {
-    "@aeaton/prosemirror-transformers": "^2.0.2",
-    "@aeaton/react-prosemirror": "^2.0.3",
-    "@aeaton/react-prosemirror-config-default": "^2.0.3",
     "@ericblade/quagga2": "^1.4.1",
     "@popperjs/core": "^2.5.4",
     "autosize": "^4.0.2",
@@ -48,7 +45,7 @@
     "date-fns": "^2.16.1",
     "dom-helpers": "^5.1.0",
     "draft-convert": "^2.1.8",
-    "draft-js": "^0.11.4",
+    "draft-js": "^0.11.2",
     "html-entities": "^1.3.1",
     "html-to-draftjs": "^1.5.0",
     "imask": "^6.0.5",
@@ -63,20 +60,17 @@
     "object-assign": "^4.1.1",
     "object.omit": "^3.0.0",
     "prop-types": "^15.7.2",
-    "prosemirror-model": "^1.13.3",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.18.2",
     "react-app-polyfill": "^2.0.0",
+    "react-color": "^2.19.3",
     "react-countdown-circle-timer": "^2.3.7",
     "react-datepicker": "^2.11.0",
-    "react-draft-wysiwyg": "^1.14.4",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-imask": "^6.0.3",
     "react-intersection-observer": "^8.32.2",
     "react-json-view": "^1.21.3",
     "react-observe-size": "^0.3.0",
     "react-overlays": "^2.0.0-0",
     "react-portal-tooltip": "^2.4.7",
-    "react-prosemirror": "^0.2.1",
     "react-sortable-hoc": "^1.10.1",
     "react-transition-group": "^4.3.0",
     "react-world-flags": "^1.3.0",
@@ -84,8 +78,6 @@
     "redux-actions": "^2.6.1",
     "redux-logger": "^3.0.6",
     "signature_pad": "^3.0.0-beta.4",
-    "slate": "^0.66.5",
-    "slate-react": "^0.69.0",
     "trello-smooth-dnd": "1.0.0",
     "uncontrollable": "^7.0.0"
   },

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" 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.js

@@ -107,11 +107,32 @@ export default class ResponsiveModalInner extends Component {
   }
 
   componentDidMount() {
-    const list = document.getElementsByClassName('modal-opacity');
-    if (list.length <= 1) {
-      this.setState({ opacity: '0.8', show: true });
-    } else {
-      this.setState({ show: true });
+    const backDrops = Array.from(document.getElementsByClassName('modal-opacity'));
+    const elems = backDrops.map(elem => {return {id: elem.id, zIndex: parseFloat(window.getComputedStyle(elem).zIndex)}});
+    elems.forEach(elem => {
+      const el = document.getElementById(elem.id);
+      if (el) {
+        el.style.opacity = 0;
+      }
+    });
+    this.setState({ opacity: '0.8', show: true });
+  }
+
+  componentWillUnmount() {
+    const backDrops = Array.from(document.getElementsByClassName('modal-opacity'));
+    if (Array.isArray(backDrops)) {
+      const elems = backDrops.map(elem => {return {id: elem.id, zIndex: parseFloat(window.getComputedStyle(elem).zIndex)}});
+      elems.pop(); // will be removed...
+      if (elems.length > 0) {
+        elems.sort((a, b) => { return a>b ? 1 : a<b ? -1 : 0 });
+        const last = elems.pop();
+        if (last) {
+          const el = document.getElementById(last.id);
+          if (el) {
+            el.style.opacity = 0.8;
+          }
+        }
+      }
     }
   }
 
@@ -122,7 +143,6 @@ export default class ResponsiveModalInner extends Component {
   render() {
     const bStyles = { ...backStyle, opacity: this.state.opacity };
     let iStyles = { overflowX: 'hidden', overflowY: 'auto' };
-    let scrollStyles = { ...inlineStyle };
     if (this.props.height && this.props.height !== '') {
       iStyles.height = this.props.height;
       iStyles.minHeight = this.props.height;
@@ -132,28 +152,24 @@ export default class ResponsiveModalInner extends Component {
         case 'xl':
           iStyles.height = '510px';
           iStyles.minHeight = '510px';
-          scrollStyles.maxHeight = '510px';
           break;
         case 'lg':
           iStyles.height = '480px';
           iStyles.minHeight = '480px';
-          scrollStyles.maxHeight = '480px';
           break;
         case 'md':
           iStyles.height = '450px';
           iStyles.minHeight = '450px';
-          scrollStyles.maxHeight = '450px';
           break;
         default:
           iStyles.height = '350px';
           iStyles.minHeight = '350px';
-          scrollStyles.maxHeight = '350px';
           break;
       }
     }
     return (
       <Portal className="backdrop-style" zIndex={zIndex++}>
-        <div className="modal-style modal-opacity bg-light" style={{ ...bStyles, zIndex: zIndex++ }} />
+        <div id={`mdap-opacity-${zIndex}`} className="modal-style modal-opacity bg-light" style={{ ...bStyles, zIndex: zIndex++ }} />
         <div style={{ ...modalStyle, zIndex: zIndex++ }}>
           <Transition in={this.state.show} timeout={100}>
             {state => (
@@ -163,7 +179,7 @@ export default class ResponsiveModalInner extends Component {
                     <div
                       className={classnames(
                         'modal-dialog',
-                        sizeGreater(this.props.size, mediaSize) ? 'modal-fullscreen' : `modal-${this.props.size}`,
+                        sizeGreater(this.props.size, mediaSize) ? 'modal-fullscreen' : `modal-w-${this.props.size}`,
                         state
                       )}
                     >
@@ -284,14 +300,21 @@ export default class ResponsiveModalInner extends Component {
                         </div>
                         {this.props.buttons && (
                           <div className={classnames('modal-footer', this.props.modalClassName)}>
-                            {this.props.help &&
+                            {(this.props.help || this.props.saving ) &&
                               <div className="modal-left-buttons">
-                                <button className="btn btn-secondary" onClick={this.onToggleHelp}>?</button>
+                                {this.props.help &&
+                                  <button className="btn btn-secondary" onClick={this.onToggleHelp}>?</button>
+                                }
+                                {this.props.saving &&
+                                  <div className="calm-button-loader pr-1 text-light">
+                                    <SmLoading9x9 width={20} height={20} />
+                                  </div>
+                                }
                               </div>
                             }
                             {this.props.buttons.map((button, idx) => {
                               if (!button.hidden && button.name !== '') {
-                                return <ResponsiveButton key={`btn-resp${idx}`} button={button} />;
+                                return <ResponsiveButton key={`btn-resp${idx}`} button={button} disabled={this.props.saving}/>;
                               }
                               return null;
                             })}

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');
@@ -53,6 +52,13 @@
       min-height: 36px;
       min-width: 36px;
     }
+
+    .calm-button-loader {
+      line-height: 36px;
+      margin: auto;
+      vertical-align: middle;
+      position: relative;
+    }
   }
 }
 

package/src/features/basic/CalmButton.js

@@ -52,7 +52,7 @@ export default class CalmButton extends Component {
     } else {
       this.timer = setTimeout(() => {
         this.setState({ executing: false });
-      }, 2000);
+      }, 500);
       this.setState({ executing: true });
       this.props.onClick(event);
     }
@@ -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/InputJson.js

@@ -8,6 +8,7 @@ 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/ResponsiveButton.js

@@ -10,12 +10,12 @@ export const ResponsiveButton = props => (
       <CalmButton
         type="button"
         className={classnames('btn', `btn-${props.button.theme}`)}
-        disabled={props.button.disabled || false}
         onClick={props.button.function}
         options={props.button.options}
         optionsAlign={props.button.optionsAlign}
         optionsOpenMulti={props.button.optionsOpenMulti}
-        loader={true}
+        loader={false}
+        disabled={props.button.disabled || props.disabled || false}
       >
         {props.button.name ? <span className="no-selector" color="white">{props.button.name}</span> : props.button.icon}
       </CalmButton>
@@ -24,12 +24,12 @@ export const ResponsiveButton = props => (
       <CalmButton
         type="button"
         className={classnames('btn btn-mobile', `btn-${props.button.theme}`)}
-        disabled={props.button.disabled || false}
         onClick={props.button.function}
         options={props.button.options}
         optionsAlign={props.button.optionsAlign}
         optionsOpenMulti={props.button.optionsOpenMulti}
         loader={false}
+        disabled={props.button.disabled || props.disabled || false}
       >
         {props.button.icon ? props.button.icon : <span className="no-selector" color="white">{props.button.name}</span>}
       </CalmButton>

package/src/features/basic/index.js

@@ -21,8 +21,6 @@ export { default as InputSelect } from "./InputSelect";
 export { default as InputSpin } from "./InputSpin";
 export { default as InputStringarray } from "./InputStringarray";
 export * from "./InputText";
-export { default as InputTextarea } from "./InputTextarea";
-export { default as InputTextareaHtml } from "./InputTextareaHtml";
 export * from "./ResponsiveButton";
 export { default as InputCheckList } from "./InputCheckList";
 export { default as CalmButton } from "./CalmButton";
@@ -47,4 +45,4 @@ export { default as InputBarCode } from "./InputBarCode";
 export { default as Scanner } from "./Scanner";
 export { default as InputSignature } from "./InputSignature";
 export * from "./InputTextMultiline";
-export * from "./InputChildren";
+export * from "./InputChildren";

package/src/features/basic/style.scss

@@ -1,5 +1,4 @@
 @import '~react-datepicker/dist/react-datepicker.css';
-@import '~react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 @import './CalmButton';
 @import './Dropdown';
 @import './InlineInputCheckbox';
@@ -24,8 +23,6 @@
 @import './InputSpin';
 @import './InputStringarray';
 @import './InputText';
-@import './InputTextarea';
-@import './InputTextareaHtml';
 @import './ResponsiveButton';
 @import './InputGroup';
 @import './InputGroupAppend';

package/src/features/draft/ColorPicker.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { ChromePicker } from 'react-color';
+import { DropdownWrapper } from '../advanced'
+import { DropdownMenu } from '../basic';
+
+export default class ColorPicker 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')}
+      >
+        Color
+      </button>
+    );
+    const { color } = this.props.currentState;
+    return (
+      <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>
+      </DropdownWrapper>
+    );
+  }
+}

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/{basic/InputTextarea.js → draft/InputHtml.js}

@@ -4,16 +4,18 @@ import classnames from 'classnames';
 import { EditorState, Modifier } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { convertToHTML, convertFromHTML } from 'draft-convert';
-import { DropdownWrapper, ResponsiveConfirm } from '../advanced';
-import { DropdownMenu, DropdownMenuOption, Dropdown } from '../basic';
 import { htmlToString } from '../helpers';
+import { ColorPicker, Inline, FontSize } from './';
+import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
 const myStyle = {
   height: 'auto',
 };
+
 const appenStyle = {
   maxHeight: '40px',
 };
+
 const toHtml = {
   styleToHTML: style => {
     const parts = style.split('-');
@@ -171,10 +173,9 @@ export default class InputTextarea extends Component {
     this.state = {
       editorState: EditorState.createWithContent(value),
       toolbar: false,
-      myRef: React.createRef(),
-      presetText: false,
     };
     this.onEditorStateChange = this.onEditorStateChange.bind(this);
+    this.onChange = this.onChange.bind(this);
     this.onToolbar = this.onToolbar.bind(this);
     this.onClear = this.onClear.bind(this);
     this.onPresetText = this.onPresetText.bind(this);
@@ -186,6 +187,9 @@ export default class InputTextarea extends Component {
     this.setState({
       editorState,
     });
+  }
+
+  onChange(ev, editorState) {
     const content = editorState.getCurrentContent();
     const event = {
       target: {
@@ -221,16 +225,7 @@ export default class InputTextarea extends Component {
     const editorState = this.state.editorState;
     let content = editorState.getCurrentContent();
     const selection = editorState.getSelection();
-    //const contentStateWithEntity = content.createEntity('MY_ENTITY_TYPE','IMMUTABLE');
-    //const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     content = Modifier.insertText(content, selection, htmlToString(contentMore));
-    /**content = Modifier.insertText(
-      content,
-      selection,
-      contentMore,
-      null,
-      entityKey,
-    );*/
     let newState = EditorState.push(editorState, content);
     this.setState({ editorState: newState });
     const newContent = newState.getCurrentContent();
@@ -250,6 +245,21 @@ export default class InputTextarea extends Component {
   render() {
     //<div className={classnames('input-group', (props.error || props.warning) && 'is-invalid')}>
     const { editorState, toolbar } = this.state;
+    const editorToolbar = {
+      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: ColorPicker
+      }
+    };
     return (
       <div className={classnames('form-group', !this.props.labelTop && 'row')}>
         {this.props.label !== '' && (
@@ -265,51 +275,13 @@ export default class InputTextarea extends Component {
           >
             <Editor
               toolbarHidden={!toolbar}
+              toolbar={editorToolbar}
               editorState={editorState}
-              toolbarClassName="toolbarClassName"
               wrapperClassName="form-control border-rbf h-auto"
-              editorClassName="editorClassName overflow-hidden"
               onEditorStateChange={this.onEditorStateChange}
+              onBlur={this.onChange}
             />
             <div className="input-group-append" style={appenStyle}>
-              {this.props.presetTextIcon && (
-                <>
-                  <button
-                    type="button"
-                    className={classnames(
-                      'btn btn-input btn-outline-rbf bg-light',
-                      this.props.size === 'sm' && `btn-${this.props.size}`
-                    )}
-                    onClick={this.onPresetText}
-                    ref={this.state.myRef}
-                  >
-                    {this.props.presetTextIcon}
-                  </button>
-                  {this.props.presetTexts && this.props.presetTexts.length > 0 && this.state.presetText && (
-                    <Dropdown
-                      align="bottom-right"
-                      myRef={this.state.myRef}
-                      maxHeight="250px"
-                      onClose={this.onPresetTextClose}
-                    >
-                      <DropdownMenu>
-                        {Array.isArray(this.props.presetTexts) &&
-                          this.props.presetTexts.map(text => {
-                            return (
-                              <DropdownMenuOption
-                                key={`text-${text.id}`}
-                                label={text.text_code}
-                                onClick={() => {
-                                  this.onAddPresetText(text.text_content);
-                                }}
-                              />
-                            );
-                          })}
-                      </DropdownMenu>
-                    </Dropdown>
-                  )}
-                </>
-              )}
               <button
                 type="button"
                 className={classnames(

package/src/features/draft/InputHtml.scss

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