Skip to content

Feature/logo size #85

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.

Sign up for GitHub

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

Open
awesomejerry wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/logo size #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09ad060
Merge tag '6.0.1' into develop
awesomejerry Nov 30, 2019
1742f5b
Add support for logoSize width and height
awesomejerry Nov 30, 2019
4b086b4
Add test
awesomejerry Nov 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions src/__tests__/QRCode-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,31 @@ import renderer from 'react-test-renderer'

describe('QRCode', () => {
it('renders correctly', () => {
const tree = renderer.create(
<QRCode />
).toJSON()
const tree = renderer.create(<QRCode />).toJSON()
expect(tree).toMatchSnapshot()
})

it('renders with logo correctly', () => {
const tree = renderer.create(
<QRCode
logo={{ uri: 'fakeUri' }}
/>
).toJSON()
const tree = renderer.create(<QRCode logo={{ uri: 'fakeUri' }} />).toJSON()
expect(tree).toMatchSnapshot()
})

it('renders with logoSize correctly', () => {
const tree = renderer
.create(<QRCode logo={{ uri: 'fakeUri' }} logoSize={100} />)
.toJSON()
expect(tree).toMatchSnapshot()
})

it('renders with custom logoSize correctly', () => {
const tree = renderer
.create(
<QRCode
logo={{ uri: 'fakeUri' }}
logoSize={{ width: 50, height: 80 }}
/>
)
.toJSON()
expect(tree).toMatchSnapshot()
})

Expand All @@ -26,22 +39,14 @@ describe('QRCode', () => {
// Let's try to render with too big amount of data that should
// throw an exception
renderer.create(
<QRCode
value={(new Array(1000000)).join('123')}
onError={onErrorMock}
/>
<QRCode value={new Array(1000000).join('123')} onError={onErrorMock} />
)
expect(onErrorMock.mock.calls.length).toBe(1)
})

it('does not call onError in case if value is fine', () => {
const onErrorMock = jest.fn()
renderer.create(
<QRCode
value='123'
onError={onErrorMock}
/>
)
renderer.create(<QRCode value='123' onError={onErrorMock} />)
expect(onErrorMock.mock.calls.length).toBe(0)
})
})
174 changes: 174 additions & 0 deletions src/__tests__/__snapshots__/QRCode-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,93 @@ exports[`QRCode renders correctly 1`] = `
</div>
`;

