@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/carousel/carousel.js

@@ -1,178 +1,178 @@
-import React, { useState, useEffect, useRef } from 'react'
-import classNames from 'classnames'
-import Flex from '../flex'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import { useMemo } from 'react'
-
-const Footer = ({ count, onSelect, onCancelSelect, currentIndex }) => {
-  const _countArray = _.range(count)
-
-  return (
-    <ul className='gm-carousel-fade-footer'>
-      {_.map(_countArray, (value, index) => {
-        return (
-          <li
-            className={classNames(
-              { 'gm-carousel-fade-footer-li-hover': currentIndex === index },
-              'gm-carousel-fade-footer-li'
-            )}
-            key={index}
-            onMouseOver={() => onSelect(index)}
-            onMouseLeave={onCancelSelect}
-          />
-        )
-      })}
-    </ul>
-  )
-}
-
-Footer.propTypes = {
-  currentIndex: PropTypes.number.isRequired,
-  count: PropTypes.number.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onCancelSelect: PropTypes.func.isRequired
-}
-
-const Items = ({ transitionTime, currentIndex, children }) => {
-  const fadeTransitionStyle = {
-    transition: `all ${transitionTime}ms ease-in-out`
-  }
-
-  return (
-    <>
-      {React.Children.map(children, (thisArg, index) => {
-        return React.cloneElement(thisArg, {
-          style: Object.assign({}, thisArg.props.style, fadeTransitionStyle),
-          className: classNames(
-            'gm-carousel-fade-item',
-            { 'gm-carousel-fade-item-active': currentIndex === index },
-            thisArg.props.className
-          ),
-          key: index
-        })
-      })}
-    </>
-  )
-}
-
-Items.propTypes = {
-  transitionTime: PropTypes.number.isRequired,
-  currentIndex: PropTypes.number.isRequired
-}
-
-const Carousel = props => {
-  const {
-    onIndexChange,
-    className,
-    transitionTime,
-    defaultIndex,
-    delay,
-    children,
-    isStopByHoverContent,
-    ...rest
-  } = props
-
-  const [currentIndex, setCurrentIndex] = useState(defaultIndex)
-  const timerRef = useRef(null)
-
-  const _children = useMemo(() => {
-    return React.Children.toArray(children).filter(v => v)
-  }, [children])
-
-  const _childCount = useMemo(() => {
-    return React.Children.count(_children)
-  }, [_children])
-
-  useEffect(() => {
-    if (_childCount > 0) {
-      startCarousel()
-    }
-  }, [_childCount])
-
-  useEffect(() => {
-    return () => {
-      clearInterval(timerRef.current)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (onIndexChange && typeof onIndexChange === 'function') {
-      onIndexChange(currentIndex)
-    }
-  }, [currentIndex, onIndexChange])
-
-  const setTimerCurrentIndex = () => {
-    setCurrentIndex(prevIndex => {
-      let index = prevIndex
-
-      if (index === _childCount - 1) {
-        index = 0
-      } else {
-        index++
-      }
-
-      return index
-    })
-  }
-
-  const startCarousel = () => {
-    clearInterval(timerRef.current)
-    timerRef.current = setInterval(setTimerCurrentIndex, delay)
-  }
-
-  const handleStopCarousel = () => {
-    clearInterval(timerRef.current)
-    timerRef.current = null
-  }
-
-  const handleSelect = index => {
-    handleStopCarousel()
-    setCurrentIndex(index)
-  }
-
-  const handleCancelSelect = () => {
-    startCarousel()
-  }
-
-  return (
-    <Flex
-      {...rest}
-      justifyCenter
-      className={classNames('gm-carousel-fade', className)}
-      onMouseOver={isStopByHoverContent ? handleStopCarousel : undefined}
-      onMouseLeave={handleCancelSelect}
-    >
-      <Items currentIndex={currentIndex} transitionTime={transitionTime}>
-        {_children}
-      </Items>
-
-      <Footer
-        count={_childCount}
-        onSelect={handleSelect}
-        onCancelSelect={handleCancelSelect}
-        currentIndex={currentIndex}
-      />
-    </Flex>
-  )
-}
-
-Carousel.propTypes = {
-  defaultIndex: PropTypes.number,
-  delay: PropTypes.number,
-  transitionTime: PropTypes.number,
-  /** 支持element元素 */
-  children: PropTypes.arrayOf(PropTypes.element),
-  onIndexChange: PropTypes.func,
-  className: PropTypes.string,
-  isStopByHoverContent: PropTypes.bool
-}
-
-Carousel.defaultProps = {
-  defaultIndex: 0, // 设置初始索引
-  delay: 3000, // 轮播时延
-  transitionTime: 1000, // 切换时间（ms）
-  isStopByHoverContent: true // 鼠标悬浮content禁止轮播
-}
-
-export default Carousel
+import React, { useState, useEffect, useRef } from 'react'
+import classNames from 'classnames'
+import Flex from '../flex'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { useMemo } from 'react'
+
+const Footer = ({ count, onSelect, onCancelSelect, currentIndex }) => {
+  const _countArray = _.range(count)
+
+  return (
+    <ul className='gm-carousel-fade-footer'>
+      {_.map(_countArray, (value, index) => {
+        return (
+          <li
+            className={classNames(
+              { 'gm-carousel-fade-footer-li-hover': currentIndex === index },
+              'gm-carousel-fade-footer-li'
+            )}
+            key={index}
+            onMouseOver={() => onSelect(index)}
+            onMouseLeave={onCancelSelect}
+          />
+        )
+      })}
+    </ul>
+  )
+}
+
+Footer.propTypes = {
+  currentIndex: PropTypes.number.isRequired,
+  count: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onCancelSelect: PropTypes.func.isRequired
+}
+
+const Items = ({ transitionTime, currentIndex, children }) => {
+  const fadeTransitionStyle = {
+    transition: `all ${transitionTime}ms ease-in-out`
+  }
+
+  return (
+    <>
+      {React.Children.map(children, (thisArg, index) => {
+        return React.cloneElement(thisArg, {
+          style: Object.assign({}, thisArg.props.style, fadeTransitionStyle),
+          className: classNames(
+            'gm-carousel-fade-item',
+            { 'gm-carousel-fade-item-active': currentIndex === index },
+            thisArg.props.className
+          ),
+          key: index
+        })
+      })}
+    </>
+  )
+}
+
+Items.propTypes = {
+  transitionTime: PropTypes.number.isRequired,
+  currentIndex: PropTypes.number.isRequired
+}
+
+const Carousel = props => {
+  const {
+    onIndexChange,
+    className,
+    transitionTime,
+    defaultIndex,
+    delay,
+    children,
+    isStopByHoverContent,
+    ...rest
+  } = props
+
+  const [currentIndex, setCurrentIndex] = useState(defaultIndex)
+  const timerRef = useRef(null)
+
+  const _children = useMemo(() => {
+    return React.Children.toArray(children).filter(v => v)
+  }, [children])
+
+  const _childCount = useMemo(() => {
+    return React.Children.count(_children)
+  }, [_children])
+
+  useEffect(() => {
+    if (_childCount > 0) {
+      startCarousel()
+    }
+  }, [_childCount])
+
+  useEffect(() => {
+    return () => {
+      clearInterval(timerRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (onIndexChange && typeof onIndexChange === 'function') {
+      onIndexChange(currentIndex)
+    }
+  }, [currentIndex, onIndexChange])
+
+  const setTimerCurrentIndex = () => {
+    setCurrentIndex(prevIndex => {
+      let index = prevIndex
+
+      if (index === _childCount - 1) {
+        index = 0
+      } else {
+        index++
+      }
+
+      return index
+    })
+  }
+
+  const startCarousel = () => {
+    clearInterval(timerRef.current)
+    timerRef.current = setInterval(setTimerCurrentIndex, delay)
+  }
+
+  const handleStopCarousel = () => {
+    clearInterval(timerRef.current)
+    timerRef.current = null
+  }
+
+  const handleSelect = index => {
+    handleStopCarousel()
+    setCurrentIndex(index)
+  }
+
+  const handleCancelSelect = () => {
+    startCarousel()
+  }
+
+  return (
+    <Flex
+      {...rest}
+      justifyCenter
+      className={classNames('gm-carousel-fade', className)}
+      onMouseOver={isStopByHoverContent ? handleStopCarousel : undefined}
+      onMouseLeave={handleCancelSelect}
+    >
+      <Items currentIndex={currentIndex} transitionTime={transitionTime}>
+        {_children}
+      </Items>
+
+      <Footer
+        count={_childCount}
+        onSelect={handleSelect}
+        onCancelSelect={handleCancelSelect}
+        currentIndex={currentIndex}
+      />
+    </Flex>
+  )
+}
+
+Carousel.propTypes = {
+  defaultIndex: PropTypes.number,
+  delay: PropTypes.number,
+  transitionTime: PropTypes.number,
+  /** 支持element元素 */
+  children: PropTypes.arrayOf(PropTypes.element),
+  onIndexChange: PropTypes.func,
+  className: PropTypes.string,
+  isStopByHoverContent: PropTypes.bool
+}
+
+Carousel.defaultProps = {
+  defaultIndex: 0, // 设置初始索引
+  delay: 3000, // 轮播时延
+  transitionTime: 1000, // 切换时间（ms）
+  isStopByHoverContent: true // 鼠标悬浮content禁止轮播
+}
+
+export default Carousel

package/src/component/carousel/stories.js

@@ -1,50 +1,50 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Carousel from './carousel'
-import { observable } from 'mobx'
-
-const store = observable({
-  showOne: false,
-  setShowOne(value) {
-    console.log(value)
-    this.showOne = value
-  },
-})
-
-setTimeout(() => {
-  store.setShowOne(true)
-}, 4000)
-
-storiesOf('Carousel', module).add('default', () => {
-  const render1 = () => <div>111</div>
-  return (
-    <Carousel
-      style={{ width: '1000px', height: '200px' }}
-      onIndexChange={index => console.log(index, 'afterChangeIndex')}
-    >
-      <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>
-        <div>
-          <img
-            style={{ height: '200px', width: '800px' }}
-            src='https://img.guanmai.cn/product_pic/da32d562de124462.png'
-          />
-        </div>
-      </div>
-      <div style={{ backgroundColor: 'green', height: '100%' }}>
-        showCarousel1
-      </div>
-      <div style={{ backgroundColor: 'yellow', height: '100%' }}>
-        showCarousel2
-      </div>
-      <div style={{ backgroundColor: 'blue', height: '100%' }}>
-        showCarousel3
-      </div>
-      {store.showOne ? (
-        <div style={{ backgroundColor: 'orange', height: '100%' }}>
-          showCarousel4
-        </div>
-      ) : null}
-      {render1()}
-    </Carousel>
-  )
-})
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Carousel from './carousel'
+import { observable } from 'mobx'
+
+const store = observable({
+  showOne: false,
+  setShowOne(value) {
+    console.log(value)
+    this.showOne = value
+  },
+})
+
+setTimeout(() => {
+  store.setShowOne(true)
+}, 4000)
+
+storiesOf('Carousel', module).add('default', () => {
+  const render1 = () => <div>111</div>
+  return (
+    <Carousel
+      style={{ width: '1000px', height: '200px' }}
+      onIndexChange={index => console.log(index, 'afterChangeIndex')}
+    >
+      <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>
+        <div>
+          <img
+            style={{ height: '200px', width: '800px' }}
+            src='https://img.guanmai.cn/product_pic/da32d562de124462.png'
+          />
+        </div>
+      </div>
+      <div style={{ backgroundColor: 'green', height: '100%' }}>
+        showCarousel1
+      </div>
+      <div style={{ backgroundColor: 'yellow', height: '100%' }}>
+        showCarousel2
+      </div>
+      <div style={{ backgroundColor: 'blue', height: '100%' }}>
+        showCarousel3
+      </div>
+      {store.showOne ? (
+        <div style={{ backgroundColor: 'orange', height: '100%' }}>
+          showCarousel4
+        </div>
+      ) : null}
+      {render1()}
+    </Carousel>
+  )
+})

package/src/component/carousel/style.less

@@ -1,48 +1,48 @@
-.gm-carousel-fade {
-  position: relative;
-
-  &-item {
-    display: inline-block;
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-
-    &-active {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  &-footer {
-    bottom: 5px;
-    height: 10px;
-    position: absolute;
-    list-style-type: none;
-    padding-inline-start: 0;
-
-    &-li {
-      float: left;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      cursor: pointer;
-      background-color: #3a3f53;
-      margin: 5px;
-
-      &-hover {
-        background-color: #fff;
-        opacity: 0.6;
-        border: 0;
-      }
-
-      &::after {
-        clear: both;
-        content: '.';
-        display: block;
-        width: 0;
-        height: 0;
-        visibility: hidden;
-      }
-    }
-  }
-}
+.gm-carousel-fade {
+  position: relative;
+
+  &-item {
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+    visibility: hidden;
+
+    &-active {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &-footer {
+    bottom: 5px;
+    height: 10px;
+    position: absolute;
+    list-style-type: none;
+    padding-inline-start: 0;
+
+    &-li {
+      float: left;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      cursor: pointer;
+      background-color: #3a3f53;
+      margin: 5px;
+
+      &-hover {
+        background-color: #fff;
+        opacity: 0.6;
+        border: 0;
+      }
+
+      &::after {
+        clear: both;
+        content: '.';
+        display: block;
+        width: 0;
+        height: 0;
+        visibility: hidden;
+      }
+    }
+  }
+}