openstack-uicore-foundation/lib/components/table-editable.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={9558:(e,t,n)=>{n.d(t,{shallowEqual:()=>a});n(5812),n(8041);const a=(e,t)=>{const n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(let a of n)if(e[a]!==t[a])return!1;return!0}},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},6842:e=>{e.exports=require("i18n-react/dist/i18n-react")},5812:e=>{e.exports=require("moment-timezone")},2015:e=>{e.exports=require("react")},5433:e=>{e.exports=require("react-tooltip")},9236:e=>{e.exports=require("sweetalert2")},8041:e=>{e.exports=require("urijs")}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var s=t[a]={exports:{}};return e[a](s,s.exports,n),s.exports}(()=>{n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t}})(),(()=>{n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})}})(),(()=>{n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var a={};n.r(a),n.d(a,{default:()=>E});var r=n(1116),s=n.n(r),i=n(2015),o=n.n(i);class l extends o().Component{constructor(e){super(e)}render(){return o().createElement("th",{width:this.props.width},this.props.children)}}const c=l,d=e=>e.is_edit?o().createElement("td",null,!e.shouldUseTextArea&&o().createElement("input",{type:"text",className:"form-control",defaultValue:e.children,name:e.name,id:e.id,onChange:e.handleChange}),e.shouldUseTextArea&&o().createElement("textarea",{className:"form-control",defaultValue:e.children,name:e.name,id:e.id,onChange:e.handleChange})):o().createElement("td",null,e.children);class h extends o().Component{constructor(e){super(e),this.state={is_editing:!1}}onDelete(e,t){t.preventDefault(),t.stopPropagation(),this.props.actions.delete(e)}onSave(e,t){t.preventDefault(),t.stopPropagation(),this.setState({is_editing:!1}),this.props.actions.save(e)}onEdit(e,t){t.preventDefault(),t.stopPropagation(),this.setState({is_editing:!0}),this.props.actions.edit(e)}onCancel(e,t){t.preventDefault(),t.stopPropagation(),this.setState({is_editing:!1}),this.props.actions.cancel(e)}render(){let{actions:e,id:t}=this.props;return this.state.is_editing?o().createElement("td",{className:"actions"},o().createElement("a",{href:"",onClick:this.onSave.bind(this,t),"data-tip":"save"},o().createElement("i",{className:"fa fa-floppy-o"})),o().createElement("a",{href:"",onClick:this.onCancel.bind(this,t),"data-tip":"cancel"},o().createElement("i",{className:"fa fa-times"}))):o().createElement("td",{className:"actions"},"edit"in e&&o().createElement("a",{href:"",onClick:this.onEdit.bind(this,t),"data-tip":"edit"},o().createElement("i",{className:"fa fa-pencil-square-o"})),"delete"in e&&o().createElement("a",{href:"",onClick:this.onDelete.bind(this,t),"data-tip":"delete"},o().createElement("i",{className:"fa fa-trash-o delete-icon"})))}}class p extends o().Component{render(){const{children:e,even:t,id:n}=this.props;return o().createElement("tr",{id:n,role:"row",className:t?"even":"odd"},e)}}var u=n(9236),m=n.n(u),w=n(6842),f=n.n(w),v=n(5433),g=n(9558);function y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}const b="";class E extends o().Component{constructor(e){var t,n;super(e),this.state={rows:e.data,new_row:{}},this.onSave=null===(t=e.options.actions)||void 0===t||null===(n=t.save)||void 0===n?void 0:n.onClick,this.actions=e.options.actions||{},this.actions.edit=this.editRow.bind(this),this.actions.save=this.saveRow.bind(this),this.actions.delete=this.deleteClick.bind(this),this.actions.handleChange=this.onChangeCell.bind(this),this.actions.cancel=this.editRowCancel.bind(this),this.saveNewRow=this.saveNewRow.bind(this),this.handleNewChange=this.onChangeNewCell.bind(this)}componentDidUpdate(e,t,n){(0,g.shallowEqual)(this.props.data,e.data)||this.setState({rows:this.props.data})}saveRow(e,t){const{rows:n}=this.state;let a=n.find((t=>t.id==e));a.is_edit=!1,this.editing_row=null,this.setState({rows:n}),this.onSave(a)}deleteClick(e){var t,n;let a=null===(t=this.props.options.actions)||void 0===t||null===(n=t.delete)||void 0===n?void 0:n.onClick;this.props.options.hasOwnProperty("noAlert")?a(e):m().fire({title:f().translate("general.are_you_sure"),text:f().translate("general.remove_warning"),type:"warning",showCancelButton:!0,confirmButtonColor:"#DD6B55",confirmButtonText:f().translate("general.yes_delete")}).then((function(t){t.value&&a(e)}))}editRow(e,t){const{rows:n}=this.state;let a=n.find((t=>t.id==e));this.editing_row=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?y(Object(n),!0).forEach((function(t){s()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):y(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},a),a.is_edit=!0,this.setState({rows:n})}editRowCancel(e,t){const{rows:n}=this.state;n.forEach((e=>{e.is_edit=!1}));let a=n.findIndex((t=>t.id==e));n[a]=this.editing_row,this.setState({rows:n})}onChangeCell(e){const{rows:t}=this.state;let n=e.target;t.find((e=>e.id==n.id))[n.name]=n.value,this.setState({rows:t})}onChangeNewCell(e){const{new_row:t}=this.state;let n=e.target;t[n.name]=n.value,this.setState({new_row:t})}saveNewRow(e){const{new_row:t}=this.state;e.preventDefault(),this.onSave(t),this.setState({new_row:{}})}render(){let{options:e,columns:t}=this.props,n=e.hasOwnProperty("className")?e.className:"",a=this.props.hasOwnProperty("textArea");return o().createElement("div",null,o().createElement("table",{className:"table table-striped table-bordered editableTable "+n},o().createElement("thead",null,o().createElement("tr",null,t.map(((e,t)=>{let n=e.width?e.width:b;return o().createElement(c,{width:n,key:"heading_"+t},e.value)})),this.actions&&o().createElement(c,{key:"actions_heading"},"Actions"))),o().createElement("tbody",null,t.length>0&&this.state.rows.map(((e,n)=>Array.isArray(e)&&e.length!==t.length?(console.warn(`Data at row ${n} is ${e.length}. It should be ${t.length}.`),o().createElement("tr",null)):o().createElement(p,{even:n%2==0,key:"row_"+e.id,id:e.id},((e,t,n,a)=>{var r=t.map(((t,r)=>o().createElement(d,{shouldUseTextArea:a,key:e.id+"_field"+r,name:t.columnKey,id:e.id,is_edit:e.is_edit,handleChange:n.handleChange},e[t.columnKey])));return n&&r.push(o().createElement(h,{key:"actions_"+e.id,id:e.id,actions:n})),r})(e,t,this.actions,a)))),o().createElement(p,{even:0,id:"new_row",key:"new_row"},((e,t,n,a,r)=>{var s=e.map(((e,n)=>{let s=void 0!==t[e.columnKey]?t[e.columnKey]:"";return o().createElement("td",{key:"new_row_"+n},r&&o().createElement("textarea",{className:"form-control",id:"new_"+e.columnKey,name:e.columnKey,onChange:a,value:s}),!r&&o().createElement("input",{className:"form-control",id:"new_"+e.columnKey,name:e.columnKey,onChange:a,value:s}))}));return s.push(o().createElement("td",{key:"add_new"},o().createElement("button",{className:"btn btn-default",onClick:n}," Add "))),s})(t,this.state.new_row,this.saveNewRow,this.handleNewChange,a)))),o().createElement(v.Tooltip,{delayShow:10}))}}return a})()));
//# sourceMappingURL=table-editable.js.map