jrs-react 1.2.6 → 1.2.7

package/build/index.es.js

@@ -6290,6 +6290,8 @@ class JRSubmit extends React.Component {
   }
   setValue(value, reset = false) {
     if (this.props.onChange) {
+      po('name', this.props.name);
+      po('onChange', value);
       this.props.onChange(value);
     } else {
       this.setState({
@@ -6467,8 +6469,8 @@ class JRSubmit extends React.Component {
     config.callback?.bind(this)(isSuccess, response, payload);
   };
   showMessage(success, message) {
-    po('success', success);
-    po('message', message);
+    // po('success',success)
+    // po('message',message)
   }
   renderer() {
     return;
@@ -6496,6 +6498,10 @@ const FreeType$1 = ({
       className: className,
       style: style
     }, content);
+  } else if (typeof config === 'string') {
+    return /*#__PURE__*/React.createElement(Tag, {
+      className: className
+    }, config);
   }
 };
 const StyledJRFrame$1 = styled.div`
@@ -6513,7 +6519,7 @@ const StyledJRFrame$1 = styled.div`
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
-            min-height:30px;
+            XXmin-height:30px;
         }
 
         >header{
@@ -6552,7 +6558,7 @@ class JRFrame extends JRSubmit {
       config: this.props.left,
       me: this,
       className: 'left'
-    }), this.renderMe(), /*#__PURE__*/React.createElement(FreeType$1, {
+    }), this.renderMe?.() ?? this.props.children, /*#__PURE__*/React.createElement(FreeType$1, {
       tag: "div",
       config: this.props.right,
       me: this,
@@ -6568,16 +6574,12 @@ class JRFrame extends JRSubmit {
       className: 'end'
     }));
   }
-  renderMe() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 1
-      }
-    }, "Render me");
-  }
+  // renderMe(){
+  //     return <div style={{flex:1}}>Render me</div>
+  // }
 }
 
-const StyledSlider = styled.div`
+const StyledSlider$1 = styled.div`
     position: absolute;
     top: 0;
     right: 0;
@@ -6592,7 +6594,7 @@ const StyledSlider = styled.div`
         border-right:1px dashed gray;
     }
 `;
