complete viewer core

Author: infeng

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+dist/
+lib/

demo/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import ViewerWrap from '../src/ViewerWrap';
+import Viewer from '../src/Viewer';
 const img2 = require('./images/landscape2.jpg');
 const img = require('./images/landscape.jpg');
 const img3 = require('./images/tibet-6.jpg');
@@ -18,7 +18,7 @@ class App extends React.Component<any, any> {
     return (
       <div>
         <button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
-        <ViewerWrap
+        <Viewer
         visible={this.state.visible}
         onClose={() => { this.setState({ visible: false }); } }
         images={[img2, img, img3]}

getBabelCommonConfig.js

@@ -0,0 +1,6 @@
+module.exports = function getBabelCommonConfig() {
+  const babelConfig = require('atool-build/lib/getBabelCommonConfig')();
+  babelConfig.plugins.push([require.resolve('babel-plugin-transform-runtime'),
+    { polyfill: false }]);
+  return babelConfig;
+};

getTSCommonConfig.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function () {
+  return {
+    target: 'es6',
+    jsx: 'preserve',
+    moduleResolution: 'node',
+    declaration: true,
+    allowSyntheticDefaultImports: true,
+  };
+};

gulpfile.js

@@ -0,0 +1,41 @@
+const gulp = require('gulp');
+const ts = require('gulp-typescript');
+const tsConfig = require('./getTSCommonConfig')();
+const babelConfig = require('./getBabelCommonConfig')();
+delete babelConfig.cacheDirectory;
+const babel = require('gulp-babel');
+const transformLess = require('atool-build/lib/transformLess');
+const through2 = require('through2');
+const merge2 = require('merge2');
+
+function babelify(js) {
+  return js.pipe(babel(babelConfig))
+    .pipe(gulp.dest('lib'));
+}
+
+gulp.task('default', () => {
+  const less = gulp.src(['src/' + '**/' + '*.less'])
+    .pipe(through2.obj(function (file, encoding, next) {
+      this.push(file.clone());
+      if (file.path.match(/\/style\/index\.less$/)) {
+        transformLess(file.path).then((css) => {
+          file.contents = new Buffer(css);
+          file.path = file.path.replace(/\.less$/, '.css');
+          this.push(file);
+          next();
+        }).catch((e) => {
+          console.error(e);
+        });
+      } else {
+        next();
+      }
+    }))
+    .pipe(gulp.dest('lib'));
+  const img = gulp.src(['src/' + '**/' + '*.png']).pipe(gulp.dest('lib'));  
+  const tsResult = gulp.src([
+    'src/' + '**/' + '*.tsx',
+  ]).pipe(ts(tsConfig));
+  const tsFiles = babelify(tsResult.js);
+  const tsd = tsResult.dts.pipe(gulp.dest('lib'));  
+  return merge2([tsFiles, tsd]);
+});

package.json

@@ -2,11 +2,12 @@
   "name": "react-viewer",
   "version": "0.0.1",
   "description": "react image viewer",
-  "main": "dist/ViewerWrap",
+  "main": "dist/index",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "dora --port 8001 --plugins \"webpack,webpack-hmr,browser-history?index=/demo/index.html\"",
-    "lint": "tslint -c tslint.json src/**/*.ts src/**/*.tsx"
+    "lint": "tslint -c tslint.json src/**/*.ts src/**/*.tsx",
+    "build": "atool-build --config webpack.config.prop.js && gulp"
   },
   "repository": {
     "type": "git",
@@ -22,21 +23,33 @@
   "bugs": {
     "url": "https://github.com/infeng/react-viewer/issues"
   },
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "typings": "lib/index.d.ts",
   "homepage": "https://github.com/infeng/react-viewer#readme",
   "devDependencies": {
     "@types/node": "^6.0.45",
     "@types/react": "^0.14.39",
     "@types/react-dom": "^0.14.17",
     "atool-build": "^0.8.1",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-runtime": "^6.11.6",
     "dora": "^0.4.3",
     "dora-plugin-browser-history": "^0.2.0",
     "dora-plugin-webpack": "^0.8.1",
     "dora-plugin-webpack-hmr": "^0.2.1",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-typescript": "^3.0.2",
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.22.0",
+    "merge2": "^1.0.2",
     "pre-commit": "^1.1.3",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
+    "through2": "^2.0.1",
     "tslint": "^3.15.1",
     "typescript": "^2.0.3",
     "webpack": "^1.13.2"

src/Viewer.tsx

@@ -1,78 +1,67 @@
 import * as React from 'react';
-import './style/index.less';
+import * as ReactDOM from 'react-dom';
 import ViewerCore from './ViewerCore';
-import ViewerNav from './ViewerNav';
+import ViewerProps from './ViewerProps';
 
-function noop() {}
+export default class Viewer extends React.Component<ViewerProps, any> {
+  private container: HTMLDivElement;
+  private component: React.ReactNode;
 
-interface ViewerState {
-  activeIndex?: number;
-}
-
-export default class Viewer extends React.Component<ViewerProps, ViewerState> {
-  static defaultProps = {
-    visible: false,
-    onClose: noop,
-    images: [],
-    activeIndex: 0,
-  };
-
-  private prefixCls: string;
-
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
 
-    this.prefixCls = 'react-viewer';
+    this.container = null;
+    this.component = null;
+  }
 
-    this.state = {
-      activeIndex: this.props.activeIndex,
-    };
+  renderViewer() {
+    if (this.props.visible || this.component) {
+      if (!this.container) {
+        this.container = document.createElement('div');
+      }
+      document.body.appendChild(this.container);
+      let instance = this;
+      ReactDOM.unstable_renderSubtreeIntoContainer(
+        this,
+        <ViewerCore
+          {...this.props}
+          />,
+        this.container,
+        function () {
+          instance.component = this;
+        },
+      );
+    }
+  }
 
-    this.handleChangeImg = this.handleChangeImg.bind(this);
+  removeViewer() {
+    if (this.container) {
+      const container = this.container;
+      ReactDOM.unmountComponentAtNode(container);
+      container.parentNode.removeChild(container);
+      this.container = null;
+      this.component = null;
+    }
   }
 
-  handleClose(e) {
-    this.props.onClose();
+  componentWillUnmount() {
+    if (this.props.visible) {
+      this.props.onClose();
+      this.removeViewer();
+    } else {
+      this.removeViewer();
+    }
   }
 
-  handleChangeImg(newIndex: number) {
-    let newState = this.state;
-    newState.activeIndex = newIndex;
-    this.setState(newState);
+  componentDidMount() {
+    this.renderViewer();
   }
 
-  componentWillReceiveProps(nextProps: ViewerProps) {
-    if (this.state.activeIndex !== nextProps.activeIndex) {
-      this.setState({
-        activeIndex: nextProps.activeIndex,
-      });
-    }
+  componentDidUpdate() {
+    this.renderViewer();
   }
 
   render() {
-    let activeImgSrc = '';
-    if (this.props.images.length > 0) {
-      activeImgSrc = this.props.images[this.state.activeIndex];
-    }
-
-    return (
-      <div style={{display: this.props.visible ? 'block' : 'none'}}>
-        <div className={`${this.prefixCls}-mask`}></div>
-        <div className={`${this.prefixCls}-close`} onClick={this.handleClose.bind(this)}></div>
-        <ViewerCore
-        prefixCls={this.prefixCls}
-        imgSrc={activeImgSrc}
-        visible={this.props.visible}
-        />
-        <div className={`${this.prefixCls}-footer`}>
-          <ViewerNav
-          prefixCls={this.prefixCls}
-          images={this.props.images}
-          activeIndex={this.state.activeIndex}
-          onChangeImg={this.handleChangeImg}
-          />
-        </div>
-      </div>
-    );
+    return null;
   }
 }