Skip to content

Commit

Permalink
removed kebabtypes
Browse files Browse the repository at this point in the history
  • Loading branch information
@sai6855
sai6855 committed Feb 15, 2023
1 parent c994e23 commit 14fd717
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 43 deletions.
35 changes: 17 additions & 18 deletions packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
strictModeDoubleLoggingSupressed,
} from 'test/utils';
import TextareaAutosize from '@mui/base/TextareaAutosize';
import { KebabKeys } from '@mui/types';

describe('<TextareaAutosize />', () => {
const { clock, render } = createRenderer();
Expand All @@ -34,7 +33,7 @@ describe('<TextareaAutosize />', () => {
}));

describe('layout', () => {
const getComputedStyleStub = new Map<Element, Partial<KebabKeys<CSSStyleDeclaration>>>();
const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
function setLayout(
input: HTMLTextAreaElement,
shadow: Element,
Expand All @@ -43,7 +42,7 @@ describe('<TextareaAutosize />', () => {
scrollHeight,
lineHeight: lineHeightArg,
}: {
getComputedStyle: Partial<KebabKeys<CSSStyleDeclaration>>;
getComputedStyle: Partial<CSSStyleDeclaration>;
scrollHeight?: number;
lineHeight?: number | (() => number);
},
Expand Down Expand Up @@ -87,7 +86,7 @@ describe('<TextareaAutosize />', () => {

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -110,7 +109,7 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -134,8 +133,8 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
'border-bottom-width': `${border}px`,
boxSizing: 'border-box',
borderBottomWidth: `${border}px`,
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -152,8 +151,8 @@ describe('<TextareaAutosize />', () => {
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
'padding-top': `${padding}px`,
boxSizing: 'border-box',
paddingTop: `${padding}px`,
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -171,7 +170,7 @@ describe('<TextareaAutosize />', () => {
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight,
Expand All @@ -189,7 +188,7 @@ describe('<TextareaAutosize />', () => {
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight,
Expand All @@ -207,7 +206,7 @@ describe('<TextareaAutosize />', () => {
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 2,
lineHeight,
Expand All @@ -217,7 +216,7 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 3,
lineHeight,
Expand All @@ -227,7 +226,7 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 4,
lineHeight,
Expand All @@ -244,7 +243,7 @@ describe('<TextareaAutosize />', () => {
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight,
Expand All @@ -265,7 +264,7 @@ describe('<TextareaAutosize />', () => {

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: lineHeight * 2,
lineHeight,
Expand All @@ -277,7 +276,7 @@ describe('<TextareaAutosize />', () => {

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
width: '0px',
},
scrollHeight: lineHeight * 3,
Expand All @@ -297,7 +296,7 @@ describe('<TextareaAutosize />', () => {
let index = 0;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight: () => {
Expand Down
19 changes: 6 additions & 13 deletions packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,15 @@ import {
unstable_useEnhancedEffect as useEnhancedEffect,
unstable_ownerWindow as ownerWindow,
} from '@mui/utils';
import { KebabKeys } from '@mui/types';
import { TextareaAutosizeProps } from './TextareaAutosize.types';

type State = {
outerHeightStyle: number;
overflow?: boolean | undefined;
};

function getStyleValue(
computedStyle: KebabKeys<CSSStyleDeclaration>,
property: keyof KebabKeys<CSSStyleDeclaration>,
) {
return parseInt(`${computedStyle[property]}`, 10) || 0;
function getStyleValue(value: string) {
return parseInt(value, 10) || 0;
}

const styles: {
Expand Down Expand Up @@ -79,9 +75,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
const input = inputRef.current!;

const containerWindow = ownerWindow(input);
const computedStyle = containerWindow.getComputedStyle(
input,
) as unknown as KebabKeys<CSSStyleDeclaration>;
const computedStyle = containerWindow.getComputedStyle(input);

// If input's width is shrunk and it's not visible, don't sync height.
if (computedStyle.width === '0px') {
Expand All @@ -101,12 +95,11 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
inputShallow.value += ' ';
}

const boxSizing = computedStyle['box-sizing'];
const boxSizing = computedStyle.boxSizing;
const padding =
getStyleValue(computedStyle, 'padding-bottom') + getStyleValue(computedStyle, 'padding-top');
getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
const border =
getStyleValue(computedStyle, 'border-bottom-width') +
getStyleValue(computedStyle, 'border-top-width');
getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);

// The height of the inner content
const innerHeight = inputShallow.scrollHeight;
Expand Down
12 changes: 0 additions & 12 deletions packages/mui-types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,6 @@ export type PropInjector<InjectedProps, AdditionalProps = {}> = <
*/
export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;

/**
* @internal
*/
type Kebab<T extends string, A extends string = ''> = T extends `${infer F}${infer R}`
? Kebab<R, `${A}${F extends Lowercase<F> ? '' : '-'}${Lowercase<F>}`>
: A;
/**
* Converts Object keys from CamelCase to KebabCase
* @internal
*/
export type KebabKeys<T> = { [K in keyof T as K extends string ? Kebab<K> : K]: T[K] };

/**
* Generate a set of string literal types with the given default record `T` and
* override record `U`.
Expand Down

0 comments on commit 14fd717

Please sign in to comment.