@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/pagination/pagination_v2.js

@@ -1,30 +1,30 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import PaginationBase from './base'
-
-const PaginationV2 = props => {
-  return <PaginationBase {...props} />
-}
-
-PaginationV2.displayName = 'PaginationV2'
-PaginationV2.propTypes = {
-  /** 非传统意义上的 分页信息。 仅此组件需要的数据而已。count 仅当前有多少条数据，非传统意义上的一共多少条数据，注意是当前。 */
-  data: PropTypes.shape({
-    count: PropTypes.number.isRequired,
-    offset: PropTypes.number.isRequired,
-    limit: PropTypes.number.isRequired
-  }),
-  /** 提供 {offset, limit} */
-  onChange: PropTypes.func.isRequired,
-  /** 此 count 非 data.count。此只是用来控制不显示总数 */
-  showCount: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  /** 私有 */
-  _peekInfo: PropTypes.shape({
-    more: PropTypes.bool,
-    peek: PropTypes.number
-  })
-}
-
-export default PaginationV2
+import React from 'react'
+import PropTypes from 'prop-types'
+import PaginationBase from './base'
+
+const PaginationV2 = props => {
+  return <PaginationBase {...props} />
+}
+
+PaginationV2.displayName = 'PaginationV2'
+PaginationV2.propTypes = {
+  /** 非传统意义上的 分页信息。 仅此组件需要的数据而已。count 仅当前有多少条数据，非传统意义上的一共多少条数据，注意是当前。 */
+  data: PropTypes.shape({
+    count: PropTypes.number.isRequired,
+    offset: PropTypes.number.isRequired,
+    limit: PropTypes.number.isRequired
+  }),
+  /** 提供 {offset, limit} */
+  onChange: PropTypes.func.isRequired,
+  /** 此 count 非 data.count。此只是用来控制不显示总数 */
+  showCount: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  /** 私有 */
+  _peekInfo: PropTypes.shape({
+    more: PropTypes.bool,
+    peek: PropTypes.number
+  })
+}
+
+export default PaginationV2

package/src/component/pagination/right.js

