update 完成表单中上传控件的使用

web-react/src/components/index.js

@@ -6,7 +6,7 @@ export { default as Container } from './container'
 export { default as IconSelector } from './icon-selector'
 export { default as Image } from './image'
 export { default as ModalForm } from './modal-form'
-export { default as PhotoSwipe } from './photo-swipe'
+export { default as PhotoPreview } from './photo-preview'
 export { default as QueryList } from './query-list'
 export { default as QueryTable } from './query-table'
 export { default as QueryTableActions } from './query-table-actions'

web-react/src/components/photo-preview/index.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import 'photoswipe/dist/photoswipe.css'
+import 'photoswipe/dist/default-skin/default-skin.css'
+import PhotoSwipe from 'photoswipe'
+import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
+
+const defaultOptions = {
+    index: 0,
+    bgOpacity: 0.75,
+}
+
+export default class PhotoPreview extends Component {
+    initPhotoSwipe = (items = [], options = {}) => {
+        const pswpElement = this.refs.pswp
+        const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
+            ...defaultOptions,
+            ...options,
+        })
+        gallery.init()
+    }
+
+    render() {
+        return (
+            <div className="pswp" tabIndex="-1" ref="pswp">
+                <div className="pswp__bg"></div>
+                <div className="pswp__scroll-wrap">
+                    <div className="pswp__container">
+                        <div className="pswp__item"></div>
+                        <div className="pswp__item"></div>
+                        <div className="pswp__item"></div>
+                    </div>
+                    <div className="pswp__ui pswp__ui--hidden">
+                        <div className="pswp__top-bar">
+                            <div className="pswp__counter"></div>
+                            <button
+                                className="pswp__button pswp__button--close"
+                                title="Close (Esc)"
+                            ></button>
+                            <button
+                                className="pswp__button pswp__button--fs"
+                                title="Toggle fullscreen"
+                            ></button>
+                            <button
+                                className="pswp__button pswp__button--zoom"
+                                title="Zoom in/out"
+                            ></button>
+                            <div className="pswp__preloader">
+                                <div className="pswp__preloader__icn">
+                                    <div className="pswp__preloader__cut">
+                                        <div className="pswp__preloader__donut"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                            <div className="pswp__share-tooltip"></div>
+                        </div>
+                        <button
+                            className="pswp__button pswp__button--arrow--left"
+                            title="Previous (arrow left)"
+                        ></button>
+                        <button
+                            className="pswp__button pswp__button--arrow--right"
+                            title="Next (arrow right)"
+                        ></button>
+                        <div className="pswp__caption">
+                            <div className="pswp__caption__center"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

web-react/src/components/photo-swipe/index.jsx

@@ -1,11 +0,0 @@
-import React, { Component } from 'react'
-
-export default class PhotoSwipe extends Component {
-    render() {
-        return (
-            <div>
-
-            </div>
-        )
-    }
-}