react-bootstrap-front 3.7.4 → 3.7.8

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/DefaultLine.jsx

@@ -49,10 +49,12 @@ export default class DesktopListLine extends Component {
     super(props);
     this.state = {
       flipped: false,
+      clicked: false,
     };
     this.mouseLeave = this.mouseLeave.bind(this);
     this.mouseEnter = this.mouseEnter.bind(this);
     this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   mouseLeave() {
@@ -78,6 +80,17 @@ export default class DesktopListLine extends Component {
     return false;
   }
 
+  handleClick(ev) {
+    if (ev) {
+      ev.preventDefault();
+    }
+    if (!this.state.clicked) {
+      this.setState({clicked: true});
+      setTimeout(() => { this.setState({clicked: false}); }, 500);
+      this.props.onClick(this.props.item);
+    }
+  }
+
   render() {
     const { item } = this.props;
     let rowOddEven = 'row-no-odd-even';
@@ -88,9 +101,11 @@ export default class DesktopListLine extends Component {
       <div className={this.props.className}>
         <HoverObserver onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
           <div
-            onDoubleClick={this.handleDoubleClick}
+            onDoubleClick={ev => {
+              this.handleDoubleClick(ev);
+            }}
             onClick={ev => {
-              this.props.onClick(item);
+              this.handleClick(ev);
             }}
             style={mystyle}
             className={classnames(

package/src/features/list/DefaultList.jsx

@@ -516,7 +516,7 @@ export default class DefaultList extends Component {
                                   >
                                     <div className="row">
                                       <div className="col-xxs-w36">
-                                        <div className="p-2">{this.props.inlineComponent}</div>
+                                        {this.props.inlineComponent}
                                       </div>
                                     </div>
                                   </TouchHandler>

package/src/features/list/MobileLine.jsx

@@ -60,12 +60,14 @@ export class MobileLine extends Component {
     super(props);
     this.state = {
       flipped: false,
+      clicked: false,
     };
     this.mouseLeave = this.mouseLeave.bind(this);
     this.mouseEnter = this.mouseEnter.bind(this);
     this.openMenu = this.openMenu.bind(this);
     this.closeMenu = this.closeMenu.bind(this);
     this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   mouseLeave() {
@@ -92,6 +94,40 @@ export class MobileLine extends Component {
     this.setState({ flipped: false });
   }
 
+  handleClick(ev) {
+    if (ev) {
+      ev.preventDefault();
+    }
+    if (!this.state.clicked) {
+      this.setState({clicked: true});
+      setTimeout(() => { this.setState({clicked: false}); }, 500);
+      if (this.props.forSelectOne) {
+        this.props.onSelect(this.props.item);
+      } else {
+        if (isMobileDevice()) {
+          if (!this.props.mobile) {
+            this.closeMenu();
+            this.props.onClick(this.props.item);
+          } else {
+            if (this.props.item.id === this.props.currentFlipped) {
+              this.closeMenu();
+              this.handleDoubleClick(ev);
+            } else {
+              this.closeMenu();
+              this.props.onClick(this.props.item);
+            }
+          }
+        } else {
+          this.props.onClick(this.props.item);
+        }
+      }
+    } else {
+      if (ev) {
+        ev.stopPropagation();
+      }
+    }
+  }
+
   handleDoubleClick(ev) {
     if (ev) {
       ev.preventDefault();
@@ -99,16 +135,11 @@ export class MobileLine extends Component {
     if (window.getSelection) {
       window.getSelection().removeAllRanges();
     }
-    if (this.props.forSelectOne) {
-      this.props.onSelect(this.props.item);
-    } else {
-      this.props.inlineActions.forEach(action => {
-        if (action.role === 'MODIFY') {
-          action.onClick(this.props.id);
-        }
-      });
-    }
-    return false;
+    this.props.inlineActions.forEach(action => {
+      if (action.role === 'MODIFY') {
+        action.onClick(this.props.id);
+      }
+    });
   }
 
   render() {
@@ -132,27 +163,11 @@ export class MobileLine extends Component {
         <div className="col-xxs-w36">
           <div
             className="card card-mobile-line"
+            onDoubleClick={ev => {
+              this.handleDoubleClick(ev);
+            }}
             onClick={ev => {
-              if (this.props.forSelectOne) {
-                this.props.onSelect(this.props.item);
-              } else {
-                if (isMobileDevice()) {
-                  if (!this.props.mobile) {
-                    this.closeMenu();
-                    this.props.onClick(this.props.item);
-                  } else {
-                    if (this.props.item.id === this.props.currentFlipped) {
-                      this.closeMenu();
-                      this.handleDoubleClick(ev);
-                    } else {
-                      this.closeMenu();
-                      this.props.onClick(this.props.item);
-                    }
-                  }
-                } else {
-                  this.props.onClick(this.props.item);
-                }
-              }
+              this.handleClick(ev);
             }}
           >
             <HoverObserver onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
@@ -173,13 +188,6 @@ export class MobileLine extends Component {
                         'select-line border border-secondary mr-2 white',
                         this.props.selected.find(elem => elem === this.props.id) && 'selected'
                       )}
-                      onClick={ev => {
-                        if (ev) {
-                          ev.preventDefault();
-                          ev.stopPropagation();
-                        }
-                        this.props.onSelect(this.props.id);
-                      }}
                     >
                       <div className="select-line-inner bg-secondary" />
                     </div>

package/src/index.js

@@ -37,8 +37,6 @@ export { default as InputSelect } from "./features/basic/InputSelect";
 export { default as InputSpin } from "./features/basic/InputSpin";
 export { default as InputStringarray } from "./features/basic/InputStringarray";
 export * from "./features/basic/InputText";
-export { default as InputTextarea } from "./features/basic/InputTextarea";
-export { default as InputTextareaHtml } from "./features/basic/InputTextareaHtml";
 export { default as InputCheckList } from "./features/basic/InputCheckList";
 export { default as InputCheckLists } from "./features/basic/InputCheckLists";
 export { default as InputKeywords } from "./features/basic/InputKeywords";
@@ -73,6 +71,13 @@ export { default as SvgNext } from "./features/advanced/SvgNext";
 export { default as SvgToday } from "./features/advanced/SvgToday";
 export { default as WidthObserver } from "./features/advanced/WidthObserver";
 
+/**
+ *******************************************************************************
+ * Draft
+ *******************************************************************************
+ */
+ export * from "./features/draft/index.js";
+
 /**
  *******************************************************************************
  * Page

package/src/styles/index.scss

@@ -3,6 +3,7 @@
 
 @import '../features/advanced/style';
 @import '../features/basic/style';
+@import '../features/draft/style';
 @import '../features/filter/style';
 @import '../features/grid/style';
 @import '../features/inline-list/style';

package/src/styles/look2.scss

@@ -206,24 +206,70 @@ svg.text-warning.inline-action:hover {
   }
 }
 
-.modal-xl {
-  .modal-body {
-    min-height: 550px;
-    max-height: 650px;
+.modal-dialog { 
+  &.modal-w-xxl {
+    width: 1800px;
+    max-width: 1800px;
+    .modal-body {
+      min-height: 550px;
+      max-height: 650px;
+    }
   }
-}
-
-.modal-lg {
-  .modal-body {
-    min-height: 450px;
-    max-height: 550px;
+  &.modal-w-xl {
+    width: 1600px;
+    max-width: 1600px;
+    .modal-body {
+      min-height: 550px;
+      max-height: 650px;
+    }
   }
-}
-
-.modal-md {
-  .modal-body {
-    min-height: 350px;
-    max-height: 450px;
+  &.modal-w-xlg {
+    width: 1400px;
+    max-width: 1400px;
+    .modal-body {
+      min-height: 450px;
+      max-height: 550px;
+    }
+  }
+  &.modal-w-lg {
+    width: 1200px;
+    max-width: 1200px;
+    .modal-body {
+      min-height: 450px;
+      max-height: 550px;
+    }
+  }
+  &.modal-w-xmd {
+    width: 1100px;
+    max-width: 1100px;
+    .modal-body {
+      min-height: 350px;
+      max-height: 450px;
+    }
+  }
+  &.modal-w-md {
+    width: 1000px;
+    max-width: 1000px;
+    .modal-body {
+      min-height: 350px;
+      max-height: 450px;
+    }
+  }
+  &.modal-w-xsm {
+    width: 900px;
+    max-width: 900px;
+  }
+  &.modal-w-sm {
+    width: 800px;
+    max-width: 800px;
+  }
+  &.modal-w-xs {
+    width: 600px;
+    max-width: 600px;
+  }
+  &.modal-w-xxs {
+    width: 500px;
+    max-width: 500px;
   }
 }
 

package/src/features/basic/InputTextarea.scss

@@ -1,3 +0,0 @@
-.public-DraftStyleDefault-block {
-    margin: 0;
-}

package/src/features/basic/InputTextareaHtml.js

@@ -1,175 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { HtmlEditor, Toolbar, Editor } from '@aeaton/react-prosemirror'
-import { plugins, schema, toolbar } from '@aeaton/react-prosemirror-config-default'
-
-const myStyle = {
-  height: 'auto',
-};
-const appenStyle = {
-  maxHeight: '40px',
-};
-
-export default class InputTextareaHtml extends Component {
-  static propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    value: PropTypes.string,
-    size: PropTypes.string,
-    labelTop: PropTypes.bool,
-    onChange: PropTypes.func,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    clearIcon: PropTypes.element,
-    toolbarIcon: PropTypes.element,
-    presetTextIcon: PropTypes.element,
-    onPresetText: PropTypes.func,
-  };
-
-  static defaultProps = {
-    labelTop: true,
-    value: '',
-    label: '',
-    id: '',
-    size: '',
-    onChange: () => {},
-    disabled: false,
-    required: false,
-    clearIcon: null,
-    toolbarIcon: null,
-    presetTextIcon: null,
-    onPresetText: null,
-  };
-
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      toolbar: false,
-      myRef: React.createRef(),
-      presetText: false,
-    };
-    this.onToolbar = this.onToolbar.bind(this);
-    this.onClear = this.onClear.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onToolbar() {
-    this.setState({ toolbar: !this.state.toolbar });
-  }
-
-  onClear() {
-    const event = {
-      target: {
-        name: this.props.name,
-        value: null,
-      },
-    };
-    this.props.onChange(event);
-  }
-
-  onChange(content) {
-    const event = {
-      target: {
-        name: this.props.name,
-        value: content,
-      },
-    };
-    this.props.onChange(event);
-  }
-
-  render() {
-    let content = '';
-    if (this.props.value) {
-      content = this.props.value;
-    } else {
-      content = '<p/>';
-    }
-    return (
-      <div className={classnames('form-group', !this.props.labelTop && 'row')}>
-        {this.props.label !== '' && (
-          <label htmlFor={this.props.id} className={classnames(!this.props.labelTop && 'col-xxs-w6 col-form-label')}>
-            {this.props.label}
-            {this.props.required && <span>&nbsp;*</span>}
-          </label>
-        )}
-        <div className={classnames(!this.props.labelTop && 'col-xxs-w30')}>
-          <div
-            className={classnames('input-group', (this.props.error || this.props.warning) && 'is-invalid')}
-            style={myStyle}
-          >
-            <div className="form-control border-rbf h-auto">
-              <HtmlEditor
-                schema={schema}
-                plugins={plugins}
-                value={content}
-                handleChange={this.onChange}
-                debounce={250}
-              >
-                {this.state.toolbar && <Toolbar toolbar={toolbar} />}
-                <Editor autoFocus />
-              </HtmlEditor>
-            </div>
-            <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(
-                  'btn btn-input btn-outline-rbf bg-light',
-                  this.props.size === 'sm' && `btn-${this.props.size}`
-                )}
-                onClick={this.onToolbar}
-              >
-                {this.props.toolbarIcon}
-              </button>
-            </div>
-          </div>
-          {this.props.help && this.props.help !== '' && (
-            <small className="form-text text-muted">{this.props.help}</small>
-          )}
-          {this.props.error && <div className="invalid-feedback">{this.props.error}</div>}
-          {this.props.warning && <div className="invalid-feedback">{this.props.warning}</div>}
-        </div>
-      </div>
-    );
-  }
-}

package/src/features/basic/InputTextareaHtml.scss

@@ -1,6 +0,0 @@
-.rbf-input-textarea-light {
-    margin: 0;
-}
-.rbf-quill {
-    height: fit-content;
-}