mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated to ExternalLink 2.0

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-14 12:51:36 +02:00
parent a7cc8786c3
commit e387706a7b
4 changed files with 10 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
package-lock.json generated
View file

@ -32,7 +32,7 @@
"react-copy-to-clipboard": "^5.0.4", "react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^4.7.0", "react-datepicker": "^4.7.0",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-external-link": "^1.2.2", "react-external-link": "^2.0.0",
"react-leaflet": "^4.0.0", "react-leaflet": "^4.0.0",
"react-redux": "^8.0.0", "react-redux": "^8.0.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
@ -19960,12 +19960,12 @@
"dev": true "dev": true
}, },
"node_modules/react-external-link": { "node_modules/react-external-link": {
"version": "1.2.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.2.tgz", "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-2.0.0.tgz",
"integrity": "sha512-CbJidnDmhcKlH5gVyt2dbmylcwayMY1wuRW8J1V1o7ZPMHdoUrDDmh/GvAMe847eI3sQBg7PLwSLAl5GiyuI+g==", "integrity": "sha512-Q/Lso75l6OHOTvmhJ2YhnfN2f/0RJw76C4rEFkiiivNApNvCtyAFythdW4SpXHMPK6bbE8kk4j23+Zx+r1ImbA==",
"peerDependencies": { "peerDependencies": {
"react": "^17.0", "react": "^17.0 || ^18.0",
"react-dom": "^17.0" "react-dom": "^17.0 || ^18.0"
} }
}, },
"node_modules/react-fast-compare": { "node_modules/react-fast-compare": {
@ -41730,9 +41730,9 @@
"dev": true "dev": true
}, },
"react-external-link": { "react-external-link": {
"version": "1.2.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-1.2.2.tgz", "resolved": "https://registry.npmjs.org/react-external-link/-/react-external-link-2.0.0.tgz",
"integrity": "sha512-CbJidnDmhcKlH5gVyt2dbmylcwayMY1wuRW8J1V1o7ZPMHdoUrDDmh/GvAMe847eI3sQBg7PLwSLAl5GiyuI+g==", "integrity": "sha512-Q/Lso75l6OHOTvmhJ2YhnfN2f/0RJw76C4rEFkiiivNApNvCtyAFythdW4SpXHMPK6bbE8kk4j23+Zx+r1ImbA==",
"requires": {} "requires": {}
}, },
"react-fast-compare": { "react-fast-compare": {

2
package.json
View file

@ -48,7 +48,7 @@
"react-copy-to-clipboard": "^5.0.4", "react-copy-to-clipboard": "^5.0.4",
"react-datepicker": "^4.7.0", "react-datepicker": "^4.7.0",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-external-link": "^1.2.2", "react-external-link": "^2.0.0",
"react-leaflet": "^4.0.0", "react-leaflet": "^4.0.0",
"react-redux": "^8.0.0", "react-redux": "^8.0.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",

25
src/utils/TooltipToggleSwitch.tsx
View file

@ -1,25 +0,0 @@
import { FC, PropsWithChildren, useRef } from 'react';
import { UncontrolledTooltip, UncontrolledTooltipProps } from 'reactstrap';
import { BooleanControlProps } from './BooleanControl';
import ToggleSwitch from './ToggleSwitch';
export type TooltipToggleSwitchProps = BooleanControlProps & PropsWithChildren<{
tooltip?: Omit<UncontrolledTooltipProps, 'target'>;
}>;
export const TooltipToggleSwitch: FC<TooltipToggleSwitchProps> = ({ children, tooltip = {}, ...rest }) => {
const ref = useRef<HTMLSpanElement>();
return (
<>
<span
ref={(el) => {
ref.current = el ?? undefined;
}}
>
<ToggleSwitch {...rest} />
</span>
<UncontrolledTooltip target={(() => ref.current) as any} {...tooltip}>{children}</UncontrolledTooltip>
</>
);
};

38
test/utils/TooltipToggleSwitch.test.tsx
View file

@ -1,38 +0,0 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { PropsWithChildren } from 'react';
import { UncontrolledTooltip } from 'reactstrap';
import { TooltipToggleSwitch, TooltipToggleSwitchProps } from '../../src/utils/TooltipToggleSwitch';
import ToggleSwitch from '../../src/utils/ToggleSwitch';
describe('<TooltipToggleSwitch />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props: PropsWithChildren<TooltipToggleSwitchProps> = {}) => {
wrapper = shallow(<TooltipToggleSwitch {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([
['foo'],
['bar'],
['baz'],
])('shows children inside tooltip', (children) => {
const wrapper = createWrapper({ children });
const tooltip = wrapper.find(UncontrolledTooltip);
expect(tooltip.prop('children')).toEqual(children);
});
it('properly propagates corresponding props to every component', () => {
const expectedTooltipProps = { placement: 'left', delay: 30 };
const expectedToggleProps = { checked: true, className: 'foo' };
const wrapper = createWrapper({ tooltip: expectedTooltipProps, ...expectedToggleProps });
const tooltip = wrapper.find(UncontrolledTooltip);
const toggle = wrapper.find(ToggleSwitch);
expect(tooltip.props()).toEqual(expect.objectContaining(expectedTooltipProps));
expect(toggle.props()).toEqual(expect.objectContaining(expectedToggleProps));
});
});