From 13d5d4f59b4ddfa49dee56bf47afb3e79e165aee Mon Sep 17 00:00:00 2001 From: Tomasz Nguyen Date: Sat, 10 Apr 2021 12:15:57 +0200 Subject: [PATCH] [TreeView] Migrate to emotion (#25673) --- docs/pages/api-docs/tree-view.json | 5 +- .../api-docs/tree-view/tree-view.json | 3 +- .../src/TreeView/TreeView.d.ts | 6 ++ .../material-ui-lab/src/TreeView/TreeView.js | 76 ++++++++++++++----- .../src/TreeView/TreeView.test.js | 18 ++--- .../material-ui-lab/src/TreeView/index.d.ts | 3 + .../material-ui-lab/src/TreeView/index.js | 3 + .../src/TreeView/treeViewClasses.d.ts | 7 ++ .../src/TreeView/treeViewClasses.js | 9 +++ 9 files changed, 98 insertions(+), 32 deletions(-) create mode 100644 packages/material-ui-lab/src/TreeView/treeViewClasses.d.ts create mode 100644 packages/material-ui-lab/src/TreeView/treeViewClasses.js diff --git a/docs/pages/api-docs/tree-view.json b/docs/pages/api-docs/tree-view.json index ac029d5fb7c888..6b1577e387ac2c 100644 --- a/docs/pages/api-docs/tree-view.json +++ b/docs/pages/api-docs/tree-view.json @@ -24,7 +24,8 @@ "onNodeToggle": { "type": { "name": "func" } }, "selected": { "type": { "name": "union", "description": "Array<string>
| string" } - } + }, + "sx": { "type": { "name": "object" } } }, "name": "TreeView", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTreeView" }, @@ -33,6 +34,6 @@ "filename": "/packages/material-ui-lab/src/TreeView/TreeView.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view.json index 48c2219bb4bfe6..6712bd395606a1 100644 --- a/docs/translations/api-docs/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view.json @@ -17,7 +17,8 @@ "onNodeFocus": "Callback fired when tree items are focused.

Signature:
function(event: object, value: string) => void
event: The event source of the callback Warning: This is a generic event not a focus event.
value: of the focused node.", "onNodeSelect": "Callback fired when tree items are selected/unselected.

Signature:
function(event: object, value: array \\| string) => void
event: The event source of the callback
value: of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.", "onNodeToggle": "Callback fired when tree items are expanded/collapsed.

