web: Components: Added id, className and style property for LinkWithDropdown component. Added tests.
This commit is contained in:
parent
d7b3262e1e
commit
560d9df87a
@ -20,13 +20,15 @@ import { LinkWithDropdown } from "asc-web-components";
|
|||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
| Props | Type | Required | Values | Default | Description |
|
||||||
| ------------------- | :------: | :------: | :------------------------------------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| ------------------- | :------------: | :------: | :------------------------------------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
|
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
|
||||||
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
|
| `data` | `array` | - | - | - | Array of objects, each can contain `<DropDownItem />` props |
|
||||||
| `color` | `oneOf` | - | `gray`, `black`, `blue` | `black` | Color of link in all states - hover, active, visited |
|
| `dropdownType` | `oneOf` | ✅ | `alwaysDotted, appearDottedAfterHover` | - | Type of dropdown: alwaysDotted is always show dotted style and icon of arrow, appearDottedAfterHover is show dotted style and icon arrow only after hover |
|
||||||
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
|
| `fontSize` | `number` | - | - | `13` | Font size of link (in px) |
|
||||||
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
| `id` | `string` | - | - | - | Accepts id |
|
||||||
| `title` | `string` | - | - | - | Title of link | |
|
| `isBold` | `bool` | - | - | `false` | Set font weight |
|
||||||
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
|
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
|
||||||
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status | |
|
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
|
||||||
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||||
|
| `title` | `string` | - | - | - | Title of link | |
|
||||||
|
@ -27,7 +27,7 @@ SimpleLinkWithDropdown.propTypes = {
|
|||||||
|
|
||||||
const color = props => props.color;
|
const color = props => props.color;
|
||||||
|
|
||||||
// eslint-disable-next-line react/prop-types
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
||||||
const ExpanderDownIcon = ({ isSemitransparent, dropdownType, isOpen, ...props }) => (<Icons.ExpanderDownIcon {...props} />);
|
const ExpanderDownIcon = ({ isSemitransparent, dropdownType, isOpen, ...props }) => (<Icons.ExpanderDownIcon {...props} />);
|
||||||
|
|
||||||
const Caret = styled(ExpanderDownIcon)`
|
const Caret = styled(ExpanderDownIcon)`
|
||||||
@ -171,14 +171,18 @@ class LinkWithDropdown extends React.Component {
|
|||||||
color,
|
color,
|
||||||
isBold,
|
isBold,
|
||||||
title,
|
title,
|
||||||
isOpen,
|
|
||||||
className,
|
className,
|
||||||
data,
|
data,
|
||||||
|
id,
|
||||||
|
style,
|
||||||
...rest
|
...rest
|
||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
<StyledSpan
|
<StyledSpan
|
||||||
className={className}>
|
className={className}
|
||||||
|
id={id}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
ref={this.ref}
|
ref={this.ref}
|
||||||
onClick={this.clickToDropdown}
|
onClick={this.clickToDropdown}
|
||||||
@ -238,7 +242,9 @@ LinkWithDropdown.propTypes = {
|
|||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
isOpen: PropTypes.bool,
|
isOpen: PropTypes.bool,
|
||||||
children: PropTypes.any,
|
children: PropTypes.any,
|
||||||
className: PropTypes.string
|
className: PropTypes.string,
|
||||||
|
id: PropTypes.string,
|
||||||
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||||
};
|
};
|
||||||
|
|
||||||
LinkWithDropdown.defaultProps = {
|
LinkWithDropdown.defaultProps = {
|
||||||
|
@ -92,4 +92,84 @@ describe('<LinkWithDropdown />', () => {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('accepts id', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} id="testId">Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('id')).toEqual('testId');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts className', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} className="test">Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('className')).toEqual('test');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts style', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('componentDidUpdate() state lifecycle test', () => {
|
||||||
|
const wrapper = shallow(<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>);
|
||||||
|
const instance = wrapper.instance();
|
||||||
|
|
||||||
|
wrapper.setState({ isOpen: false });
|
||||||
|
|
||||||
|
instance.componentDidUpdate(wrapper.props(), wrapper.state());
|
||||||
|
|
||||||
|
wrapper.setState({ isOpen: true });
|
||||||
|
|
||||||
|
instance.componentDidUpdate(wrapper.props(), wrapper.state());
|
||||||
|
|
||||||
|
expect(wrapper.state()).toBe(wrapper.state());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('componentDidUpdate() prop lifecycle test', () => {
|
||||||
|
const wrapper = shallow(<LinkWithDropdown color="#333333" isBold={true} data={[]} style={{ color: 'red' }}>Link with dropdown</LinkWithDropdown>);
|
||||||
|
const instance = wrapper.instance();
|
||||||
|
|
||||||
|
instance.componentDidUpdate({isOpen: true, dropdownType: 'appearDashedAfterHover'}, wrapper.state());
|
||||||
|
|
||||||
|
expect(wrapper.state()).toBe(wrapper.state());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts prop dropdownType', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} dropdownType="appearDashedAfterHover">Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('dropdownType')).toEqual('appearDashedAfterHover');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts prop isOpen', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} isOpen>Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('isOpen')).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts prop isSemitransparent', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
<LinkWithDropdown color="#333333" isBold={true} data={[]} isSemitransparent>Link with dropdown</LinkWithDropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(wrapper.prop('isSemitransparent')).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('componentWillUnmount() lifecycle test', () => {
|
||||||
|
const wrapper = mount(<LinkWithDropdown color="#333333" isBold={true} data={[]}>Link with dropdown</LinkWithDropdown>);
|
||||||
|
const componentWillUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
|
||||||
|
|
||||||
|
wrapper.unmount();
|
||||||
|
expect(componentWillUnmount).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user