Deploy #6787
Deploy #6787
Conversation
Bumps [electron](https://github.com/electron/electron) from 1.7.8 to 1.8.8. **This update includes security fixes.** - [Release notes](https://github.com/electron/electron/releases) - [Changelog](https://github.com/electron/electron/blob/master/docs/breaking-changes.md) - [Commits](electron/electron@v1.7.8...v1.8.8) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
Co-authored-by: The-Beez-Kneez <sutherlandanalisa@gmail.com>
…redMiddleware.jest.ts
…pp-2fa-password
Confirm password before changing 2fa settings
|
New dependencies added: numeralAuthor: Adam Draper Description: Format and manipulate numbers. Homepage: http://numeraljs.com
|
| Created | over 6 years ago |
| Last Updated | about 1 year ago |
| License | ISC |
| Maintainers | 1 |
| Releases | 20 |
| Direct Dependencies | loose-envify, prop-types and qr.js |
| Keywords | react, react-component and qrcode |
README
qrcode.react
A React component to generate QR codes.
Installation
npm install qrcode.reactUsage
var React = require('react');
var QRCode = require('qrcode.react');
React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
);Available Props
| prop | type | default value |
|---|---|---|
value |
string |
|
renderAs |
string ('canvas' 'svg') |
'canvas' |
size |
number |
128 |
bgColor |
string (CSS color) |
"#FFFFFF" |
fgColor |
string (CSS color) |
"#000000" |
level |
string ('L' 'M' 'Q' 'H') |
'L' |
includeMargin |
boolean |
false |
imageSettings |
object (see below) |
imageSettings
| field | type | default value |
|---|---|---|
src |
string |
|
x |
number |
none, will center |
y |
number |
none, will center |
height |
number |
10% of size |
width |
number |
10% of size |
excavate |
boolean |
false |
Custom Styles
qrcode.react will pass through any additional props to the underlying DOM node (<svg> or <canvas>). This allows the use of inline style or custom className to customize the rendering. One common use would be to support a responsive layout.
Note: In order to render QR Codes in <canvas> on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom height and width overriding our own values. This allows scaling to percentages but if scaling beyond the size, you will encounter blurry images. I recommend detecting resizes with something like react-measure to detect and pass the appropriate size when rendering to <canvas>.
LICENSE ISC
react-css-transition-replace
Author: Marnus Weststrate
Description: A React component to animate replacing one element with another.
Homepage: https://github.com/marnusw/react-css-transition-replace
| Created | over 5 years ago |
| Last Updated | about 1 year ago |
| License | MIT |
| Maintainers | 1 |
| Releases | 30 |
| Direct Dependencies | dom-helpers and prop-types |
| Keywords | react, transition and replace |
README
React CSS Transition Replace
A React component to animate replacing one element with another.
While ReactCSSTransitionGroup does a great job
of animating changes to a list of components and can even be used to animate the replacement of one item
with another, proper handling of the container height in the latter case is not built in. This component
is designed to do exactly that with an API closely following that of ReactCSSTransitionGroup.
Using react-css-transition-replace provides two distinct benefits:
- It automatically handles the positioning of the animated components, and
- allows changes in the height of container to be handled and animated with ease when
various content heights differ, even when absolute positioning is used.
Animations are fully configurable with CSS, including having the entering component wait to enter until
the leaving component's animation completes. Following suit with the
React.js API the one caveat is
that the transition duration must be specified in JavaScript as well as CSS.
Live Examples |
Change Log |
Upgrade Guide
Installation
Install via npm:
npm install --save react-css-transition-replace
Usage
A ReactCSSTransitionReplace component can only have a single child. Other than that, the basic usage
follows the exact same API as ReactCSSTransitionGroup, with support for transitionEnter, transitionLeave
and transitionAppear. When the key of the child component changes, the previous component is animated out
and the new component animated in. During this process:
- All leaving components continue to be rendered; if the animation is slow there may be multiple components
in the process of leaving. - The entering component is positioned on top of the leaving component(s) with
absolutepositioning. - The height of the container is set to that of the leaving component, and then immediately to that of the
entering component. If thetransitionNameis aStringthe{animation-name}-heightclass name is applied
to it, and iftransitionNameis anObjectthetransitionName.heightclass will be used if present. - The leaving component will be passed an
isLeavingprop while transitioning out.
This provides many possibilities for animating the replacement as illustrated in the examples below.
Additionally, the boolean property changeWidth can be used to animate changing the width of the component.
This change will happen at the same time as changing the height. Animating this change should be done using
the same class name as is used for animating the change in height.
It is also possible to remove the child component (i.e. leave ReactCSSTransitionReplace with no children)
which will animate the height going to zero along with the leave transition. Similarly, a single child
can be added to an empty ReactCSSTransitionReplace, triggering the inverse animation.
By default a span is rendered as a wrapper of the child components. Each child is also wrapped in a span
used in the positioning of the actual rendered child. These can be overridden with the component and
childComponent props respectively.
Cross-fading two components
The ReactCSSTransitionReplace component is used exactly like its ReactCSSTransitionGroup counterpart:
import ReactCSSTransitionReplace from 'react-css-transition-replace';
render() {
return (
<ReactCSSTransitionReplace transitionName="cross-fade"
transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
<SomeComponent key="uniqueValue"/>
</ReactCSSTransitionReplace>
);
}To realize cross-fading of two components all that remains is to define the enter and leave opacity
transitions in the associated CSS classes:
.cross-fade-leave {
opacity: 1;
}
.cross-fade-leave.cross-fade-leave-active {
opacity: 0;
transition: opacity 1s ease-in;
}
.cross-fade-enter {
opacity: 0;
}
.cross-fade-enter.cross-fade-enter-active {
opacity: 1;
transition: opacity 1s ease-in;
}
.cross-fade-height {
transition: height 0.5s ease-in-out;
}Note the additional .cross-fade-height class. This indicates how the container height is to be
animated if the heights of the entering and leaving components are not the same. You can see this
in action here.
Fade out, then fade in
To fade a component out and wait for its transition to complete before fading in the next, simply
add a delay to the enter transition.
.fade-wait-leave {
opacity: 1;
}
.fade-wait-leave.fade-wait-leave-active {
opacity: 0;
transition: opacity 0.4s ease-in;
}
.fade-wait-enter {
opacity: 0;
}
.fade-wait-enter.fade-wait-enter-active {
opacity: 1;
/* Delay the enter animation until the leave completes */
transition: opacity 0.4s ease-in 0.6s;
}
.fade-wait-height {
transition: height 0.6s ease-in-out;
}Note: The transitionEnterTimeout specified in the JS must be long enough to allow for the delay and
the duration of the transition. In this case:
<ReactCSSTransitionReplace transitionName="fade-wait"
transitionEnterTimeout={1000} transitionLeaveTimeout={400}>See the live example here.
React-Router v4
Animated transitions of react-router v4 routes is supported with two caveats shown in the example below:
- The current
locationmust be applied to theSwitchto force it to maintain the previous matched route on
the leaving component. - If the
Switchmight rendernull, i.e. there is no catch-all"*"route, theSwitchmust be wrapped in a
divor similar for the leave transition to work; if not the previous component will disappear instantaneously
when there is no match.
<Router>
<div className="router-example">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/one">One</Link>
</li>
<li>
<Link to="/two">Two</Link>
</li>
<li>
<Link to="/three">Three (no match)</Link>
</li>
</ul>
<Route
render={({ location }) => (
<ReactCSSTransitionReplace
transitionName="fade"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
<div key={location.pathname}>
<Switch location={location}>
<Route path="/" exact component={Home} />
<Route path="/one" component={One} />
<Route path="/two" component={Two} />
</Switch>
</div>
</ReactCSSTransitionReplace>
)}
/>
</div>
</Router>See the live example here.
Hardware acceleration for smoother transitions
For smoother transitions hardware acceleration, which is achieved by using translate3d instead of the 2D
translations, should be used whenever possible. For example, to realize a mobile app transition between
pages one might use:
.page-enter,
.page-leave {
position: absolute;
-webkit-transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
}
.page-enter {
left: 100vw;
}
.page-enter.page-enter-active {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
}
.page-leave {
left: 0;
}
.page-leave.page-leave-active {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
}<ReactCSSTransitionReplace
transitionName="page"
transitionEnterTimeout={250}
transitionLeaveTimeout={250}
>
<div key="page01">My page 01 content</div>
</ReactCSSTransitionReplace>Tips
- In general animating
blockorinline-blocklevel elements is more stable thatinlineelements. If the
height changes in random ways ensure that there isn't aspanor other inline element used as the outer
element of the components being animated. - The
overflowof the container is set to'hidden'automatically, which changes the behaviour of
collapsing margins from the default
'visible'. This may cause a glitch in the height at the start or end of animations. To avoid this you can:- Keep the overflow hidden permanently with custom styles/classes if that will not cause undesired side-effects.
- Only use
Single-direction margin declarations
to avoid collapsing margins overall. - Turn this feature off by setting the
overflowHidden={false}prop when hidden overflow is not needed,
for example when transitions are in place and content is of the same height.
- If the
.*-heightclass (ortransitionName.height) is not specified the change in container height will not
be animated but instead jump to the height of the entering component instantaneously. It can, therefore, be
omitted if all content is known to be of the same height without any adverse side-effects, and absolute positioning
related height issues will still be avoided.
Contributing
PRs are welcome.
License
This software is free to use under the MIT license.
See the LICENSE file for license text and copyright information.
This deploy contains the following PRs:
- chore(deps): [security] bump electron from 1.7.8 to 1.8.8 (chore(deps): [security] bump electron from 1.7.8 to 1.8.8 #6736)
- Redirect users to login on purchase routes (Redirect users to login on purchase routes #6759)
- Confirm password before changing 2fa settings (Confirm password before changing 2fa settings #6774)
- Instrument analytics for novo routes (Instrument analytics for novo routes #6788)
- Use direct dependencies and not reaction's (Use direct dependencies and not reaction's #6789)
- Update dep @artsy/fresnel from 1.3.0 to v1.3.1 (Update dep @artsy/fresnel from 1.3.0 to v1.3.1 #6790)
- Update metaphysics schema (Update metaphysics schema #6792)
Instrument analytics for novo routes
…urchase Redirect users to login on purchase routes
Use direct dependencies and not reaction's
…1.8.8 chore(deps): [security] bump electron from 1.7.8 to 1.8.8
Enhance `pull-lock.sh` to support system configuration and add the execute bit to the script.
Update metaphysics schema
… and display realizedToEstimate value in rail
feature: System Pull Lock
…istory, literature, and provenance (#6794)
This change adds the remaining routes to Novo and in doing so adds their contents to novo assets. This is needed so that we can begin to analyze what the contents and potentially reduce its size before swapping over a live page.
Refactor consign pages to use artworksConnection and add realized / estimate price multiplier to /consign recently sold artworks
feature: Enabled Remaining Routes in Novo
Update metaphysics schema
chore: Update palette
This is an automatically generated release PR!