Skip to content

Commit 8b2caed

Browse files
redallenredallen
authored
Fix circular deps (patternfly#5086)
* add rollup to react-table * fix circular deps in react-core * fix circular deps in react-table * fix circular deps in react-charts * add check to react-datetime * move to types and enums * revert most table changes * fix table build * revert fixing charts circular dependencies
1 parent 3c948ba commit 8b2caed

22 files changed

+203
-142
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"build:integration": "lerna run build:demo-app --stream",
7171
"build:docs": "yarn workspace @patternfly/react-docs build:docs",
7272
"build:generate": "lerna run generate --parallel --stream",
73-
"build:umd": "yarn workspace @patternfly/react-core build:umd",
73+
"build:umd": "lerna run build:umd --parallel --stream",
7474
"clean": "yarn clean:build && lerna run clean --parallel",
7575
"clean:build": "rimraf .cache .eslintcache coverage",
7676
"generate": "yarn plop",

‎packages/react-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
},
3030
"homepage": "https://github.com/patternfly/patternfly-react#readme",
3131
"scripts": {
32-
"clean": "rimraf dist",
3332
"build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
33+
"clean": "rimraf dist",
3434
"generate": "node scripts/copyStyles.js",
3535
"gen:tests": "yo tsx-docgen"
3636
},

‎packages/react-core/rollup.config.js

+6-29
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,7 @@
1-
import resolve from '@rollup/plugin-node-resolve';
2-
import commonjs from '@rollup/plugin-commonjs';
3-
import scss from 'rollup-plugin-scss';
4-
import replace from '@rollup/plugin-replace';
5-
import { terser } from 'rollup-plugin-terser';
1+
const { name } = require('./package.json');
2+
const baseConfig = require('../rollup.base');
63

7-
const isProduction = process.env.IS_PRODUCTION;
8-
9-
module.exports = {
10-
input: 'dist/esm/index.js',
11-
output: {
12-
file: `dist/umd/react-core${isProduction ? '.min' : ''}.js`,
13-
format: 'umd',
14-
name: 'PatternFlyReact',
15-
globals: {
16-
react: 'React',
17-
'react-dom': 'ReactDOM'
18-
}
19-
},
20-
external: ['react', 'react-dom'],
21-
plugins: [
22-
replace({
23-
'process.env.NODE_ENV': `'${isProduction ? 'production' : 'development'}'`
24-
}),
25-
resolve(),
26-
commonjs(),
27-
scss(),
28-
isProduction && terser()
29-
]
30-
};
4+
module.exports = baseConfig({
5+
packageName: name.replace('@patternfly/', ''),
6+
name: 'PatternFlyReact'
7+
});

‎packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { DropdownSeparator, SeparatorProps } from '../Dropdown';
2+
import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator';
33

