Refactor #4602 - for Timeline

primefaces · Jul 11, 2023 · 2445310 · 2445310
1 parent 1324379
commit 2445310
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 130 deletions.
diff --git a/components/lib/timeline/Timeline.css b/components/lib/timeline/Timeline.css
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
-import { TimelineBase } from './TimelineBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { mergeProps, ObjectUtils } from '../utils/Utils';
+import { TimelineBase } from './TimelineBase';
 
 export const Timeline = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = TimelineBase.getProps(inProps, context);
-        const { ptm } = TimelineBase.setMetaData({
+
+        useStyle(TimelineBase.css.styles, { name: 'primereact_timeline_style' });
+
+        const { ptm, cx } = TimelineBase.setMetaData({
             props
         });
         const elementRef = React.useRef(null);
@@ -23,14 +27,14 @@ export const Timeline = React.memo(
                     const opposite = ObjectUtils.getJSXElement(props.opposite, item, index);
                     const markerProps = mergeProps(
                         {
-                            className: 'p-timeline-event-marker'
+                            className: cx('marker')
                         },
                         ptm('marker')
                     );
                     const marker = ObjectUtils.getJSXElement(props.marker, item, index) || <div {...markerProps}></div>;
                     const connectorProps = mergeProps(
                         {
-                            className: 'p-timeline-event-connector'
+                            className: cx('connector')
                         },
                         ptm('connector')
                     );
@@ -39,25 +43,25 @@ export const Timeline = React.memo(
 
                     const eventProps = mergeProps(
                         {
-                            className: 'p-timeline-event'
+                            className: cx('event')
                         },
                         ptm('event')
                     );
                     const oppositeProps = mergeProps(
                         {
-                            className: 'p-timeline-event-opposite'
+                            className: cx('opposite')
                         },
                         ptm('opposite')
                     );
                     const separatorProps = mergeProps(
                         {
-                            className: 'p-timeline-event-separator'
+                            className: cx('separator')
                         },
                         ptm('separator')
                     );
                     const contentProps = mergeProps(
                         {
-                            className: 'p-timeline-event-content'
+                            className: cx('content')
                         },
                         ptm('content')
                     );
@@ -81,21 +85,12 @@ export const Timeline = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const className = classNames(
-            'p-timeline p-component',
-            {
-                [`p-timeline-${props.align}`]: true,
-                [`p-timeline-${props.layout}`]: true
-            },
-            props.className
-        );
-
         const events = createEvents();
 
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className
+                className: cx('root')
             },
             TimelineBase.getOtherProps(props),
             ptm('root')

diff --git a/components/lib/timeline/TimelineBase.js b/components/lib/timeline/TimelineBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const TimelineBase = ComponentBase.extend({
     defaultProps: {
@@ -12,5 +13,136 @@ export const TimelineBase = ComponentBase.extend({
         opposite: null,
         value: null,
         children: undefined
+    },
+    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: ({ props }) =>
+                classNames(
+                    'p-timeline p-component',
+                    {
+                        [`p-timeline-${props.align}`]: true,
+                        [`p-timeline-${props.layout}`]: true
+                    },
+                    props.className
+                )
+        },
+        styles: `
+    .p-timeline {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    }
+
+    .p-timeline-left .p-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .p-timeline-left .p-timeline-event-content {
+        text-align: left;
+    }
+
+    .p-timeline-right .p-timeline-event {
+        flex-direction: row-reverse;
+    }
+
+    .p-timeline-right .p-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .p-timeline-right .p-timeline-event-content {
+        text-align: right;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+        flex-direction: row-reverse;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+        text-align: left;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+        text-align: right;
+    }
+
+    .p-timeline-event {
+        display: flex;
+        position: relative;
+        min-height: 70px;
+    }
+
+    .p-timeline-event:last-child {
+        min-height: 0;
+    }
+
+    .p-timeline-event-opposite {
+        flex: 1;
+        padding: 0 1rem;
+    }
+
+    .p-timeline-event-content {
+        flex: 1;
+        padding: 0 1rem;
+    }
+
+    .p-timeline-event-separator {
+        flex: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .p-timeline-event-marker {
+        display: flex;
+        align-self: baseline;
+    }
+
+    .p-timeline-event-connector {
+        flex-grow: 1;
+    }
+
+    .p-timeline-horizontal {
+        flex-direction: row;
+    }
+
+    .p-timeline-horizontal .p-timeline-event {
+        flex-direction: column;
+        flex: 1;
+    }
+
+    .p-timeline-horizontal .p-timeline-event:last-child {
+        flex: 0;
+    }
+
+    .p-timeline-horizontal .p-timeline-event-separator {
+        flex-direction: row;
+    }
+
+    .p-timeline-horizontal .p-timeline-event-connector  {
+        width: 100%;
+    }
+
+    .p-timeline-bottom .p-timeline-event {
+        flex-direction: column-reverse;
+    }
+
+    .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+        flex-direction: column-reverse;
+    }
+    `
     }
 });
diff --git a/components/lib/timeline/timeline.d.ts b/components/lib/timeline/timeline.d.ts
@@ -99,6 +99,11 @@ export interface TimelineProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @type {TimelinePassThroughOptions}
      */
     pt?: TimelinePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -55,7 +55,6 @@
 @import "../components/lib/treetable/TreeTable.css";
 @import "../components/lib/image/Image.css";
 @import "../components/lib/ripple/Ripple.css";
-@import "../components/lib/timeline/Timeline.css";
 @import "../components/lib/avatar/Avatar.css";
 @import "../components/lib/avatargroup/AvatarGroup.css";
 @import "../components/lib/divider/Divider.css";