primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 6.85 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.timeline=function(e,n,t,i,l,r){"use strict";function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var a=o(n);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)({}).hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},c.apply(null,arguments)}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function p(e,n){if("object"!=m(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!=m(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function s(e){var n=p(e,"string");return"symbol"==m(n)?n:n+""}function v(e,n,t){return(n=s(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var u=i.ComponentBase.extend({defaultProps:{__TYPE:"Timeline",align:"left",className:null,content:null,dataKey:null,layout:"vertical",marker:null,opposite:null,value:null,children:void 0},css:{classes:{marker:"p-timeline-event-marker",connector:"p-timeline-event-connector",event:"p-timeline-event",opposite:"p-timeline-event-opposite",separator:"p-timeline-event-separator",content:"p-timeline-event-content",root:function(e){var n=e.props;return r.classNames("p-timeline p-component",v(v({},"p-timeline-".concat(n.align),!0),"p-timeline-".concat(n.layout),!0),n.className)}},styles:"\n @layer primereact {\n .p-timeline {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n }\n \n .p-timeline-left .p-timeline-event-opposite {\n text-align: right;\n }\n \n .p-timeline-left .p-timeline-event-content {\n text-align: left;\n }\n \n .p-timeline-right .p-timeline-event {\n flex-direction: row-reverse;\n }\n \n .p-timeline-right .p-timeline-event-opposite {\n text-align: left;\n }\n \n .p-timeline-right .p-timeline-event-content {\n text-align: right;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: row-reverse;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n text-align: right;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n text-align: left;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n text-align: left;\n }\n \n .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n text-align: right;\n }\n \n .p-timeline-event {\n display: flex;\n position: relative;\n min-height: 70px;\n }\n \n .p-timeline-event:last-child {\n min-height: 0;\n }\n \n .p-timeline-event-opposite {\n flex: 1;\n padding: 0 1rem;\n }\n \n .p-timeline-event-content {\n flex: 1;\n padding: 0 1rem;\n }\n \n .p-timeline-event-separator {\n flex: 0;\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n \n .p-timeline-event-marker {\n display: flex;\n align-self: baseline;\n }\n \n .p-timeline-event-connector {\n flex-grow: 1;\n }\n \n .p-timeline-horizontal {\n flex-direction: row;\n }\n \n .p-timeline-horizontal .p-timeline-event {\n flex-direction: column;\n flex: 1;\n }\n \n .p-timeline-horizontal .p-timeline-event:last-child {\n flex: 0;\n }\n \n .p-timeline-horizontal .p-timeline-event-separator {\n flex-direction: row;\n }\n \n .p-timeline-horizontal .p-timeline-event-connector {\n width: 100%;\n }\n \n .p-timeline-bottom .p-timeline-event {\n flex-direction: column-reverse;\n }\n \n .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: column-reverse;\n }\n }\n "}}),f=a.memo(a.forwardRef((function(e,n){var o=l.useMergeProps(),m=a.useContext(t.PrimeReactContext),p=u.getProps(e,m),s=u.setMetaData({props:p}),v=s.ptm,f=s.cx;i.useHandleStyle(u.css.styles,s.isUnstyled,{name:"timeline"});var d=function(e,n){return v(e,{context:{index:n}})},g=a.useRef(null),h=function(e,n){return p.dataKey?r.ObjectUtils.resolveFieldData(e,p.dataKey):"pr_id__".concat(n)};a.useImperativeHandle(n,(function(){return{props:p,getElement:function(){return g.current}}}));var y=p.value&&p.value.map((function(e,n){var t=r.ObjectUtils.getJSXElement(p.opposite,e,n),i=o({className:f("marker")},d("marker",n)),l=r.ObjectUtils.getJSXElement(p.marker,e,n)||a.createElement("div",i),m=o({className:f("connector")},d("connector",n)),s=n!==p.value.length-1&&a.createElement("div",m),v=r.ObjectUtils.getJSXElement(p.content,e,n),u=o({className:f("event")},d("event",n)),g=o({className:f("opposite")},d("opposite",n)),y=o({className:f("separator")},d("separator",n)),x=o({className:f("content")},d("content",n));return a.createElement("div",c({key:h(e,n)},u),a.createElement("div",g,t),a.createElement("div",y,l,s),a.createElement("div",x,v))})),x=o({ref:g,className:r.classNames(p.className,f("root"))},u.getOtherProps(p),v("root"));return a.createElement("div",x,y)})));return f.displayName="Timeline",e.Timeline=f,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);