openstack-uicore-foundation/lib/components/simple-link-list.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,s)=>{s.d(t,{default:()=>d});var n=s(6031),o=s.n(n),i=s(2462),r=s.n(i),a=s(2015),l=s.n(a);const c=["children","replaceNewLine","className"],d=e=>{let{children:t,replaceNewLine:s=!1,className:n=""}=e,i=r()(e,c);return l().createElement("span",o()({className:n,dangerouslySetInnerHTML:{__html:s?null==t?void 0:t.replace(/\n/g,"<br />"):t}},i))}},4216:(e,t,s)=>{s.d(t,{default:()=>y});var n=s(2015),o=s.n(n),i=s(9825),r=s.n(i);class a extends o().Component{constructor(e){super(e),this.handleSort=this.handleSort.bind(this)}getSortClass(){if(!this.props.sortable)return null;switch(this.props.sortDir){case 1:return"sorting_asc";case-1:return"sorting_desc";default:return this.props.sortable?"sorting":null}}handleSort(e){e.preventDefault(),this.props.hasOwnProperty("onSort")&&this.props.sortable&&this.props.onSort(this.props.columnIndex,this.props.columnKey,this.props.sortDir?-1*this.props.sortDir:1,this.props.sortFunc)}render(){return o().createElement("th",{onClick:this.handleSort,className:this.getSortClass(),width:this.props.width},this.props.children)}}a.propTypes={onSort:r().func,sortDir:r().number,columnIndex:r().number,columnKey:r().any,sortable:r().bool,sortFunc:r().func};const l=a;var c=s(4564);class d extends o().Component{constructor(e){super(e),this.handleEdit=this.handleEdit.bind(this)}shouldDisplayAction(e){let{id:t}=this.props;return!e.hasOwnProperty("display")||e.display(t)}handleEdit(e,t){t.stopPropagation(),t.preventDefault(),this.props.actions.edit.onClick(e)}render(){let{even:e,actions:t,id:s,children:n}=this.props,i=e?"even":"odd";return(null==t?void 0:t.edit)&&this.shouldDisplayAction(t.edit)?o().createElement("tr",{role:"row",className:i+" can-edit",onClick:this.handleEdit.bind(this,s)},n):o().createElement("tr",{role:"row",className:i},n)}}class p extends o().Component{constructor(e){super(e),this.handleAction=this.handleAction.bind(this),this.shouldDisplayAction=this.shouldDisplayAction.bind(this)}shouldDisplayAction(e){let{id:t}=this.props;return!e.hasOwnProperty("display")||e.display(t)}handleAction(e,t,s){s.stopPropagation(),s.preventDefault(),e(t)}render(){let{actions:e,id:t}=this.props;return o().createElement("td",{className:"actions",key:"actions"},e.hasOwnProperty("delete")&&this.shouldDisplayAction(e.delete)&&o().createElement("a",{href:"","data-tip":"delete",onClick:this.handleAction.bind(this,e.delete.onClick,t)},o().createElement("i",{className:"fa fa-trash-o delete-icon"})),e.hasOwnProperty("custom")&&e.custom.map((e=>this.shouldDisplayAction(e)&&o().createElement("a",{href:"","data-tip":e.tooltip,key:"custom_"+e.name,onClick:this.handleAction.bind(this,e.onClick,t)},e.icon))))}}var h=s(5433);const u={sortFunc:(e,t)=>e<t?-1:e>t?1:0,sortable:!1,sortCol:0,sortDir:1,colWidth:""},m=(e,t,s,n)=>e&&e===s||s===t?n:null,y=e=>{var t;let{options:s,columns:n}=e,i=s.hasOwnProperty("className")?s.className:"";return i+=null!==(t=s.actions)&&void 0!==t&&t.edit?" table-hover":"",o().createElement("div",null,o().createElement("table",{className:"table table-striped dataTable "+i},o().createElement("thead",null,o().createElement("tr",null,n.map(((t,n)=>{let i=void 0!==s.sortCol?s.sortCol:u.sortCol,r=void 0!==s.sortDir?s.sortDir:u.sortDir,a=void 0!==s.sortFunc?s.sortFunc:u.sortFunc,c=void 0!==t.sortable?t.sortable:u.sortable,d=void 0!==t.width?t.width:u.colWidth;return o().createElement(l,{onSort:e.onSort,sortDir:m(t.columnKey,n,i,r),sortable:c,sortFunc:a,columnIndex:n,columnKey:t.columnKey,width:d,key:"heading_"+n},t.value)})),s.actions&&o().createElement(l,{key:"actions_heading"},s.actionsHeader||" "))),o().createElement("tbody",null,n.length>0&&e.data.map(((e,t)=>Array.isArray(e)&&e.length!==n.length?(console.warn(`Data at row ${t} is ${e.length}. It should be ${n.length}.`),o().createElement("tr",{key:"row_"+t})):o().createElement(d,{even:t%2==0,key:"row_"+t,id:e.id,actions:s.actions},((e,t,s)=>{const n=t.map(((t,s)=>{const n=(null==t?void 0:t.styles)||{};return t.hasOwnProperty("render")?o().createElement(c.A,{key:"cell_"+s,style:n},t.render(e,e[t.columnKey])):o().createElement(c.A,{key:"cell_"+s,title:t.hasOwnProperty("title")?e[t.columnKey]:null,style:n},e[t.columnKey])}));return s&&n.push(o().createElement(p,{key:"actions_cell",id:e.id,actions:s})),n})(e,n,s.actions)))))),o().createElement(h.Tooltip,{delayShow:10}))}},4564:(e,t,s)=>{s.d(t,{A:()=>r});var n=s(2015),o=s.n(n),i=s(5028);const r=e=>{let{children:t}=e,s="";return t&&(s=o().isValidElement(t)?t:o().createElement(i.default,null,t.toString())),o().createElement("td",e,s)}},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")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")},2113:e=>{e.exports=require("react-select/lib/Async")},2934:e=>{e.exports=require("react-select/lib/AsyncCreatable")},5433:e=>{e.exports=require("react-tooltip")}},t={};function s(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,s),i.exports}(()=>{s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t}})(),(()=>{s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var n={};s.r(n),s.d(n,{default:()=>b});var o=s(2015),i=s.n(o),r=s(9825),a=s.n(r),l=s(2113),c=s.n(l),d=s(4216),p=s(6842),h=s.n(p),u=s(2934),m=s.n(u);class y extends i().Component{constructor(e){super(e),this.state={value:""},this.handleChange=this.handleChange.bind(this),this.getOptions=this.getOptions.bind(this),this.handleLink=this.handleLink.bind(this),this.filterOption=this.filterOption.bind(this),this.handleNew=this.handleNew.bind(this),this.getNewOptionData=this.getNewOptionData.bind(this),this.isValidNewOption=this.isValidNewOption.bind(this)}getOptions(e,t){let{options:s}=this.props,n=s.hasOwnProperty("defaultOptions")?s.defaultOptions:void 0;if(!e&&!n)return Promise.resolve({options:[]});this.props.options.actions.search(e,t)}handleChange(e){this.setState({value:e})}handleLink(e){e.preventDefault(),this.props.options.actions.add.onClick(this.state.value),this.setState({value:""})}getNewOptionData(e,t){return{tag:t,id:e}}isValidNewOption(e,t,s){let{options:n}=this.props,o=n.hasOwnProperty("labelKey")?n.labelKey:"label",i=s.find((t=>t[o]==e));return!(!e||i)}handleNew(e){this.props.options.onCreateTag(e,this.handleChange)}filterOption(e,t){let{options:s,values:n}=this.props,o=this.props.hasOwnProperty("allowDuplicates"),i=s.hasOwnProperty("labelKey")?s.labelKey:"label";return!!o||!n.find((t=>t[i]===e.label))}render(){let{options:e,values:t,columns:s}=this.props,n=!this.state.value,o=e.hasOwnProperty("title")?e.title:"Table",r=e.hasOwnProperty("valueKey")?e.valueKey:"value",a=e.hasOwnProperty("labelKey")?e.labelKey:"label",l=e.hasOwnProperty("onCreateTag"),p=e.hasOwnProperty("defaultOptions")?e.defaultOptions:void 0,u={className:"dataTable",actions:{delete:e.actions.delete}};e.hasOwnProperty("className")&&(u.className=e.className),e.actions.hasOwnProperty("edit")&&(u.actions.edit=e.actions.edit),e.actions.hasOwnProperty("custom")&&(u.actions.custom=e.actions.custom),e.hasOwnProperty("sortCol")&&(t=t.sort(((t,s)=>{const n=isNaN(t[e.sortCol])?t[e.sortCol].toLowerCase():t[e.sortCol],o=isNaN(s[e.sortCol])?s[e.sortCol].toLowerCase():s[e.sortCol];return n>o?1:n<o?-1:0})));let y=null;return y=l?i().createElement(m(),{className:"link-select btn-group text-left",value:this.state.value,key:JSON.stringify(t),getOptionValue:e=>e[r],getOptionLabel:e=>e[a],onChange:this.handleChange,loadOptions:this.getOptions,filterOption:this.filterOption,onCreateOption:this.handleNew,getNewOptionData:this.getNewOptionData,isValidNewOption:this.isValidNewOption}):i().createElement(c(),{className:"link-select btn-group text-left",value:this.state.value,key:JSON.stringify(t),getOptionValue:e=>e[r],getOptionLabel:e=>e[a],onChange:this.handleChange,loadOptions:this.getOptions,filterOption:this.filterOption,defaultOptions:p}),i().createElement("div",{className:"row simple-link-list"},i().createElement("div",{className:"col-md-4 simple-link-list-title"},i().createElement("h4",null,o)),i().createElement("div",{className:"col-md simple-link-list-buttons"},y,i().createElement("button",{type:"button",className:"btn btn-default add-button",onClick:this.handleLink,disabled:n},h().translate("general.add"))),i().createElement("div",{className:"col-md-12"},i().createElement(d.default,{className:"dataTable",options:u,data:t,columns:s})))}}y.propTypes={values:a().array.isRequired,options:a().shape({title:a().string,sortCol:a().string,valueKey:a().string.isRequired,labelKey:a().string.isRequired,className:a().string,actions:a().shape({search:a().func.isRequired,delete:a().shape({onClick:a().func.isRequired}),add:a().shape({onClick:a().func.isRequired}),edit:a().shape({onClick:a().func.isRequired}),custom:a().array}).isRequired}).isRequired,columns:a().array.isRequired};const b=y;return n})()));
//# sourceMappingURL=simple-link-list.js.map