Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.

Commit

Permalink
🏷️ Fix types on components with subcomponents
Browse files Browse the repository at this point in the history
  • Loading branch information
@lowiebenoot
lowiebenoot committed Nov 6, 2023
1 parent 80aceac commit 3b1bb17
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 81 deletions.
23 changes: 13 additions & 10 deletions src/components/datagrid/DataGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import HeaderRow, { HeaderRowProps } from './HeaderRow';
import HeaderRowOverlay, { HeaderRowOverlayProps } from './HeaderRowOverlay/HeaderRowOverlay';
import theme from './theme.css';

export interface DataGridProps extends Omit<BoxProps, 'children' | 'className'> {
export interface DataGridProps extends Omit<BoxProps, 'children' | 'className' | 'ref'> {
/** If true, datagrid will have a border and rounded corners. */
bordered?: boolean;
/** The content to display inside the data grid. */
Expand Down Expand Up @@ -47,7 +47,7 @@ interface DatagridComponent extends GenericComponent<DataGridProps> {
FooterRow: GenericComponent<FooterRowProps>;
}

export const DataGrid: DatagridComponent = forwardRef<HTMLElement, DataGridProps>(
export const DataGrid: GenericComponent<DataGridProps> = forwardRef<HTMLElement, DataGridProps>(
(
{
bordered = false,
Expand Down Expand Up @@ -268,13 +268,16 @@ export const DataGrid: DatagridComponent = forwardRef<HTMLElement, DataGridProps
},
);

DataGrid.HeaderRow = HeaderRow;
DataGrid.HeaderRowOverlay = HeaderRowOverlay;
DataGrid.HeaderCell = HeaderCell;
DataGrid.BodyRow = BodyRow;
DataGrid.Cell = Cell;
DataGrid.FooterRow = FooterRow;

DataGrid.displayName = 'DataGrid';

export default DataGrid;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const DataGridWithSubComponents = DataGrid as DatagridComponent;

DataGridWithSubComponents.HeaderRow = HeaderRow;
DataGridWithSubComponents.HeaderRowOverlay = HeaderRowOverlay;
DataGridWithSubComponents.HeaderCell = HeaderCell;
DataGridWithSubComponents.BodyRow = BodyRow;
DataGridWithSubComponents.Cell = Cell;
DataGridWithSubComponents.FooterRow = FooterRow;

export default DataGridWithSubComponents;
25 changes: 15 additions & 10 deletions src/components/detailPage/DetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,22 @@ interface DetailPageComponent extends GenericComponent<DetailPageProps> {
Header: GenericComponent<DetailPageHeaderProps>;
}

const DetailPage: DetailPageComponent = forwardRef<HTMLElement, DetailPageProps>(({ children, ...others }, ref) => {
return (
<Box data-teamleader-ui="detail-page" {...others} ref={ref}>
{children}
</Box>
);
});
const DetailPage: GenericComponent<DetailPageProps> = forwardRef<HTMLElement, DetailPageProps>(
({ children, ...others }, ref) => {
return (
<Box data-teamleader-ui="detail-page" {...others} ref={ref}>
{children}
</Box>
);
},
);

DetailPage.displayName = 'DetailPage';

DetailPage.Body = DetailPageBody;
DetailPage.Header = DetailPageHeader;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const DetailPageWithSubComponents = DetailPage as DetailPageComponent;

export default DetailPage;
DetailPageWithSubComponents.Body = DetailPageBody;
DetailPageWithSubComponents.Header = DetailPageHeader;

export default DetailPageWithSubComponents;
14 changes: 9 additions & 5 deletions src/components/labelValuePair/LabelValuePair.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import isReactElement from '../utils/is-react-element';
import Label, { LabelProps } from './Label';
import Value, { ValueProps } from './Value';

export interface LabelValuePairProps extends Omit<BoxProps, 'children'> {
export interface LabelValuePairProps extends Omit<BoxProps, 'children' | 'ref'> {
alignValue?: 'left' | 'right';
children: ReactNode;
inline?: boolean;
Expand All @@ -18,7 +18,7 @@ interface LabelValuePairComponent extends GenericComponent<LabelValuePairProps>
Value: GenericComponent<ValueProps>;
}

const LabelValuePair: LabelValuePairComponent = forwardRef<HTMLElement, LabelValuePairProps>(
const LabelValuePair: GenericComponent<LabelValuePairProps> = forwardRef<HTMLElement, LabelValuePairProps>(
({ alignValue = 'left', children, inline = true, ...others }, ref) => (
<Box
data-teamleader-ui="label-value-pair"
Expand Down Expand Up @@ -51,7 +51,11 @@ const LabelValuePair: LabelValuePairComponent = forwardRef<HTMLElement, LabelVal
);

LabelValuePair.displayName = 'LabelValuePair';
LabelValuePair.Label = Label;
LabelValuePair.Value = Value;

export default LabelValuePair;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const LabelValuePairWithSubComponents = LabelValuePair as LabelValuePairComponent;

LabelValuePairWithSubComponents.Label = Label;
LabelValuePairWithSubComponents.Value = Value;

export default LabelValuePairWithSubComponents;
81 changes: 43 additions & 38 deletions src/components/marketingButtonGroup/MarketingButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,50 +23,55 @@ interface MarketingButtonGroupComponent extends GenericComponent<MarketingButton
Button: GenericComponent<ButtonProps>;
}

const MarketingButtonGroup: MarketingButtonGroupComponent = forwardRef<HTMLElement, MarketingButtonGroupProps>(
({ children, className, value, onChange, ...others }, ref) => {
const handleChange = (value: string, event: React.ChangeEvent) => {
if (onChange) {
onChange(value, event);
}
};
const MarketingButtonGroup: GenericComponent<MarketingButtonGroupProps> = forwardRef<
HTMLElement,
MarketingButtonGroupProps
>(({ children, className, value, onChange, ...others }, ref) => {
const handleChange = (value: string, event: React.ChangeEvent) => {
if (onChange) {
onChange(value, event);
}
};

const classNames = cx(theme['group'], theme['segmented'], className);
const classNames = cx(theme['group'], theme['segmented'], className);

return (
<Box data-teamleader-ui="button-group" className={classNames} {...others} ref={ref}>
{React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return;
}
return (
<Box data-teamleader-ui="button-group" className={classNames} {...others} ref={ref}>
{React.Children.map(children, (child) => {
if (!React.isValidElement(child)) {
return;
}

if (!isComponentOfType(Button, child)) {
return child;
}
if (!isComponentOfType(Button, child)) {
return child;
}

let optionalChildProps = {};
if (value) {
optionalChildProps = {
active: child.props.value === value,
onClick: (event: React.ChangeEvent) => handleChange(child.props.value || '', event),
};
}
let optionalChildProps = {};
if (value) {
optionalChildProps = {
active: child.props.value === value,
onClick: (event: React.ChangeEvent) => handleChange(child.props.value || '', event),
};
}

const childProps = omit(child.props, ['value']);
const groupProps = omit(others, ['onChange']);
const childProps = omit(child.props, ['value']);
const groupProps = omit(others, ['onChange']);

return React.createElement(child.type, {
...childProps,
...optionalChildProps,
...omitBoxProps(groupProps),
});
})}
</Box>
);
},
);
return React.createElement(child.type, {
...childProps,
...optionalChildProps,
...omitBoxProps(groupProps),
});
})}
</Box>
);
});

MarketingButtonGroup.displayName = 'MarketingButtonGroup';
MarketingButtonGroup.Button = Button;

export default MarketingButtonGroup;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const MarketingButtonGroupWithSubComponents = MarketingButtonGroup as MarketingButtonGroupComponent;

MarketingButtonGroupWithSubComponents.Button = Button;

export default MarketingButtonGroupWithSubComponents;
14 changes: 9 additions & 5 deletions src/components/overviewPage/OverviewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Box from '../box';
import { BoxProps } from '../box/Box';
import { GenericComponent } from '../../@types/types';

export interface OverviewPageProps extends Omit<BoxProps, 'children'> {
export interface OverviewPageProps extends Omit<BoxProps, 'children' | 'ref'> {
children: ReactNode;
}

Expand All @@ -14,7 +14,7 @@ interface OverviewPageComponent extends GenericComponent<OverviewPageProps> {
Header: GenericComponent<OverviewPageHeaderProps>;
}

const OverviewPage: OverviewPageComponent = forwardRef<HTMLElement, OverviewPageProps>(
const OverviewPage: GenericComponent<OverviewPageProps> = forwardRef<HTMLElement, OverviewPageProps>(
({ children, ...others }, ref) => {
return (
<Box data-teamleader-ui="overview-page" {...others} ref={ref}>
Expand All @@ -25,7 +25,11 @@ const OverviewPage: OverviewPageComponent = forwardRef<HTMLElement, OverviewPage
);

OverviewPage.displayName = 'OverviewPage';
OverviewPage.Body = OverviewPageBody;
OverviewPage.Header = OverviewPageHeader;

export default OverviewPage;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const OverviewPageWithSubComponents = OverviewPage as OverviewPageComponent;

OverviewPageWithSubComponents.Body = OverviewPageBody;
OverviewPageWithSubComponents.Header = OverviewPageHeader;

export default OverviewPageWithSubComponents;
27 changes: 14 additions & 13 deletions src/components/progressTracker/ProgressTracker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React, { ReactNode, forwardRef } from 'react';
import cx from 'classnames';
import theme from './theme.css';

import Box from '../box';
import ProgressStep from './ProgressStep';
import Box, { BoxProps } from '../box';
import ProgressStep, { ProgressStepProps } from './ProgressStep';
import { GenericComponent } from '../../@types/types';
import { COLORS } from '../../constants';

export interface ProgressTrackerProps {
export interface ProgressTrackerProps extends Omit<BoxProps, 'children' | 'ref'> {
/** Whether or not all steps are completed */
done?: boolean;
/** The number of the step which is currently active */
Expand All @@ -22,14 +22,12 @@ export interface ProgressTrackerProps {
labelPosition?: 'top' | 'alternating' | 'bottom';
}

const ProgressTracker: GenericComponent<ProgressTrackerProps> & { ProgressStep: typeof ProgressStep } = forwardRef<
HTMLElement,
ProgressTrackerProps
>(
(
{ color = 'mint', children, currentStep = 0, done, labelPosition = 'top', activeStepColor }: ProgressTrackerProps,
ref,
) => {
interface ProgressTrackerComponent extends GenericComponent<ProgressTrackerProps> {
ProgressStep: GenericComponent<ProgressStepProps>;
}

const ProgressTracker: GenericComponent<ProgressTrackerProps> = forwardRef<HTMLElement, ProgressTrackerProps>(
({ color = 'mint', children, currentStep = 0, done, labelPosition = 'top', activeStepColor }, ref) => {
const classNames = cx(theme['tracker'], theme[color], theme[`tracker-${labelPosition}`]);
return (
<Box data-teamleader-ui="progress-tracker" className={classNames} ref={ref}>
Expand All @@ -53,6 +51,9 @@ const ProgressTracker: GenericComponent<ProgressTrackerProps> & { ProgressStep:
);

ProgressTracker.displayName = 'ProgressTracker';
ProgressTracker.ProgressStep = ProgressStep;

export default ProgressTracker;
// It has to be written like this, since `forwardRef` return component without sub-components and that doesn't match with our typing
const ProgressTrackerWithSubComponents = ProgressTracker as ProgressTrackerComponent;
ProgressTrackerWithSubComponents.ProgressStep = ProgressStep;

export default ProgressTrackerWithSubComponents;

0 comments on commit 3b1bb17

Please sign in to comment.