react-bootstrap-front 3.9.1 → 3.9.6

package/src/features/draft/MailMerge.js

@@ -0,0 +1,54 @@
+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 MailMerge extends Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      myRef: React.createRef()
+    }
+    this.onChange = this.onChange.bind(this);
+  }
+
+  stopPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  onChange = (text) => {
+    this.props.onChangeText(text);
+  }
+
+  render() {
+    const trigger = (
+      <button
+        type="button"
+        className={classnames(this.props.className, 'btn btn-light')}
+      >
+        {this.props.icon ? this.props.icon : 'MailMerge' }
+      </button>
+    );
+    const options = this.props.options;
+    return (
+      <DropdownWrapper trigger={trigger} className="ui-inline-wrapper btn-group pl-2" align="bottom-right" myRef={this.state.myRef}>
+        <DropdownMenu>
+          {options.map((text, index) =>
+            (<DropdownMenuOption
+              className="rdw-mailmerge-option"
+              onClick={() => this.onChange(text.text_content)}
+              key={index}
+            >
+              {text.text_code}
+            </DropdownMenuOption>),
+          )}
+        </DropdownMenu>
+      </DropdownWrapper>
+    );
+  }
+}

package/src/features/draft/index.js

@@ -1,4 +1,7 @@
 export { default as ColorPicker } from "./ColorPicker";
 export { default as FontSize } from "./FontSize";
+export { default as FontFamily } from "./FontFamily";
 export { default as Inline } from "./Inline";
+export { default as Image } from "./Image";
+export { default as MailMerge } from "./MailMerge";
 export { default as InputHtml } from "./InputHtml";

package/src/features/draft/style.scss

@@ -1,4 +1,8 @@
+@import '~react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 @import './ColorPicker';
+@import './FontFamily';
 @import './FontSize';
 @import './Inline';
+@import './Image';
+@import './MailMerge';
 @import './InputHtml';

package/src/features/inline-list/DefaultHeader.jsx

@@ -6,7 +6,7 @@ export const DefaultHeader = props => (
   <div className="inline-list-default-header bg-secondary-light">
     <div className="row row-title row-line no-gutters text-secondary" key="inline-list-default-header">
       {props.cols.map((oneCol, i) => {
-        return <DefaultTitleCol {...props} col={oneCol} idx={i} />;
+        return <DefaultTitleCol key={`herd-${oneCol.name}`} {...props} col={oneCol} idx={i} />;
       })}
       {props.onAddOne && (
         <div className="actions-buttons">

package/src/features/inline-list/DefaultLine.js

@@ -114,7 +114,7 @@ export default class DefaultLine extends Component {
               if (!oneCol.hidden) {
                 const line = { ...oneCol, id: this.props.id };
                 const content = getObjectmemberValue(this.props.item, oneCol.col);
-                return <DefaultCol {...line} content={content} item={this.props.item} selectable={false} />;
+                return <DefaultCol key={`col-${oneCol.name}`} {...line} content={content} item={this.props.item} selectable={false} />;
               }
               return null;
             })}

package/src/features/inline-list/DefaultList.jsx

@@ -21,16 +21,15 @@ export const DefaultList = props => {
                 previous = item;
                 if (myBreak !== false) {
                   return (
-                    <>
+                    <div key={item.id}>
                       <DefaultLineBreak label={myBreak} counter={props.oddEven ? counter++ : 0}/>
                       <DefaultLine
-                      {...props}
-                      key={item.id}
-                      id={item.id}
-                      item={item}
-                      counter={props.oddEven ? counter++ : 0}
-                    />
-                    </>
+                        {...props}
+                        id={item.id}
+                        item={item}
+                        counter={props.oddEven ? counter++ : 0}
+                      />
+                    </div>
                   );
                 } else {
                   return (

package/src/features/list/DefaultHeader.jsx

@@ -198,13 +198,13 @@ export default class DefaultHeader extends Component {
         )}
       >
         <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/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/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 {