react-bootstrap-front 3.8.0 → 3.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.8.0",
+  "version": "3.9.4",
   "description": "React Bootstrap Components",
   "keywords": [
     "Bootstrap 4",
@@ -34,6 +34,7 @@
     "react-router-dom": "^5.0.1"
   },
   "dependencies": {
+    "@draft-js-plugins/image": "^4.1.2",
     "@ericblade/quagga2": "^1.4.1",
     "@popperjs/core": "^2.5.4",
     "autosize": "^4.0.2",

package/src/features/advanced/DropdownWrapper.js

@@ -6,22 +6,32 @@ import { Dropdown } from '../basic';
 export default class DropdownWrapper extends Component {
   static propTypes = {
     align: PropTypes.string,
-    children: PropTypes.element.isRequired,
+    autoClose: PropTypes.bool,
     className: PropTypes.string,
     myRef: PropTypes.object,
+    open: PropTypes.bool,
     tooltip: PropTypes.string,
     trigger: PropTypes.element.isRequired,
   };
   static defaultProps = {
     align: 'bottom-left',
+    autoClose: true,
     className: '',
     myRef: null,
+    open: false,
     tooltip: '',
   };
 
+  static getDerivedStateFromProps(state, props) {
+    if (state.origOpen !== props.open && state.open !== props.open) {
+      return { open: props.open, origOpen: props.open };
+    }
+    return null;
+  }
+
   constructor(props) {
     super(props);
-    this.state = { open: false, ref: props.myRef || React.createRef() };
+    this.state = { origOpen: this.props.open, open: this.props.open || false, ref: props.myRef || React.createRef() };
     this.onClose = this.onClose.bind(this);
     this.onClick = this.onClick.bind(this);
   }
@@ -41,14 +51,17 @@ 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}
+      { ref: this.state.ref, onClick: this.onClick, title: this.props.tooltip }
     )
