Skip to content
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.

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

feat: implement ZoomableImage component #2237

Merged
merged 15 commits into from
May 22, 2021
Merged

Conversation

HellWolf93
Copy link
Collaborator

fix: #2235

Changes proposed in this PR:

@commit-lint
Copy link

commit-lint bot commented May 18, 2021

Features

  • implement ZoomableImage component (096ea92)

Bug Fixes

  • add padding to zoomed image (66fd48f)
  • use theme background on backdrop (332822c)
  • add ZoomableImage assets (452474c)
  • add RainbowThemeContainer thumb (2a206c9)
  • add description to props (d1530eb)
  • declare props on index.d.ts (15b98f5)
  • add className and style props (94fdc80)
  • fix stylelint errors (e17583c)
  • eslint error (c58deb9)
  • update test to include image padding (47b5494)

Contributors

HellWolf93, TahimiLeonBravo, LeandroTorresSicilia

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

  • @Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
  • @Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
  • @Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
  • @Commit-Lint merge disable will desactivate merge dependabot PR
  • @Commit-Lint review will approve dependabot PR
  • @Commit-Lint stop review will stop approve dependabot PR

);
};

ZoomedImage.propTypes = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 6 locations. Consider refactoring.

);
};

ZoomableImage.propTypes = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 6 locations. Consider refactoring.

@github-actions
Copy link

github-actions bot commented May 18, 2021

Visit the preview URL for this PR (updated for commit 4759903):

https://react-rainbow--pr2237-implement-zoomableim-xno7khcn.web.app

(expires Sat, 29 May 2021 15:47:10 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@LeandroTorresSicilia
Copy link
Member

@HellWolf93 theme should work here, for example the background should change when change the theme

z-index: ${ZINDEX_OVERLAY};
`;

export const StyledBackdrop = attachThemeAttrs(styled.div)`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

);
};

ZoomableImage.propTypes = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.


return (
<>
<StyledImage
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

/** The intrinsic width of the image in pixels. Must be an integer without a unit. */
width: number;
/** The intrinsic height of the image, in pixels. Must be an integer without a unit. */
height: number;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's put optional all props

@codeclimate
Copy link

codeclimate bot commented May 22, 2021

Code Climate has analyzed commit 4759903 and detected 7 issues on this pull request.

Here's the issue category breakdown:

Category Count
Duplication 7

View more on Code Climate.

@TahimiLeonBravo TahimiLeonBravo merged commit ac94b0f into master May 22, 2021
@TahimiLeonBravo TahimiLeonBravo deleted the implement-zoomableimage branch May 22, 2021 16:49
jpetaux pushed a commit to jpetaux/react-rainbow that referenced this pull request Jun 27, 2021
* feat: implement ZoomableImage component

fix: nexxtway#2235

* fix: add padding to zoomed image

* fix: use theme background on backdrop

* fix: add ZoomableImage assets

* fix: add RainbowThemeContainer thumb

* fix: add description to props

* fix: declare props on index.d.ts

* fix: add className and style props

* fix: fix stylelint errors

* Update RainbowThemeContainer.svg

* fix: eslint error

* fix: update test to include image padding

* Update RainbowThemeContainer.svg

Co-authored-by: Tahimi <tahimileon@gmail.com>
Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
Co-authored-by: TahimiLeonBravo <tahimi@nexxtway.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: implement 'ZoomableImage` component
3 participants