Signature:
function(event: object, nodeIds: array) => void
event: The event source of the callback.
nodeIds: The ids of the expanded nodes.", - "selected": "Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." + "selected": "Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } } } diff --git a/packages/material-ui-lab/src/TreeView/TreeView.d.ts b/packages/material-ui-lab/src/TreeView/TreeView.d.ts index 12cfe31d6f9b6c..2f1591ba279c8a 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.d.ts +++ b/packages/material-ui-lab/src/TreeView/TreeView.d.ts @@ -1,5 +1,7 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '@material-ui/core'; +import { Theme } from '@material-ui/core/styles'; +import { SxProps } from '@material-ui/system'; export interface TreeViewPropsBase extends StandardProps> { /** @@ -69,6 +71,10 @@ export interface TreeViewPropsBase extends StandardProps void; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; } export interface MultiSelectTreeViewProps extends TreeViewPropsBase { diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js index 3038036cb39dcb..9a8f89e0c9c878 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.js @@ -1,7 +1,12 @@ import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; -import { useTheme, withStyles } from '@material-ui/core/styles'; +import { + experimentalStyled, + useTheme, + unstable_useThemeProps as useThemeProps, +} from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { useControlled, useForkRef, @@ -10,17 +15,35 @@ import { } from '@material-ui/core/utils'; import TreeViewContext from './TreeViewContext'; import { DescendantProvider } from './descendants'; +import { getTreeViewUtilityClass } from './treeViewClasses'; -export const styles = { - /* Styles applied to the root element. */ - root: { - padding: 0, - margin: 0, - listStyle: 'none', - outline: 0, - }, +const overridesResolver = (props, styles) => styles.root || {}; + +const useUtilityClasses = (styleProps) => { + const { classes } = styleProps; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getTreeViewUtilityClass, classes); }; +const TreeViewRoot = experimentalStyled( + 'ul', + {}, + { + name: 'MuiTreeView', + slot: 'Root', + overridesResolver, + }, +)({ + padding: 0, + margin: 0, + listStyle: 'none', + outline: 0, +}); + function isPrintableCharacter(string) { return string && string.length === 1 && string.match(/\S/); } @@ -41,10 +64,10 @@ function noopSelection() { const defaultDefaultExpanded = []; const defaultDefaultSelected = []; -const TreeView = React.forwardRef(function TreeView(props, ref) { +const TreeView = React.forwardRef(function TreeView(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiTreeView' }); const { children, - classes, className, defaultCollapseIcon, defaultEndIcon, @@ -66,6 +89,20 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { selected: selectedProp, ...other } = props; + // use the `isRtl` from the props after the buildAPI script support it + const theme = useTheme(); + const isRtl = theme.direction === 'rtl'; + + const styleProps = { + ...props, + defaultExpanded, + defaultSelected, + disabledItemsFocusable, + disableSelection, + multiSelect, + }; + + const classes = useUtilityClasses(styleProps); const treeId = useId(idProp); @@ -74,8 +111,6 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { const [focusedNodeId, setFocusedNodeId] = React.useState(null); - const theme = useTheme(); - const nodeMap = React.useRef({}); const firstCharMap = React.useRef({}); @@ -677,14 +712,14 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { flag = true; break; case 'ArrowRight': - if (theme.direction === 'rtl') { + if (isRtl) { flag = handlePreviousArrow(event); } else { flag = handleNextArrow(event); } break; case 'ArrowLeft': - if (theme.direction === 'rtl') { + if (isRtl) { flag = handleNextArrow(event); } else { flag = handlePreviousArrow(event); @@ -786,7 +821,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) { }} > -
    {children} -
+ ); @@ -915,6 +951,10 @@ TreeView.propTypes /* remove-proptypes */ = { * When `multiSelect` is true this takes an array of strings; when false (default) a string. */ selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiTreeView' })(TreeView); +export default TreeView; diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js index dd91a7c3b9b080..8fcb667f53f057 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.test.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js @@ -7,29 +7,25 @@ import { ErrorBoundary, fireEvent, screen, - describeConformance, - getClasses, + describeConformanceV5, createMount, } from 'test/utils'; import Portal from '@material-ui/core/Portal'; -import TreeView from './TreeView'; -import TreeItem from '../TreeItem'; +import TreeView, { treeViewClasses as classes } from '@material-ui/lab/TreeView'; +import TreeItem from '@material-ui/lab/TreeItem'; describe('', () => { - let classes; const mount = createMount(); const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'ul', + render, mount, refInstanceof: window.HTMLUListElement, - skip: ['componentProp'], + muiName: 'MuiTreeView', + skip: ['componentProp', 'componentsProp', 'themeVariants'], })); describe('warnings', () => { diff --git a/packages/material-ui-lab/src/TreeView/index.d.ts b/packages/material-ui-lab/src/TreeView/index.d.ts index 3e7885ee1f63c7..ce9c3ee836af8f 100644 --- a/packages/material-ui-lab/src/TreeView/index.d.ts +++ b/packages/material-ui-lab/src/TreeView/index.d.ts @@ -1,2 +1,5 @@ export { default } from './TreeView'; export * from './TreeView'; + +export { default as treeViewClasses } from './treeViewClasses'; +export * from './treeViewClasses'; diff --git a/packages/material-ui-lab/src/TreeView/index.js b/packages/material-ui-lab/src/TreeView/index.js index a9bb39f3a3e016..8d842839e9aec0 100644 --- a/packages/material-ui-lab/src/TreeView/index.js +++ b/packages/material-ui-lab/src/TreeView/index.js @@ -1 +1,4 @@ export { default } from './TreeView'; + +export { default as treeViewClasses } from './treeViewClasses'; +export * from './treeViewClasses'; diff --git a/packages/material-ui-lab/src/TreeView/treeViewClasses.d.ts b/packages/material-ui-lab/src/TreeView/treeViewClasses.d.ts new file mode 100644 index 00000000000000..de3d898a7d45cf --- /dev/null +++ b/packages/material-ui-lab/src/TreeView/treeViewClasses.d.ts @@ -0,0 +1,7 @@ +import { TreeViewClassKey } from './TreeView'; + +declare const treeViewClasses: Record; + +export function getTreeViewUtilityClass(slot: string): string; + +export default treeViewClasses; diff --git a/packages/material-ui-lab/src/TreeView/treeViewClasses.js b/packages/material-ui-lab/src/TreeView/treeViewClasses.js new file mode 100644 index 00000000000000..a3c93a3b5d5450 --- /dev/null +++ b/packages/material-ui-lab/src/TreeView/treeViewClasses.js @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getTreeViewUtilityClass(slot) { + return generateUtilityClass('MuiTreeView', slot); +} + +const treeViewClasses = generateUtilityClasses('MuiTreeView', ['root']); + +export default treeViewClasses;