+    const { onClose } = this;
     return (
       <>
         {clonedTrigger}
         {this.state.open && (
-          <Dropdown align={this.props.align} myRef={this.state.ref} onClose={this.onClose}>
-            <div onClick={this.onClose}>{this.props.children}</div>
+          <Dropdown align={this.props.align} myRef={this.state.ref} onClose={onClose}>
+            <div onClick={this.props.autoClose && this.onClose}>
+              {typeof this.props.children === 'function' ? this.props.children({ onClose }) : this.props.children}
+            </div>
           </Dropdown>
         )}
       </>

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/Dropdown.js

@@ -53,8 +53,8 @@ export default class Dropdown extends Component {
 
   handleClickOutside(event) {
     const domNode = ReactDOM.findDOMNode(this);
-    if (!domNode || !domNode.contains(event.target)) {   
-      if (this.props.myRef && this.props.myRef.current &&this.props.myRef.current.contains(event.target)) {
+    if (!domNode || !domNode.contains(event.target)) {  
+      if (this.props.myRef && this.props.myRef.current && this.props.myRef.current.contains(event.target)) {
         event.preventDefault();
         event.stopPropagation();
       }

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/draft/ColorPicker.js

@@ -35,12 +35,12 @@ export default class ColorPicker extends Component {
         type="button"
         className={classnames(this.props.className, 'btn btn-light')}
       >
-        Color
+        {this.props.config.icon ? this.props.config.icon : '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}>
+      <DropdownWrapper autoClose={false} trigger={trigger} className="ui-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/FontFamily.js

@@ -0,0 +1,70 @@
+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 FontFamily 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 = (family) => {
+    const { onChange } = this.props;
+    onChange('family', family.hex);
+  }
+
+  render() {
+    const trigger = (
+      <button
+        type="button"
+        className={classnames(this.props.className, 'btn btn-light')}
+      >
+        {this.props.icon ? this.props.icon : 'Font' }
+      </button>
+    );
+    const {
+        config: { icon, className, dropdownClassName, options, title },
+        onChange,
+        expanded,
+        doCollapse,
+        onExpandEvent,
+        doExpand,
+        translations,
+      } = this.props;
+    let { currentState: { fontFamily: currentFontFamily } } = this.props;
+    let { defaultFontFamily } = this.state;
+    currentFontFamily = currentFontFamily ||
+    (options && options.indexOf(defaultFontFamily) >= 0 && defaultFontFamily);
+    return (
+      <DropdownWrapper trigger={trigger} className="ui-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
+        <DropdownMenu>
+         {options.map((family, index) =>
+           (<DropdownMenuOption
+             className="rdw-fontfamily-option"
+             active={currentFontFamily === family}
+             onClick={() => onChange(family)}
+             key={index}
+           >
+             {family}
+           </DropdownMenuOption>),
+         )}
+        </DropdownMenu>
+      </DropdownWrapper>
+    );
+  }
+}

package/src/features/draft/FontSize.js

@@ -23,9 +23,13 @@ export default class FontSize extends Component {
     event.stopPropagation();
   };
 
-  onChange = (color) => {
+  onChange = (size) => {
     const { onChange } = this.props;
-    onChange('color', color.hex);
+    let mySize = size.hex;
+    if (!isNaN(mySize)) {
+      mySize += 'px';
+    }
+    onChange('size', mySize);
   }
 
   render() {
@@ -34,7 +38,7 @@ export default class FontSize extends Component {
         type="button"
         className={classnames(this.props.className, 'btn btn-light')}
       >
-        Size
+        {this.props.config.icon ? this.props.config.icon : 'Size' }
       </button>
     );
     const {
@@ -52,7 +56,7 @@ export default class FontSize extends Component {
     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}>
+      <DropdownWrapper trigger={trigger} className="ui-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
         <DropdownMenu>
          {options.map((size, index) =>
            (<DropdownMenuOption

package/src/features/draft/Image.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { DropdownWrapper } from '../advanced'
+import { DropdownMenu, InputText } from '../basic';
+
+export default class Image extends Component {
+  static propTypes = {
+    expanded: PropTypes.bool,
+    onExpandEvent: PropTypes.func,
+    onChange: PropTypes.func,
+    currentState: PropTypes.object,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: '',
+      myRef: React.createRef()
+    }
+    this.onChange = this.onChange.bind(this);
+    this.onAdd = this.onAdd.bind(this);
+  }
+
+  onChange(ev) {
+    if (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      const value = ev.target.value;
+      const name = ev.target.name;
+      this.setState({ [name]: value });
+    }
+  }
+
+  onAdd(ev) {
+    const url = this.state.url;
+    this.setState({ url: '' });
+    this.props.onChange(url);
+  }
+
+  render() {
+    const trigger = (
+      <button
+        type="button"
+        className={classnames(this.props.className, 'btn btn-light')}
+      >
+        {this.props.config.icon ? this.props.config.icon : 'Image'}
+      </button>
+    );
+    //console.log(this.props.currentState, this.props.config);
+    return (
+      <DropdownWrapper autoClose={false} trigger={trigger} className="ui-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
+        {({ onClose }) =>
+          <DropdownMenu>
+            <>
+              <InputText labelTop={true} label="Url" name="url" value={this.state.url} onChange={this.onChange} />
+              <button type="button" class="btn btn-xs btn-success" onClick={(ev) => { onClose(); this.onAdd(ev); }}>Ok</button>
+            </>
+          </DropdownMenu>
+        }
+      </DropdownWrapper>
+    );
+  }
+}

package/src/features/draft/Image.scss

@@ -0,0 +1,3 @@
+.btn-image {
+    margin-left: 5px;
+}

package/src/features/draft/Inline.js

@@ -18,15 +18,16 @@ export default class Inline extends Component {
   }
   render() {
     const { config, currentState, onChange, translations } = this.props;
+    const textalign = currentState.textAlignment || '';
     return (
-      <div className={classnames('rbf-inline-wrapper btn-group pl-2', config.className)} aria-label="rdw-inline-control">
+      <div className={classnames('ui-inline-wrapper btn-group', 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 ||
+                className={classnames("btn btn-light", config[style].className, (textalign === true ||
                     (style === 'MONOSPACE' && currentState.CODE)) && "active")}
                 title={config[style].title || translations[`components.controls.inline.${style}`]}
               >

package/src/features/draft/InputHtml.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { EditorState, Modifier } from 'draft-js';
+import { camelCase } from 'lodash';
+import { EditorState, Modifier, CompositeDecorator } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { convertToHTML, convertFromHTML } from 'draft-convert';
 import { htmlToString } from '../helpers';
-import { ColorPicker, Inline, FontSize } from './';
+import { ColorPicker, Inline, FontSize, FontFamily, Image, MailMerge as MailMergeOption } from './';
 import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
 const myStyle = {
@@ -37,20 +38,62 @@ const toHtml = {
       case 'color':
         return <span style={{ color: parts[1] }} />;
       case 'fontsize':
-        return <span style={{ fontSize: parts[1] }} />;
+        return <span style={{ fontSize: parts[1] + 'px' }} />;
+      case 'text':
+        if (parts[1] === 'align') {
+          return <span style={{ textAlign: parts[2] }} />;
+        }
+        return '';
       default:
         // nothing
         break;
     }
   },
   blockToHTML: block => {
+    let styles = {};
+    if (block.data && Object.keys(block.data).length > 0) {
+      Object.keys(block.data).forEach(key => {
+        styles[camelCase(key)] = block.data[key];
+      });
+    }
     if (block.type === 'PARAGRAPH') {
-      return <p />;
+      return <p style={styles} />;
+    }
+    if (block.type === 'atomic') {
+      return {
+        start: "",
+        end: "",
+      }
+    }
+    if (block.type === 'unstyled' && block.text.trim() === '') {
+      return <br />;
     }
+    if (Object.keys(styles).length > 0) {
+      return <p style={styles} />;
+    }
+    return null;
   },
   entityToHTML: (entity, originalText) => {
-    if (entity.type === 'LINK') {
-      return <a href={entity.data.url}>{originalText}</a>;
+    switch (entity.type) {
+      case 'LINK':
+        return <a href={entity.data.url}>{originalText}</a>;
+      case 'MAILMERGE':
+        return <span data-mailmerge="{originalText}">{originalText}</span>;
+      case 'IMAGE':
+        let otherDatas = {};
+        let alt = '';
+        if (entity.data.height) {
+          otherDatas['height'] = entity.data.height;
+        }
+        if (entity.data.width) {
+          otherDatas['width'] = entity.data.width;
+        }
+        if (entity.data.alt) {
+          alt = entity.data.alt;
+        }
+        return <img src={entity.data.src} {...otherDatas} alt={alt} />;
+      default:
+        break;
     }
     return originalText;
   },
@@ -96,40 +139,99 @@ const fromHtml = {
           if (fontSize && fontSize !== '') {
             style.add(`fontsize-${fontSize.replace(/px$/g, '')}`);
           }
+          const textAlign = node.style.textAlign;
+          if (textAlign && textAlign !== '') {
+            style.add(`textalign-${textAlign}`);
+          }
         }
       })
       .toOrderedSet();
     return currentStyle;
   },
   htmlToEntity: (nodeName, node, createEntity) => {
+    let entity = null;
     if (nodeName === 'a') {
-      return createEntity('LINK', 'MUTABLE', { url: node.href });
+      entity = createEntity('LINK', 'MUTABLE', { url: node.href });
+    }
+    if (nodeName === 'span' && node.dataset && node.dataset.mailmerge) {
+      entity = createEntity('MAILMERGE', 'IMMUTABLE', { mailmerge: node.dataset.mailmerge });
     }
+    if (nodeName === 'img') {
+      entity = createEntity('IMAGE', 'MUTABLE', { src: node.src });
+    }
+    return entity;
   },
   textToEntity: (text, createEntity) => {
     const result = [];
-    text.replace(/\@(\w+)/g, (match, name, offset) => {
-      const entityKey = createEntity('AT-MENTION', 'IMMUTABLE', { name });
-      result.push({
-        entity: entityKey,
-        offset,
-        length: match.length,
-        result: match,
-      });
-    });
     return result;
   },
   htmlToBlock: (nodeName, node) => {
+    if (nodeName === "hr" || nodeName === "img") {
+      return "atomic";
+    }
     if (nodeName === 'blockquote') {
       return {
         type: 'blockquote',
         data: {},
       };
     }
+    if (nodeName === 'br') {
+      return {
+        type: 'PARAGRAPH',
+        data: {},
+      };
+    }
+    if (nodeName === 'p' && node instanceof HTMLElement) {
+      let styles = {};
+      if (node.style.textAlign) {
+        styles['text-align'] = node.style.textAlign;
+      }
+      if (Object.keys(styles).length > 0) {
+        return {
+          type: 'PARAGRAPH',
+          data: styles,
+        };
+      }
+    }
+    return null;
   },
 };
 
-export default class InputTextarea extends Component {
+function findMailmergeEntities(contentBlock, callback, contentState) {
+  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>
+  );
+};
+
+const MailmergeOptions = (props) => {
+  if (props.presetTexts && Array.isArray(props.presetTexts) && props.presetTexts.length > 0) {
+    return (
+      [<MailMergeOption 
+        icon={props.presetTextIcon} 
+        options={props.presetTexts} 
+        onChangeText={(text) => this.onAddPresetText(text)}
+      />]
+    );
+  }
+  return [];
+}
+
+
+export default class InputHtml extends Component {
   static propTypes = {
     id: PropTypes.string,
     name: PropTypes.string.isRequired,
@@ -142,8 +244,14 @@ export default class InputTextarea extends Component {
     disabled: PropTypes.bool,
     clearIcon: PropTypes.element,
     toolbarIcon: PropTypes.element,
+    sizeIcon: PropTypes.element,
+    fontIcon: PropTypes.element,
+    colorIcon: PropTypes.element,
+    imageIcon: PropTypes.element,
     presetTextIcon: PropTypes.element,
+    presetTexts: PropTypes.array,
     onPresetText: PropTypes.func,
+    t: PropTypes.func,
   };
 
   static defaultProps = {
@@ -157,8 +265,14 @@ export default class InputTextarea extends Component {
     required: false,
     clearIcon: null,
     toolbarIcon: null,
+    sizeIcon: null,
+    fontIcon: null,
+    colorIcon: null,
+    imageIcon: null,
     presetTextIcon: null,
+    presetTexts: [],
     onPresetText: null,
+    t: () => {},
   };
 
   constructor(props) {
@@ -169,18 +283,22 @@ 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);
     this.onChange = this.onChange.bind(this);
     this.onToolbar = this.onToolbar.bind(this);
     this.onClear = this.onClear.bind(this);
-    this.onPresetText = this.onPresetText.bind(this);
     this.onAddPresetText = this.onAddPresetText.bind(this);
-    this.onPresetTextClose = this.onPresetTextClose.bind(this);
   }
 
   onEditorStateChange(editorState) {
@@ -216,11 +334,6 @@ export default class InputTextarea extends Component {
     this.props.onChange(event);
   }
 
-  onPresetText() {
-    this.props.onPresetText();
-    this.setState({ presetText: true });
-  }
-
   onAddPresetText(contentMore) {
     const editorState = this.state.editorState;
     let content = editorState.getCurrentContent();
@@ -238,27 +351,54 @@ export default class InputTextarea extends Component {
     this.props.onChange(event);
   }
 
-  onPresetTextClose() {
-    this.setState({ presetText: false });
-  }
-
   render() {
     //<div className={classnames('input-group', (props.error || props.warning) && 'is-invalid')}>
     const { editorState, toolbar } = this.state;
+    const { t } = this.props;
     const editorToolbar = {
-      options: ['inline','fontSize','colorPicker'],
+      options: ['inline','fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'image'],
       inline: {
         inDropdown: false,
         component: Inline,
-        options: ['bold', 'italic', 'underline', 'superscript', 'subscript'],
+        options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'],
+        bold: { title: t({ id: 'ui.textarea.draft.toolbar.bold', defaultMessage: 'Bold' }) }, 
+        italic: { title: t({ id: 'ui.textarea.draft.toolbar.italic', defaultMessage: 'Italic' }) }, 
+        underline: { title: t({ id: 'ui.textarea.draft.toolbar.underline', defaultMessage: 'Underline' }) }, 
+        strikethrough: { title: t({ id: 'ui.textarea.draft.toolbar.strikethrough', defaultMessage: 'Underline' }) },
+        monospace: { title: t({ id: 'ui.textarea.draft.toolbar.monospace', defaultMessage: 'monospace' }) },
+        superscript: { title: t({ id: 'ui.textarea.draft.toolbar.superscript', defaultMessage: 'Superscript' }) }, 
+        subscript: { title: t({ id: 'ui.textarea.draft.toolbar.subscript', defaultMessage: 'Subscript' }) },
       },
       fontSize: {
         component: FontSize,
         options: [7, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
+        icon: this.props.sizeIcon,
+      },
+      fontFamily: {
+        component: FontFamily,
+        options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
+      },
+      list: {
+        inDropdown: false,
+        component: Inline,
+        options: ['unordered', 'ordered'],
+      },
+      textAlign: {
+        inDropdown: false,
+        component: Inline,
+        options: ['left', 'center', 'right'],
       },
       colorPicker: {
-        component: ColorPicker
-      }
+        component: ColorPicker,
+        icon: this.props.colorIcon,
+      },
+      image: {
+        component: Image,
+        inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+        alt: { present: false, mandatory: false },
+        previewImage: true,
+        icon: this.props.imageIcon,
+      },
     };
     return (
       <div className={classnames('form-group', !this.props.labelTop && 'row')}>
@@ -276,8 +416,9 @@ export default class InputTextarea extends Component {
             <Editor
               toolbarHidden={!toolbar}
               toolbar={editorToolbar}
+              toolbarCustomButtons={MailmergeOptions(this.props)}
               editorState={editorState}
-              wrapperClassName="form-control border-rbf h-auto"
+              wrapperClassName="form-control border-ui h-auto"
               onEditorStateChange={this.onEditorStateChange}
               onBlur={this.onChange}
             />
@@ -285,7 +426,7 @@ export default class InputTextarea extends Component {
               <button
                 type="button"
                 className={classnames(
-                  'btn btn-input btn-outline-rbf bg-light',
+                  'btn btn-input btn-outline-ui bg-light',
                   this.props.size === 'sm' && `btn-${this.props.size}`
                 )}
                 onClick={this.onToolbar}
@@ -295,7 +436,7 @@ export default class InputTextarea extends Component {
               <button
                 type="button"
                 className={classnames(
-                  'btn btn-input btn-outline-rbf bg-light',
+                  'btn btn-input btn-outline-ui bg-light',
                   this.props.size === 'sm' && `btn-${this.props.size}`
                 )}
                 onClick={this.onClear}