diff --git a/README.md b/README.md index babeee0..b99dc05 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ export default class Demo extends Component { | `onTouchEnd` | 滑动结束回调 | `() => {}` | | `markType` | 标记类型 支持`dot`和`circle` | `dot` | | `markDates` | 需要标记的日期数组 | `[]` | +| `disableWeekView` | 禁用周视图 | `false` | ### `markDates` 参数说明 diff --git a/package.json b/package.json index 7a8fd4a..eaa36ca 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-h5-calendar", "description": "react-h5-calendar React component", - "version": "1.0.5", + "version": "1.0.6", "scripts": { "start": "dumi dev", "docs:build": "dumi build", diff --git a/src/calendar.jsx b/src/calendar.jsx index ee4c347..0efac96 100644 --- a/src/calendar.jsx +++ b/src/calendar.jsx @@ -42,6 +42,7 @@ class MonthView extends PureComponent { handleTouchMove = throttle(e => { e.stopPropagation() + const { disableWeekView } = this.props const moveX = e.touches[0].clientX - this.touchStartPositionX const moveY = e.touches[0].clientY - this.touchStartPositionY const calendarWidth = this.calendarRef.current.offsetWidth @@ -49,8 +50,7 @@ class MonthView extends PureComponent { if (Math.abs(moveX) > Math.abs(moveY)) { // 左右滑动 this.setState({ touch: { x: moveX / calendarWidth, y: 0 } }) - } else { - // 上下滑动 + } else if (!disableWeekView) { this.setState({ touch: { x: 0, y: moveY / calendarHeight } }) } this.props.onTouchMove(e) @@ -67,6 +67,7 @@ class MonthView extends PureComponent { handleTouchEnd = e => { e.stopPropagation() const { showType } = this.state + const { disableWeekView } = this.props const calendarHeight = this.calendarRef.current.offsetHeight const { touch, translateIndex, currentMonthFirstDay, currenWeekFirstDay } = this.state this.f = false @@ -102,7 +103,9 @@ class MonthView extends PureComponent { ) } } else if (absTouchY > absTouchX && Math.abs(touch.y * calendarHeight) > 50) { - if (touch.y > 0 && showType === 'week') { + if (disableWeekView) { + // 禁用周视图 + } else if (touch.y > 0 && showType === 'week') { this.setState({ showType: 'month' }, () => { const dataArray = this.state.monthDates[1] this.props.onToggleShowType({ @@ -160,7 +163,7 @@ class MonthView extends PureComponent { currenWeekFirstDay, showType, } = this.state - const { currentDate, transitionDuration, markDates, markType } = this.props + const { currentDate, transitionDuration, markDates, markType, disableWeekView } = this.props const isMonthView = showType === 'month' return (
@@ -245,9 +248,11 @@ class MonthView extends PureComponent { })}
-
- -
+ {disableWeekView ? null : ( +
+ +
+ )} ) } @@ -264,6 +269,7 @@ MonthView.propTypes = { onToggleShowType: PropTypes.func, markType: PropTypes.oneOf(['dot', 'circle']), markDates: PropTypes.array, + disableWeekView: PropTypes.bool, } MonthView.defaultProps = { @@ -277,6 +283,7 @@ MonthView.defaultProps = { onToggleShowType: () => {}, markType: 'dot', markDates: [], + disableWeekView: false, } export default MonthView diff --git a/src/calendar.md b/src/calendar.md index ef7d752..e05bd88 100644 --- a/src/calendar.md +++ b/src/calendar.md @@ -25,6 +25,7 @@ export default class Demo extends Component { markType="dot" currentDate={this.state.currentDate} onTouchEnd={(a, b) => console.log(a, b)} + disableWeekView={false} /> ) }