Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/animate/animate.scss

@@ -0,0 +1,68 @@
+// Animations
+
+@mixin animate-opacity($enterDuration: 100ms, $leaveDuration: 150ms) {
+  opacity: 0;
+
+  &.enter {
+    transition-property: opacity;
+    transition-duration: $enterDuration;
+    opacity: 1;
+  }
+
+  &.leave {
+    transition-duration: $leaveDuration;
+    transition-timing-function: ease-out;
+    opacity: 0;
+  }
+}
+
+@mixin animate-slide-right($enterDuration: 100ms, $leaveDuration: 150ms) {
+  transform: translateX(100%);
+  will-change: transform;
+
+  &.enter {
+    transform: translateX(0);
+    transition: transform $enterDuration;
+    transition-timing-function: ease-in-out;
+  }
+
+  &.leave {
+    transform: translateX(100%);
+    transition: transform $leaveDuration;
+  }
+}
+
+@mixin animate-opacity-scale($enterDuration: 250ms, $leaveDuration: 150ms) {
+  opacity: 0;
+
+  &.enter {
+    transition: opacity $enterDuration;
+    opacity: 1;
+  }
+
+  &.leave {
+    will-change: opacity, transform;
+    opacity: 0;
+    transform: scale(1.25);
+    transition: transform $leaveDuration ease-in, opacity $leaveDuration ease-out;
+  }
+}
+
+.Animate {
+  &:empty {
+    display: none;
+  }
+
+  // Animation name
+  &.opacity {
+    @include animate-opacity;
+  }
+
+  &.slide-right {
+    @include animate-slide-right;
+  }
+
+  &.opacity-scale {
+    @include animate-opacity-scale;
+  }
+}

src/renderer/components/animate/animate.tsx

@@ -0,0 +1,94 @@
+import "./animate.scss";
+import React from "react";
+import { observable, reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { autobind, cssNames, noop } from "../../utils";
+
+export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
+
+export interface AnimateProps {
+  name?: AnimateName; // predefined names in css
+  enter?: boolean;
+  enabled?: boolean;
+  onEnter?: () => void;
+  onLeave?: () => void;
+}
+
+@observer
+export class Animate extends React.Component<AnimateProps> {
+  static VISIBILITY_DELAY_MS = 100;
+
+  static defaultProps: AnimateProps = {
+    name: "opacity",
+    enter: true,
+    enabled: true,
+    onEnter: noop,
+    onLeave: noop,
+  };
+
+  @observable isVisible = !!this.props.enter;
+  @observable statusClassName = {
+    enter: false,
+    leave: false
+  };
+
+  get contentElem() {
+    return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
+  }
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.props.enter, enter => {
+        if (enter) this.enter();
+        else this.leave();
+      }, {
+        delay: Animate.VISIBILITY_DELAY_MS,
+        fireImmediately: true,
+      })
+    ])
+  }
+
+  enter() {
+    this.isVisible = true; // triggers render() to apply css-animation in existing dom
+    requestAnimationFrame(() => {
+      this.statusClassName.enter = true;
+      this.props.onEnter();
+    });
+  }
+
+  leave() {
+    if (!this.isVisible) return;
+    this.statusClassName.leave = true;
+    this.props.onLeave();
+  }
+
+  reset() {
+    this.isVisible = false;
+    this.statusClassName.enter = false;
+    this.statusClassName.leave = false;
+  }
+
+  @autobind()
+  onTransitionEnd(evt: React.TransitionEvent) {
+    const { enter, leave } = this.statusClassName;
+    const { onTransitionEnd } = this.contentElem.props;
+    if (onTransitionEnd) onTransitionEnd(evt);
+    // todo: check evt.propertyName and make sure all animating props has finished their transition
+    if (enter && leave) {
+      this.reset();
+    }
+  }
+
+  render() {
+    const { name, enabled, children } = this.props;
+    if (!enabled) {
+      return children;
+    }
+    const contentElem = this.contentElem;
+    return React.cloneElement(contentElem, {
+      className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
+      children: this.isVisible ? contentElem.props.children : null,
+      onTransitionEnd: this.onTransitionEnd,
+    });
+  }
+}

src/renderer/components/animate/index.ts

@@ -0,0 +1 @@
+export * from './animate'