Chore/kill yalc with fire (#629)

* init * more shifting * Move @babel dependencies up to workspace root * Begin updating dependent libraries to use sync'd webpack builds w/ watches * Commit changes before a long weekend * Split packages into platform and extensions * Consolidate how/where we specify file/module type entrypoints * Make it possible to pass in extensions as App props * Resolve viewer's modules * Target for UMD bundle * Add Webpack Stylus loader * Provide WebPack build options for microscopy, vtk, and ui * Better entrypoint for extensions * Push changes up to switch PCs * Fix ESM symlink build for Viewers * Shift docs to root * Specify additional lerna config props * Begin providing basic readme info * Rename example extension folder * Shift links to bottom of doc * First attempt at a netlify deploy preview * Attempt to fix deploy preview build * push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands * Try to use global gitbook-cli * Export node_modules path * More agressive with modifying PATH * Follow deploy log output advice * try again to set bin path * Try swapping bash with a new shell * Try bash -l instead of exec bash * Annd let's try again * and again * We may have figured it out johnny, boy * We need to pull cornerstone-wado-image-loader files from hoisted node_modules * Attempt to fix ticks/escapes * Change copy syntax; try running tests on viewers from root for circleci * Lower version to match circleci image * Try alternative jest-canvas-mock location and version file syntax * Run version command instead of calling node directly * Try alternative jest transform * Set path and enable workspaces * Add codecov flags * Use cpx so our copying finishes? * Get all platform unit tests to run * Run and report individually and in parallel * Try once relying on codecov yaml to split w/ flags * Add projects to split by flags * Generate separate reports * Trigger codecov after everything has finished running; these may not support flags * Use recommended flags from issue comments for codecov * Fix typo * Remove clear flag * Shift back to calling codecov from root * Generate example for codecov issue * Try fixing paths * Simplify * Try using codecov orb * Bump circleci version * Upload core and viewer * Use full string paths * Remove individual codecov calls * Fix dir * Combine files before upload * Escape anchors * tryfix syntax * Escape string literal * Combine lines to reduce path * long paths * Use home alias * Fix filename * Try to see the contents of our cat'd file * Also upload `core` * Try running with aliased folder * Fix path; split PR and Merge unit tests into separate jobs * Set default threshold * Fix typo * Changing to scoped package names * Adding note * Catch more updates * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.0 - @ohif/extension-dicom-html@0.0.4-alpha.0 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0 - @ohif/extension-dicom-pdf@0.0.8-alpha.0 - @ohif/extension-vtk@0.1.4-alpha.0 - @ohif/core@0.11.1-alpha.0 - @ohif/i18n@0.2.3-alpha.0 - @ohif/ui@0.2.18-alpha.0 - @ohif/viewer@0.0.22-alpha.0 * Clean up primary readme * Support for dev and dev:* commands * Shift build command; satisfy default PWA build * Remove old scripts * Clean up UI to set webpack scripts * Tidy up project links * Clean duplicate code in UI project * Update UI project's docs * Clean up ui and i18n config * Reduce duplicate code in `@ohif/core` * Fix @ohif/ui versions * bump @ohif/core versions * Redux testkit dep * Remove unused/duplicate config files for projects/packages * ohif-core --> @ohif/core * Safer publish command * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.1 - @ohif/extension-dicom-html@0.0.4-alpha.1 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1 - @ohif/extension-dicom-pdf@0.0.8-alpha.1 - @ohif/extension-vtk@0.1.4-alpha.1 - @ohif/core@0.11.1-alpha.1 - @ohif/i18n@0.2.3-alpha.1 - @ohif/ui@0.2.18-alpha.1 - @ohif/viewer@0.0.22-alpha.1 * test version bump * Add global prettier config * chore(release): publish %s [skip ci] - @ohif/viewer@0.0.22-alpha.2 * test lerna publish * Update package.jsons * Fix build scripts * catch changes * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.2 - @ohif/extension-dicom-html@0.0.4-alpha.2 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2 - @ohif/extension-dicom-pdf@0.0.8-alpha.2 - @ohif/extension-vtk@0.1.4-alpha.2 - @ohif/core@0.11.1-alpha.2 - @ohif/i18n@0.2.3-alpha.2 - @ohif/ui@0.2.18-alpha.2 - @ohif/viewer@0.0.22-alpha.3 * fix eslint issues caused by eslint 6 and our react-app config * Publish with canary tag * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.3 - @ohif/extension-dicom-html@0.0.4-alpha.3 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3 - @ohif/extension-dicom-pdf@0.0.8-alpha.3 - @ohif/extension-vtk@0.1.4-alpha.3 - @ohif/core@0.11.1-alpha.3 - @ohif/i18n@0.2.3-alpha.3 - @ohif/ui@0.2.18-alpha.3 - @ohif/viewer@0.0.22-alpha.4 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.4 - @ohif/extension-dicom-html@0.0.4-alpha.4 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4 - @ohif/extension-dicom-pdf@0.0.8-alpha.4 - @ohif/extension-vtk@0.1.4-alpha.4 - @ohif/core@0.11.1-alpha.4 - @ohif/i18n@0.2.3-alpha.4 - @ohif/ui@0.2.18-alpha.4 - @ohif/viewer@0.0.22-alpha.5 * Simplify build * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.5 - @ohif/extension-dicom-html@0.0.4-alpha.5 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5 - @ohif/extension-dicom-pdf@0.0.8-alpha.5 - @ohif/extension-vtk@0.1.4-alpha.5 - @ohif/core@0.11.1-alpha.5 - @ohif/i18n@0.2.3-alpha.5 - @ohif/ui@0.2.18-alpha.5 - @ohif/viewer@0.0.22-alpha.6 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.6 - @ohif/extension-dicom-html@0.0.4-alpha.6 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6 - @ohif/extension-dicom-pdf@0.0.8-alpha.6 - @ohif/extension-vtk@0.1.4-alpha.6 - @ohif/core@0.11.1-alpha.6 - @ohif/i18n@0.2.3-alpha.6 - @ohif/ui@0.2.18-alpha.6 - @ohif/viewer@0.0.22-alpha.7 * Split version and publish * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.7 - @ohif/extension-dicom-html@0.0.4-alpha.7 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7 - @ohif/extension-dicom-pdf@0.0.8-alpha.7 - @ohif/extension-vtk@0.1.4-alpha.7 - @ohif/core@0.11.1-alpha.7 - @ohif/i18n@0.2.3-alpha.7 - @ohif/ui@0.2.18-alpha.7 - @ohif/viewer@0.0.22-alpha.8 * Try simplify netlify build * react-viewerbase --> @ohif/ui * add test for stylus loader * Try new way to specify publish path * Use an output folder that won't be ignored * Try move command * fiddle with paths * Dig for some information * Make sure we're in root for our commands * Remove discovery * Setup script-tag example * Fix typo * Move config folder * Update cornerstone extension to use shared/root webpack configs * capture changes * Update extension webpack configs * Don't check in docz output * Fix babel runtime resolution issue * Simplify ui build steps * Push in progress * Shift directories * Get viewer dev path to work * Fix viewer commonjs build * Fix build pwa config for viewers * Make sure our package specific command can be called from root * Update notes * Fix imports and misc. merge notes * Bump wado-image-loader version * Switch up commands to remove webworkers copy * Fix CI config * Fix more broken package references * Add react-dropzone * Persist so e2e test can use * Fix lockfile * Use cypress orb to simplify CI * Fix config * Try again * Install yarn latest for orb * Install yarn a different way * Wait on correct port * Run tests in viewer project * Fix cypress config * Make Cypress happier - use default location * Simplify e2e testing * Capture UI changes since fork * Catch core up * Grab latest deps after merge * Fix broken import * Make sure cornerstone-wado-image-loader resolves to 3+ * Note regarding orbs * Fix refresh on 404 routes * Fix odd error for cornerstone-wado-image-loader * Different target for UMD * Simplify dev script * Try to get fancy with netlify output * Let's do it again * Try to fix measurementTools issue * See if we can get our lerna magic to work on merge to monorepo branch
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,152 @@
+import './ScrollableArea.styl';
+
+import React, { Component } from 'react';
+
+import { Icon } from './../elements/Icon';
+import PropTypes from 'prop-types';
+import getScrollbarSize from '../utils/getScrollbarSize.js';
+import throttled from '../utils/throttled.js';
+
+export class ScrollableArea extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    class: PropTypes.string,
+    scrollableClass: PropTypes.string,
+    scrollX: PropTypes.bool,
+    scrollY: PropTypes.bool,
+    hideScrollbar: PropTypes.bool,
+    scrollStep: PropTypes.number,
+  };
+
+  static defaultProps = {
+    hideScrollbar: true,
+    class: 'flex-grow fit',
+    scrollY: true,
+    scrollX: false,
+    scrollStep: 100,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      scrollAreaClasses: '',
+    };
+
+    this.scrollHandlerThrottled = throttled(150, this.scrollHandler);
+  }
+
+  render() {
+    let scrollableClass = 'scrollable';
+    if (this.props.scrollableClass) {
+      scrollableClass += ` ${this.props.scrollableClass}`;
+    }
+    if (this.props.scrollX) {
+      scrollableClass += ` scrollX`;
+    }
+    if (this.props.scrollY) {
+      scrollableClass += ` scrollY`;
+    }
+
+    return (
+      <div
+        className={`scrollArea ${this.props.class} ${
+          this.state.scrollAreaClasses
+        }`}
+      >
+        <div
+          className={scrollableClass}
+          ref={element => {
+            this.scrollableElement = element;
+          }}
+          onScroll={this.scrollHandlerThrottled}
+          onMouseEnter={this.scrollHandlerThrottled}
+          onTransitionEnd={this.scrollHandlerThrottled}
+        >
+          {this.props.children}
+        </div>
+        <div className="scrollNav scrollNavUp" onClick={this.scrollNavUp}>
+          {/* <svg className="scrollNavIcon"> */}
+          <Icon name="angle-double-up" />
+        </div>
+        <div className="scrollNav scrollNavDown" onClick={this.scrollNavDown}>
+          <Icon name="angle-double-down" />
+        </div>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    this.adjustMargins();
+    this.scrollHandler();
+    window.addEventListener('resize', this.adjustMargins);
+  }
+
+  componentDidUpdate() {
+    this.adjustMargins();
+    this.scrollHandler();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.adjustMargins);
+  }
+
+  scrollNavDown = event => {
+    const {
+      scrollTop: currentTop,
+      offsetHeight: height,
+      scrollHeight,
+    } = this.scrollableElement;
+
+    const limit = scrollHeight - height;
+    let scrollTop = currentTop + this.props.scrollStep;
+    scrollTop = scrollTop > limit ? limit : scrollTop;
+    this.scrollableElement.scrollTop = scrollTop;
+  };
+
+  scrollNavUp = event => {
+    const { scrollTop: currentTop } = this.scrollableElement;
+
+    let scrollTop = currentTop - this.props.scrollStep;
+    scrollTop = scrollTop < 0 ? 0 : scrollTop;
+
+    this.scrollableElement.scrollTop = scrollTop;
+  };
+
+  adjustMargins = () => {
+    if (this.props.hideScrollbar) {
+      const x = this.props.scrollX ? 1 : 0;
+      const y = this.props.scrollY ? 1 : 0;
+      const scrollbarSize = getScrollbarSize();
+      this.scrollableElement.style.marginRight = `${0 -
+        scrollbarSize[0] * y}px`;
+      this.scrollableElement.style.marginBottom = `${0 -
+        scrollbarSize[1] * x}px`;
+    }
+  };
+
+  scrollHandler = () => {
+    const {
+      offsetHeight: height,
+      scrollTop: scrollTop,
+      scrollHeight,
+    } = this.scrollableElement;
+    let scrollAreaClasses = '';
+
+    // Check if can scroll up
+    if (scrollTop) {
+      scrollAreaClasses += 'canScrollUp';
+    }
+
+    // Check if can scroll down
+    if (scrollTop + height < scrollHeight) {
+      scrollAreaClasses += ' canScrollDown';
+    }
+
+    if (this.state.scrollAreaClasses !== scrollAreaClasses) {
+      this.setState({
+        scrollAreaClasses,
+      });
+    }
+  };
+}
@@ -0,0 +1,69 @@
+.scrollArea
+  overflow: hidden
+  position: relative
+
+  .scrollable
+    max-height: inherit
+    overflow: hidden
+    zoom: 1
+
+    &.scrollX
+      overflow-x: scroll
+
+    &.scrollY
+      overflow-y: scroll
+
+  &.fit
+    height: 100%
+    width: 100%
+
+    .scrollable
+      bottom: 0
+      left: 0
+      max-height: none
+      position: absolute
+      right: 0
+      top: 0
+
+  .scrollNav
+    background-color: rgba(0, 0, 0, 0.75)
+    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.75)
+    cursor: pointer
+    height: 24px
+    left: 10px
+    opacity: 0
+    position: absolute
+    right: 10px
+    transition: all 0.3s ease
+    
+    .scrollNavIcon
+      color: var(--active-color);
+      display: block;
+      width: 18px;
+      height: 18px;
+      margin: 0 auto;
+      transition: color 0.3s ease;
+
+    &:hover
+      background-color: rgba(0, 0, 0, 0.9)
+      box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.9)
+
+      .scrollNavIcon
+        color: var(--hover-color)
+
+  .scrollNavUp
+    border-bottom-left-radius: 12px
+    border-bottom-right-radius: 12px
+    top: 0
+    transform: translateY(-24px)
+
+  .scrollNavDown
+    border-top-left-radius: 12px
+    border-top-right-radius: 12px
+    bottom: 0
+    transform: translateY(24px)
+
+  &.canScrollUp .scrollNavUp,
+  &.canScrollDown .scrollNavDown
+    opacity: 1
+    transform: translateY(0)