exports[`QRCode renders with custom logoSize correctly 1`] = `
<div>
<span>
Defs:
{}
children:
<span>
LinearGradient:
{"id":"grad","x1":"0%","y1":"0%","x2":"100%","y2":"100%"}
children:
<span>
Stop:
{"offset":"0","stopColor":"rgb(255,0,0)","stopOpacity":"1"}
</span>
<span>
Stop:
{"offset":"1","stopColor":"rgb(0,255,255)","stopOpacity":"1"}
</span>
</span>
</span>
<span>
G:
{}
children:
<span>
Rect:
{"width":100,"height":100,"fill":"white"}
</span>
</span>
<span>
G:
{}
children:
<span>
Path:
{"d":"M0 2 L28 2 M48 2 L60 2 M64 2 L68 2 M72 2 L100 2 M0 6 L4 6 M24 6 L28 6 M32 6 L52 6 M56 6 L68 6 M72 6 L76 6 M96 6 L100 6 M0 10 L4 10 M8 10 L20 10 M24 10 L28 10 M36 10 L40 10 M48 10 L60 10 M72 10 L76 10 M80 10 L92 10 M96 10 L100 10 M0 14 L4 14 M8 14 L20 14 M24 14 L28 14 M36 14 L40 14 M52 14 L64 14 M72 14 L76 14 M80 14 L92 14 M96 14 L100 14 M0 18 L4 18 M8 18 L20 18 M24 18 L28 18 M32 18 L36 18 M48 18 L52 18 M56 18 L64 18 M72 18 L76 18 M80 18 L92 18 M96 18 L100 18 M0 22 L4 22 M24 22 L28 22 M36 22 L40 22 M44 22 L48 22 M52 22 L56 22 M60 22 L64 22 M72 22 L76 22 M96 22 L100 22 M0 26 L28 26 M32 26 L36 26 M40 26 L44 26 M48 26 L52 26 M56 26 L60 26 M64 26 L68 26 M72 26 L100 26 M40 30 L44 30 M48 30 L68 30 M0 34 L4 34 M8 34 L12 34 M16 34 L20 34 M24 34 L28 34 M36 34 L40 34 M44 34 L48 34 M56 34 L60 34 M64 34 L68 34 M80 34 L84 34 M92 34 L96 34 M4 38 L8 38 M20 38 L24 38 M36 38 L44 38 M48 38 L52 38 M56 38 L60 38 M64 38 L80 38 M84 38 L100 38 M4 42 L8 42 M12 42 L20 42 M24 42 L28 42 M32 42 L36 42 M48 42 L56 42 M72 42 L100 42 M0 46 L24 46 M28 46 L32 46 M36 46 L44 46 M48 46 L52 46 M64 46 L72 46 M76 46 L80 46 M92 46 L96 46 M20 50 L40 50 M48 50 L52 50 M60 50 L76 50 M84 50 L88 50 M4 54 L24 54 M28 54 L32 54 M36 54 L40 54 M44 54 L56 54 M64 54 L68 54 M84 54 L88 54 M92 54 L100 54 M0 58 L4 58 M12 58 L32 58 M36 58 L40 58 M44 58 L52 58 M56 58 L60 58 M72 58 L76 58 M80 58 L88 58 M92 58 L100 58 M4 62 L24 62 M32 62 L44 62 M48 62 L60 62 M76 62 L80 62 M84 62 L88 62 M92 62 L96 62 M0 66 L4 66 M12 66 L16 66 M24 66 L32 66 M36 66 L40 66 M44 66 L48 66 M56 66 L60 66 M64 66 L84 66 M92 66 L100 66 M32 70 L40 70 M44 70 L48 70 M56 70 L68 70 M80 70 L88 70 M96 70 L100 70 M0 74 L28 74 M36 74 L44 74 M52 74 L56 74 M60 74 L68 74 M72 74 L76 74 M80 74 L84 74 M88 74 L100 74 M0 78 L4 78 M24 78 L28 78 M36 78 L40 78 M44 78 L48 78 M64 78 L68 78 M80 78 L84 78 M0 82 L4 82 M8 82 L20 82 M24 82 L28 82 M32 82 L44 82 M48 82 L52 82 M64 82 L84 82 M96 82 L100 82 M0 86 L4 86 M8 86 L20 86 M24 86 L28 86 M36 86 L40 86 M44 86 L56 86 M60 86 L64 86 M76 86 L92 86 M0 90 L4 90 M8 90 L20 90 M24 90 L28 90 M32 90 L36 90 M40 90 L52 90 M56 90 L60 90 M64 90 L76 90 M80 90 L92 90 M96 90 L100 90 M0 94 L4 94 M24 94 L28 94 M48 94 L72 94 M80 94 L84 94 M92 94 L96 94 M0 98 L28 98 M32 98 L48 98 M56 98 L60 98 M64 98 L68 98 M80 98 L88 98 M92 98 L100 98 ","stroke":"black","strokeWidth":4}
</span>
</span>
<span>
G:
{"x":23,"y":8}
children:
<span>
Defs:
{}
children:
<span>
ClipPath:
{"id":"clip-logo-background"}
children:
<span>
Rect:
{"width":54,"height":84,"rx":0,"ry":0}
</span>
</span>
<span>
ClipPath:
{"id":"clip-logo"}
children:
<span>
Rect:
{"width":50,"height":80,"rx":0,"ry":0}
</span>
</span>
</span>
<span>
G:
{}
children:
<span>
Rect:
{"width":54,"height":84,"fill":"transparent","clipPath":"url(#clip-logo-background)"}
</span>
</span>
<span>
G:
{"x":2,"y":2}
children:
<span>
Image:
{"width":50,"height":80,"preserveAspectRatio":"xMidYMid slice","href":{"uri":"fakeUri"},"clipPath":"url(#clip-logo)"}
</span>
</span>
</span>
</div>
`;

