openstack-uicore-foundation 4.0.8 → 4.0.9

package/lib/components/table-sortable.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],t):"object"==typeof exports?exports["openstack-uicore-foundation"]=t():e["openstack-uicore-foundation"]=t()}(this,(function(){return(()=>{"use strict";var e={9732:(e,t,r)=>{r.d(t,{shallowEqual:()=>n});require("moment-timezone");r(6530);const n=(e,t)=>{const r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return!1;for(let n of r)if(e[n]!==t[n])return!1;return!0}},6530:e=>{e.exports=require("urijs")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var n={};return(()=>{r.r(n),r.d(n,{default:()=>C});const e=require("react");var t=r.n(e);const o=require("prop-types");var i=r.n(o);const a=require("immutability-helper");var s=r.n(a);const c=require("react-dnd"),d=require("react-dnd-html5-backend");var l=r.n(d);class p extends t().Component{constructor(e){super(e)}render(){return t().createElement("th",{width:this.props.width},this.props.children)}}const u=p,h=e=>t().createElement("td",e,e.children);class m extends t().Component{constructor(e){super(e),this.handleAction=this.handleAction.bind(this)}shouldDisplayAction(e){let{id:t}=this.props;return!e.hasOwnProperty("display")||e.display(t)}handleAction(e,t,r){r.stopPropagation(),r.preventDefault(),e(t)}render(){let{actions:e,id:r}=this.props;return t().createElement("td",{className:"actions",key:"actions"},e.hasOwnProperty("edit")&&this.shouldDisplayAction(e.edit)&&t().createElement("a",{href:"","data-tip":"edit",onClick:this.handleAction.bind(this,e.edit.onClick,r)},t().createElement("i",{className:"fa fa-pencil-square-o"})),e.hasOwnProperty("delete")&&this.shouldDisplayAction(e.delete)&&t().createElement("a",{href:"","data-tip":"delete",onClick:this.handleAction.bind(this,e.delete.onClick,r)},t().createElement("i",{className:"fa fa-trash-o delete-icon"})),"custom"in e&&e.custom.map((e=>this.shouldDisplayAction(e,r)&&t().createElement("a",{href:"","data-tip":e.tooltip,key:"custom_"+e.name,onClick:this.handleAction.bind(this,e.onClick,r)},e.icon))))}}const g=require("react-dom");function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){b(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const v={border:"1px dashed gray",padding:"0.5rem 1rem",marginBottom:".5rem",backgroundColor:"white",cursor:"move"},w={beginDrag:e=>({id:e.id,index:e.index}),endDrag(e,t){t.didDrop()&&e.dropCard(e.id,e.index)}},O={hover(e,t,r){const n=t.getItem().index,o=e.index;if(n===o)return;const i=(0,g.findDOMNode)(r).getBoundingClientRect(),a=(i.bottom-i.top)/2,s=t.getClientOffset().y-i.top;n<o&&s<a||n>o&&s>a||(e.moveCard(n,o),t.getItem().index=o)}};class D extends t().Component{render(){const{text:e,isDragging:r,connectDragSource:n,connectDropTarget:o,children:i,even:a,id:s}=this.props,c=r?0:1;return n(o(t().createElement("tr",{id:s,role:"row",className:a?"even":"odd",style:f(f({},v),{},{opacity:c})},i)))}}D.propTypes={connectDragSource:i().func.isRequired,connectDropTarget:i().func.isRequired,index:i().number.isRequired,isDragging:i().bool.isRequired,id:i().any.isRequired,moveCard:i().func.isRequired};const q=(0,c.DragSource)("card",w,((e,t)=>({connectDragSource:e.dragSource(),isDragging:t.isDragging()})))((0,c.DropTarget)("card",O,(e=>({connectDropTarget:e.dropTarget()})))(D)),x=require("i18n-react/dist/i18n-react");var E=r.n(x),j=r(9732);const k="";class R extends t().Component{constructor(e){super(e),this.moveRow=this.moveRow.bind(this),this.dropRow=this.dropRow.bind(this),this.state={rows:e.data}}componentDidUpdate(e,t,r){(0,j.shallowEqual)(this.props.data,e.data)||this.setState({rows:this.props.data})}moveRow(e,t){const{rows:r}=this.state,n=r[e];this.setState(s()(this.state,{rows:{$splice:[[e,1],[t,0,n]]}}))}dropRow(e,t){let{orderField:r}=this.props,n=t+1,o=[...this.state.rows];for(var i in o)o[i][r]=parseInt(i)+1;this.setState(s()(this.state,{rows:{$set:o}})),this.props.dropCallback(o,e,n)}render(){let{options:e,columns:r}=this.props,n=e.hasOwnProperty("className")?e.className:"";return t().createElement("div",{className:"sortable-table-box"},t().createElement("i",null,E().translate("general.drag_and_drop")),t().createElement("table",{className:"table table-striped table-hover sortableTable "+n},t().createElement("thead",null,t().createElement("tr",null,r.map(((e,r)=>{let n=e.width?e.width:k;return t().createElement(u,{width:n,key:r},e.value)})),e.actions&&t().createElement(u,{key:"actions"},"Actions"))),t().createElement("tbody",null,r.length>0&&this.state.rows.map(((n,o)=>Array.isArray(n)&&n.length!==r.length?(console.warn(`Data at row ${o} is ${n.length}. It should be ${r.length}.`),t().createElement("tr",null)):t().createElement(q,{even:o%2==0,key:n.id,index:o,id:n.id,moveCard:this.moveRow,dropCard:this.dropRow},((e,r,n)=>{var o=r.map(((r,n)=>t().createElement(h,{key:n},e[r.columnKey])));return n&&o.push(t().createElement(m,{key:"actions",id:e.id,actions:n})),o})(n,r,e.actions)))))))}}R.propTypes={data:i().array.isRequired,options:i().shape({className:i().string,actions:i().object}).isRequired,columns:i().arrayOf(i().shape({columnKey:i().string.isRequired,value:i().any.isRequired})).isRequired,orderField:i().string.isRequired,dropCallback:i().func.isRequired};const C=(0,c.DragDropContext)(l())(R)})(),n})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],t):"object"==typeof exports?exports["openstack-uicore-foundation"]=t():e["openstack-uicore-foundation"]=t()}(this,(function(){return(()=>{"use strict";var e={9732:(e,t,r)=>{require("moment-timezone");r(6530)},6530:e=>{e.exports=require("urijs")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var n={};return(()=>{r.r(n),r.d(n,{default:()=>w});const e=require("react");var t=r.n(e);const o=require("prop-types");var i=r.n(o);const a=require("immutability-helper");var s=r.n(a);const c=require("react-dnd"),l=require("react-dnd-html5-backend");class d extends t().Component{constructor(e){super(e)}render(){return t().createElement("th",{width:this.props.width},this.props.children)}}const u=d,p=e=>t().createElement("td",e,e.children);class m extends t().Component{constructor(e){super(e),this.handleAction=this.handleAction.bind(this)}shouldDisplayAction(e){let{id:t}=this.props;return!e.hasOwnProperty("display")||e.display(t)}handleAction(e,t,r){r.stopPropagation(),r.preventDefault(),e(t)}render(){let{actions:e,id:r}=this.props;return t().createElement("td",{className:"actions",key:"actions"},e.hasOwnProperty("edit")&&this.shouldDisplayAction(e.edit)&&t().createElement("a",{href:"","data-tip":"edit",onClick:this.handleAction.bind(this,e.edit.onClick,r)},t().createElement("i",{className:"fa fa-pencil-square-o"})),e.hasOwnProperty("delete")&&this.shouldDisplayAction(e.delete)&&t().createElement("a",{href:"","data-tip":"delete",onClick:this.handleAction.bind(this,e.delete.onClick,r)},t().createElement("i",{className:"fa fa-trash-o delete-icon"})),"custom"in e&&e.custom.map((e=>this.shouldDisplayAction(e,r)&&t().createElement("a",{href:"","data-tip":e.tooltip,key:"custom_"+e.name,onClick:this.handleAction.bind(this,e.onClick,r)},e.icon))))}}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){b(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const f=({text:r,even:n,id:o,index:i,moveCard:a,dropItem:s,children:l})=>{const d=(0,e.useRef)(null),[{handlerId:u},p]=(0,c.useDrop)({accept:"row",collect:e=>({handlerId:e.getHandlerId()}),drop:(e,t)=>s(o,i+1),hover(e,t){var r;if(!d.current)return;const n=e.index,o=i;if(n===o)return;const s=null===(r=d.current)||void 0===r?void 0:r.getBoundingClientRect(),c=(s.bottom-s.top)/2,l=t.getClientOffset().y-s.top;n<o&&l<c||n>o&&l>c||(a(n,o),e.index=o)}}),[{isDragging:m},h]=(0,c.useDrag)({type:"row",item:()=>({id:o,index:i}),collect:e=>({isDragging:e.isDragging()})}),b=m?0:1;return h(p(d)),t().createElement("tr",{id:o,ref:d,role:"row",className:n?"even":"odd",style:y(y({},{border:"1px dashed gray",padding:"0.5rem 1rem",marginBottom:".5rem",backgroundColor:"white",cursor:"move"}),{},{opacity:b})},l)};f.propTypes={index:i().number.isRequired,id:i().any.isRequired,moveCard:i().func.isRequired};const g=f,v=require("i18n-react/dist/i18n-react");var O=r.n(v);r(9732);const k="",E=({data:r,options:n,columns:o,dropCallback:i,orderField:a})=>{const[d,h]=(0,e.useState)(r),y=(0,e.useCallback)(((e,r,n,o)=>t().createElement(g,{even:o%2==0,key:e.id,index:o,id:e.id,moveCard:b,dropItem:f},((e,r,n)=>{var o=r.map(((r,n)=>t().createElement(p,{key:n},e[r.columnKey])));return n&&o.push(t().createElement(m,{key:"actions",id:e.id,actions:n})),o})(e,r,n.actions))),[]),b=(0,e.useCallback)(((e,t,r)=>{h((r=>s()(r,{$splice:[[e,1],[t,0,r[e]]]})))}),[]),f=(e,t)=>{i(d,e,t)};let v=n.hasOwnProperty("className")?n.className:"";return t().createElement("div",{className:"sortable-table-box"},t().createElement("i",null,O().translate("general.drag_and_drop")),t().createElement("table",{className:"table table-striped table-hover sortableTable "+v},t().createElement("thead",null,t().createElement("tr",null,o.map(((e,r)=>{let n=e.width?e.width:k;return t().createElement(u,{width:n,key:r},e.value)})),n.actions&&t().createElement(u,{key:"actions"},"Actions"))),t().createElement("tbody",null,o.length>0&&d.map(((e,r)=>Array.isArray(e)&&e.length!==o.length?(console.warn(`Data at row ${r} is ${e.length}. It should be ${o.length}.`),t().createElement("tr",null)):t().createElement(c.DndProvider,{backend:l.HTML5Backend},y(e,o,n,r)))))))};E.propTypes={data:i().array.isRequired,options:i().shape({className:i().string,actions:i().object}).isRequired,columns:i().arrayOf(i().shape({columnKey:i().string.isRequired,value:i().any.isRequired})).isRequired,orderField:i().string.isRequired,dropCallback:i().func.isRequired};const w=E})(),n})()}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openstack-uicore-foundation",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "ui reactjs components for openstack marketing site",
   "main": "lib/openstack-uicore-foundation.js",
   "scripts": {
@@ -47,8 +47,8 @@
     "react": "^16.6.3",
     "react-bootstrap": "^0.31.5",
     "react-datetime": "^2.16.2",
-    "react-dnd": "^2.6.0",
-    "react-dnd-html5-backend": "^2.6.0",
+    "react-dnd": "^16.0.0",
+    "react-dnd-html5-backend": "^16.0.0",
     "react-dom": "^16.4.1",
     "react-dropzone": "^4.2.9",
     "react-google-maps": "^9.4.5",