Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: logic with loadingMore #19

Merged
merged 1 commit into from
Jan 22, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix: logic with loadingMore
Bastieno committed Jan 22, 2025
commit efdfd99783fdea97b2dad556fb76c669b950a7a1
829 changes: 815 additions & 14 deletions data.js

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion src/Calendar.js
Original file line number Diff line number Diff line change
@@ -1047,8 +1047,13 @@ class Calendar extends React.Component {
setFetchingMoreEvents = ({
isFetchingMoreEvents,
dateTriggeringShowMore,
resourceTriggeringPopup,
}) => {
this.setState({ isFetchingMoreEvents, dateTriggeringShowMore })
this.setState({
isFetchingMoreEvents,
dateTriggeringShowMore,
resourceTriggeringPopup,
})
}

getView = () => {
3 changes: 3 additions & 0 deletions src/DateContentRow.js
Original file line number Diff line number Diff line change
@@ -126,6 +126,7 @@ class DateContentRow extends React.Component {
isPopupOpen,
loadingMore,
dateTriggeringShowMore,
triggeredLoadingMore,
} = this.props

if (renderForMeasure) return this.renderDummy()
@@ -199,6 +200,7 @@ class DateContentRow extends React.Component {
onShowMore={this.handleShowMore}
loadingMore={loadingMore}
dateTriggeringShowMore={dateTriggeringShowMore}
triggeredLoadingMore={triggeredLoadingMore}
{...eventRowProps}
/>
)}
@@ -240,6 +242,7 @@ DateContentRow.propTypes = {
isAllDay: PropTypes.bool,
isPopupOpen: PropTypes.bool,
loadingMore: PropTypes.bool,
triggeredLoadingMore: PropTypes.bool,
dateTriggeringShowMore: PropTypes.instanceOf(Date),

accessors: PropTypes.object.isRequired,
3 changes: 2 additions & 1 deletion src/EventEndingRow.js
Original file line number Diff line number Diff line change
@@ -81,6 +81,7 @@ class EventEndingRow extends React.Component {
components,
loadingMore,
dateTriggeringShowMore,
triggeredLoadingMore,
} = this.props
const events = slotMetrics.getEventsForSlot(slot)
const remainingEvents = eventsInSlot(segments, slot)
@@ -114,7 +115,7 @@ class EventEndingRow extends React.Component {
className={clsx('rbc-button-link', 'rbc-show-more')}
onClick={(e) => this.showMore(slot, e)}
>
{loadingMore && isSameDate
{loadingMore && isSameDate && triggeredLoadingMore
? 'Loading...'
: localizer.messages.showMore(count, remainingEvents, events)}
</button>
4 changes: 4 additions & 0 deletions src/Month.js
Original file line number Diff line number Diff line change
@@ -129,6 +129,8 @@ class MonthView extends React.Component {
isPopupOpen,
isFetchingMoreEvents,
dateTriggeringShowMore,
resourceId,
resourceTriggeringPopup,
} = this.props

const { needLimitMeasure, rowLimit } = this.state
@@ -175,6 +177,7 @@ class MonthView extends React.Component {
isPopupOpen={isPopupOpen}
loadingMore={isFetchingMoreEvents}
dateTriggeringShowMore={dateTriggeringShowMore}
triggeredLoadingMore={resourceId === resourceTriggeringPopup}
/>
)
}
@@ -347,6 +350,7 @@ class MonthView extends React.Component {
setFetchingMoreEvents({
isFetchingMoreEvents: true,
dateTriggeringShowMore: date,
resourceTriggeringPopup: resourceId,
})
events = await getMoreEvents(date)
} else {
2 changes: 2 additions & 0 deletions src/TimeGrid.js
Original file line number Diff line number Diff line change
@@ -108,6 +108,7 @@ export default class TimeGrid extends Component {
setFetchingMoreEvents({
isFetchingMoreEvents: true,
dateTriggeringShowMore: date,
resourceTriggeringPopup: resourceId,
})
events = await getMoreEvents(date)
} else {
@@ -312,6 +313,7 @@ export default class TimeGrid extends Component {
hideGutter={this.props.isWeekGrouping}
loadingMore={isFetchingMoreEvents}
dateTriggeringShowMore={dateTriggeringShowMore}
triggeredLoadingMore={resourceId === resourceTriggeringPopup}
isPopupOpen={isPopupOpen}
isGrouped={isGrouped}
/>
5 changes: 5 additions & 0 deletions src/TimeGridHeader.js
Original file line number Diff line number Diff line change
@@ -75,6 +75,7 @@ class TimeGridHeader extends React.Component {
maxRows,
loadingMore,
dateTriggeringShowMore,
triggeredLoadingMore,
isPopupOpen,
isGrouped,
} = this.props
@@ -111,6 +112,7 @@ class TimeGridHeader extends React.Component {
resizable={resizable}
loadingMore={loadingMore}
dateTriggeringShowMore={dateTriggeringShowMore}
triggeredLoadingMore={triggeredLoadingMore}
isPopupOpen={isPopupOpen}
/>
)
@@ -135,6 +137,7 @@ class TimeGridHeader extends React.Component {
loadingMore,
isGrouped,
dateTriggeringShowMore,
triggeredLoadingMore,
components: {
timeGutterHeader: TimeGutterHeader,
resourceHeader: ResourceHeaderComponent = ResourceHeader,
@@ -216,6 +219,7 @@ class TimeGridHeader extends React.Component {
resizable={resizable}
loadingMore={loadingMore}
dateTriggeringShowMore={dateTriggeringShowMore}
triggeredLoadingMore={triggeredLoadingMore}
isPopupOpen={isPopupOpen}
/>
</div>
@@ -250,6 +254,7 @@ TimeGridHeader.propTypes = {
isGrouped: PropTypes.bool,
isPopupOpen: PropTypes.bool,
loadingMore: PropTypes.bool,
triggeredLoadingMore: PropTypes.bool,
dateTriggeringShowMore: PropTypes.instanceOf(Date),

onSelectSlot: PropTypes.func,
2 changes: 1 addition & 1 deletion src/sass/month.scss
Original file line number Diff line number Diff line change
@@ -123,7 +123,7 @@
border-bottom: 1px solid #e5e5e5;
margin: -10px -10px 5px -10px;
padding: 2px 10px;
height: 28px;
height: 32px;
display: flex;
align-items: center;
}
2 changes: 1 addition & 1 deletion src/sass/time-grid.scss
Original file line number Diff line number Diff line change
@@ -51,7 +51,7 @@

.rbc-row {
box-sizing: border-box;
min-height: 20px;
min-height: 36px;
}
}

6 changes: 3 additions & 3 deletions stories/props/grouping.stories.js
Original file line number Diff line number Diff line change
@@ -93,12 +93,12 @@ const getMoreEvents = (date) => {
console.log({ date })
return new Promise((resolve) => {
setTimeout(() => {
resolve(shifts.map((shift) => formatEvent(shift)))
}, 5000)
resolve(shifts.map(formatEvent).slice(0, 50))
}, 3000)
})
}

const events = shifts.map((shift) => formatEvent(shift))
const events = shifts.map(formatEvent)

const Template = (args) => {
const [view, setView] = React.useState(Views.MONTH)
Loading