exports[`QRCode renders with logo correctly 1`] = `
<div>
<span>
Expand Down Expand Up @@ -127,3 +214,90 @@ exports[`QRCode renders with logo correctly 1`] = `
</span>
</div>
`;

exports[`QRCode renders with logoSize correctly 1`] = `
<div>
<span>
Defs:
{}
children:
<span>
LinearGradient:
{"id":"grad","x1":"0%","y1":"0%","x2":"100%","y2":"100%"}
children:
<span>
Stop:
{"offset":"0","stopColor":"rgb(255,0,0)","stopOpacity":"1"}
</span>
<span>
Stop:
{"offset":"1","stopColor":"rgb(0,255,255)","stopOpacity":"1"}
</span>
</span>
</span>
<span>
G:
{}
children:
<span>
Rect:
{"width":100,"height":100,"fill":"white"}
</span>
</span>
<span>
G:
{}
children:
<span>
Path:
{"d":"M0 2 L28 2 M48 2 L60 2 M64 2 L68 2 M72 2 L100 2 M0 6 L4 6 M24 6 L28 6 M32 6 L52 6 M56 6 L68 6 M72 6 L76 6 M96 6 L100 6 M0 10 L4 10 M8 10 L20 10 M24 10 L28 10 M36 10 L40 10 M48 10 L60 10 M72 10 L76 10 M80 10 L92 10 M96 10 L100 10 M0 14 L4 14 M8 14 L20 14 M24 14 L28 14 M36 14 L40 14 M52 14 L64 14 M72 14 L76 14 M80 14 L92 14 M96 14 L100 14 M0 18 L4 18 M8 18 L20 18 M24 18 L28 18 M32 18 L36 18 M48 18 L52 18 M56 18 L64 18 M72 18 L76 18 M80 18 L92 18 M96 18 L100 18 M0 22 L4 22 M24 22 L28 22 M36 22 L40 22 M44 22 L48 22 M52 22 L56 22 M60 22 L64 22 M72 22 L76 22 M96 22 L100 22 M0 26 L28 26 M32 26 L36 26 M40 26 L44 26 M48 26 L52 26 M56 26 L60 26 M64 26 L68 26 M72 26 L100 26 M40 30 L44 30 M48 30 L68 30 M0 34 L4 34 M8 34 L12 34 M16 34 L20 34 M24 34 L28 34 M36 34 L40 34 M44 34 L48 34 M56 34 L60 34 M64 34 L68 34 M80 34 L84 34 M92 34 L96 34 M4 38 L8 38 M20 38 L24 38 M36 38 L44 38 M48 38 L52 38 M56 38 L60 38 M64 38 L80 38 M84 38 L100 38 M4 42 L8 42 M12 42 L20 42 M24 42 L28 42 M32 42 L36 42 M48 42 L56 42 M72 42 L100 42 M0 46 L24 46 M28 46 L32 46 M36 46 L44 46 M48 46 L52 46 M64 46 L72 46 M76 46 L80 46 M92 46 L96 46 M20 50 L40 50 M48 50 L52 50 M60 50 L76 50 M84 50 L88 50 M4 54 L24 54 M28 54 L32 54 M36 54 L40 54 M44 54 L56 54 M64 54 L68 54 M84 54 L88 54 M92 54 L100 54 M0 58 L4 58 M12 58 L32 58 M36 58 L40 58 M44 58 L52 58 M56 58 L60 58 M72 58 L76 58 M80 58 L88 58 M92 58 L100 58 M4 62 L24 62 M32 62 L44 62 M48 62 L60 62 M76 62 L80 62 M84 62 L88 62 M92 62 L96 62 M0 66 L4 66 M12 66 L16 66 M24 66 L32 66 M36 66 L40 66 M44 66 L48 66 M56 66 L60 66 M64 66 L84 66 M92 66 L100 66 M32 70 L40 70 M44 70 L48 70 M56 70 L68 70 M80 70 L88 70 M96 70 L100 70 M0 74 L28 74 M36 74 L44 74 M52 74 L56 74 M60 74 L68 74 M72 74 L76 74 M80 74 L84 74 M88 74 L100 74 M0 78 L4 78 M24 78 L28 78 M36 78 L40 78 M44 78 L48 78 M64 78 L68 78 M80 78 L84 78 M0 82 L4 82 M8 82 L20 82 M24 82 L28 82 M32 82 L44 82 M48 82 L52 82 M64 82 L84 82 M96 82 L100 82 M0 86 L4 86 M8 86 L20 86 M24 86 L28 86 M36 86 L40 86 M44 86 L56 86 M60 86 L64 86 M76 86 L92 86 M0 90 L4 90 M8 90 L20 90 M24 90 L28 90 M32 90 L36 90 M40 90 L52 90 M56 90 L60 90 M64 90 L76 90 M80 90 L92 90 M96 90 L100 90 M0 94 L4 94 M24 94 L28 94 M48 94 L72 94 M80 94 L84 94 M92 94 L96 94 M0 98 L28 98 M32 98 L48 98 M56 98 L60 98 M64 98 L68 98 M80 98 L88 98 M92 98 L100 98 ","stroke":"black","strokeWidth":4}
</span>
</span>
<span>
G:
{"x":-2,"y":-2}
children:
<span>
Defs:
{}
children:
<span>
ClipPath:
{"id":"clip-logo-background"}
children:
<span>
Rect:
{"width":104,"height":104,"rx":0,"ry":0}
</span>
</span>
<span>
ClipPath:
{"id":"clip-logo"}
children:
<span>
Rect:
{"width":100,"height":100,"rx":0,"ry":0}
</span>
</span>
</span>
<span>
G:
{}
children:
<span>
Rect:
{"width":104,"height":104,"fill":"transparent","clipPath":"url(#clip-logo-background)"}
</span>
</span>
<span>
G:
{"x":2,"y":2}
children:
<span>
Image:
{"width":100,"height":100,"preserveAspectRatio":"xMidYMid slice","href":{"uri":"fakeUri"},"clipPath":"url(#clip-logo)"}
</span>
</span>
</span>
</div>
`;
37 changes: 21 additions & 16 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,43 +20,49 @@ const renderLogo = ({
logoMargin,
logoBorderRadius
}) => {
const logoPosition = (size - logoSize - logoMargin * 2) / 2
const logoBackgroundSize = logoSize + logoMargin * 2
const logoBackgroundBorderRadius =
logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
const width = typeof logoSize === 'number' ? logoSize : logoSize.width
const height = typeof logoSize === 'number' ? logoSize : logoSize.height
const logoPositionX = (size - width - logoMargin * 2) / 2
const logoPositionY = (size - height - logoMargin * 2) / 2
const logoBackgroundSizeX = width + logoMargin * 2
const logoBackgroundSizeY = height + logoMargin * 2
const logoBackgroundBorderRadiusX =
logoBorderRadius + (logoMargin / width) * logoBorderRadius
const logoBackgroundBorderRadiusY =
logoBorderRadius + (logoMargin / height) * logoBorderRadius

return (
<G x={logoPosition} y={logoPosition}>
<G x={logoPositionX} y={logoPositionY}>
<Defs>
<ClipPath id='clip-logo-background'>
<Rect
width={logoBackgroundSize}
height={logoBackgroundSize}
rx={logoBackgroundBorderRadius}
ry={logoBackgroundBorderRadius}
width={logoBackgroundSizeX}
height={logoBackgroundSizeY}
rx={logoBackgroundBorderRadiusX}
ry={logoBackgroundBorderRadiusY}
/>
</ClipPath>
<ClipPath id='clip-logo'>
<Rect
width={logoSize}
height={logoSize}
width={width}
height={height}
rx={logoBorderRadius}
ry={logoBorderRadius}
/>
</ClipPath>
</Defs>
<G>
<Rect
width={logoBackgroundSize}
height={logoBackgroundSize}
width={logoBackgroundSizeX}
height={logoBackgroundSizeY}
fill={logoBackgroundColor}
clipPath='url(#clip-logo-background)'
/>
</G>
<G x={logoMargin} y={logoMargin}>
<Image
width={logoSize}
height={logoSize}
width={width}
height={height}
preserveAspectRatio='xMidYMid slice'
href={logo}
clipPath='url(#clip-logo)'
Expand Down Expand Up @@ -96,7 +102,6 @@ const QRCode = ({
}
}
}, [value, size, ecl])

if (!result) {
return null
}
Expand Down