Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: move sidetray to typescript #244

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';

import SideTray from './';
import SideTray from '.';

describe('SideTray', () => {
it('renders', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,56 @@
import React, { useEffect } from 'react';
import React, { useEffect, ReactNode, CSSProperties } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

// Rover UI dependencies
import { parseCssSize } from '../../shared/css-utils';

// This component's dependencies
import styles from './SideTray.module.css';

const SideTray = ({
type SideTrayDirection = 't' | 'b' | 'r' | 'l';

interface SideTrayProps {
children: ReactNode;
className?: string;
direction?: SideTrayDirection;
height?: string | number;
onClose: (...args) => void;
style?: CSSProperties;
visible?: boolean;
width?: string | number;
}

interface SideTrayChildProps {
children: ReactNode;
className?: string;
}

const Header: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
<div {...props} className={classNames(styles.header, className)} />
);
const Footer: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
<div {...props} className={classNames(styles.footer, className)} />
);
const Body: React.FC<SideTrayChildProps> = ({ className = '', ...props }) => (
<div {...props} className={classNames(styles.body, className)} />
);

interface SideTrayType extends React.FC<SideTrayProps> {
Header: typeof Header;
Footer: typeof Footer;
Body: typeof Body;
}

const SideTray: SideTrayType = ({
children,
className,
direction,
height,
className = '',
direction = 'r',
height = '100vh',
onClose,
visible,
width,
style = {},
visible = false,
width = '400px',
...passedProps
}) => {
// Close tray when the user hits "Escape"
Expand Down Expand Up @@ -52,7 +88,7 @@ const SideTray = ({
const parsedWidth = parseCssSize({ size: width });
let hideTransformStyle;

const sideTrayStyles = {
const sideTrayStyles: CSSProperties = {
bottom: 0,
height: `${parsedHeight.size}${parsedHeight.unit}`,
left: 0,
Expand Down Expand Up @@ -82,20 +118,20 @@ const SideTray = ({
}

return (
<>
<React.Fragment>
<div
{...passedProps}
style={{
...sideTrayStyles,
...(!visible ? { transform: hideTransformStyle } : {}),
...passedProps.style,
...style,
}}
className={`${styles.SideTray} ${className}`}
className={classNames(styles.SideTray, className)}
>
<div className={styles.container}>{children}</div>
</div>
{clickOffBackdrop}
</>
</React.Fragment>
);
};

Expand All @@ -110,42 +146,6 @@ SideTray.propTypes = {
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

SideTray.defaultProps = {
className: '',
direction: 'r',
height: '100vh',
style: {},
visible: false,
width: '400px',
};

const Header = ({ className, ...props }) => (
<div {...props} className={`${styles.header} ${className}`} />
);
Header.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
};
Header.defaultProps = { className: '' };

const Footer = ({ className, ...props }) => (
<div {...props} className={`${styles.footer} ${className}`} />
);
Footer.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
};
Footer.defaultProps = { className: '' };

const Body = ({ className, ...props }) => (
<div {...props} className={`${styles.body} ${className}`} />
);
Body.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
};
Body.defaultProps = { className: '' };

SideTray.Header = Header;
SideTray.Footer = Footer;
SideTray.Body = Body;
Expand Down
1 change: 1 addition & 0 deletions src/components/SideTray/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './SideTray';
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, select, text } from '@storybook/addon-knobs';

import SideTray from './';
import SideTray from '.';
import Button from '../Button';
import Readme from './README.md';

Expand Down