From 67ebf1fcadd0d237f9d35bb64e938db44bc4870f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 26 Apr 2021 21:30:50 +0700 Subject: [PATCH 01/16] migrate to emotion --- .../internal/pickers/PickersToolbarText.tsx | 89 ++++++++++++------- .../pickers/pickersToolbarTextClasses.ts | 12 +++ .../material-ui/src/styles/useThemeProps.d.ts | 3 +- 3 files changed, 71 insertions(+), 33 deletions(-) create mode 100644 packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 67aa69889961ff..f2c8d4dbb674a0 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,46 +1,71 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography, { TypographyProps } from '@material-ui/core/Typography'; -import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; +import { + experimentalStyled, + unstable_useThemeProps as useThemeProps, +} from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { ExtendMui } from './typings/helpers'; +import pickersToolbarTextClasses, { + getPickersToolbarTextUtilityClass, +} from './pickersToolbarTextClasses'; export interface PickersToolbarTextProps extends ExtendMui { + component?: React.ElementType; + classes?: Partial; selected?: boolean; value: React.ReactNode; } -export type PickersToolbarTextClassKey = 'root' | 'selected'; -export const styles: MuiStyles = ( - theme, -): StyleRules => { - return { - root: { - transition: theme.transitions.create('color'), - color: theme.palette.text.secondary, - '&$selected': { - color: theme.palette.text.primary, - }, - }, - selected: {}, +export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; + +const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { + const { selected, classes } = styleProps; + + const slots = { + root: ['root', selected && 'selected'], }; -}; -const PickersToolbarText: React.FC> = ( - props, -) => { - const { className, classes, selected, value, ...other } = props; - - return ( - - {value} - - ); + return composeClasses(slots, getPickersToolbarTextUtilityClass, classes); }; -export default withStyles(styles, { name: 'MuiPickersToolbarText' })(PickersToolbarText); +const PickersToolbarTextRoot = experimentalStyled( + Typography, + {}, + { + name: 'MuiPickersToolbarText', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }, +)(({ theme }) => ({ + transition: theme.transitions.create('color'), + color: theme.palette.text.secondary, + [`&.${pickersToolbarTextClasses.selected}`]: { + color: theme.palette.text.primary, + }, +})); + +const PickersToolbarText = React.forwardRef( + function PickersToolbarText(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarText' }); + const { component = 'span', className, selected, value, ...other } = props; + const styleProps = { ...props }; + + const classes = useUtilityClasses(styleProps); + + return ( + + {value} + + ); + }, +); + +export default PickersToolbarText; diff --git a/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts b/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts new file mode 100644 index 00000000000000..84a32725bc71e5 --- /dev/null +++ b/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts @@ -0,0 +1,12 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getPickersToolbarTextUtilityClass(slot: string) { + return generateUtilityClass('MuiPickersToolbarText', slot); +} + +const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ + 'root', + 'selected', +]); + +export default pickersToolbarTextClasses; diff --git a/packages/material-ui/src/styles/useThemeProps.d.ts b/packages/material-ui/src/styles/useThemeProps.d.ts index 2a982c1b9e3bd9..0955c4b36a5f25 100644 --- a/packages/material-ui/src/styles/useThemeProps.d.ts +++ b/packages/material-ui/src/styles/useThemeProps.d.ts @@ -1,3 +1,4 @@ +import { Theme as MuiTheme } from '@material-ui/core/styles'; import { Components } from './components'; export interface ThemeWithProps { @@ -16,7 +17,7 @@ export interface AdditionalThemeProps { } export default function useThemeProps< - Theme extends ThemeWithProps, + Theme extends MuiTheme, Props, Name extends keyof any >(params: { From f295aaad430ebd54a16d7ee8a4dec138d68d2eaa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 26 Apr 2021 21:55:55 +0700 Subject: [PATCH 02/16] replace as with component --- .../src/internal/pickers/PickersToolbarText.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index f2c8d4dbb674a0..9a13a70d9718f6 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -58,7 +58,9 @@ const PickersToolbarText = React.forwardRef From 03be823c2033f114d1bbf2afb11262c2e60e6b23 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 26 Apr 2021 23:04:37 +0700 Subject: [PATCH 03/16] run prettier --- .../material-ui-lab/src/internal/pickers/PickersToolbarText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 9a13a70d9718f6..e2d55616bd9bf8 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -59,7 +59,7 @@ const PickersToolbarText = React.forwardRef Date: Wed, 28 Apr 2021 20:41:48 +0700 Subject: [PATCH 04/16] fix types --- .../src/internal/pickers/PickersToolbarText.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index e2d55616bd9bf8..12a63de5e2754d 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; -import Typography, { TypographyProps } from '@material-ui/core/Typography'; +import Typography, { TypographyProps, TypographyTypeMap } from '@material-ui/core/Typography'; import { experimentalStyled, unstable_useThemeProps as useThemeProps, } from '@material-ui/core/styles'; +import { OverridableComponent } from '@material-ui/core/OverridableComponent'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { ExtendMui } from './typings/helpers'; import pickersToolbarTextClasses, { @@ -30,7 +31,9 @@ const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { return composeClasses(slots, getPickersToolbarTextUtilityClass, classes); }; -const PickersToolbarTextRoot = experimentalStyled( +const PickersToolbarTextRoot = experimentalStyled< + OverridableComponent> +>( Typography, {}, { @@ -58,8 +61,6 @@ const PickersToolbarText = React.forwardRef Date: Thu, 29 Apr 2021 09:04:57 +0700 Subject: [PATCH 05/16] add sx props --- .../src/internal/pickers/PickersToolbarText.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 12a63de5e2754d..4b26bcde6089a7 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography, { TypographyProps, TypographyTypeMap } from '@material-ui/core/Typography'; +import { SxProps } from '@material-ui/system'; import { experimentalStyled, unstable_useThemeProps as useThemeProps, + Theme, } from '@material-ui/core/styles'; import { OverridableComponent } from '@material-ui/core/OverridableComponent'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; @@ -17,6 +19,7 @@ export interface PickersToolbarTextProps extends ExtendMui { classes?: Partial; selected?: boolean; value: React.ReactNode; + sx?: SxProps; } export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; From f24fd2bf6b28c152a6dab31787b1f2cbab13b18a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 29 Apr 2021 19:43:36 +0700 Subject: [PATCH 06/16] minor adjustment --- .../src/internal/pickers/PickersToolbarText.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 4b26bcde6089a7..cc491f655e259c 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -55,7 +55,7 @@ const PickersToolbarTextRoot = experimentalStyled< const PickersToolbarText = React.forwardRef( function PickersToolbarText(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarText' }); - const { component = 'span', className, selected, value, ...other } = props; + const { className, selected, value, ...other } = props; const styleProps = { ...props }; const classes = useUtilityClasses(styleProps); @@ -64,7 +64,7 @@ const PickersToolbarText = React.forwardRef From 458ccea45f7a2c7279994e19d3297e6eb8f94f73 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 29 Apr 2021 20:29:52 +0700 Subject: [PATCH 07/16] move classes to component file --- .../internal/pickers/PickersToolbarText.tsx | 25 ++++++++++++------- .../pickers/pickersToolbarTextClasses.ts | 12 --------- 2 files changed, 16 insertions(+), 21 deletions(-) delete mode 100644 packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index cc491f655e259c..29d6d3f3b46bf3 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; import clsx from 'clsx'; -import Typography, { TypographyProps, TypographyTypeMap } from '@material-ui/core/Typography'; +import Typography, { TypographyProps } from '@material-ui/core/Typography'; import { SxProps } from '@material-ui/system'; import { experimentalStyled, unstable_useThemeProps as useThemeProps, Theme, } from '@material-ui/core/styles'; -import { OverridableComponent } from '@material-ui/core/OverridableComponent'; -import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { + unstable_composeClasses as composeClasses, + generateUtilityClass, + generateUtilityClasses, +} from '@material-ui/unstyled'; import { ExtendMui } from './typings/helpers'; -import pickersToolbarTextClasses, { - getPickersToolbarTextUtilityClass, -} from './pickersToolbarTextClasses'; export interface PickersToolbarTextProps extends ExtendMui { component?: React.ElementType; @@ -24,6 +24,15 @@ export interface PickersToolbarTextProps extends ExtendMui { export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; +export function getPickersToolbarTextUtilityClass(slot: string) { + return generateUtilityClass('MuiPickersToolbarText', slot); +} + +export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ + 'root', + 'selected', +]); + const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { const { selected, classes } = styleProps; @@ -34,9 +43,7 @@ const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { return composeClasses(slots, getPickersToolbarTextUtilityClass, classes); }; -const PickersToolbarTextRoot = experimentalStyled< - OverridableComponent> ->( +const PickersToolbarTextRoot = experimentalStyled( Typography, {}, { diff --git a/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts b/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts deleted file mode 100644 index 84a32725bc71e5..00000000000000 --- a/packages/material-ui-lab/src/internal/pickers/pickersToolbarTextClasses.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; - -export function getPickersToolbarTextUtilityClass(slot: string) { - return generateUtilityClass('MuiPickersToolbarText', slot); -} - -const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ - 'root', - 'selected', -]); - -export default pickersToolbarTextClasses; From 6c751ba1bbd13b0983178b8863666bfc3b862bd8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 30 Apr 2021 08:54:17 +0700 Subject: [PATCH 08/16] revert useThemeProps and use generic instead --- .../src/internal/pickers/PickersToolbarText.tsx | 5 ++++- packages/material-ui/src/styles/useThemeProps.d.ts | 3 +-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 29d6d3f3b46bf3..8b6c84660a2d8e 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -61,7 +61,10 @@ const PickersToolbarTextRoot = experimentalStyled( const PickersToolbarText = React.forwardRef( function PickersToolbarText(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarText' }); + const props = useThemeProps({ + props: inProps, + name: 'MuiPickersToolbarText', + }); const { className, selected, value, ...other } = props; const styleProps = { ...props }; diff --git a/packages/material-ui/src/styles/useThemeProps.d.ts b/packages/material-ui/src/styles/useThemeProps.d.ts index 0955c4b36a5f25..2a982c1b9e3bd9 100644 --- a/packages/material-ui/src/styles/useThemeProps.d.ts +++ b/packages/material-ui/src/styles/useThemeProps.d.ts @@ -1,4 +1,3 @@ -import { Theme as MuiTheme } from '@material-ui/core/styles'; import { Components } from './components'; export interface ThemeWithProps { @@ -17,7 +16,7 @@ export interface AdditionalThemeProps { } export default function useThemeProps< - Theme extends MuiTheme, + Theme extends ThemeWithProps, Props, Name extends keyof any >(params: { From 908bb61581a1109ddffb977983bc96b1b702c03b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 30 Apr 2021 09:08:54 +0700 Subject: [PATCH 09/16] move function to the top --- .../internal/pickers/PickersToolbarText.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 8b6c84660a2d8e..736e9b33b8867c 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -14,6 +14,15 @@ import { } from '@material-ui/unstyled'; import { ExtendMui } from './typings/helpers'; +export function getPickersToolbarTextUtilityClass(slot: string) { + return generateUtilityClass('MuiPickersToolbarText', slot); +} + +export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ + 'root', + 'selected', +]); + export interface PickersToolbarTextProps extends ExtendMui { component?: React.ElementType; classes?: Partial; @@ -24,15 +33,6 @@ export interface PickersToolbarTextProps extends ExtendMui { export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; -export function getPickersToolbarTextUtilityClass(slot: string) { - return generateUtilityClass('MuiPickersToolbarText', slot); -} - -export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ - 'root', - 'selected', -]); - const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { const { selected, classes } = styleProps; From 90c219be84e6fea34952038a495bf2b74a3eca58 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 2 May 2021 19:44:52 +0200 Subject: [PATCH 10/16] sort asc --- .../src/internal/pickers/PickersToolbarText.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 736e9b33b8867c..b1e2aa9d8e9ea0 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -24,11 +24,11 @@ export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolb ]); export interface PickersToolbarTextProps extends ExtendMui { - component?: React.ElementType; classes?: Partial; + component?: React.ElementType; selected?: boolean; - value: React.ReactNode; sx?: SxProps; + value: React.ReactNode; } export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; From c2fc00df3b98ee2ff02958179d9a1bc89e9f327b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 2 May 2021 19:45:56 +0200 Subject: [PATCH 11/16] help to not forget --- .../material-ui-lab/src/internal/pickers/PickersToolbarText.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index b1e2aa9d8e9ea0..07b0a58d0250ef 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -66,6 +66,7 @@ const PickersToolbarText = React.forwardRef Date: Sun, 2 May 2021 20:35:40 +0200 Subject: [PATCH 12/16] default props are private --- .../src/internal/pickers/PickersToolbarText.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 07b0a58d0250ef..6482a6d300fc0e 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -4,7 +4,6 @@ import Typography, { TypographyProps } from '@material-ui/core/Typography'; import { SxProps } from '@material-ui/system'; import { experimentalStyled, - unstable_useThemeProps as useThemeProps, Theme, } from '@material-ui/core/styles'; import { @@ -60,11 +59,7 @@ const PickersToolbarTextRoot = experimentalStyled( })); const PickersToolbarText = React.forwardRef( - function PickersToolbarText(inProps, ref) { - const props = useThemeProps({ - props: inProps, - name: 'MuiPickersToolbarText', - }); + function PickersToolbarText(props, ref) { const { className, selected, value, ...other } = props; // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed const styleProps = { ...props }; From a866ca5321450d86e541ec14720fa0a838167c07 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 2 May 2021 20:36:08 +0200 Subject: [PATCH 13/16] no need for sx prop on none exported components --- .../src/internal/pickers/PickersToolbarText.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 6482a6d300fc0e..80f844fba7b72f 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography, { TypographyProps } from '@material-ui/core/Typography'; -import { SxProps } from '@material-ui/system'; -import { - experimentalStyled, - Theme, -} from '@material-ui/core/styles'; +import { experimentalStyled } from '@material-ui/core/styles'; import { unstable_composeClasses as composeClasses, generateUtilityClass, @@ -26,7 +22,6 @@ export interface PickersToolbarTextProps extends ExtendMui { classes?: Partial; component?: React.ElementType; selected?: boolean; - sx?: SxProps; value: React.ReactNode; } From 6638a0cc5713db1350a63410bcd657e5379d9ac7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 May 2021 09:36:32 +0700 Subject: [PATCH 14/16] use generic for component prop --- .../src/internal/pickers/PickersToolbarText.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 66241a52ea8919..e55204e89a5697 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -20,7 +20,6 @@ export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolb export interface PickersToolbarTextProps extends ExtendMui { classes?: Partial; - component?: React.ElementType; selected?: boolean; value: React.ReactNode; } @@ -41,7 +40,7 @@ const PickersToolbarTextRoot = experimentalStyled( Typography, {}, { skipSx: true }, -)(({ theme }) => ({ +)<{ component?: React.ElementType }>(({ theme }) => ({ transition: theme.transitions.create('color'), color: theme.palette.text.secondary, [`&.${pickersToolbarTextClasses.selected}`]: { From f44b9244615e3b4a810fe98f4866853d8412a4dc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 12 May 2021 09:14:12 +0700 Subject: [PATCH 15/16] follow convention --- .../internal/pickers/PickersToolbarText.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index e55204e89a5697..530c914782e129 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -9,22 +9,25 @@ import { } from '@material-ui/unstyled'; import { ExtendMui } from './typings/helpers'; -export function getPickersToolbarTextUtilityClass(slot: string) { - return generateUtilityClass('MuiPickersToolbarText', slot); -} - -export const pickersToolbarTextClasses = generateUtilityClasses('MuiPickersToolbarText', [ - 'root', - 'selected', -]); - export interface PickersToolbarTextProps extends ExtendMui { - classes?: Partial; + classes?: { + root?: string; + selected?: string; + }; selected?: boolean; value: React.ReactNode; } -export type PickersToolbarTextClassKey = keyof typeof pickersToolbarTextClasses; +export type PickersToolbarTextClassKey = keyof NonNullable; + +export function getPickersToolbarTextUtilityClass(slot: string) { + return generateUtilityClass('PrivatePickersToolbarText', slot); +} + +export const pickersToolbarTextClasses = generateUtilityClasses( + 'PrivatePickersToolbarText', + ['root', 'selected'], +); const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { const { selected, classes } = styleProps; From 699ac18c27f88ade852096e89e18e39e2c81f522 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 12 May 2021 14:29:34 +0700 Subject: [PATCH 16/16] simplify for internal component --- .../internal/pickers/PickersToolbarText.tsx | 43 +++---------------- 1 file changed, 5 insertions(+), 38 deletions(-) diff --git a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx index 530c914782e129..6b9105d85be818 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersToolbarText.tsx @@ -2,42 +2,14 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography, { TypographyProps } from '@material-ui/core/Typography'; import { experimentalStyled } from '@material-ui/core/styles'; -import { - unstable_composeClasses as composeClasses, - generateUtilityClass, - generateUtilityClasses, -} from '@material-ui/unstyled'; -import { ExtendMui } from './typings/helpers'; +import { generateUtilityClasses } from '@material-ui/unstyled'; -export interface PickersToolbarTextProps extends ExtendMui { - classes?: { - root?: string; - selected?: string; - }; +export interface PickersToolbarTextProps extends Omit { selected?: boolean; value: React.ReactNode; } -export type PickersToolbarTextClassKey = keyof NonNullable; - -export function getPickersToolbarTextUtilityClass(slot: string) { - return generateUtilityClass('PrivatePickersToolbarText', slot); -} - -export const pickersToolbarTextClasses = generateUtilityClasses( - 'PrivatePickersToolbarText', - ['root', 'selected'], -); - -const useUtilityClasses = (styleProps: PickersToolbarTextProps) => { - const { selected, classes } = styleProps; - - const slots = { - root: ['root', selected && 'selected'], - }; - - return composeClasses(slots, getPickersToolbarTextUtilityClass, classes); -}; +const classes = generateUtilityClasses('PrivatePickersToolbarText', ['selected']); const PickersToolbarTextRoot = experimentalStyled( Typography, @@ -46,7 +18,7 @@ const PickersToolbarTextRoot = experimentalStyled( )<{ component?: React.ElementType }>(({ theme }) => ({ transition: theme.transitions.create('color'), color: theme.palette.text.secondary, - [`&.${pickersToolbarTextClasses.selected}`]: { + [`&.${classes.selected}`]: { color: theme.palette.text.primary, }, })); @@ -54,17 +26,12 @@ const PickersToolbarTextRoot = experimentalStyled( const PickersToolbarText = React.forwardRef( function PickersToolbarText(props, ref) { const { className, selected, value, ...other } = props; - // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed - const styleProps = { ...props }; - - const classes = useUtilityClasses(styleProps); return ( {value}