UNPKG

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.84 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),i=require("primereact/hooks"),l=require("primereact/utils");function r(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 o=r(e);function a(){return a=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},a.apply(null,arguments)}function p(e){return p="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},p(e)}function c(e,n){if("object"!=p(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!=p(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function m(e){var n=c(e,"string");return"symbol"==p(n)?n:n+""}function s(e,n,t){return(n=m(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var u=t.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 l.classNames("p-timeline p-component",s(s({},"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 "}}),v=o.memo(o.forwardRef((function(e,r){var p=i.useMergeProps(),c=o.useContext(n.PrimeReactContext),m=u.getProps(e,c),s=u.setMetaData({props:m}),v=s.ptm,f=s.cx;t.useHandleStyle(u.css.styles,s.isUnstyled,{name:"timeline"});var d=function(e,n){return v(e,{context:{index:n}})},g=o.useRef(null),h=function(e,n){return m.dataKey?l.ObjectUtils.resolveFieldData(e,m.dataKey):"pr_id__".concat(n)};o.useImperativeHandle(r,(function(){return{props:m,getElement:function(){return g.current}}}));var y=m.value&&m.value.map((function(e,n){var t=l.ObjectUtils.getJSXElement(m.opposite,e,n),i=p({className:f("marker")},d("marker",n)),r=l.ObjectUtils.getJSXElement(m.marker,e,n)||o.createElement("div",i),c=p({className:f("connector")},d("connector",n)),s=n!==m.value.length-1&&o.createElement("div",c),u=l.ObjectUtils.getJSXElement(m.content,e,n),v=p({className:f("event")},d("event",n)),g=p({className:f("opposite")},d("opposite",n)),y=p({className:f("separator")},d("separator",n)),x=p({className:f("content")},d("content",n));return o.createElement("div",a({key:h(e,n)},v),o.createElement("div",g,t),o.createElement("div",y,r,s),o.createElement("div",x,u))})),x=p({ref:g,className:l.classNames(m.className,f("root"))},u.getOtherProps(m),v("root"));return o.createElement("div",x,y)})));v.displayName="Timeline",exports.Timeline=v;