@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/image_preview/preview_modal.js

@@ -1,193 +1,193 @@
-import React from 'react'
-import Flex from '../flex'
-import classNames from 'classnames'
-import _ from 'lodash'
-import PropTypes from 'prop-types'
-
-class PreviewModal extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      previewImgIndex: this.props.index,
-      showScrollBtn: true
-    }
-    this.handlePreview = ::this.handlePreview
-    this.handlePrevious = ::this.handlePrevious
-    this.handleNext = ::this.handleNext
-    this.handleScroll = ::this.handleScroll
-    this.handleScrollLeft = ::this.handleScrollLeft
-    this.handleScrollRight = ::this.handleScrollRight
-    this.handleKeyDown = ::this.handleKeyDown
-  }
-
-  handlePreview(previewImgIndex) {
-    this.setState({ previewImgIndex })
-  }
-
-  handlePrevious() {
-    const { thumbnails } = this.props
-    const { previewImgIndex } = this.state
-
-    if (previewImgIndex !== 0) {
-      const index = previewImgIndex - 1
-      this.setState({ previewImgIndex: index })
-
-      if (thumbnails) {
-        this.thumbnails.childNodes[index].scrollIntoViewIfNeeded()
-      }
-    }
-  }
-
-  handleNext() {
-    const { images, thumbnails } = this.props
-    const { previewImgIndex } = this.state
-
-    if (previewImgIndex !== images.length - 1) {
-      const index = previewImgIndex + 1
-      this.setState({ previewImgIndex: index })
-
-      if (thumbnails) {
-        this.thumbnails.childNodes[index].scrollIntoViewIfNeeded()
-      }
-    }
-  }
-
-  handleScroll(direction) {
-    const num = direction === 'left' ? 1 : -1
-    const { thumbnails } = this
-    const initScrollLeft = thumbnails.scrollLeft
-    clearInterval(this.timer)
-
-    function intervalScroll() {
-      thumbnails.scrollLeft += num * 60
-      // 每次移动6张图片
-      if (
-        num * (thumbnails.scrollLeft - initScrollLeft) >= 360 ||
-        thumbnails.scrollLeft - initScrollLeft === 0
-      ) {
-        clearInterval(this.timer)
-      }
-    }
-
-    this.timer = setInterval(intervalScroll.bind(this), 50)
-  }
-
-  handleScrollLeft() {
-    this.handleScroll('left')
-  }
-
-  handleScrollRight() {
-    this.handleScroll('right')
-  }
-
-  handleKeyDown(event) {
-    if (event.keyCode === 37) {
-      this.handlePrevious()
-    } else if (event.keyCode === 39) {
-      this.handleNext()
-    }
-  }
-
-  componentDidMount() {
-    // 如果没有滚动条,不显示左右滚动按钮
-    this.thumbnails &&
-      this.thumbnails.offsetWidth === this.thumbnails.scrollWidth &&
-      this.setState({ showScrollBtn: false })
-
-    window.document.body.addEventListener('keydown', this.handleKeyDown)
-  }
-
-  componentWillUnmount() {
-    window.document.body.removeEventListener('keydown', this.handleKeyDown)
-  }
-
-  render() {
-    const { thumbnails, images, onHide } = this.props
-    const { previewImgIndex, showScrollBtn } = this.state
-
-    return (
-      <Flex className='gm-image-preview-wrap'>
-        <span className='gm-image-preview-btn-close' onClick={onHide}>
-          ×
-        </span>
-
-        <Flex alignCenter className='gm-image-preview-btn-container'>
-          <i
-            className={classNames(
-              'glyphicon glyphicon-menu-left gm-image-preview-btn',
-              { hidden: previewImgIndex === 0 }
-            )}
-            onClick={this.handlePrevious}
-          />
-        </Flex>
-
-        <Flex column className='gm-image-preview-content'>
-          <Flex auto alignCenter className='gm-image-preview-img-wrap'>
-            <img
-              src={images[previewImgIndex]}
-              alt=''
-              className='gm-image-preview-img'
-            />
-          </Flex>
-
-          {/* 缩略图列表高度: 60px */}
-          {thumbnails && thumbnails.length > 1 && (
-            <Flex justifyCenter className='gm-image-preview-footer'>
-              <Flex className='gm-image-preview-thumbnails-container'>
-                {showScrollBtn && (
-                  <i
-                    className='glyphicon glyphicon-chevron-left gm-image-preview-thumbnails-btn'
-                    onClick={this.handleScrollRight}
-                  />
-                )}
-
-                <div
-                  className='gm-image-preview-thumbnails'
-                  ref={ref => (this.thumbnails = ref)}
-                >
-                  {_.map(thumbnails, (img, index) => (
-                    <img
-                      key={index}
-                      className={classNames('gm-image-preview-img', {
-                        'gm-image-preview-focus': index === previewImgIndex
-                      })}
-                      src={img}
-                      onClick={() => this.handlePreview(index)}
-                    />
-                  ))}
-                </div>
-
-                {showScrollBtn && (
-                  <i
-                    className='glyphicon glyphicon-chevron-right gm-image-preview-thumbnails-btn'
-                    onClick={this.handleScrollLeft}
-                  />
-                )}
-              </Flex>
-            </Flex>
-          )}
-        </Flex>
-
-        <Flex alignCenter className='gm-image-preview-btn-container'>
-          <i
-            className={classNames(
-              'glyphicon glyphicon-menu-right gm-image-preview-btn',
-              { hidden: previewImgIndex === images.length - 1 }
-            )}
-            onClick={this.handleNext}
-          />
-        </Flex>
-      </Flex>
-    )
-  }
-}
-
-PreviewModal.propTypes = {
-  images: PropTypes.array.isRequired,
-  thumbnails: PropTypes.array,
-  index: PropTypes.number.isRequired,
-  onHide: PropTypes.func
-}
-
-export default PreviewModal
+import React from 'react'
+import Flex from '../flex'
+import classNames from 'classnames'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+
+class PreviewModal extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      previewImgIndex: this.props.index,
+      showScrollBtn: true
+    }
+    this.handlePreview = ::this.handlePreview
+    this.handlePrevious = ::this.handlePrevious
+    this.handleNext = ::this.handleNext
+    this.handleScroll = ::this.handleScroll
+    this.handleScrollLeft = ::this.handleScrollLeft
+    this.handleScrollRight = ::this.handleScrollRight
+    this.handleKeyDown = ::this.handleKeyDown
+  }
+
+  handlePreview(previewImgIndex) {
+    this.setState({ previewImgIndex })
+  }
+
+  handlePrevious() {
+    const { thumbnails } = this.props
+    const { previewImgIndex } = this.state
+
+    if (previewImgIndex !== 0) {
+      const index = previewImgIndex - 1
+      this.setState({ previewImgIndex: index })
+
+      if (thumbnails) {
+        this.thumbnails.childNodes[index].scrollIntoViewIfNeeded()
+      }
+    }
+  }
+
+  handleNext() {
+    const { images, thumbnails } = this.props
+    const { previewImgIndex } = this.state
+
+    if (previewImgIndex !== images.length - 1) {
+      const index = previewImgIndex + 1
+      this.setState({ previewImgIndex: index })
+
+      if (thumbnails) {
+        this.thumbnails.childNodes[index].scrollIntoViewIfNeeded()
+      }
+    }
+  }
+
+  handleScroll(direction) {
+    const num = direction === 'left' ? 1 : -1
+    const { thumbnails } = this
+    const initScrollLeft = thumbnails.scrollLeft
+    clearInterval(this.timer)
+
+    function intervalScroll() {
+      thumbnails.scrollLeft += num * 60
+      // 每次移动6张图片
+      if (
+        num * (thumbnails.scrollLeft - initScrollLeft) >= 360 ||
+        thumbnails.scrollLeft - initScrollLeft === 0
+      ) {
+        clearInterval(this.timer)
+      }
+    }
+
+    this.timer = setInterval(intervalScroll.bind(this), 50)
+  }
+
+  handleScrollLeft() {
+    this.handleScroll('left')
+  }
+
+  handleScrollRight() {
+    this.handleScroll('right')
+  }
+
+  handleKeyDown(event) {
+    if (event.keyCode === 37) {
+      this.handlePrevious()
+    } else if (event.keyCode === 39) {
+      this.handleNext()
+    }
+  }
+
+  componentDidMount() {
+    // 如果没有滚动条,不显示左右滚动按钮
+    this.thumbnails &&
+      this.thumbnails.offsetWidth === this.thumbnails.scrollWidth &&
+      this.setState({ showScrollBtn: false })
+
+    window.document.body.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  componentWillUnmount() {
+    window.document.body.removeEventListener('keydown', this.handleKeyDown)
+  }
+
+  render() {
+    const { thumbnails, images, onHide } = this.props
+    const { previewImgIndex, showScrollBtn } = this.state
+
+    return (
+      <Flex className='gm-image-preview-wrap'>
+        <span className='gm-image-preview-btn-close' onClick={onHide}>
+          ×
+        </span>
+
+        <Flex alignCenter className='gm-image-preview-btn-container'>
+          <i
+            className={classNames(
+              'glyphicon glyphicon-menu-left gm-image-preview-btn',
+              { hidden: previewImgIndex === 0 }
+            )}
+            onClick={this.handlePrevious}
+          />
+        </Flex>
+
+        <Flex column className='gm-image-preview-content'>
+          <Flex auto alignCenter className='gm-image-preview-img-wrap'>
+            <img
+              src={images[previewImgIndex]}
+              alt=''
+              className='gm-image-preview-img'
+            />
+          </Flex>
+
+          {/* 缩略图列表高度: 60px */}
+          {thumbnails && thumbnails.length > 1 && (
+            <Flex justifyCenter className='gm-image-preview-footer'>
+              <Flex className='gm-image-preview-thumbnails-container'>
+                {showScrollBtn && (
+                  <i
+                    className='glyphicon glyphicon-chevron-left gm-image-preview-thumbnails-btn'
+                    onClick={this.handleScrollRight}
+                  />
+                )}
+
+                <div
+                  className='gm-image-preview-thumbnails'
+                  ref={ref => (this.thumbnails = ref)}
+                >
+                  {_.map(thumbnails, (img, index) => (
+                    <img
+                      key={index}
+                      className={classNames('gm-image-preview-img', {
+                        'gm-image-preview-focus': index === previewImgIndex
+                      })}
+                      src={img}
+                      onClick={() => this.handlePreview(index)}
+                    />
+                  ))}
+                </div>
+
+                {showScrollBtn && (
+                  <i
+                    className='glyphicon glyphicon-chevron-right gm-image-preview-thumbnails-btn'
+                    onClick={this.handleScrollLeft}
+                  />
+                )}
+              </Flex>
+            </Flex>
+          )}
+        </Flex>
+
+        <Flex alignCenter className='gm-image-preview-btn-container'>
+          <i
+            className={classNames(
+              'glyphicon glyphicon-menu-right gm-image-preview-btn',
+              { hidden: previewImgIndex === images.length - 1 }
+            )}
+            onClick={this.handleNext}
+          />
+        </Flex>
+      </Flex>
+    )
+  }
+}
+
+PreviewModal.propTypes = {
+  images: PropTypes.array.isRequired,
+  thumbnails: PropTypes.array,
+  index: PropTypes.number.isRequired,
+  onHide: PropTypes.func
+}
+
+export default PreviewModal

