react-virtual-dom - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

index.js

@@ -1,451 +0,1 @@
-import React, { Component, Fragment } from "react";
-import $ from 'jquery';
-import "./index.css";
-let RVDCLS = {
-  rvd: 'rvd',
-  pointer: 'rvd-pointer',
-  gap: 'rvd-gap',
-  justify: 'rvd-justify',
-  align: 'rvd-align',
-  row: 'rvd-row',
-  column: 'rvd-column',
-  hidexs: 'rvd-hide-xs',
-  hidesm: 'rvd-hide-sm',
-  hidemd: 'rvd-hide-md',
-  hidelg: 'rvd-hide-lg'
-};
-export default class ReactVirtualDom extends Component {
-  getClassName(pointer, isRoot, props, attrs = {}) {
-    let className = RVDCLS.rvd;
-    if (isRoot) {
-      className += ' rvd-root';
-    }
-    if (props.className) {
-      className += ' ' + props.className;
-    } else if (attrs.className) {
-      className += ' ' + attrs.className;
-    }
-    if (pointer) {
-      className += ' ' + RVDCLS.pointer;
-    }
-    if (props.align === 'v') {
-      className += ' ' + (props.column ? RVDCLS.justify : RVDCLS.align);
-    } else if (props.align === 'h') {
-      className += ' ' + (props.column ? RVDCLS.align : RVDCLS.justify);
-    } else if (props.align === 'vh') {
-      className += ` ${RVDCLS.justify} ${RVDCLS.align}`;
-    }
-    if (props.row) {
-      className += ' ' + RVDCLS.row;
-    } else if (props.column || props.grid) {
-      className += ' ' + RVDCLS.column;
-    }
-    let hideClassName = getHideClassName(props);
-    return className + (hideClassName ? ' ' + hideClassName : '');
-  }
-  getProps(obj, index, parent = {}, isRoot) {
-    let {
-      htmls = {}
-    } = this.props;
-    let {
-      childsProps = () => {
-        return {};
-      }
-    } = parent;
-    let Props = (typeof childsProps === 'function' ? childsProps(obj, index) : childsProps) || {};
-    let props = {
-      ...Props,
-      ...obj
-    };
-    let {
-      dragId,
-      size,
-      flex,
-      onClick,
-      html,
-      style,
-      longTouch
-    } = props;
-    let attrs = obj.attrs || Props.attrs || {};
-    let pointer = !!onClick || !!attrs.onClick;
-    let childs = [];
-    html = typeof html === 'function' ? html() : html;
-    if (typeof html === 'string' && htmls[html]) {
-      html = htmls[html](obj);
-    }
-    // if(typeof html === 'object'){
-    //   console.error('react-virtual-dom html error, html cannot be an abject');
-    //   console.error('node is : ' ,obj)
-    //   html = '';
-    // }
-    let dataId = 'a' + Math.random();
-    style = {
-      ...attrs.style,
-      ...style
-    };
-    if (parent.row) {
-      if (size !== undefined) {
-        style.width = size;
-        flex = undefined;
-      }
-    } else if (parent.column || parent.grid) {
-      if (size !== undefined) {
-        style.height = size;
-        flex = undefined;
-      }
-    }
-    if (obj.row) {
-      childs = typeof obj.row === 'function' ? obj.row() : obj.row;
-    } else if (obj.column) {
-      childs = typeof obj.column === 'function' ? obj.column() : obj.column;
-    } else if (obj.grid) {
-      let {
-        gridCols = 2
-      } = obj;
-      let grid = typeof obj.grid === 'function' ? obj.grid() : obj.grid;
-      for (let i = 0; i < grid.length; i += gridCols) {
-        let row = [];
-        let gridRow = typeof obj.gridRow === 'function' ? obj.gridRow(i) : obj.gridRow;
-        for (let j = i; j < i + gridCols; j++) {
-          if (grid[j]) {
-            row.push(grid[j]);
-          }
-        }
-        childs.push({
-          row: [...row],
-          ...gridRow
-        });
-      }
-      obj.column = [...childs];
-    }
-    let className = this.getClassName(pointer, isRoot, props, attrs);
-    let gapAttrs = getGapAttrs(obj, parent, props, dataId);
-    let gapHtml = parent && parent.gapHtml ? parent.gapHtml(obj, index) : '';
-    if (dragId !== undefined) {
-      attrs.draggable = true;
-      attrs.onDragStart = e => {
-        let {
-          dragHandleClassName,
-          onDragStart = () => {}
-        } = this.props;
-        if (dragHandleClassName) {
-          if (!$(e.target).hasClass(dragHandleClassName) && $(e.target).parents('.' + dragHandleClassName).length === 0) {
-            return;
-          }
-        }
-        onDragStart(dragId);
-        this.dragId = dragId;
-      };
-      attrs.onDragOver = e => e.preventDefault();
-      attrs.onDrop = () => {
-        let {
-          onSwap = () => {},
-          onDrop = () => {}
-        } = this.props;
-        if (this.dragId === dragId) {
-          return;
-        }
-        onSwap(this.dragId, dragId);
-        onDrop(dragId);
-        this.dragId = false;
-      };
-    }
-    attrs = {
-      onClick,
-      ...attrs,
-      style: {
-        flex,
-        ...style
-      },
-      className,
-      'data-id': dataId
-    };
-    if (props.egg) {
-      attrs.onClick = () => this.egg(props.egg);
-    }
-    if (longTouch) {
-      attrs['ontouchstart' in document.documentElement ? 'onTouchStart' : 'onMouseDown'] = e => {
-        this.lt = dataId;
-        this[dataId + 'callback'] = longTouch;
-        this.timer();
-        eventHandler('mouseup', $.proxy(this.longTouchMouseUp, this));
-      };
-    }
-    if (this.props.loading && html) {
-      html = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        style: {
-          opacity: 0
-        }
-      }, html), /*#__PURE__*/React.createElement("div", {
-        className: "rvd-loading"
-      }));
-      attrs.onClick = undefined;
-    }
-    return {
-      childs,
-      html,
-      attrs,
-      gapAttrs,
-      gapHtml
-    };
-  }
-  getLayout(obj, index, parent, isRoot) {
-    if (typeof obj === 'object' && typeof parent === 'object') {
-      obj.props = {
-        ...parent.props,
-        ...obj.props
-      };
-    }
-    let {
-      getLayout
-    } = this.props;
-    if (!obj || obj === null || (typeof obj.show === 'function' ? obj.show() : obj.show) === false) {
-      return '';
-    }
-    if (getLayout) {
-      obj = getLayout(obj, parent);
-    }
-    let {
-      childs,
-      html,
-      attrs,
-      gapAttrs,
-      gapHtml = ''
-    } = this.getProps(obj, index, parent, isRoot);
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: index
-    }, /*#__PURE__*/React.createElement("div", attrs, childs.length ? childs.map((o, i) => /*#__PURE__*/React.createElement(Fragment, {
-      key: i
-    }, this.getLayout(o, i, obj, false))) : html), parent && (parent.gap !== undefined || parent.props && parent.props.gap !== undefined) && /*#__PURE__*/React.createElement("div", gapAttrs, gapHtml));
-  }
-  egg({
-    callback = () => {},
-    count = 10
-  }) {
-    this.eggCounter++;
-    if (this.eggCounter >= count) {
-      callback();
-    }
-    clearTimeout(this.timeOut);
-    this.timeOut = setTimeout(() => this.eggCounter = 0, 500);
-  }
-  longTouchMouseUp() {
-    eventHandler('mouseup', this.longTouchMouseUp, 'unbind');
-    clearInterval(this[this.lt + 'interval']);
-  }
-  timer() {
-    this.time = 0;
-    this[this.lt + 'interval'] = setInterval(() => {
-      this.time++;
-      if (this.time > 50) {
-        clearInterval(this[this.lt + 'interval']);
-        this[this.lt + 'callback']();
-      }
-    }, 10);
-  }
-  render() {
-    var {
-      gap,
-      layout
-    } = this.props;
-    return this.getLayout(layout, 0, undefined, true);
-  }
-}
-ReactVirtualDom.defaultProps = {
-  gap: 0,
-  layout: {}
-};
-export function RVDRemoveV(selector, callback) {
-  $(selector).animate({
-    opacity: 0
-  }, 100).animate({
-    height: 0,
-    padding: 0
-  }, 150, callback);
-}
-export function RVDRemoveH(selector, callback) {
-  $(selector).animate({
-    opacity: 0
-  }, 100).animate({
-    width: 0,
-    padding: 0
-  }, 150, callback);
-}
-export function RVDRemove(selector, callback) {
-  $(selector).animate({
-    opacity: 0
-  }, 200, callback);
-}
-function eventHandler(event, action, type = 'bind') {
-  event = 'ontouchstart' in document.documentElement ? {
-    mousemove: "touchmove",
-    mouseup: "touchend"
-  }[event] : event;
-  $(window).unbind(event, action);
-  if (type === 'bind') {
-    $(window).bind(event, action);
-  }
-}
-function getGapAttrs(obj, parent = {}, props = {}, dataId) {
-  let $$ = {
-    getClient(e) {
-      return 'ontouchstart' in document.documentElement ? {
-        x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
-      } : {
-        x: e.clientX,
-        y: e.clientY
-      };
-    },
-    mouseMove(e) {
-      var {
-        rtl
-      } = this.props;
-      var {
-        pos,
-        axis,
-        size,
-        dataId
-      } = this.so;
-      var client = this.getClient(e);
-      var offset = (client[axis] - pos[axis]) * (rtl ? -1 : 1);
-      if (offset % 24 !== 0) {
-        return;
-      }
-      this.so.newSize = offset + size;
-      var panel = $('[data-id="' + dataId + '"]');
-      panel.css({
-        [{
-          'x': 'width',
-          'y': 'height'
-        }[axis]]: this.so.newSize
-      });
-    },
-    mouseUp() {
-      eventHandler('mousemove', this.mouseMove, 'unbind');
-      eventHandler('mouseup', this.mouseUp, 'unbind');
-      var {
-        onResize,
-        newSize
-      } = this.so;
-      onResize(newSize);
-    },
-    getGap(obj, parent, dir) {
-      let gap = parent['gap' + dir] || parent.gap || (parent.props ? parent.props['gap' + dir] || parent.props.gap : undefined);
-      return typeof gap === 'function' ? gap(obj, parent) : gap;
-    },
-    getClassName() {
-      let className = RVDCLS.gap;
-      if (parent.gapAttrs && parent.gapAttrs.className) {
-        className += ' ' + parent.gapAttrs.className;
-      }
-      let hideClassName = getHideClassName(props);
-      return className + (hideClassName ? ' ' + hideClassName : '');
-    },
-    getGapAttrs() {
-      let {
-        size,
-        onResize
-      } = props;
-      let style = {},
-        axis;
-      if (parent.row) {
-        axis = 'x';
-        style.width = this.getGap(obj, parent, 'H');
-        if (size && onResize) {
-          style.cursor = 'col-resize';
-        }
-      } else if (parent.column || parent.grid) {
-        axis = 'y';
-        style.height = this.getGap(obj, parent, 'V');
-        if (size && onResize) {
-          style.cursor = 'row-resize';
-        }
-      } else {
-        return {};
-      }
-      if (parent.gapAttrs && parent.gapAttrs.style) {
-        style = {
-          ...style,
-          ...parent.gapAttrs.style
-        };
-      }
-      let gapAttrs = {
-        className: this.getClassName(),
-        style,
-        draggable: false,
-        onDragStart: e => {
-          e.preventDefault();
-          return false;
-        }
-      };
-      if (size && onResize) {
-        gapAttrs['ontouchstart' in document.documentElement ? 'onTouchStart' : 'onMouseDown'] = e => {
-          this.so = {
-            pos: this.getClient(e),
-            onResize,
-            axis,
-            size,
-            dataId
-          };
-          eventHandler('mousemove', $.proxy(this.mouseMove, this));
-          eventHandler('mouseup', $.proxy(this.mouseUp, this));
-        };
-      }
-      return gapAttrs;
-    }
-  };
-  return $$.getGapAttrs();
-}
-function getHideClassName(props) {
-  let hide_xs, hide_sm, hide_md, hide_lg, className;
-  if (props.show_xs) {
-    hide_xs = false;
-    hide_sm = true;
-    hide_md = true;
-    hide_lg = true;
-  }
-  if (props.hide_xs) {
-    hide_xs = true;
-  }
-  if (props.show_sm) {
-    hide_xs = true;
-    hide_sm = false;
-    hide_md = true;
-    hide_lg = true;
-  }
-  if (props.hide_sm) {
-    hide_sm = true;
-  }
-  if (props.show_md) {
-    hide_xs = true;
-    hide_sm = true;
-    hide_md = false;
-    hide_lg = true;
-  }
-  if (props.hide_md) {
-    hide_md = true;
-  }
-  if (props.show_lg) {
-    hide_xs = true;
-    hide_sm = true;
-    hide_md = true;
-    hide_lg = false;
-  }
-  if (props.hide_lg) {
-    hide_lg = true;
-  }
-  if (hide_xs) {
-    className += ' ' + RVDCLS.hidexs;
-  }
-  if (hide_sm) {
-    className += ' ' + RVDCLS.hidesm;
-  }
-  if (hide_md) {
-    className += ' ' + RVDCLS.hidemd;
-  }
-  if (hide_lg) {
-    className += ' ' + RVDCLS.hidelg;
-  }
-  return className;
-}
+import t,{Component as e,Fragment as s}from"react";import o from"jquery";import"./index.css";import{jsx as r}from"react/jsx-runtime";import{Fragment as i}from"react/jsx-runtime";import{jsxs as a}from"react/jsx-runtime";let RVDCLS={rvd:"rvd",pointer:"rvd-pointer",gap:"rvd-gap",justify:"rvd-justify",align:"rvd-align",row:"rvd-row",column:"rvd-column",hidexs:"rvd-hide-xs",hidesm:"rvd-hide-sm",hidemd:"rvd-hide-md",hidelg:"rvd-hide-lg"};export default class l extends e{getClassName(t,e,s,o={}){let r=RVDCLS.rvd;e&&(r+=" rvd-root"),s.className?r+=" "+s.className:o.className&&(r+=" "+o.className),t&&(r+=" "+RVDCLS.pointer),"v"===s.align?r+=" "+(s.column?RVDCLS.justify:RVDCLS.align):"h"===s.align?r+=" "+(s.column?RVDCLS.align:RVDCLS.justify):"vh"===s.align&&(r+=` ${RVDCLS.justify} ${RVDCLS.align}`),s.row?r+=" "+RVDCLS.row:(s.column||s.grid)&&(r+=" "+RVDCLS.column);let i=getHideClassName(s);return r+(i?" "+i:"")}getProps(t,e,s={},l){let{htmls:n={}}=this.props,{childsProps:d=()=>({})}=s,h=("function"==typeof d?d(t,e):d)||{},m={...h,...t},{dragId:c,size:u,flex:p,onClick:g,html:v,style:f,longTouch:$}=m,C=t.attrs||h.attrs||{},y=!!g||!!C.onClick,w=[];"string"==typeof(v="function"==typeof v?v():v)&&n[v]&&(v=n[v](t));let N="a"+Math.random();if(f={...C.style,...f},s.row?void 0!==u&&(f.width=u,p=void 0):(s.column||s.grid)&&void 0!==u&&(f.height=u,p=void 0),t.row)w="function"==typeof t.row?t.row():t.row;else if(t.column)w="function"==typeof t.column?t.column():t.column;else if(t.grid){let{gridCols:x=2}=t,D="function"==typeof t.grid?t.grid():t.grid;for(let R=0;R<D.length;R+=x){let _=[],S="function"==typeof t.gridRow?t.gridRow(R):t.gridRow;for(let V=R;V<R+x;V++)D[V]&&_.push(D[V]);w.push({row:[..._],...S})}t.column=[...w]}let b=this.getClassName(y,l,m,C),L=getGapAttrs(t,s,m,N),j=s&&s.gapHtml?s.gapHtml(t,e):"";return void 0!==c&&(C.draggable=!0,C.onDragStart=t=>{let{dragHandleClassName:e,onDragStart:s=()=>{}}=this.props;(!e||o(t.target).hasClass(e)||0!==o(t.target).parents("."+e).length)&&(s(c),this.dragId=c)},C.onDragOver=t=>t.preventDefault(),C.onDrop=()=>{let{onSwap:t=()=>{},onDrop:e=()=>{}}=this.props;this.dragId!==c&&(t(this.dragId,c),e(c),this.dragId=!1)}),C={onClick:g,...C,style:{flex:p,...f},className:b,"data-id":N},m.egg&&(C.onClick=()=>this.egg(m.egg)),$&&(C["ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown"]=t=>{this.lt=N,this[N+"callback"]=$,this.timer(),eventHandler("mouseup",o.proxy(this.longTouchMouseUp,this))}),this.props.loading&&v&&(v=a(i,{children:[r("div",{style:{opacity:0},children:v}),r("div",{className:"rvd-loading"})]}),C.onClick=void 0),{childs:w,html:v,attrs:C,gapAttrs:L,gapHtml:j}}getLayout(t,e,o,i){"object"==typeof t&&"object"==typeof o&&(t.props={...o.props,...t.props});let{getLayout:l}=this.props;if(!t||null===t||("function"==typeof t.show?t.show():t.show)===!1)return"";l&&(t=l(t,o));let{childs:n,html:d,attrs:h,gapAttrs:m,gapHtml:c=""}=this.getProps(t,e,o,i);return a(s,{children:[r("div",{...h,children:n.length?n.map((e,o)=>r(s,{children:this.getLayout(e,o,t,!1)},o)):d}),o&&(void 0!==o.gap||o.props&&void 0!==o.props.gap)&&r("div",{...m,children:c})]},e)}egg({callback:t=()=>{},count:e=10}){this.eggCounter++,this.eggCounter>=e&&t(),clearTimeout(this.timeOut),this.timeOut=setTimeout(()=>this.eggCounter=0,500)}longTouchMouseUp(){eventHandler("mouseup",this.longTouchMouseUp,"unbind"),clearInterval(this[this.lt+"interval"])}timer(){this.time=0,this[this.lt+"interval"]=setInterval(()=>{this.time++,this.time>50&&(clearInterval(this[this.lt+"interval"]),this[this.lt+"callback"]())},10)}render(){var{gap:t,layout:e}=this.props;return this.getLayout(e,0,void 0,!0)}};l.defaultProps={gap:0,layout:{}};export function RVDRemoveV(t,e){o(t).animate({opacity:0},100).animate({height:0,padding:0},150,e)}export function RVDRemoveH(t,e){o(t).animate({opacity:0},100).animate({width:0,padding:0},150,e)}export function RVDRemove(t,e){o(t).animate({opacity:0},200,e)}function eventHandler(t,e,s="bind"){t="ontouchstart"in document.documentElement?({mousemove:"touchmove",mouseup:"touchend"})[t]:t,o(window).unbind(t,e),"bind"===s&&o(window).bind(t,e)}function getGapAttrs(t,e={},s={},r){return({getClient:t=>"ontouchstart"in document.documentElement?{x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}:{x:t.clientX,y:t.clientY},mouseMove(t){var{rtl:e}=this.props,{pos:s,axis:r,size:i,dataId:a}=this.so,l=(this.getClient(t)[r]-s[r])*(e?-1:1);l%24==0&&(this.so.newSize=l+i,o('[data-id="'+a+'"]').css({[({x:"width",y:"height"})[r]]:this.so.newSize}))},mouseUp(){eventHandler("mousemove",this.mouseMove,"unbind"),eventHandler("mouseup",this.mouseUp,"unbind");var{onResize:t,newSize:e}=this.so;t(e)},getGap(t,e,s){let o=e["gap"+s]||e.gap||(e.props?e.props["gap"+s]||e.props.gap:void 0);return"function"==typeof o?o(t,e):o},getClassName(){let t=RVDCLS.gap;e.gapAttrs&&e.gapAttrs.className&&(t+=" "+e.gapAttrs.className);let o=getHideClassName(s);return t+(o?" "+o:"")},getGapAttrs(){let{size:i,onResize:a}=s,l={},n;if(e.row)n="x",l.width=this.getGap(t,e,"H"),i&&a&&(l.cursor="col-resize");else{if(!e.column&&!e.grid)return{};n="y",l.height=this.getGap(t,e,"V"),i&&a&&(l.cursor="row-resize")}e.gapAttrs&&e.gapAttrs.style&&(l={...l,...e.gapAttrs.style});let d={className:this.getClassName(),style:l,draggable:!1,onDragStart:t=>(t.preventDefault(),!1)};return i&&a&&(d["ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown"]=t=>{this.so={pos:this.getClient(t),onResize:a,axis:n,size:i,dataId:r},eventHandler("mousemove",o.proxy(this.mouseMove,this)),eventHandler("mouseup",o.proxy(this.mouseUp,this))}),d}}).getGapAttrs()}function getHideClassName(t){let e,s,o,r,i;return t.show_xs&&(e=!1,s=!0,o=!0,r=!0),t.hide_xs&&(e=!0),t.show_sm&&(e=!0,s=!1,o=!0,r=!0),t.hide_sm&&(s=!0),t.show_md&&(e=!0,s=!0,o=!1,r=!0),t.hide_md&&(o=!0),t.show_lg&&(e=!0,s=!0,o=!0,r=!1),t.hide_lg&&(r=!0),e&&(i+=" "+RVDCLS.hidexs),s&&(i+=" "+RVDCLS.hidesm),o&&(i+=" "+RVDCLS.hidemd),r&&(i+=" "+RVDCLS.hidelg),i}function Cls(t,e){let s=`rvd-${t}`;return e&&(s+=" "+e),s}export function renderCards({items:t=[],gap:e,attrs:s={}}){return r(l,{layout:{className:Cls("cards-container",s.className),column:[{className:Cls("cards"),gap:e,column:t.map(t=>({gap:e,row:t.map(t=>({className:"of-visible",flex:1,html:renderCard(t)}))}))}]}})}export function renderCardsRow(t=[],e){return r(l,{layout:{className:Cls("cards-row-container"),column:[{className:Cls("cards-row","of-visible"),gap:e,row:t.map(t=>({className:"of-visible",html:renderCard(t)}))}]}})}export function renderCard({text:t,subtext:e,uptext:s,attrs:o={},before:i,after:a,header:n,footer:d,justify:h}){return r(l,{layout:{attrs:o,onClick:o.onClick,className:Cls("card",o.className)+(h?" justify":""),style:o.style,column:[{show:!!n&&!Array.isArray(n),html:n,className:Cls("card-header")},{show:!!Array.isArray(n),className:Cls("card-header"),row:()=>[{html:n[0]},{flex:1},{html:n[1]}]},{className:Cls("card-body"),row:[{show:!!i,html:()=>i,align:"vh",className:Cls("card-before")},{flex:1,align:"v",column:[{show:!!s,html:s,className:Cls("card-uptext")},{html:t,className:Cls("card-text")},{show:!!e,html:()=>e,className:Cls("card-subtext")}]},{html:a,align:"vh",className:Cls("card-after")}]},{show:!!d&&!Array.isArray(d),html:n,className:Cls("card-footer")},{show:!!Array.isArray(d),className:Cls("card-footer"),row:()=>[{html:d[0]},{flex:1},{html:d[1]}]}]}})}

package.json

 {
   "name": "react-virtual-dom",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "convert json to react html layout(virtual DOM)",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Worsened metrics

Total package byte prevSize

39935

decreased by-98.24%

Number of package files

4

decreased by-73.33%

Lines of code

622

decreased by-38.23%

No dependency changes