Skip to content

Commit

Permalink
locale build stuff, context menu example
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Feb 3, 2024
1 parent 91e6b7d commit f2a245d
Show file tree
Hide file tree
Showing 10 changed files with 258 additions and 221 deletions.
78 changes: 41 additions & 37 deletions packages/mantine-react-table/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
} from '@mantine/core';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import 'mantine-contextmenu/styles.css';
import { ContextMenuProvider } from 'mantine-contextmenu';

const preview: Preview = {
parameters: {
Expand Down Expand Up @@ -72,44 +74,46 @@ const preview: Preview = {
forceColorScheme={colorScheme}
theme={{ colorScheme, primaryColor }}
>
<ColorSchemeScript forceColorScheme={colorScheme} />
<Flex justify="space-between">
<Stack>
<Text
style={{
paddingBottom: '8px',
color: useDarkMode() ? '#fff' : '#666',
}}
>
Looking for the main docs site? Click{' '}
<Anchor
underline="always"
href="https://www.mantine-react-table.com"
target="_blank"
rel="noopener"
<ContextMenuProvider>
<ColorSchemeScript forceColorScheme={colorScheme} />
<Flex justify="space-between">
<Stack>
<Text
style={{
paddingBottom: '8px',
color: useDarkMode() ? '#fff' : '#666',
}}
>
here.
</Anchor>
</Text>
<Text
style={{
paddingBottom: '16px',
color: useDarkMode() ? '#fff' : '#666',
}}
>
View source code below in the story tab on Canvas or the Show
Code Button in Docs. Toggle dark and light mode in the toolbar
buttons above.
</Text>
</Stack>
<Select
label="Primary Color"
data={mantineColors}
value={primaryColor}
onChange={(value) => setPrimaryColor(value as string)}
/>
</Flex>
<Story {...context} />
Looking for the main docs site? Click{' '}
<Anchor
underline="always"
href="https://www.mantine-react-table.com"
target="_blank"
rel="noopener"
>
here.
</Anchor>
</Text>
<Text
style={{
paddingBottom: '16px',
color: useDarkMode() ? '#fff' : '#666',
}}
>
View source code below in the story tab on Canvas or the Show
Code Button in Docs. Toggle dark and light mode in the toolbar
buttons above.
</Text>
</Stack>
<Select
label="Primary Color"
data={mantineColors}
value={primaryColor}
onChange={(value) => setPrimaryColor(value as string)}
/>
</Flex>
<Story {...context} />
</ContextMenuProvider>
</MantineProvider>
);
},
Expand Down
28 changes: 20 additions & 8 deletions packages/mantine-react-table/build-locales.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import fs from 'fs';
import { rollup } from 'rollup';

const supportedLocales = [
'am',
'ar',
'az',
'bg',
Expand Down Expand Up @@ -57,13 +56,13 @@ async function build(locale) {
});

await bundle.write({
file: `./locales/${locale}/index.js`,
file: `./locales/${locale}/index.cjs`,
format: 'cjs',
sourcemap: false,
});

await bundle.write({
file: `./locales/${locale}/index.esm.js`,
file: `./locales/${locale}/index.esm.mjs`,
format: 'esm',
sourcemap: false,
});
Expand All @@ -74,22 +73,35 @@ export declare const MRT_Localization_${locale
.replaceAll('-', '_')}: MRT_Localization;
`;

await fs.writeFile(`./locales/${locale}/index.d.ts`, typeFile, (err) => {
await fs.writeFile(`./locales/${locale}/index.d.cts`, typeFile, (err) => {
if (err) console.log(err);
});

await fs.writeFile(`./locales/${locale}/index.esm.d.ts`, typeFile, (err) => {
await fs.writeFile(`./locales/${locale}/index.esm.d.mts`, typeFile, (err) => {
if (err) console.log(err);
});

await fs.writeFile(
`./locales/${locale}/package.json`,
JSON.stringify(
{
main: 'index.js',
module: 'index.esm.js',
main: 'index.cjs',
module: 'index.esm.mjs',
sideEffects: false,
types: 'index.d.ts',
types: 'index.d.cts',
exports: {
'.': {
import: {
types: './index.d.cts',
default: './index.esm.mjs',
},
require: {
types: './index.esm.d.mts',
default: './index.cjs',
},
},
'./package.json': './package.json',
},
},
null,
2,
Expand Down
12 changes: 7 additions & 5 deletions packages/mantine-react-table/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@
},
"main": "dist/index.cjs",
"module": "dist/index.esm.mjs",
"types": "dist/index.d.ts",
"types": "dist/index.d.cts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"types": "./dist/index.d.cts",
"default": "./dist/index.esm.mjs"
},
"require": {
"types": "./dist/index.d.mts",
"types": "./dist/index.esm.d.mts",
"default": "./dist/index.cjs"
}
},
Expand Down Expand Up @@ -102,9 +102,11 @@
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"@vitejs/plugin-react": "^4.2.1",
"clsx": "^2.1.0",
"dayjs": "^1.11.10",
"eslint": "^8.56.0",
"eslint-plugin-perfectionist": "^2.5.0",
"mantine-contextmenu": "^7.5.0",
"postcss": "^8.4.33",
"postcss-preset-mantine": "^1.13.0",
"postcss-simple-vars": "^7.0.1",
Expand All @@ -129,14 +131,14 @@
"dependencies": {
"@tanstack/match-sorter-utils": "8.11.7",
"@tanstack/react-table": "8.11.7",
"@tanstack/react-virtual": "3.0.2",
"clsx": "^2.1.0"
"@tanstack/react-virtual": "3.0.2"
},
"peerDependencies": {
"@mantine/core": "^7.3",
"@mantine/dates": "^7.3",
"@mantine/hooks": "^7.3",
"@tabler/icons-react": ">=2.23.0",
"clsx": ">=2",
"dayjs": ">=1.11",
"react": ">=18.0",
"react-dom": ">=18.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/mantine-react-table/rollup.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default [
input: './dist/types/index.d.ts',
output: [
{ file: `./${pkg.types}`, format: 'cjs' },
{ file: `./${pkg.types}`.replace('.ts', '.mts'), format: 'esm' },
{ file: './dist/index.esm.d.mts', format: 'esm' },
],
plugins: [
copy({
Expand Down
124 changes: 67 additions & 57 deletions packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import {
type RefObject,
memo,
useEffect,
useMemo,
useState,
} from 'react';
import { Skeleton, TableTd } from '@mantine/core';
import { Skeleton, TableTd, type TableTdProps } from '@mantine/core';
import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
import {
type MRT_Cell,
Expand All @@ -31,7 +30,8 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';

interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> {
interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
extends TableTdProps {
cell: MRT_Cell<TData, TValue>;
isStriped?: 'even' | 'odd' | boolean;
measureElement?: (element: HTMLTableCellElement) => void;
Expand All @@ -51,6 +51,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
staticRowIndex,
table,
virtualCell,
...rest
}: Props<TData>) => {
const {
getState,
Expand Down Expand Up @@ -89,13 +90,14 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
const { columnDef } = column;
const { columnDefType } = columnDef;

const arg = { cell, column, row, table };
const args = { cell, column, row, table };
const tableCellProps = {
...parseFromValuesOrFunc(mantineTableBodyCellProps, arg),
...parseFromValuesOrFunc(columnDef.mantineTableBodyCellProps, arg),
...parseFromValuesOrFunc(mantineTableBodyCellProps, args),
...parseFromValuesOrFunc(columnDef.mantineTableBodyCellProps, args),
...rest,
};

const skeletonProps = parseFromValuesOrFunc(mantineSkeletonProps, arg);
const skeletonProps = parseFromValuesOrFunc(mantineSkeletonProps, args);

const [skeletonWidth, setSkeletonWidth] = useState(100);
useEffect(() => {
Expand All @@ -108,24 +110,21 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
);
}, [isLoading, showSkeletons]);

const widthStyles = useMemo(() => {
const styles: CSSProperties = {
minWidth: `max(calc(var(--col-${parseCSSVarId(
column?.id,
)}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)`,
};
if (layoutMode === 'grid') {
styles.flex = `${
[0, false].includes(columnDef.grow!)
? 0
: `var(--col-${parseCSSVarId(column.id)}-size)`
} 0 auto`;
} else if (layoutMode === 'grid-no-grow') {
styles.flex = `${+(columnDef.grow || 0)} 0 auto`;
}
return styles;
}, [column]);
const widthStyles: CSSProperties = {
minWidth: `max(calc(var(--col-${parseCSSVarId(
column?.id,
)}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)`,
};
if (layoutMode === 'grid') {
widthStyles.flex = `${
[0, false].includes(columnDef.grow!)
? 0
: `var(--col-${parseCSSVarId(column.id)}-size)`
} 0 auto`;
} else if (layoutMode === 'grid-no-grow') {
widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
}

const isEditable =
(parseFromValuesOrFunc(enableEditing, row) &&
Expand All @@ -142,6 +141,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
const isCreating =
isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;

const showClickToCopyButton =
parseFromValuesOrFunc(enableClickToCopy, cell) ||
(parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) &&
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) !== false);

const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
tableCellProps?.onDoubleClick?.(event);
if (isEditable && editDisplayMode === 'cell') {
Expand All @@ -168,6 +172,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
}
};

const cellValueProps = {
cell,
table,
};

return (
<TableTd
data-index={virtualCell?.index}
Expand Down Expand Up @@ -247,38 +256,39 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
...parseFromValuesOrFunc(tableCellProps.style, theme),
})}
>
<>
{cell.getIsPlaceholder() ? (
columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
) : isLoading || showSkeletons ? (
<Skeleton height={20} width={skeletonWidth} {...skeletonProps} />
) : columnDefType === 'display' &&
(['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
column.id,
) ||
!row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,
renderedCellValue: cell.renderValue() as any,
row,
rowRef,
staticRowIndex,
table,
})
) : isCreating || isEditing ? (
<MRT_EditCellTextInput cell={cell} table={table} />
) : (enableClickToCopy || columnDef.enableClickToCopy) &&
columnDef.enableClickToCopy !== false ? (
<MRT_CopyButton cell={cell} table={table}>
<MRT_TableBodyCellValue cell={cell} table={table} />
</MRT_CopyButton>
) : (
<MRT_TableBodyCellValue cell={cell} table={table} />
)}
</>
{cell.getIsGrouped() && !columnDef.GroupedCell && (
<> ({row.subRows?.length})</>
{tableCellProps.children ?? (
<>
{cell.getIsPlaceholder() ? (
columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
) : showSkeletons !== false && (isLoading || showSkeletons) ? (
<Skeleton height={20} width={skeletonWidth} {...skeletonProps} />
) : columnDefType === 'display' &&
(['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
column.id,
) ||
!row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,
renderedCellValue: cell.renderValue() as any,
row,
rowRef,
staticRowIndex,
table,
})
) : isCreating || isEditing ? (
<MRT_EditCellTextInput cell={cell} table={table} />
) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
<MRT_CopyButton cell={cell} table={table}>
<MRT_TableBodyCellValue {...cellValueProps} />
</MRT_CopyButton>
) : (
<MRT_TableBodyCellValue {...cellValueProps} />
)}
{cell.getIsGrouped() && !columnDef.GroupedCell && (
<> ({row.subRows?.length})</>
)}
</>
)}
</TableTd>
);
Expand Down
Loading

0 comments on commit f2a245d

Please sign in to comment.