feat: New DataView

Author: tugcekucukoglu

packages/headless/src/dataview/useDataView.props.ts

@@ -0,0 +1,3 @@
+import type { useDataViewProps } from '@primereact/types/shared/dataview';
+
+export const defaultProps: useDataViewProps = {};

packages/headless/src/dataview/useDataView.test.ts

@@ -0,0 +1,33 @@
+import { withHeadless } from '@primereact/core/headless';
+import { localeComparator, resolveFieldData } from '@primeuix/utils/object';
+import { defaultProps } from './useDataView.props';
+
+export const useDataView = withHeadless({
+    name: 'useDataView',
+    defaultProps,
+    setup: () => {
+        const sort = (value: unknown[] | null, sortField: string, sortOrder: number) => {
+            if (value) {
+                const _value = [...value];
+                const comparer = localeComparator();
+
+                _value.sort((data1, data2) => {
+                    const value1 = resolveFieldData(data1, sortField);
+                    const value2 = resolveFieldData(data2, sortField);
+                    const cmp = comparer ? comparer(value1, value2) : value1 > value2 ? 1 : value1 < value2 ? -1 : 0;
+
+                    return cmp * sortOrder;
+                });
+
+                return _value;
+            }
+
+            return null;
+        };
+
+        return {
+            // methods
+            sort
+        };
+    }
+});

packages/headless/src/dataview/useDataView.ts

@@ -0,0 +1,4 @@
+import { createOptionalContext } from '@primereact/core/utils';
+import type { DataViewInstance } from '@primereact/types/shared/dataview';
+
+export const [DataViewProvider, useDataViewContext] = createOptionalContext<DataViewInstance>();

packages/primereact/src/dataview/DataView.context.ts

@@ -0,0 +1,7 @@
+import * as HeadlessDataView from '@primereact/headless/dataview';
+import type { DataViewProps } from '@primereact/types/shared/dataview';
+
+export const defaultProps: DataViewProps = {
+    ...HeadlessDataView.defaultProps,
+    as: 'div'
+};

packages/primereact/src/dataview/DataView.props.ts

@@ -0,0 +1,37 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { useDataView } from '@primereact/headless/dataview';
+import { styles } from '@primereact/styles/dataview';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { DataViewProvider } from './DataView.context';
+import { defaultProps } from './DataView.props';
+
+export const DataView = withComponent({
+    name: 'DataView',
+    defaultProps,
+    styles,
+    setup(instance) {
+        const dataview = useDataView(instance.inProps);
+
+        return dataview;
+    },
+    render(instance) {
+        const { id, props, ptmi, cx } = instance;
+
+        const rootProps = mergeProps(
+            {
+                id,
+                className: cx('root')
+            },
+            ptmi('root')
+        );
+
+        return (
+            <DataViewProvider value={instance}>
+                <Component instance={instance} attrs={rootProps} children={props.children} />
+            </DataViewProvider>
+        );
+    }
+});

packages/primereact/src/dataview/DataView.test.ts

@@ -0,0 +1,4 @@
+'use client';
+export * from './DataView';
+export * from './DataView.context';
+export * from './DataView.props';

packages/primereact/src/dataview/DataView.tsx

@@ -0,0 +1,9 @@
+import { createStyles } from '@primereact/styles/utils';
+import type { DataViewInstance } from '@primereact/types/shared/dataview';
+
+export const styles = createStyles<DataViewInstance>({
+    name: 'dataview',
+    classes: {
+        root: 'p-dataview p-component'
+    }
+});

packages/primereact/src/dataview/index.ts

@@ -0,0 +1 @@
+export * from './DataView.style';