package/src/component/image_preview/style.less

@@ -1,119 +1,119 @@
-// content
-@gm-image-preview-thumbnail-img-size: 50px;
-@gm-image-preview-thumbnail-img-margin: 5px;
-
-.gm-image-preview-wrap {
-  position: relative;
-  height: 100vh;
-  width: 100%;
-}
-
-.gm-image-preview-btn-container {
-  width: 50px;
-  flex-shrink: 0;
-
-  .gm-image-preview-btn {
-    height: 100px;
-    line-height: 100px;
-    color: #fff;
-    font-size: 50px;
-    cursor: pointer;
-    opacity: 0.7;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-.gm-image-preview-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 45px;
-  height: 50px;
-  line-height: 50px;
-  color: #fff;
-  font-size: 50px;
-  cursor: pointer;
-  opacity: 0.7;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.gm-image-preview-content {
-  width: 100%;
-  overflow: hidden;
-
-  .gm-image-preview-img-wrap {
-    padding: 20px 0;
-    width: 100%;
-    height: 100%;
-
-    .gm-image-preview-img {
-      object-fit: contain;
-      max-width: 100%;
-      max-height: 100%;
-      margin: 0 auto;
-    }
-  }
-}
-
-.gm-image-preview-footer {
-  width: 100%;
-  overflow: hidden;
-
-  .gm-image-preview-thumbnails-container {
-    max-width: 100%;
-
-    .gm-image-preview-thumbnails-btn {
-      color: #fff;
-      line-height: @gm-image-preview-thumbnail-img-size + @gm-image-preview-thumbnail-img-margin * 2;
-      cursor: pointer;
-      opacity: 0.7;
-      font-size: 19px;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .gm-image-preview-thumbnails {
-    overflow-x: auto;
-    overflow-y: hidden;
-    height: @gm-image-preview-thumbnail-img-size + @gm-image-preview-thumbnail-img-margin * 2;
-    white-space: nowrap;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .gm-image-preview-img {
-      width: @gm-image-preview-thumbnail-img-size;
-      height: @gm-image-preview-thumbnail-img-size;
-      object-fit: cover;
-      margin-top: 5px;
-      margin-bottom: 5px;
-      cursor: pointer;
-      opacity: 0.7;
-      border: 2px solid transparent;
-
-      &:hover {
-        border: 2px solid @brand-primary;
-        opacity: 1;
-      }
-
-      &.gm-image-preview-focus {
-        border: 2px solid @brand-primary;
-        opacity: 1;
-      }
-    }
-
-    .gm-image-preview-img + .gm-image-preview-img {
-      margin-left: 10px;
-    }
-  }
-}
+// content
+@gm-image-preview-thumbnail-img-size: 50px;
+@gm-image-preview-thumbnail-img-margin: 5px;
+
+.gm-image-preview-wrap {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+}
+
+.gm-image-preview-btn-container {
+  width: 50px;
+  flex-shrink: 0;
+
+  .gm-image-preview-btn {
+    height: 100px;
+    line-height: 100px;
+    color: #fff;
+    font-size: 50px;
+    cursor: pointer;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.gm-image-preview-btn-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 45px;
+  height: 50px;
+  line-height: 50px;
+  color: #fff;
+  font-size: 50px;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.gm-image-preview-content {
+  width: 100%;
+  overflow: hidden;
+
+  .gm-image-preview-img-wrap {
+    padding: 20px 0;
+    width: 100%;
+    height: 100%;
+
+    .gm-image-preview-img {
+      object-fit: contain;
+      max-width: 100%;
+      max-height: 100%;
+      margin: 0 auto;
+    }
+  }
+}
+
+.gm-image-preview-footer {
+  width: 100%;
+  overflow: hidden;
+
+  .gm-image-preview-thumbnails-container {
+    max-width: 100%;
+
+    .gm-image-preview-thumbnails-btn {
+      color: #fff;
+      line-height: @gm-image-preview-thumbnail-img-size + @gm-image-preview-thumbnail-img-margin * 2;
+      cursor: pointer;
+      opacity: 0.7;
+      font-size: 19px;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .gm-image-preview-thumbnails {
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: @gm-image-preview-thumbnail-img-size + @gm-image-preview-thumbnail-img-margin * 2;
+    white-space: nowrap;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .gm-image-preview-img {
+      width: @gm-image-preview-thumbnail-img-size;
+      height: @gm-image-preview-thumbnail-img-size;
+      object-fit: cover;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      cursor: pointer;
+      opacity: 0.7;
+      border: 2px solid transparent;
+
+      &:hover {
+        border: 2px solid @brand-primary;
+        opacity: 1;
+      }
+
+      &.gm-image-preview-focus {
+        border: 2px solid @brand-primary;
+        opacity: 1;
+      }
+    }
+
+    .gm-image-preview-img + .gm-image-preview-img {
+      margin-left: 10px;
+    }
+  }
+}