-class Slider extends React.Component {
+class Slider$1 extends React.Component {
   constructor() {
     super();
     this.sliderRef = /*#__PURE__*/React.createRef();
@@ -6644,7 +6646,7 @@ class Slider extends React.Component {
   }
   render() {
     const column = this.props.column;
-    return /*#__PURE__*/React.createElement(StyledSlider, {
+    return /*#__PURE__*/React.createElement(StyledSlider$1, {
       ref: this.sliderRef,
       onMouseDown: e => {
         this.start(this.props.thRef, column);
@@ -6686,7 +6688,7 @@ const Ths$1 = ({
       ref: thRef,
       colSpan: column.colSpan,
       rowSpan: column.rowSpan ?? (column.isLeaf && deep > rowIndex ? deep - rowIndex + 1 : null)
-    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React.createElement(Slider, {
+    }, flexType(column.label, table), table.props.resizableColumns === true && /*#__PURE__*/React.createElement(Slider$1, {
       table: table,
       thRef: thRef,
       column: column
@@ -6992,7 +6994,7 @@ const TBody = ({
   }, groupData?.length > 0 && /*#__PURE__*/React.createElement(GroupHeader, _extends({
     groupData: groupData,
     columns: groupHeader
-  }, neededProps)), groupData?.map((record, trIndex) => {
+  }, neededProps)), groupData?.map?.((record, trIndex) => {
     const onRowClick = table.props.onRowClick?.bind(table);
     return /*#__PURE__*/React.createElement("tr", {
       key: trIndex,
@@ -7086,8 +7088,7 @@ const StyledJRTable = styled.div`
 
             th{
                 position: relative;
-                height:24px;
-                padding: 4px;
+                padding: 2px 6px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;
@@ -7176,6 +7177,571 @@ const StyledJRTable = styled.div`
     }    
 `;
 
+const StyledTitle = styled.div`
+    overflow: hidden;
+    display: flex;
+    padding:2px 8px;
+    border:1px solid black;
+    background:rgb(214, 214, 214);
+    color: black;
+    &:active:hover{
+        cursor: grabbing;
+    }
+    
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+    > .title{
+            flex: 1;
+    }
+`;
+class TitleBar extends React.Component {
+  pos1 = 0;
+  pos2 = 0;
+  pos3 = 0;
+  pos4 = 0;
+  x = 0;
+  y = 0;
+  move = e => {
+    e.preventDefault();
+    this.pos1 = this.pos3 - e.clientX;
+    this.pos2 = this.pos4 - e.clientY;
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    const w = this.props.windowRef.current;
+    this.x = w.offsetLeft - this.pos1;
+    this.y = w.offsetTop - this.pos2;
+    w.style.top = this.y + 'px';
+    w.style.left = this.x + 'px';
+  };
+  stop = e => {
+    // const w= this.props.windowRef.current
+    // if(this.y<1)this.props.windowRef.current.style.top = '1px'
+    // if(this.y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-32}px`
+    // if(this.x<1)this.props.windowRef.current.style.left = '1px'
+    // if(this.x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-100}px`
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  start(e) {
+    e.preventDefault();
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    document.body.style.cursor = 'grabbing';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(StyledTitle, {
+      ref: this.props.titleBarRef,
+      draggable: "false",
+      onMouseDown: e => {
+        this.start(e);
+      }
+    }, /*#__PURE__*/React.createElement(FreeType$1, {
+      tag: "div",
+      config: this.props.title ?? '',
+      me: this.props.window,
+      className: 'title'
+    }), /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("button", null, "X")));
+  }
+}
+
+const StyledSlider = styled.div`
+    Xborder:1px solid ${({
+  $direction: {
+    color
+  }
+}) => color}; 
+    xbackground:${({
+  $direction: {
+    color
+  }
+}) => color};
+    position: absolute;
+    top: ${({
+  $direction: {
+    top
+  }
+}) => top};
+    bottom: ${({
+  $direction: {
+    bottom
+  }
+}) => bottom};
+    right: ${({
+  $direction: {
+    right
+  }
+}) => right};
+    left: ${({
+  $direction: {
+    left
+  }
+}) => left};
+    height: ${({
+  $direction: {
+    height
+  }
+}) => height};
+    width: ${({
+  $direction: {
+    width
+  }
+}) => width};
+    cursor: ${({
+  $direction: {
+    cursor
+  }
+}) => cursor};
+
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+
+`;
+class Slider extends React.Component {
+  width = '3px';
+  borderWidth = 'px';
+  borderLong = '10px';
+  constructor(props) {
+    super(props);
+    this.sliderRef = /*#__PURE__*/React.createRef();
+  }
+  directions = {
+    n: {
+      top: 0,
+      color: 'red',
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 'n-resize',
+      resize: props => {
+        this.resizeN(props);
+      }
+    },
+    e: {
+      color: 'yellow',
+      right: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'e-resize',
+      resize: props => {
+        this.resizeE(props);
+      }
+    },
+    s: {
+      color: 'blue',
+      bottom: 0,
+      width: '100%',
+      height: `${this.props.thick}px`,
+      cursor: 's-resize',
+      resize: props => {
+        this.resizeS(props);
+      }
+    },
+    w: {
+      color: 'green',
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: '100%',
+      cursor: 'w-resize',
+      resize: props => {
+        this.resizeW(props);
+      }
+    },
+    nww: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: `${this.props.thick}px`,
+      height: this.borderLong,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nnw: {
+      top: 0,
+      left: 0,
+      color: 'blue',
+      width: this.borderLong,
+      height: `${this.props.thick}px`,
+      cursor: 'nw-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeW(props);
+      }
+    },
+    nne: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: this.borderLong,
+      height: `${this.props.thick}px`,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    nee: {
+      top: 0,
+      right: 0,
+      color: 'green',
+      width: `${this.props.thick}px`,
+      height: this.borderLong,
+      cursor: 'ne-resize',
+      resize: props => {
+        this.resizeN(props);
+        this.resizeE(props);
+      }
+    },
+    sse: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: this.borderLong,
+      height: `${this.props.thick}px`,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    see: {
+      color: 'red',
+      right: 0,
+      bottom: 0,
+      width: `${this.props.thick}px`,
+      height: this.borderLong,
+      cursor: 'se-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeE(props);
+      }
+    },
+    ssw: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: this.borderLong,
+      height: `${this.props.thick}px`,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
+      }
+    },
+    sww: {
+      color: 'yellow',
+      bottom: 0,
+      left: 0,
+      width: `${this.props.thick}px`,
+      height: this.borderLong,
+      cursor: 'sw-resize',
+      resize: props => {
+        this.resizeS(props);
+        this.resizeW(props);
+      }
+    }
+  };
+  stop = e => {
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  resizeN = ({
+    window,
+    cursorY,
+    startY,
+    startHeight,
+    titleBarHeight
+  }) => {
+    let y = cursorY - this.props.thick;
+    if (y < 0) y = 0;
+    let height = startHeight + (startY - y);
+    if (height < titleBarHeight + this.props.thick * 2) {
+      height = titleBarHeight + this.props.thick * 2;
+      y = startY + startHeight - titleBarHeight - this.props.thick * 2;
+    }
+    window.style.top = `${y}px`;
+    window.style.height = `${height}px`;
+  };
+  resizeE = ({
+    window,
+    clientX,
+    left,
+    titleBarHeight
+  }) => {
+    let width = clientX - left - this.props.thick;
+    if (width < titleBarHeight) width = titleBarHeight;
+    window.style.width = `${width + this.props.thick * 2}px`;
+  };
+  resizeS = ({
+    window,
+    clientY,
+    top,
+    titleBarHeight
+  }) => {
+    let height = clientY - top - this.props.thick;
+    if (height < titleBarHeight) height = titleBarHeight;
+    window.style.height = `${height + this.props.thick * 2}px`;
+  };
+  resizeW = ({
+    window,
+    cursorX,
+    startX,
+    startWidth,
+    titleBarHeight
+  }) => {
+    let x = cursorX;
+    if (x <= 1) x = 1;
+    let width = startWidth + (startX - x);
+    if (width < titleBarHeight + this.props.thick * 2) {
+      width = titleBarHeight + this.props.thick * 2;
+      x = startX + startWidth - titleBarHeight - this.props.thick * 2;
+    }
+    window.style.left = `${x}px`;
+    window.style.width = `${width}px`;
+  };
+  move = e => {
+    const {
+      clientX,
+      clientY,
+      x: cursorX,
+      y: cursorY
+    } = e;
+    const window = this.props.windowRef.current;
+    const {
+      left,
+      top
+    } = window.getBoundingClientRect();
+    const {
+      x: startX,
+      width: startWidth,
+      y: startY,
+      height: startHeight,
+      titleBarHeight
+    } = this.data;
+    this.directions[this.props.direction].resize({
+      window,
+      titleBarHeight,
+      clientX,
+      cursorX,
+      startX,
+      startWidth,
+      left,
+      clientY,
+      cursorY,
+      startY,
+      startHeight,
+      top
+    });
+    /////////////////////////////////////////////////////////////
+
+    /////////////////////////////////////////////////////////////
+  };
+  start = () => {
+    const {
+      height: titleBarHeight
+    } = this.props.titleBarRef.current.getBoundingClientRect();
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.props.windowRef.current.getBoundingClientRect();
+    this.data = {
+      x,
+      y,
+      width,
+      height,
+      titleBarHeight
+    };
+    document.body.style.cursor = this.directions[this.props.direction].cursor;
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React.createElement(StyledSlider, {
+      $direction: this.directions[this.props.direction],
+      $padding: this.props.padding,
+      onMouseDown: this.start
+    });
+  }
+}
+
+const StyledJRWindow = styled.div`
+    --padding-child:8px;
+    xborder:1px solid gray;
+    position: absolute;
+    padding: ${({
+  $thick
+}) => $thick}px;
+
+    top: ${({
+  $y
+}) => $y}px;
+    left: ${({
+  $x
+}) => $x}px;
+    width: ${({
+  $width = 300
+}) => `${$width}px`};
+    height: ${({
+  $height = 300
+}) => `${$height}px`};
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    > main{
+        box-shadow: 0px 0px 5px 1px gray;
+        Xbackground: white;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            background: white;
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+        }
+    }
+`;
+class JRWindow extends JRFrame {
+  x = 0;
+  y = 0;
+  width = 300;
+  height = 300;
+  padding = 5;
+  thick = 3;
+  constructor(props) {
+    super(props);
+    this.ref = /*#__PURE__*/React.createRef();
+    this.titleBarRef = /*#__PURE__*/React.createRef();
+    if (this.props.popup === true) this.renderer = this.renderWindow;
+    this.init();
+  }
+  init() {
+    this.height = window.innerHeight >= this.props.height ? this.props.height : window.innerHeight;
+    this.width = window.innerWidth >= this.props.width ? this.props.width : window.innerWidth;
+    this.x = this.props.x ?? (window.innerWidth - (this.width ?? 300)) / 2;
+    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
+  }
+  componentWillMount() {}
+  // renderer(){
+  //     return this.props.popup===true
+  //         ?<StyledJRWindow>
+  //             {super.renderer()}
+  //         </StyledJRWindow>
+  //         :super.renderer()
+  // }
+  renderWindow() {
+    return /*#__PURE__*/React.createElement(StyledJRWindow, {
+      ref: this.ref,
+      className: `jr-window ${this.props.className ?? ''}`,
+      $x: this.x,
+      $y: this.y,
+      $width: this.width,
+      $height: this.height,
+      $thick: this.thick
+      // onMouseDown={()=>{
+      //     po('onFocus')
+      //     this.ref.current.style.zIndex=100
+      // }}
+    }, /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(TitleBar, {
+      titleBarRef: this.titleBarRef,
+      windowRef: this.ref,
+      window: this,
+      title: this.props.title
+    }), /*#__PURE__*/React.createElement("main", null, super.renderer())), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'n',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'e',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 's',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'w',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'nww',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'nnw',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'nne',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'nee',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'sse',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'see',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'sww',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }), /*#__PURE__*/React.createElement(Slider, {
+      direction: 'ssw',
+      thick: this.thick,
+      windowRef: this.ref,
+      window: this,
+      titleBarRef: this.titleBarRef
+    }));
+  }
+}
+
 const getMapObject = (map, names) => {
   const name = names.shift(names);
   if (names.length) {
@@ -7195,13 +7761,13 @@ const setMapObject = (map, names, value) => {
     map[name] = value;
   }
 };
-class JRTable extends JRFrame {
+class JRTable extends JRWindow {
   constructor(props) {
     super(props);
     this.colGroupRef = /*#__PURE__*/React.createRef();
   }
   UNSAFE_componentWillMount() {
-    this.setColumns(this.props.columns);
+    this.setColumns(this.props.columns ?? []);
   }
 
   //------------------------------------------------------------------------------------
@@ -7419,7 +7985,8 @@ const StyleJRFields = styled.main`
     flex-direction: column;
     flex:1;
     overflow: overlay;
-
+    padding: 10px;
+    
     color:#525252;
 
     >.jr-grid{
@@ -7482,7 +8049,7 @@ const StyledColumn = styled.div`
   }
 }}
 `;
-const StyledColumnLabel = styled.label`
+const StyledColumnLabel = styled.div`
     ${({
   $layout
 }) => {
@@ -7593,7 +8160,7 @@ function requiredValidator({
     };
   }
 }
-class JRFields extends JRFrame {
+class JRFields extends JRWindow {
   UNSAFE_componentWillMount() {
     this.#initValidateValue();
   }
@@ -7788,6 +8355,7 @@ class JRFields extends JRFrame {
       }) : typeof value === 'object' ? JSON.stringify(value) : value);
     }
     const layout = column.labelProps?.layout === undefined ? this.props.labelProps?.layout : column.labelProps?.layout;
+    const labelStyle = column.labelProps?.style ?? this.props.labelProps?.style ?? {};
     return /*#__PURE__*/React.createElement(StyledColumn, {
       $layout: layout,
       $hasLabel: label != null,
@@ -7797,6 +8365,7 @@ class JRFields extends JRFrame {
       $labelWidth: column.labelProps?.width ?? this.props.labelProps?.width ?? '120px',
       $valueWidth: column.valueProps?.width ?? this.props.valueProps?.width ?? '1fr'
     }, label != null && /*#__PURE__*/React.createElement(StyledColumnLabel, {
+      style: labelStyle,
       $required: required,
       className: 'label',
       $layout: layout,