44
export const ApplicationLauncherSeparator: React.FunctionComponent<SeparatorProps> = ({
55
// eslint-disable-next-line @typescript-eslint/no-unused-vars

‎packages/react-core/src/components/Select/Select.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
} from '../../helpers';
2323
import { Divider } from '../Divider';
2424
import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
25-
import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/util';
25+
import { createRenderableFavorites, extendItemsWithFavorite } from './favorites';
2626

2727
// seed for the aria-labelledby ID
2828
let currentId = 0;

‎packages/react-core/src/components/Select/favorites.ts

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import * as React from 'react';
2+
import { ApplicationLauncherSeparator } from '../ApplicationLauncher/ApplicationLauncherSeparator';
3+
import { Divider } from '../Divider/Divider';
4+
5+
/**
6+
* This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
7+
*
8+
* @param {object} items The items rendered in Select or Application aLauncher
9+
* @param {boolean} isGrouped Flag indicating if items are grouped
10+
* @param {any[]} favorites Array of ids of favorited items
11+
* @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
12+
*/
13+
export const createRenderableFavorites = (
14+
items: object,
15+
isGrouped: boolean,
16+
favorites: any[],
17+
isEnterTriggersArrowDown?: boolean
18+
) => {
19+
if (isGrouped) {
20+
const favoriteItems: React.ReactNode[] = [];
21+
(items as React.ReactElement[]).forEach(group => {
22+
if (favorites.length > 0) {
23+
return (
24+
group.props.children &&
25+
(group.props.children as React.ReactElement[])
26+
.filter(item => favorites.includes(item.props.id))
27+
.map(item => {
28+
if (isEnterTriggersArrowDown) {
29+
return favoriteItems.push(
30+
React.cloneElement(item, {
31+
isFavorite: true,
32+
enterTriggersArrowDown: isEnterTriggersArrowDown,
33+
id: `favorite-${item.props.id}`
34+
})
35+
);
36+
} else {
37+
return favoriteItems.push(
38+
React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` })
39+
);
40+
}
41+
})
42+
);
43+
}
44+
});
45+
return favoriteItems;
46+
}
47+
return (items as React.ReactElement[])
48+
.filter(item => favorites.includes(item.props.id))
49+
.map(item => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown }));
50+
};
51+
52+
/**
53+
* This function is a helper for extending the array of renderable favorite with the select/application launcher items to render in the Application launcher or Select
54+
*
55+
* @param {object} items The items rendered in Select or Application aLauncher
56+
* @param {boolean} isGrouped Flag indicating if items are grouped
57+
* @param {any[]} favorites Array of ids of favorited items
58+
*/
59+
export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favorites: any[]) => {
60+
if (isGrouped) {
61+
return (items as React.ReactElement[]).map(group =>
62+
React.cloneElement(group, {
63+
children: React.Children.map(group.props.children as React.ReactElement[], item => {
64+
if (item.type === ApplicationLauncherSeparator || item.type === Divider) {
65+
return item;
66+
}
67+
return React.cloneElement(item, {
68+
isFavorite: favorites.some(
69+
favoriteId => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id
70+
)
71+
});
72+
})
73+
})
74+
);
75+
}
76+
return (items as React.ReactElement[]).map(item =>
77+
React.cloneElement(item, {
78+
isFavorite: favorites.some(favoriteId => favoriteId === item.props.id)
79+
})
80+
);
81+
};

‎packages/react-core/src/components/Tabs/TabContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import styles from '@patternfly/react-styles/css/components/TabContent/tab-content';
33
import { css } from '@patternfly/react-styles';
44
import { getOUIAProps, OUIAProps } from '../../helpers';
5-
import { TabsContextConsumer, TabsContextProps } from './Tabs';
5+
import { TabsContextConsumer, TabsContextProps } from './TabsContext';
66

77
export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref'>, OUIAProps {
88
/** content rendered inside the tab content area if used outside Tabs component */

‎packages/react-core/src/components/Tabs/Tabs.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helper
99
import { TabButton } from './TabButton';
1010
import { TabContent } from './TabContent';
1111
import { TabProps } from './Tab';
12+
import { TabsContextProvider } from './TabsContext';
1213
import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
1314

1415
export enum TabsComponent {
@@ -60,17 +61,6 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
6061
};
6162
}
6263

63-
export interface TabsContextProps {
64-
variant: 'default' | 'light300';
65-
}
66-
67-
const TabsContext = React.createContext<TabsContextProps>({
68-
variant: 'default'
69-
});
70-
71-
export const TabsContextProvider = TabsContext.Provider;
72-
export const TabsContextConsumer = TabsContext.Consumer;
73-
7464
const variantStyle = {
7565
default: '',
7666
light300: styles.modifiers.colorSchemeLight_300

‎packages/react-core/src/components/Tabs/TabsContext.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
3+
export interface TabsContextProps {
4+
variant: 'default' | 'light300';
5+
}
6+
7+
const TabsContext = React.createContext<TabsContextProps>({
8+
variant: 'default'
9+
});
10+
11+
export const TabsContextProvider = TabsContext.Provider;
12+
export const TabsContextConsumer = TabsContext.Consumer;

‎packages/react-core/src/components/Tabs/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './Tab';
22
export * from './Tabs';
33
export * from './TabContent';
4+
export * from './TabsContext';
45
export * from './TabTitleText';
56
export * from './TabTitleIcon';

‎packages/react-core/src/helpers/util.ts

-81
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import * as ReactDOM from 'react-dom';
22
import { SIDE } from './constants';
3-
import * as React from 'react';
4-
import { ApplicationLauncherSeparator } from '../components/ApplicationLauncher/ApplicationLauncherSeparator';
5-
import { Divider } from '../components/Divider/Divider';
63

74
/**
85
* @param {string} input - String to capitalize first letter
@@ -277,84 +274,6 @@ export const toCamel = (s: string) => s.replace(/([-_][a-z])/gi, camelize);
277274
*/
278275
export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
279276

280-
/**
281-
* This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
282-
*
283-
* @param {object} items The items rendered in Select or Application aLauncher
284-
* @param {boolean} isGrouped Flag indicating if items are grouped
285-
* @param {any[]} favorites Array of ids of favorited items
286-
* @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
287-
*/
288-
export const createRenderableFavorites = (
289-
items: object,
290-
isGrouped: boolean,
291-
favorites: any[],
292-
isEnterTriggersArrowDown?: boolean
293-
) => {
294-
if (isGrouped) {
295-
const favoriteItems: React.ReactNode[] = [];
296-
(items as React.ReactElement[]).forEach(group => {
297-
if (favorites.length > 0) {
298-
return (
299-
group.props.children &&
300-
(group.props.children as React.ReactElement[])
301-
.filter(item => favorites.includes(item.props.id))
302-
.map(item => {
303-
if (isEnterTriggersArrowDown) {
304-
return favoriteItems.push(
305-
React.cloneElement(item, {
306-
isFavorite: true,
307-
enterTriggersArrowDown: isEnterTriggersArrowDown,
308-
id: `favorite-${item.props.id}`
309-
})
310-
);
311-
} else {
312-
return favoriteItems.push(
313-
React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` })
314-
);
315-
}
316-
})
317-
);
318-
}
319-
});
320-
return favoriteItems;
321-
}
322-
return (items as React.ReactElement[])
323-
.filter(item => favorites.includes(item.props.id))
324-
.map(item => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown }));
325-
};
326-
327-
/**
328-
* This function is a helper for extending the array of renderable favorite with the select/application launcher items to render in the Application launcher or Select
329-
*
330-
* @param {object} items The items rendered in Select or Application aLauncher
331-
* @param {boolean} isGrouped Flag indicating if items are grouped
332-
* @param {any[]} favorites Array of ids of favorited items
333-
*/
334-
export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favorites: any[]) => {
335-
if (isGrouped) {
336-
return (items as React.ReactElement[]).map(group =>
337-
React.cloneElement(group, {
338-
children: React.Children.map(group.props.children as React.ReactElement[], item => {
339-
if (item.type === ApplicationLauncherSeparator || item.type === Divider) {
340-
return item;
341-
}
342-
return React.cloneElement(item, {
343-
isFavorite: favorites.some(
344-
favoriteId => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id
345-
)
346-
});
347-
})
348-
})
349-
);
350-
}
351-
return (items as React.ReactElement[]).map(item =>
352-
React.cloneElement(item, {
353-
isFavorite: favorites.some(favoriteId => favoriteId === item.props.id)
354-
})
355-
);
356-
};
357-
358277
/**
359278
* Calculate the width of the text
360279
* Example:

‎packages/react-datetime/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
},
3232
"homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-datetime#readme",
3333
"scripts": {
34+
"build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
3435
"clean": "rimraf dist"
3536
},
3637
"dependencies": {

‎packages/react-datetime/rollup.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const { name } = require('./package.json');
2+
const baseConfig = require('../rollup.base');
3+
4+
module.exports = baseConfig({
5+
packageName: name.replace('@patternfly/', ''),
6+
name: 'PatternFlyDateTime'
7+
});

‎packages/react-table/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
},
2828
"homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-table#readme",
2929
"scripts": {
30+
"build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
3031
"clean": "rimraf dist"
3132
},
3233
"dependencies": {

‎packages/react-table/rollup.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const { name } = require('./package.json');
2+
const baseConfig = require('../rollup.base');
3+
4+
module.exports = baseConfig({
5+
packageName: name.replace('@patternfly/', ''),
6+
name: 'PatternFlyTable'
7+
});

‎packages/react-table/src/components/Table/SelectColumn.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import * as React from 'react';
2-
import { RowSelectVariant } from './Table';
2+
3+
export enum RowSelectVariant {
4+
radio = 'radio',
5+
checkbox = 'checkbox'
6+
}
37

48
export interface SelectColumnProps {
59
name?: string;

‎packages/react-table/src/components/Table/SortColumn.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ import LongArrowAltDownIcon from '@patternfly/react-icons/dist/js/icons/long-arr
44
import ArrowsAltVIcon from '@patternfly/react-icons/dist/js/icons/arrows-alt-v-icon';
55
import { css } from '@patternfly/react-styles';
66
import styles from '@patternfly/react-styles/css/components/Table/table';
7-
import { SortByDirection } from './Table';
87
import { TableText } from './TableText';
98

9+
export enum SortByDirection {
10+
asc = 'asc',
11+
desc = 'desc'
12+
}
13+
1014
export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1115
children?: React.ReactNode;
1216
className?: string;

‎packages/react-table/src/components/Table/Table.tsx

+2-10
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { BodyWrapper } from './BodyWrapper';
1717
import { toCamel } from './utils';
1818
import { calculateColumns } from './utils/headerUtils';
1919
import { formatterValueType, ColumnType, RowType, RowKeyType, ColumnsType } from './base';
20+
import { RowSelectVariant } from './SelectColumn';
21+
import { SortByDirection } from './SortColumn';
2022

2123
export enum TableGridBreakpoint {
2224
none = '',
@@ -33,11 +35,6 @@ export enum TableVariant {
3335

3436
export type RowEditType = 'save' | 'cancel' | 'edit';
3537

36-
export enum RowSelectVariant {
37-
radio = 'radio',
38-
checkbox = 'checkbox'
39-
}
40-
4138
export interface RowErrors {
4239
[name: string]: string[];
4340
}
@@ -78,11 +75,6 @@ export type OnRowEdit = (
7875
validationErrors?: RowErrors
7976
) => void;
8077

81-
export enum SortByDirection {
82-
asc = 'asc',
83-
desc = 'desc'
84-
}
85-
8678
// Todo: Update type with next breaking change release
8779
// export type IHeaderRow = ColumnType;
8880

0 commit comments

Comments
 (0)