openstack-uicore-foundation/lib/components/table-sortable.js

ui reactjs components for openstack marketing site

!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,(()=>(()=>{"use strict";var e={5028:(e,t,r)=>{r.d(t,{default:()=>d});var n=r(6031),o=r.n(n),l=r(2462),i=r.n(l),a=r(2015),c=r.n(a);const s=["children","replaceNewLine","className"],d=e=>{let{children:t,replaceNewLine:r=!1,className:n=""}=e,l=i()(e,s);return c().createElement("span",o()({className:n,dangerouslySetInnerHTML:{__html:r?null==t?void 0:t.replace(/\n/g,"<br />"):t}},l))}},4564:(e,t,r)=>{r.d(t,{A:()=>i});var n=r(2015),o=r.n(n),l=r(5028);const i=e=>{let{children:t}=e,r="";return t&&(r=o().isValidElement(t)?t:o().createElement(l.default,null,t.toString())),o().createElement("td",e,r)}},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},6031:e=>{e.exports=require("@babel/runtime/helpers/extends")},2462:e=>{e.exports=require("@babel/runtime/helpers/objectWithoutProperties")},6842:e=>{e.exports=require("i18n-react/dist/i18n-react")},7825:e=>{e.exports=require("lodash")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")},6924:e=>{e.exports=require("react-dnd")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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={};r.r(n),r.d(n,{default:()=>C});var o=r(1116),l=r.n(o),i=r(2015),a=r.n(i),c=r(9825),s=r.n(c);const d=require("immutability-helper");var u=r.n(d),p=r(6924);const m=require("react-dnd-html5-backend");class h extends a().Component{constructor(e){super(e)}render(){return a().createElement("th",{width:this.props.width},this.props.children)}}const y=h;class b extends a().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:t}=this.props;return a().createElement("td",{className:"actions",key:"actions"},e.hasOwnProperty("edit")&&this.shouldDisplayAction(e.edit)&&a().createElement("a",{href:"","data-tip":"edit",onClick:this.handleAction.bind(this,e.edit.onClick,t)},a().createElement("i",{className:"fa fa-pencil-square-o"})),e.hasOwnProperty("delete")&&this.shouldDisplayAction(e.delete)&&a().createElement("a",{href:"","data-tip":"delete",onClick:this.handleAction.bind(this,e.delete.onClick,t)},a().createElement("i",{className:"fa fa-trash-o delete-icon"})),"custom"in e&&e.custom.map((e=>this.shouldDisplayAction(e,t)&&a().createElement("a",{href:"","data-tip":e.tooltip,key:"custom_"+e.name,onClick:this.handleAction.bind(this,e.onClick,t)},e.icon))))}}function f(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 v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?f(Object(r),!0).forEach((function(t){l()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}const g=({text:e,even:t,id:r,index:n,moveCard:o,dropItem:l,children:c,findRow:s})=>{const d=s(r).index,u=(0,i.useRef)(null),[{handlerId:m},h]=(0,p.useDrop)({accept:"row",collect:e=>({handlerId:e.getHandlerId()}),hover(e,t){var r;if(!u.current)return;const l=e.index,i=n;if(l===i)return;const a=null===(r=u.current)||void 0===r?void 0:r.getBoundingClientRect(),c=(a.bottom-a.top)/2,s=t.getClientOffset().y-a.top;l<i&&s<c||l>i&&s>c||(o(l,i),e.index=i)}}),[{isDragging:y},b]=(0,p.useDrag)({type:"row",item:()=>({id:r,index:n}),end:(e,t)=>{const{id:r,index:n}=e;return t.didDrop()?l(r,n+1):o(n,d)},collect:e=>({isDragging:e.isDragging()})}),f=y?0:1;return b(h(u)),a().createElement("tr",{id:r,ref:u,role:"row",className:t?"even":"odd",style:v(v({},{border:"1px dashed gray",padding:"0.5rem 1rem",marginBottom:".5rem",backgroundColor:"white",cursor:"move"}),{},{opacity:f})},c)};g.propTypes={index:s().number.isRequired,id:s().any.isRequired,moveCard:s().func.isRequired};const O=g;var w=r(6842),k=r.n(w),E=r(4564);r(7825);function x(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}const P="",j=({data:e,options:t,columns:r,dropCallback:n,orderField:o,idField:c})=>{var s,d,h,f;const[v,g]=(0,i.useState)(e),[w,j]=(0,i.useState)({});(0,i.useEffect)((()=>{g(e)}),[e]);const C=(e,t,r,n)=>a().createElement(O,{even:n%2==0,key:e.id,index:n,id:e.id,moveCard:_,findRow:q,dropItem:A},((e,t,r)=>{let n=t.map(((t,r)=>t.hasOwnProperty("render")?a().createElement(E.A,{key:"cell_"+r,title:t.hasOwnProperty("title")?e[t.columnKey]:null},t.render(e,e[t.columnKey])):a().createElement(E.A,{key:"cell_"+r,title:t.hasOwnProperty("title")?e[t.columnKey]:null},e[t.columnKey])));return r&&n.push(a().createElement(b,{key:"actions",id:e.id,actions:r})),n})(e,t,r.actions)),D=e=>(e.sort((function(e,t){const r=e[o],n=t[o];return r<n?-1:r>n?1:0})),e),q=(0,i.useCallback)((e=>{const t=v.filter((t=>t[c]===e))[0];return{row:t,index:v.indexOf(t)}}),[v]),_=(0,i.useCallback)(((e,t)=>{g((r=>{r=u()(r,{$splice:[[e,1],[t,0,r[e]]]});for(let e in r)r[e][o]=parseInt(e)+1;return D(r)}))}),[v,g]),A=(e,t)=>{const r=D(v);g(r),n(r,e,t)};let N=t.hasOwnProperty("className")?t.className:"",R=(null==t||null===(s=t.actions)||void 0===s||null===(d=s.save)||void 0===d?void 0:d.onClick)&&null!==(null==t||null===(h=t.actions)||void 0===h||null===(f=h.save)||void 0===f?void 0:f.onClick);return a().createElement("div",{className:"sortable-table-box"},a().createElement("i",null,k().translate("general.drag_and_drop")),a().createElement("table",{className:"table table-striped table-hover sortableTable "+N},a().createElement("thead",null,a().createElement("tr",null,r.map(((e,t)=>{let r=e.width?e.width:P;return a().createElement(y,{width:r,key:t},e.value)})),t.actions&&a().createElement(y,{key:"actions"},"Actions"))),a().createElement("tbody",null,r.length>0&&v.map(((e,n)=>Array.isArray(e)&&e.length!==r.length?(console.warn(`Data at row ${n} is ${e.length}. It should be ${r.length}.`),a().createElement("tr",null)):a().createElement(p.DndProvider,{backend:m.HTML5Backend,key:n},C(e,r,t,n))))),R&&a().createElement("tfoot",null,a().createElement("tr",null,((e,t,r,n)=>{let o=e.map(((e,r)=>{let o=void 0!==t[e.columnKey]?t[e.columnKey]:"";return"checkbox"===(null==e?void 0:e.input)?a().createElement("td",{key:"new_row_"+r,className:"checkbox-cell"},a().createElement("input",{type:"checkbox",id:"new_"+e.columnKey,name:e.columnKey,onChange:n,checked:o,title:null==e?void 0:e.value})):a().createElement("td",{key:"new_row_"+r},a().createElement("input",{className:"form-control",id:"new_"+e.columnKey,name:e.columnKey,placeholder:null==e?void 0:e.value,onChange:n,value:o}))}));return o.push(a().createElement("td",{key:"add_new"},a().createElement("button",{className:"btn btn-default",onClick:r}," Add"))),o})(r,w,(e=>{var r,n;e.preventDefault(),null==t||null===(r=t.actions)||void 0===r||null===(n=r.save)||void 0===n||n.onClick(w),j({})}),(e=>{let t=e.target,r=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){l()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},w),{name:n,value:o}=t;"checkbox"===t.type&&(o=t.checked),r[n]=o,j(r)}))))))};j.defaultProps={idField:"id"},j.propTypes={data:s().array.isRequired,options:s().shape({className:s().string,actions:s().object}).isRequired,columns:s().arrayOf(s().shape({columnKey:s().string.isRequired,value:s().any.isRequired,input:s().string,render:s().func})).isRequired,dropCallback:s().func.isRequired,orderField:s().string.isRequired,idField:s().string};const C=j;return n})()));
//# sourceMappingURL=table-sortable.js.map