-
Notifications
You must be signed in to change notification settings - Fork 311
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(content-explorer): Migrate Content
- Loading branch information
1 parent
200420d
commit ba0db50
Showing
20 changed files
with
552 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import * as React from 'react'; | ||
import { FormattedMessage } from 'react-intl'; | ||
import { Files, FolderFloat, HatWand, OpenBook } from '@box/blueprint-web-assets/illustrations/Medium'; | ||
|
||
import messages from '../messages'; | ||
import { VIEW_ERROR, VIEW_FOLDER, VIEW_METADATA, VIEW_SEARCH, VIEW_SELECTED } from '../../../constants'; | ||
import type { View } from '../../../common/types/core'; | ||
|
||
import './EmptyState.scss'; | ||
|
||
export interface EmptyStateProps { | ||
isLoading: boolean; | ||
view: View; | ||
} | ||
|
||
const EmptyState = ({ view, isLoading }: EmptyStateProps) => { | ||
let type; | ||
const message = | ||
isLoading && (view === VIEW_FOLDER || view === VIEW_METADATA) ? ( | ||
<FormattedMessage {...messages.loadingState} /> | ||
) : ( | ||
<FormattedMessage {...messages[`${view}State`]} /> | ||
); | ||
|
||
switch (view) { | ||
case VIEW_ERROR: | ||
type = <HatWand />; | ||
break; | ||
case VIEW_SELECTED: | ||
type = <Files />; | ||
break; | ||
case VIEW_SEARCH: | ||
type = <OpenBook />; | ||
break; | ||
default: | ||
type = <FolderFloat />; | ||
break; | ||
} | ||
|
||
return ( | ||
<div className="be-empty"> | ||
{type} | ||
<div>{message}</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default EmptyState; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export {default} from './EmptyState'; |
1 change: 0 additions & 1 deletion
1
src/elements/common/empty-state/index.js → src/elements/common/empty-state/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1 @@ | ||
// @flow | ||
export { default } from './EmptyState'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import React, { useCallback, useEffect, useState, useRef } from 'react'; | ||
import './ProgressBar.scss'; | ||
|
||
export interface ProgressBarProps { | ||
percent: number; | ||
} | ||
|
||
const ProgressBar = ({ percent: initialPercent = 0 }: ProgressBarProps) => { | ||
const [percent, setPercent] = useState(initialPercent); | ||
const intervalRef = useRef<number | null>(null); | ||
const timeoutRef = useRef<number | null>(null); | ||
|
||
const clearTimeoutAndInterval = () => { | ||
if (intervalRef.current) { | ||
clearInterval(intervalRef.current); | ||
} | ||
if (timeoutRef.current) { | ||
clearTimeout(timeoutRef.current); | ||
} | ||
}; | ||
|
||
const incrementProgress = () => { | ||
setPercent(prevPercent => { | ||
const newPercent = Math.min(prevPercent + 2 / (prevPercent || 1), 100); | ||
if (newPercent === 100) { | ||
clearTimeoutAndInterval(); | ||
} | ||
0; | ||
return newPercent; | ||
}); | ||
}; | ||
|
||
const resetProgress = () => { | ||
setPercent(0); | ||
}; | ||
|
||
const startProgress = useCallback(() => { | ||
if (percent === 0) { | ||
intervalRef.current = window.setInterval(incrementProgress, 100); | ||
} else if (percent === 100) { | ||
timeoutRef.current = window.setTimeout(resetProgress, 600); | ||
} | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, []); | ||
|
||
useEffect(() => { | ||
startProgress(); | ||
return () => clearTimeoutAndInterval(); | ||
}, [percent, startProgress]); | ||
|
||
useEffect(() => { | ||
setPercent(initialPercent); | ||
}, [initialPercent]); | ||
|
||
const containerStyle = { | ||
opacity: percent > 0 && percent < 100 ? 1 : 0, | ||
transitionDelay: percent > 0 && percent < 100 ? '0' : '0.4s', | ||
} as const; | ||
|
||
return ( | ||
<div className="be-progress-container" style={containerStyle}> | ||
<div className="be-progress" role="progressbar" style={{ width: `${percent}%` }} /> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ProgressBar; |
12 changes: 0 additions & 12 deletions
12
src/elements/common/progress-bar/__tests__/ProgressBar.test.js
This file was deleted.
Oops, something went wrong.
32 changes: 32 additions & 0 deletions
32
src/elements/common/progress-bar/__tests__/ProgressBar.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import * as React from 'react'; | ||
import { act, render, screen } from '../../../../test-utils/testing-library'; | ||
import ProgressBar from '../ProgressBar'; | ||
|
||
describe('ProgressBar', () => { | ||
test('renders with initial percent', () => { | ||
render(<ProgressBar percent={20} />); | ||
const progressBar = screen.getByRole('progressbar'); | ||
expect(progressBar).toHaveStyle({ width: '20%' }); | ||
}); | ||
|
||
test('updates percent when props change', () => { | ||
const { rerender } = render(<ProgressBar percent={20} />); | ||
rerender(<ProgressBar percent={30} />); | ||
const progressBar = screen.getByRole('progressbar'); | ||
expect(progressBar).toHaveStyle({ width: '30%' }); | ||
}); | ||
|
||
test('resets percent to 0 after reaching 100%', async () => { | ||
jest.useFakeTimers(); | ||
render(<ProgressBar percent={0} />); | ||
|
||
act(() => { | ||
jest.advanceTimersByTime(250000); // yes it has to be at least 250000ms, any less it will not hit 100% | ||
}); | ||
|
||
const progressBar = await screen.getByRole('progressbar'); | ||
expect(progressBar).toHaveStyle({ width: '100%' }); | ||
|
||
jest.useRealTimers(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export {default} from './ProgressBar'; |
1 change: 0 additions & 1 deletion
1
src/elements/common/progress-bar/index.js → src/elements/common/progress-bar/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1 @@ | ||
// @flow | ||
export { default } from './ProgressBar'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.