Skip to content

Commit e91fcbd

Browse files
amitamrutiyaamitamrutiya
authored
Merge branch 'master' into update-schema
2 parents b13582f + 174ab31 commit e91fcbd

30 files changed

+468
-312
lines changed

‎examples/next-12/components/ResponsiveDataTable/ResponsiveDataTable.jsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
1313
year: 'numeric'
1414
};
1515

16-
return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
16+
return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
1717
};
1818

1919
const updatedOptions = {
@@ -37,21 +37,14 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
3737
break;
3838
}
3939
}
40-
},
41-
filter: true,
42-
sort: true,
43-
responsive: 'standard',
44-
serverSide: false,
40+
}
4541
};
4642

4743
useEffect(() => {
4844
columns?.forEach((col) => {
4945
if (!col.options) {
5046
col.options = {};
5147
}
52-
53-
col.options.sort = true;
54-
col.options.filter = true;
5548
col.options.display = columnVisibility[col.name];
5649

5750
if (

‎package-lock.json

Lines changed: 107 additions & 107 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@
8080
},
8181
"peerDependencies": {
8282
"@xstate/react": "^4.1.1",
83-
"react": "^18.3.1",
84-
"react-dom": "^18.3.1",
83+
"react": "^17.0.2 || ^18.3.1",
84+
"react-dom": "^17.0.2 || ^18.3.1",
8585
"xstate": "^5.18.2"
8686
},
8787
"peerDependenciesMeta": {

‎src/custom/Carousel/Carousel.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ChevronLeft, ChevronRight } from '@mui/icons-material';
2+
import React, { ReactNode, useRef } from 'react';
3+
import { CarouselButton, CarouselContainer, CarouselWrapper } from './style';
4+
5+
interface CarouselProps {
6+
items: ReactNode[];
7+
title?: string;
8+
scrollAmount?: number;
9+
showNavButtons?: boolean;
10+
itemClassName?: string;
11+
}
12+
13+
const Carousel: React.FC<CarouselProps> = ({
14+
items,
15+
scrollAmount = 300,
16+
showNavButtons = true,
17+
itemClassName = 'carousel-item'
18+
}) => {
19+
const carouselRef = useRef<HTMLDivElement>(null);
20+
if (!items.length) return null;
21+
22+
const scroll = (direction: 'left' | 'right') => {
23+
if (carouselRef.current) {
24+
carouselRef.current.scrollBy({
25+
left: direction === 'left' ? -scrollAmount : scrollAmount,
26+
behavior: 'smooth'
27+
});
28+
}
29+
};
30+
31+
return (
32+
<CarouselWrapper>
33+
{showNavButtons && (
34+
<CarouselButton onClick={() => scroll('left')}>
35+
<ChevronLeft />
36+
</CarouselButton>
37+
)}
38+
<CarouselContainer ref={carouselRef}>
39+
{items.map((item, index) => (
40+
<div key={`carousel-item-${index}`} className={itemClassName}>
41+
{item}
42+
</div>
43+
))}
44+
</CarouselContainer>
45+
{showNavButtons && (
46+
<CarouselButton onClick={() => scroll('right')}>
47+
<ChevronRight />
48+
</CarouselButton>
49+
)}
50+
</CarouselWrapper>
51+
);
52+
};
53+
54+
export default Carousel;

‎src/custom/Carousel/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Carousel from './Carousel';
2+
3+
export { Carousel };

‎src/custom/Carousel/style.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { styled } from '../../theme';
2+
3+
export const CarouselButton = styled('button')(({ theme }) => ({
4+
position: 'absolute',
5+
top: '50%',
6+
transform: 'translateY(-50%)',
7+
zIndex: '1',
8+
background: theme.palette.background.paper,
9+
border: 'none',
10+
cursor: 'pointer',
11+
padding: '0.5rem',
12+
borderRadius: '50%',
13+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
14+
'&:hover': {
15+
background: theme.palette.primary.main,
16+
color: '#fff'
17+
},
18+
'&:first-of-type': {
19+
left: '-1.2rem'
20+
},
21+
'&:last-of-type': {
22+
right: '-1.2rem'
23+
}
24+
}));
25+
26+
export const CarouselWrapper = styled('div')({
27+
display: 'flex',
28+
alignItems: 'center',
29+
width: '100%',
30+
position: 'relative'
31+
});
32+
33+
export const CarouselContainer = styled('div')({
34+
display: 'flex',
35+
overflowX: 'auto',
36+
scrollBehavior: 'smooth',
37+
scrollSnapType: 'x mandatory',
38+
gap: '1rem',
39+
padding: '1rem 0',
40+
width: '100%',
41+
'&::-webkit-scrollbar': {
42+
display: 'none'
43+
},
44+
'.carousel-item': {
45+
flex: '0 0 auto',
46+
scrollSnapAlign: 'center',
47+
width: 'auto'
48+
}
49+
});

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import _ from 'lodash';
33
import { MUIDataTableColumn } from 'mui-datatables';
44
import { useCallback, useMemo, useRef } from 'react';
55
import { PublishIcon } from '../../icons';
6-
import { CHARCOAL, useTheme } from '../../theme';
6+
import { CHARCOAL } from '../../theme';
77
import { Pattern } from '../CustomCatalog/CustomCard';
88
import { ErrorBoundary } from '../ErrorBoundary';
99
import { ColView } from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column';
@@ -52,10 +52,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
5252
handleBulkDeleteModal,
5353
setSearch,
5454
rowsPerPageOptions = [10, 25, 50, 100],
55-
tableBackgroundColor,
5655
handleBulkpatternsDataUnpublishModal
5756
}) => {
58-
const theme = useTheme();
5957
const modalRef = useRef<PromptRef>(null);
6058

6159
const formatDate = useCallback((date: string | Date): string => {
@@ -72,8 +70,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
7270
return columns.map((col) => {
7371
const newCol = { ...col };
7472
if (!newCol.options) newCol.options = {};
75-
newCol.options.sort = true;
76-
newCol.options.filter = true;
7773
newCol.options.display = columnVisibility[col.name];
7874
if (
7975
[
@@ -149,8 +145,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
149145
rowsPerPage: pageSize,
150146
page,
151147
elevation: 0,
152-
sort: true,
153-
filter: true,
154148
sortOrder: {
155149
name: sortOrder.split(' ')[0],
156150
direction: sortOrder.split(' ')[1]
@@ -208,13 +202,6 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
208202
colViews={colViews}
209203
tableCols={processedColumns}
210204
columnVisibility={columnVisibility}
211-
backgroundColor={
212-
tableBackgroundColor
213-
? tableBackgroundColor
214-
: theme.palette.mode === 'light'
215-
? theme.palette.background.default
216-
: theme.palette.background.secondary
217-
}
218205
/>
219206
</ErrorBoundary>
220207
);

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,15 @@ export const createDesignsColumnsConfig = ({
7272
name: 'id',
7373
label: 'ID',
7474
options: {
75-
filter: true,
76-
sort: true,
77-
searchable: true,
75+
filter: false,
7876
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
7977
}
8078
},
8179
{
8280
name: 'name',
8381
label: 'Name',
8482
options: {
85-
filter: true,
83+
filter: false,
8684
sort: true,
8785
searchable: true,
8886
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -97,7 +95,7 @@ export const createDesignsColumnsConfig = ({
9795
name: 'first_name',
9896
label: 'Author',
9997
options: {
100-
filter: true,
98+
filter: false,
10199
sort: true,
102100
searchable: true,
103101
customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
@@ -122,7 +120,7 @@ export const createDesignsColumnsConfig = ({
122120
name: 'created_at',
123121
label: 'Created At',
124122
options: {
125-
filter: true,
123+
filter: false,
126124
sort: true,
127125
searchable: true,
128126
setCellHeaderProps: () => {
@@ -134,7 +132,7 @@ export const createDesignsColumnsConfig = ({
134132
name: 'updated_at',
135133
label: 'Updated At',
136134
options: {
137-
filter: true,
135+
filter: false,
138136
sort: true,
139137
searchable: true,
140138
setCellHeaderProps: () => {
@@ -146,36 +144,38 @@ export const createDesignsColumnsConfig = ({
146144
name: 'visibility',
147145
label: 'Visibility',
148146
options: {
149-
filter: true,
150-
sort: true,
147+
filter: false,
148+
sort: false,
151149
searchable: true
152150
}
153151
},
154152
{
155153
name: 'user_id',
156154
label: 'User ID',
157155
options: {
158-
filter: true,
159-
sort: true,
160-
searchable: true
156+
filter: false,
157+
sort: false,
158+
searchable: false
161159
}
162160
},
161+
163162
{
164163
name: 'email',
165-
label: 'Email',
164+
label: 'email',
166165
options: {
167-
filter: true,
168-
sort: true,
169-
searchable: true
166+
filter: false,
167+
sort: false,
168+
searchable: false
170169
}
171170
},
171+
172172
{
173173
name: 'actions',
174174
label: 'Actions',
175175
options: {
176-
filter: true,
177-
sort: true,
178-
searchable: true,
176+
filter: false,
177+
sort: false,
178+
searchable: false,
179179
setCellHeaderProps: () => ({ align: 'center' as const }),
180180
setCellProps: () => ({ align: 'center' as const }),
181181
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {
@@ -247,7 +247,7 @@ export const createDesignsColumnsConfig = ({
247247
actionsList.splice(1, 0, publishAction);
248248
}
249249

250-
return <DataTableEllipsisMenu actionsList={actionsList} theme={theme} />;
250+
return <DataTableEllipsisMenu actionsList={actionsList} />;
251251
}
252252
}
253253
}

0 commit comments

Comments
 (0)