Skip to content
This repository has been archived by the owner on Jul 28, 2020. It is now read-only.

Commit

Permalink
Converted Tag to use Hooks #860
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel-martic-sociomantic committed Feb 8, 2019
1 parent ce1eb0a commit 44cf2cd
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 88 deletions.
170 changes: 84 additions & 86 deletions src/Tag/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,100 +13,98 @@ import PropTypes from 'prop-types';
import { IconButton, Text } from '..';

import { generateId } from '../utils';
import ThemeContext from '../Theming/ThemeContext';
import { createCssMap } from '../Theming';
import { useTheme } from '../Theming';

const componentName = 'Tag';

export default class Tag extends React.Component
const Tag = props =>
{
static contextType = ThemeContext;
const {
children,
id = generateId( 'Tag' ),
isDisabled,
isReadOnly,
label,
onClick,
} = props;

static propTypes =
{
/**
* Tag label (JSX node; overrides label prop)
*/
children : PropTypes.node,
/**
* CSS class name
*/
className : PropTypes.string,
/**
* CSS class map
*/
cssMap : PropTypes.objectOf( PropTypes.string ),
/**
* Component id
*/
id : PropTypes.string,
/**
* Display as disabled
*/
isDisabled : PropTypes.bool,
/**
* Display as read-only
*/
isReadOnly : PropTypes.bool,
/**
* Tag label (string)
*/
label : PropTypes.string,
/**
* onClick callback function for delete icon
*/
onClick : PropTypes.func,
};
const cssMap = useTheme( componentName, props );

let labelText = children || label;

static defaultProps =
if ( typeof labelText === 'string' )
{
children : undefined,
className : undefined,
cssMap : undefined,
id : undefined,
isDisabled : false,
isReadOnly : false,
label : undefined,
onClick : undefined,
};
labelText = (
<Text className = { cssMap.label } overflowIsHidden>
{ labelText }
</Text>
);
}

static displayName = 'Tag';
return (
<div className = { cssMap.main }>
{ labelText }
<IconButton
className = { cssMap.delete }
iconSize = "S"
iconType = "x"
isDisabled = { isDisabled }
isReadOnly = { isReadOnly }
onClick = { () =>
onClick && onClick( { id } )
} />
</div>
);
};

render()
{
const {
children,
cssMap = createCssMap( this.context.Tag, this.props ),
id = generateId( 'Tag' ),
isDisabled,
isReadOnly,
label,
onClick,
} = this.props;
Tag.propTypes =
{
/**
* Tag label (JSX node; overrides label prop)
*/
children : PropTypes.node,
/**
* CSS class name
*/
className : PropTypes.string,
/**
* CSS class map
*/
cssMap : PropTypes.objectOf( PropTypes.string ),
/**
* Component id
*/
id : PropTypes.string,
/**
* Display as disabled
*/
isDisabled : PropTypes.bool,
/**
* Display as read-only
*/
isReadOnly : PropTypes.bool,
/**
* Tag label (string)
*/
label : PropTypes.string,
/**
* onClick callback function for delete icon
*/
onClick : PropTypes.func,
};

let labelText = children || label;
Tag.defaultProps =
{
children : undefined,
className : undefined,
cssMap : undefined,
id : undefined,
isDisabled : false,
isReadOnly : false,
label : undefined,
onClick : undefined,
};

if ( typeof labelText === 'string' )
{
labelText = (
<Text className = { cssMap.label } overflowIsHidden>
{ labelText }
</Text>
);
}
Tag.displayName = componentName;

return (
<div className = { cssMap.main }>
{ labelText }
<IconButton
className = { cssMap.delete }
iconSize = "S"
iconType = "x"
isDisabled = { isDisabled }
isReadOnly = { isReadOnly }
onClick = { () =>
onClick && onClick( { id } )
} />
</div>
);
}
}
export default Tag;
4 changes: 2 additions & 2 deletions src/Tag/tests.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ describe( 'Tag', () =>
wrapper = shallow( <Tag /> );
} );

test( 'should have “main” as default className', () =>
test( 'should have “default” as default className', () =>
{
expect( wrapper.prop( 'className' ) ).toEqual( 'main' );
expect( wrapper.prop( 'className' ) ).toEqual( 'default' );
} );

test( 'should have an IconButton as a child', () =>
Expand Down

0 comments on commit 44cf2cd

Please sign in to comment.