@@ -1,67 +1,67 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import InputNumberV2 from '../input_number/number'
-import Flex from '../flex'
-import { getIndex } from './util'
-
-const Right = ({ data, onChange }) => {
-  const [index, setIndex] = useState(getIndex(data))
-
-  // 响应外部的 index 变化
-  useEffect(() => {
-    setIndex(getIndex(data))
-  }, [data.offset, data.limit])
-
-  const handleInput = value => {
-    setIndex(value)
-  }
-
-  const handleEnsureIndex = () => {
-    // 如果不合理，则还原
-    if (index === null) {
-      setIndex(getIndex(data))
-      return
-    }
-
-    onChange({
-      offset: (index - 1) * data.limit,
-      limit: data.limit
-    })
-  }
-
-  const handleBlur = () => {
-    handleEnsureIndex()
-  }
-
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      handleEnsureIndex()
-    }
-  }
-
-  const all = Math.ceil(data.count / data.limit)
-
-  return (
-    <Flex className='gm-pagination-right'>
-      <InputNumberV2
-        precision={0}
-        value={index}
-        onChange={handleInput}
-        min={1}
-        max={all}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        className='form-control'
-        style={{ width: '40px' }}
-      />
-      <div className='gm-pagination-right-total-page'>{`/${all}页`}</div>
-    </Flex>
-  )
-}
-
-Right.propTypes = {
-  data: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired
-}
-
-export default Right
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import InputNumberV2 from '../input_number/number'
+import Flex from '../flex'
+import { getIndex } from './util'
+
+const Right = ({ data, onChange }) => {
+  const [index, setIndex] = useState(getIndex(data))
+
+  // 响应外部的 index 变化
+  useEffect(() => {
+    setIndex(getIndex(data))
+  }, [data.offset, data.limit])
+
+  const handleInput = value => {
+    setIndex(value)
+  }
+
+  const handleEnsureIndex = () => {
+    // 如果不合理，则还原
+    if (index === null) {
+      setIndex(getIndex(data))
+      return
+    }
+
+    onChange({
+      offset: (index - 1) * data.limit,
+      limit: data.limit
+    })
+  }
+
+  const handleBlur = () => {
+    handleEnsureIndex()
+  }
+
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      handleEnsureIndex()
+    }
+  }
+
+  const all = Math.ceil(data.count / data.limit)
+
+  return (
+    <Flex className='gm-pagination-right'>
+      <InputNumberV2
+        precision={0}
+        value={index}
+        onChange={handleInput}
+        min={1}
+        max={all}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        className='form-control'
+        style={{ width: '40px' }}
+      />
+      <div className='gm-pagination-right-total-page'>{`/${all}页`}</div>
+    </Flex>
+  )
+}
+
+Right.propTypes = {
+  data: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Right

package/src/component/pagination/style.less

@@ -1,52 +1,52 @@
-.gm-pagination {
-  .gm-pagination-page {
-    margin-left: 20px;
-
-    .gm-pagination-page-item {
-      margin: 0 5px;
-      border: 1px solid @gm-border-color;
-      border-radius: @gm-border-radius;
-      height: 30px;
-      line-height: 30px;
-      min-width: 30px;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        border: 1px solid @brand-primary;
-        color: @brand-primary;
-      }
-
-      &.active {
-        background-color: @brand-primary;
-        border: 1px solid @brand-primary;
-        color: white;
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        background-color: #f0f1f3;
-        border: 1px solid @gm-border-color;
-        color: @gm-color-first;
-      }
-    }
-
-    .gm-pagination-page-text {
-      color: @gm-color-third;
-    }
-  }
-
-  .gm-pagination-right {
-    margin-left: 10px;
-
-    .gm-pagination-right-total-page {
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      padding: 0 5px;
-      background-color: #f0f1f3;
-      border: 1px solid @gm-border-color;
-      border-left: none;
-    }
-  }
-}
+.gm-pagination {
+  .gm-pagination-page {
+    margin-left: 20px;
+
+    .gm-pagination-page-item {
+      margin: 0 5px;
+      border: 1px solid @gm-border-color;
+      border-radius: @gm-border-radius;
+      height: 30px;
+      line-height: 30px;
+      min-width: 30px;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid @brand-primary;
+        color: @brand-primary;
+      }
+
+      &.active {
+        background-color: @brand-primary;
+        border: 1px solid @brand-primary;
+        color: white;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        background-color: #f0f1f3;
+        border: 1px solid @gm-border-color;
+        color: @gm-color-first;
+      }
+    }
+
+    .gm-pagination-page-text {
+      color: @gm-color-third;
+    }
+  }
+
+  .gm-pagination-right {
+    margin-left: 10px;
+
+    .gm-pagination-right-total-page {
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      padding: 0 5px;
+      background-color: #f0f1f3;
+      border: 1px solid @gm-border-color;
+      border-left: none;
+    }
+  }
+}

package/src/component/pagination/util.js

@@ -1,5 +1,5 @@
-function getIndex(data) {
-  return data.offset / data.limit + 1
-}
-
-export { getIndex }
+function getIndex(data) {
+  return data.offset / data.limit + 1
+}
+
+export { getIndex }

package/src/component/picture_preview/index.js

@@ -1,21 +1,21 @@
-import 'react-photo-view/dist/react-photo-view.css'
-import { PhotoProvider, PhotoView } from 'react-photo-view'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-export default function PicturePreview({ images, className }) {
-  return (
-    <PhotoProvider>
-      {(images || []).map((item, index) => (
-        <PhotoView key={index} src={item}>
-          <img src={item} alt='' className={className} />
-        </PhotoView>
-      ))}
-    </PhotoProvider>
-  )
-}
-
-PicturePreview.propTypes = {
-  images: PropTypes.array,
-  className: PropTypes.string
-}
+import 'react-photo-view/dist/react-photo-view.css'
+import { PhotoProvider, PhotoView } from 'react-photo-view'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export default function PicturePreview({ images, className }) {
+  return (
+    <PhotoProvider>
+      {(images || []).map((item, index) => (
+        <PhotoView key={index} src={item}>
+          <img src={item} alt='' className={className} />
+        </PhotoView>
+      ))}
+    </PhotoProvider>
+  )
+}
+
+PicturePreview.propTypes = {
+  images: PropTypes.array,
+  className: PropTypes.string
+}