Skip to content

Commit

Permalink
REFACTOR: [react-ui-components] migrate Tooltip to TypeScript (#2224)
Browse files Browse the repository at this point in the history
  • Loading branch information
JamesAlias authored and dimaip committed Nov 8, 2018
1 parent 3300db0 commit c5ba1ca
Show file tree
Hide file tree
Showing 8 changed files with 1,981 additions and 90 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,12 @@ exports[`<ToolTip/> should render correctly. 1`] = `
<div
className="tooltipClassName"
>
<div />
<div>
<div
className="arrowClassName"
/>
<div
className="innerClassName"
>
Foo children
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {themr} from '@friendsofreactjs/react-css-themr';

import identifiers from '../identifiers';
import style from './style.css';
import Tooltip from './tooltip';
Expand Down
65 changes: 0 additions & 65 deletions packages/react-ui-components/src/Tooltip/tooltip.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import React from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';
import ToolTip from './tooltip';

describe('<ToolTip/>', () => {
let props;
import ToolTip, {TooltipProps, defaultProps} from './tooltip';

beforeEach(() => {
props = {
theme: {
tooltip: 'tooltipClassName'
},
children: 'Foo children'
};
});
describe('<ToolTip/>', () => {
const props: TooltipProps = {
...defaultProps,
children: 'Foo children',
theme: {
tooltip: 'tooltipClassName',
'tooltip--asError': 'asErrorClassName',
'tooltip--inline': 'inlineClassName',
'tooltip--arrow': 'arrowClassName',
'tooltip--inner': 'innerClassName',
},
};

it('should render correctly.', () => {
const wrapper = shallow(<ToolTip {...props}/>);
Expand All @@ -26,10 +28,4 @@ describe('<ToolTip/>', () => {

expect(wrapper.prop('className')).toContain('fooClassName');
});

it('should allow the propagation of additional props to the wrapper.', () => {
const wrapper = shallow(<ToolTip {...props} foo="bar"/>);

expect(wrapper.prop('foo')).toBe('bar');
});
});
75 changes: 75 additions & 0 deletions packages/react-ui-components/src/Tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import React, {PureComponent, ReactNode} from 'react';
import mergeClassNames from 'classnames';
import {PickDefaultProps} from '../../types';

export interface TooltipProps {
/**
* An optional className to render on the tooltip node.
*/
readonly className?: string;

/**
* The children to render within the tooltip node.
*/
readonly children?: ReactNode;

/**
* If set to true the tooltip won't be positioned absolute but relative and
* show up inline
*/
readonly renderInline?: boolean;

/**
* An optional css theme to be injected.
*/
readonly theme?: TooltipTheme;

/**
* Whether this tooltip should indicate an error or not
*/
readonly asError?: boolean;
}

interface TooltipTheme {
readonly tooltip: string;
readonly 'tooltip--asError': string;
readonly 'tooltip--inline': string;
readonly 'tooltip--arrow': string;
readonly 'tooltip--inner': string;
}

export const defaultProps: PickDefaultProps<TooltipProps, 'renderInline'> = {
renderInline: false,
};

export default class Tooltip extends PureComponent<TooltipProps> {
public static defaultProps = defaultProps;

public render(): JSX.Element {
const {
children,
className,
theme,
renderInline,
asError,
...rest
} = this.props;
const classNames = mergeClassNames(
theme!.tooltip,
{
[theme!['tooltip--asError']]: asError,
[theme!['tooltip--inline']]: renderInline,
},
className
);

return (
<div {...rest} className={classNames}>
<div className={theme!['tooltip--arrow']}/>
<div className={theme!['tooltip--inner']}>
{children}
</div>
</div>
);
}
}
6 changes: 0 additions & 6 deletions tslint.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,9 @@
"object-literal-sort-keys": false,
"no-console": true,
"no-debugger": true,
"no-delete": true,
"no-method-signature": true,
"no-let": true,
"no-object-mutation": true,
"no-parameter-reassignment": true,
"no-var-keyword": true,
"quotemark": [true, "single", "avoid-escape", "avoid-template", "jsx-double"],
"readonly-array": true,
"readonly-keyword": true,
"semicolon": [true, "always"],
"typedef": [true, "call-signature"],
"variable-name": false,
Expand Down
Loading

0 comments on commit c5ba1ca

Please sign in to comment.